How did he do it?

Simple. This is a combination of RRD Tool, jpGraph and PHP. RRD provides the database with measurements, jpGraph provides heat map graphs and PHP glues it all together. (colors are taken from exploded creepers from minecraft).

What am i seeing anyway?

It looks cool, but you’re looking at a heat map of the open/closed state of our hackerspace. For the last year, we’ve measured if the hackerspace was opened or closed. We measured about every five minutes.

The average of the past three months is displayed in a granularity of hours. This roughly means 2000 measures for a single graph. It renders nearly instant.

Step by step

Export measured values

rrdtool xport --start $e-$timespan --end $e --step 3600 --maxrows 4242 --enumds \
        DEF:st=../state.rrd:state:AVERAGE \
        CDEF:open=st,1,0,IF \
        XPORT:open:\"isopen\" \

Spread the measured values by hours

foreach($measurements["data"]["row"] as $row) {
       switch ($row["t"] % 86400) {
           case 82800: $hourOpen[0] += $row["v0"]; break;
           case 0: $hourOpen[1] += $row["v0"]; break;

Shift is six hours, so primetime is clearly visible

for($i=0;$i<$steps;$i++){
       $element = array_shift($array);
       $array[] = $element;
   }

Feed the data to jpgraph

$mp->colormap->SetMap($colormap);
unset($colormap);
$mp->SetCenterPos(0.5,0.47);
$mp->SetSize(0.75, 0.7);

Other uses:

The same type of graph can also be used to visualize the temperature in a day. To see how the temperature rises over time. I don’t think there will be a rewrite though, definition of done.

Note: the graph is supposed to give an estimate if Hack42 is open or not.

See also

• More examples, in production: https://hack42.nl/spacestate/open/
• More background on my Hack42 project page: https://hack42.nl/wiki/Gebruiker:Stitch/OpenHeatmap

• JPGraph homepage: http://jpgraph.net/
• RRDTool homepage: http://oss.oetiker.ch/rrdtool/
• PHP homepage: http://php.net/

The flyer i got was photograph, so i decided to remake it to a high-res print-ready version. What shame when such a valuable document could not be reprinted (and burned) anymore.

Above: the original.	Above: the reconstruction [small] [medium] [huge]

Download the A4 sized, 300dpi version here: [huge] [medium] [small]

Enjoy!

Did you know there are tons of Christian metal groups? Yes there are, and not even half bad.

Update: welcome to 2012: NOOOOOOOOOO the ‘Naar House’ foundation still exists. It is now targeting all popular music. In their seemingly-happy-colorful-educational material, link, you can read that pop music annihilates all you hold dear. It’s stuff nobody cares about. Let it stay that way. ALL GLORY TO THE HYPNOTOAD.

Check out more Laser Portraits!

Stitch has one! Do you?

Source material:

Check out the ROAR, and make sure you’re listening to it in high volume, preferably in a residential area.

The file: roarradio.mp3

Also, did i mention you can book us for live performances? check it out here.

One of the arguments, that a phonebook can lead to determination of race or religion is actually true. The rest is just a bunch of fake stuff put together to look true and legit.

It’s in dutch, and you can check it out here.

Long story

Last week i was experimenting with some audio effects. Amazing how the volume can be cranked up to reach absolute insanity without clipping. The rage.wav file is in fact recorded whispering Then i added the most ridiculous audio effects to make it sound … ridiculous.

• Before: RAGE whisper input.wav
• After: RAGE.wav

The effect chain consists of the following ingredients:

• Multiband Dynamics (no background noise, more highs)
• Warmth
• Vocoder (modulator effect)
• Compression
• Saturator (Hard Curve FTW)
• Limiter (to “avoid” clipping)

With the intelligence in most browsers, it looks even better than expected. For the nerds: below the picture i’ll explain what i did. Also check the project page on the 42 wiki.

HTML, CSS, CSS Fonts

The pictures are normal pictures inside a <div>. The div has a padding of 10 pixels. Because of the description, the text under the picture adds to the polaroid effect.

The divs have a 1 pixel border, and use CSS3.0 (and browser specific) shadow and rotation.

The font is called GoodDog. It’s supposed to look like handwriting done with a permanent marker. The font face declaration uses external fonts that are located on the web server. The link is always black, even if you’ve visited the page. The CSS was injected into mediawiki, so it works in all skins.

Check out the information on the project page on the 42 wiki, source is on this page.

Aly us – Follow me

Time defining house classic. Slow and smoothly moving to a place where we can all be free. Includes an instrumental, a dub version but of course the original track with an extended edit.

Ruffneck ft. Yavahn – Everybody be Somebody

This cd features 9 mixes (73 minutes) of this house track that’s been produced by Dwayne “Spen” Richardson, Derek A. Jenkings & Steven B. Wilson for Backroom Productions & Groundlevel Entertainment. Samples where taken of the AWESOME Yello – Bostich. Most of the action is on track 8: the full 8 minutes of the tune. The names of the masters at work also appear on this CD but most importantly: the live triangle has been performed by Starvin’ T.

SL2 – On a Ragga tip

Speeds up the sound with breakbeats from London. From XL recordings came this track by Slipmat and Lime (SL2). It’s fast, has the classic rasta influence and is a golden oldie. The CD features four tracks including the five minutes original mix and two other breakbeat tracks using pretty much the same breakbeat. Track 3 is pretty OK, but still a b-side. Extended version it is.

Lidell Townsell – Nu Nu

Piano house classic that can withstand the test of time for the larger part. “She looked so fine, i just had to speak”. Parodied by the 704 boys and the same organ was used by Crystal waters. Including an acapella/dub version for mashing and mixing. Also check out the So Fine Mix The password is play.

Quasar –  Last Train to Paradise

Something from the Turn up the Bass era. The last train to paradise. Bought this one to hear if there where some great remixes that would have less piano and more funk. There is some more acid, an acapella and some percussion. The fun starts at track 4: the 303 edit.

Unfortunately an empty sleeve of 400 hz – i’ve got the music in me

KK Travels – Pippi Langhouse

One of the all time maximum facepalm house classics for kids. It’s based on the Swedish child series Pippi Langkous (Pippi Långstrump). There was a version dubbed in Dutch. That one was sampled, sequenced, mashed and filtered into a house production that is nearly bearable to listen to. The B sides of this record really raises some eyebrows And that’s why this is great.

Next to the cd’s i found a brada laptop lap stand to place your laptop on your lap. In real life it would look something like this (if i where tanned and wearing white clothes):

Shoop da whooooopp

In a few hours i selected some photos and created about 10 images with the size 950*200. Here’s a few:

With special tooling, that comes with the commercial version of the plugin, the slideshow was created. The tooling allows to choose what images to use, what titles and subtitles, the delay, styles and some other minor things. In the end it delivers a .zip file that can be uploaded to the site.

Now to actually make a header… things get creative and innovative.

Mad scientist at work

With some careful engineering and code manipulation tricks i actually got the header where i wanted it to be: the header. It required edits in the style.css and header.php files, as well as a dummy page for some workarounds.

One problem occurred: the site header is 200 pixels high, while wordpress insisted it should be 170 pixels. Somewhere, buried deep down in wordpress this was specified. I’ve looked everywhere but nowhere to find why or when 170 pixels high was defined.

Time to move in the heavy artillery.

If you know something on coding, you might want to get a bucket or two to vomit. Basically i change any value of “170″ with “200″ on a large portion of the site. This is the wrong way to do things.

<?php
ob_start();
wp_head();
$fuckingimageheighthack = ob_get_clean();
$fuckingimageheighthack = str_replace("170", "200", $fuckingimageheighthack);
print $fuckingimageheighthack;
?>

It worked like a charm.

Result?

Who cares about all the grunt work. We all want to see nice images and flashy headers. That’s what counts and that’s what we’ve accomplished with all this work. It looks awesome and professional. And that’s just the way i like things.

PS this website will soon also feature these great professional headers with images of my life.