Zachernuk

tnSuperman tanktn oParticles uExtrusion j3d sandy flExtrusion fuelyoursenses meshCam bufferSnake dMap2 dMap pv2 cursorFire opticks faceGame FPSnake pv preOpticks painty youtuber fractalFIngers 2dbals

April 9, 2012

Closing the interactivity loop and embracing artifacts

Filed under: application,html5,prototyping,Uncategorized — Tags: , , , , , , , , , — Brandel Zachernuk @ 12:23 pm

I made a thing that draws pixel-isometric objects in HTML5 canvas! Click to position and scale new cubes, and click on the palette on the right to change the colour new shapes are drawn. The code on the right is what generates the shapes – you can edit that directly too. To watch the cubes on their own, select ‘demo’ mode.   



Save as PNG

Clear Canvas

Cubes mode:
Demo
Editor

This has been a while in the making because I work at Resn now! I’ve have joined their team as ‘interactive experience developer’, which is going to be a great challenge and a lot of fun. This post was borne out of a love for pixel isometric as practised by masters like quickhoney and eBoy. I’ve tinkered with pixel isometric for a long time and have always enjoyed the results, but find the actual process of making iso images to be a lot more tedious than it needs to be. Bret Victor makes the point that this tedium actually stifles vast amounts of experimentation, and that inspired to make a tool that can help with part of the process – the result is a lot of fun to play with.

In making the isocubes engine I discovered that it’s actually really hard to make jagged edges an pixellated images using canvas! It makes sense – because most people want to draw smooth lines most of the time, it’s sensible to make that easy. When you need those raw pixels to stay jagged, though, you have to re-create a lot of the functionality of a drawing canvas from scratch. For that reason, isocubes is a lot slower than could be achieved using straight polygon-drawing in Javascript. It’s another case where the artifacts of an older mode of production have to be re-created intentionally, like record scratches in an MP3 or the faded colours in an instagram photo.

What can you make with it? I’d love to see! Tag your images with #isocube and we can get a collection going!

2 Comments

  1. Try these for the guy:

    var location = [251.5,0,63.5];
    var scale = [21.5,16, 10.5];
    var color = [169, 81,0 ];
    cube(location,scale,color);

    var location = [251.5,-90,63.5];
    var scale = [10.5,88, 10.5];
    var color = [169, 255, 131 ];
    cube(location,scale,color);

    var location = [251.5,0,83.5];
    var scale = [21.5,16, 10.5];
    var color = [169, 81,0 ];
    cube(location,scale,color);

    var location = [251.5,-90,83.5];
    var scale = [10.5,88, 10.5];
    var color = [169, 255, 131 ];
    cube(location,scale,color);

    var location = [251.5,-115,47.5];
    var scale = [10.5,13, 10.5];
    var color = [ 255, 211,140 ];
    cube(location,scale,color);

    var location = [251.5,-115,63.5];
    var scale = [10.5,23, 30.5];
    var color = [169, 255, 131 ];
    cube(location,scale,color);

    //hand
    var location = [251.5,-115,97.5];
    var scale = [10.5,13, 10.5];
    var color = [ 255, 211,140 ];
    cube(location,scale,color);

    var location = [251.5,-210,52.5];
    var scale = [10.5,93, 10.5];
    var color = [69, 255, 131 ];
    cube(location,scale,color);

    var location = [251.5,-210,63.5];
    var scale = [10.5,93, 30.5];
    var color = [069, 255, 131 ];
    cube(location,scale,color);

    var location = [251.5,-210,94.5];
    var scale = [10.5,93, 10.5];
    var color = [069, 255, 131 ];
    cube(location,scale,color);

    var location = [251.5,-225,74.5];
    var scale = [10.5,13, 10.5];
    var color = [69, 255, 131 ];
    cube(location,scale,color);

    var location = [118.5,-24,-58.5];
    var scale = [10.5,24, 16.5];
    var color = [155, 09, 6 ];
    cube(location,scale,color);

    var location = [251.5,-285,74.5];
    var scale = [15.5,53, 15.5];
    var color = [ 255, 211,140 ];
    cube(location,scale,color);

    var location = [132,-20,-32];
    var scale = [2.25,20, 3.75];
    cube(location,scale,color);

    var location = [145,-20,-42];
    var scale = [2.25,20, 3.75];
    cube(location,scale,color);

    var location = [118.5,-24,-58.5];
    var scale = [18.5,4, 16.5];
    var color = [155, 09, 6 ];
    cube(location,scale,color);

    var location = [144.25,-28,-48.75];
    var scale = [1.5,3, 6.5];
    var color = [55, 09, 06 ];
    cube(location,scale,color);

    var location = [144.25,-28,-38.75];
    var scale = [1.5,3, 6.5];
    var color = [55, 09, 06 ];
    cube(location,scale,color);

    Comment by Brandel Zachernuk — April 9, 2012 @ 3:57 pm

  2. that’s obscene! HTML5?!? very nice. another masterpiece, sir :)

    Comment by daniel — April 10, 2012 @ 11:00 am

RSS feed for comments on this post. TrackBack URL

Sorry, the comment form is closed at this time.

Powered by WordPress