I was chatting with MickRip on teh IRC trying to get ideas on how to find competent fellow php programmers so they could criticize my evolving framework in a month or so. He said he googled for all his answers -- so do I. Next step was looking into some forums. And wouldn't you know it? The first thread of the first forum I found had me so sidetracked that I wouldn't think of it again for several hours.

BEHOLD!! Homer Simpson drawn using only CSS and some font character set!! --


If you go to the page you can click a button to watch the shapes come to life one at a time. And according to one of the forum members it doesn't render so well on linux OS ubuntu --


This kind of got my brain whirring.

Quote from dude's site (translated to english) --
"After doing Homer CSS I was challenged to do a JPG to CSS image conversion tool. It is a proof of concept really. It takes a black and white jpeg and returns an html copy of the image created with text and CSS, just like homer was. Enjoy!"

Here it is in action --


Oh? I can have picture go many dots for play too? And then it hit me -- I want to scatter them dots and make them come together all animated like in teh browsers! =D

I don't mind a cryptic interface. If the file has to be named "image.jpg" in the same folder to work then whatever. But it kept crashing with my own image. I opened his example of Che Guerra (you know his family is trying to collect royalties?) and my image in Paint Shop Pro, then in Photoshop CS3 and then finally in GIMP. Well it was gimp that finally told me that the original image was a JPEG1.0 and my image was a JPEG7.0 -- wtf? I've never even heard of different JPEG versions before! =X And as far as I could figure out not one of these applications were capable of saving a JPEG1.0 lool.

My next step had me finding a little app called Batch PSD to JPG. A step less cryptic, it's auto-naming convention was rather hideous. So I opened my image up in Photoshop once again and saved a .psd, converted and viola! I had one ugly ass html file to play with now.

First off, all spacing is based in 'em' rather than pixels. 2nd, everything is put in a div positioned up and to the left from the top-left corner using the div margin while all the dots are position with padding. 3rd, this html is just plain-ole div crazy!

So I hopped off a php script to parse, copy and rebuild the html so every dot had a unique id tag --

<?php

function stripmargin(&$str) {
  return str_replace('<div style="margin-top: -420px; margin-left: -180px;">','',$str);
}

function em2px(&$str)  {
  if ($a=strpos($str,'em;'))  {
    $b = substr($str,$a-4,4);
    $str = substr_replace($str,round($b*100).'px',$a-4,6);
    print $b.' ';
    $str = em2px($str);
  }
  return $str;
}

function cutdivs(&$str) {
  if (strstr($str,'&bull;</div></div>'))
    $str = str_replace('&bull;</div></div>','&bull;</div>',$str);
  if ($a=strpos($str,'"><div style="font-size:'))  {
    $str = substr_replace($str,' ',$a,14);
    $str = cutdivs($str);
  }
  return $str;
}

function adjustpadding(&$str) {
  if ($a=strpos($str, 'position:absolute;padding-left:'))  {
    $l = str_pad(substr($str,$a+31,3)-180,3,' ',STR_PAD_LEFT);
    $t = str_pad(substr($str,$a+49,3)-420,3,' ',STR_PAD_LEFT);;
    $str = substr_replace($str,$l,$a+31,3);
    $str = substr_replace($str,$t,$a+49,3);
    $str = substr_replace($str,' ',$a+18,0);
    print $l.' '.$t.' ';
    $str = adjustpadding($str);
  }
  return $str;
}

function legible(&$str) {
  return str_replace('><div',">\n<div",$str);
}

function id(&$str)  {
  static $c = 0;
  if ($a=strpos($str, 'px;">&bull;')) {
    $str = substr_replace($str,' id="dot_no_'.$c.'"',$a+4,0);
    $c++;
    $str = id($str);
  }
  return $str;
}

$f = fopen('out.html','r');
$g = fopen('b-knox.html','w');
while (!feof($f))
  fwrite($g,id(legible(adjustpadding(stripmargin(cutdivs(em2px(fgets($f))))))));
fclose($f);
fclose($g);
?>

YAYS for recursively self-referencing functions! This was a fun exercise any ways.

Ok -- I got my dots in slightly more malleable state. And so now the animation. I've hardly fiddled with jQuery since I found out about it. Read a lot but haven't really done anything worth noting. I really don't know jack about Javascript but, boy-o-boy, did I learn the hard way from syntactical nightmares tonight!! =O

The only really gripey thing I had with jQuery was trying to do math on strings. When you ask it for the position of an object it returns with something like "122px" and so if you add, say, 24 to that you get "122px24". I felt like a spoiled brat -- with php you get an error message when your syntax is retarded but Javascript just kind of stares at you blankly. "I'm teh borked." it tells me with telepathy.

My ultimate challenge that took me forever was ::
1) randomizing the dot placement
2) getting the dots to gravitate towards their relative original position
3) recenter the relative original position according to window size
4) randomizing both dot color and z-index (how they overlap)
...and I could add a 5 now that I think of it to recenter when window is resized =x

After several hours of crash coursing teh syntax and a few tweaks to the html (including stripping the dots down from 350 count to only 256 yay 8bits) it looks like this when the dots are done moving from their random positions on screen ::



I invite you all to WATCH MY SILLY CSS JAVASCRIPT ANIMATION THAT LAGS A BIT so you can lag with me. AND ZOMG IT WYRX IN EVERY BROWSER EVEN IE6!!! =XXXX I TESTES IT ITZ TRUE!! =O=O=O=OOO

I was very inspired when I started this. Now I am exhausted but my brain is still laiejflaejfkliaelkeklakeslikaelkalefkalie!!!! =O

Total Runtime :: about 7 hours including this post
XP Earned :: confidence boost on trying new things