Invisible Bread

Did you miss the April foolings yesterday?  Well dang.

Luckily, you can still check it out!  Click this text to activate it and head on over to a comic page.  To turn it off, either restart your browser or click here to deactivate it and refresh.  It will inject ads into almost all the comics on the site, since I know everyone loves it when ads put themselves in the middle of comic strips! (sarcasm)

If you want to read about how I did it, please read on.  I’m a programmer and web developer and stuff, so it will get slightly technical, but could still be an interesting read for the curious.

So the goal was to seamlessly inject ads into the comics, but to do it programmatically. To have to go through every single comic and make an alternate version with a fake ad would have been a ton of work.

Write Code To Analyze the Comic Image

I have a comic image, but I needed to know where the cells are in that image. Using PHP with GD stuff, I wrote the code that could analyze any of my comics and tell me what the x,y coordinates of all the cells were. The code I wrote isn’t (currently) able to handle special cases, like when a comic has content outside of the normal cells ( e.g. this comic ). Luckily, this only left a handful of comics that wouldn’t have fake ads injected into them, so that was totally cool with me. To add in that extra functionality would have taken more time and I wanted to make sure to have this up for you all for April Fools Day.

With this code I wrote, I now know where all the cells of a comic are in a comic’s image, so adding an additional cell for an ad is pretty easy. Just cram it into the middle-ish of the array of cells. The rendering rules for the cells is now gonna take care of the rest of the magic.

Render It

In the first iteration for rendering, I slapped all the cells onto the page and floated them to the left, but this resulted in some really strange looking cell layouts. For example, any 6 cell comic became a 7 cell comic and had this extra cell hanging out alone and left-justified on the comic’s new third row. It looked awkward, so I had to fix this up since this wouldn’t be how I would draw a 7 cell comic. The fix was to write up some rendering rules for all the cells. The main rule was to try and avoid leaving one cell on the bottom row. A 3-3-1 (cells per row) layout would look much weirder than a 3-2-2 layout. And whenever there weren’t enough cells to fill the row, there are some CSS added to the elements to make it centered and not left-justified (due to the float).

To render a single cell of a comic is pretty easy when you know the cell’s coordinates in the image. It essentially becomes a sprite image and all it needs is some CSS to render only a certain part of it. Do this for all the cells and that’s it! This means that if a comic originally had 6 cells, the ad-injected version will have the original comic image on the page 6 times, but have special CSS for each cell so that it will render and look totally normal.

So that’s how I did it! Had to write a little bit of magic code, but didn’t have to redraw or re-layout any comics at all, so that was pretty awesome.