GuruBlog

Simple Isometric graphics with processing

Posted by Nikolaus Gradwohl Wed, 20 May 2009 03:08:00 GMT

I found a very simple way to generate isometric graphics in processing.

click here to see it as an applet (and get the source)

the trick is to rotate the image by 45 deg and scale it with scale(1, 0.5).

this way the graphic can be draw as always, only the z coordinate has to be substracted from the x and the y coordinate

...
void draw() {
  pushMatrix();
  translate( width/2, height/2 );
  scale( 1, 0.5 );
  rotate( radians( 45 ) );
  translate( -width/2, -height/2 );
  background(255);

  line( x1 - z1, y1 - z1, x2 - z2, y2 - z2 );   

  popMatrix();
}
...