grow up

Photo and Photoshop, 2007

Just posted a couple videos to Flickr. I've been playing with using Frame Buffer Objects in GL as a way to draw dynamically to a surface. I'm pretty happy with the result. Drawing to a 1024 x 1024 texture is very fast. Go GL!

A few weeks ago Robert Hodgin of flight404 posed a question to the OooShiny group. You've probably already seen the LASER Tag project by Graffiti Research Lab.

So if you want to do something similar in Processing, the first thing you need to do is transform the point on your surface (building, wall, etc) to a point on your texture. After a lot of valiant help from Keith, the math was still confusing me. Then I stumbled on the PerspectiveTransform class. Given 4 points unTransformQuad() will map any value inside to a point on a unit (0 to 1) square. Anyway, I hope this helps someone =)

// Try 2 Tri 2 Try = TryanGLE
 
import javax.media.jai.PerspectiveTransform;
import java.awt.geom.Point2D;
 
Vert vtx[] = new Vert[4];
Vert pnt, tpnt;
 
void setup()
{
  size(500,500, P3D);
  ellipseMode(CENTER);
}
 
void draw()
{
  background(0);
  stroke(255,255,0);
  noFill();
 
  beginShape();
  for(int i=0; i<vtx.length; i++)
    if(vtx[i]!=null)
      vertex(vtx[i].x, vtx[i].y, vtx[i].z);
  endShape(CLOSE);
 
  if(pnt!=null && clicks==4) {
    stroke(0,0,255);
    line(pnt.x-5,pnt.y, pnt.x+5,pnt.y);
    line(pnt.x,pnt.y-5, pnt.x,pnt.y+5);
 
    // here is the real calculation
    tpnt = unTransformQuad(pnt, vtx[0], vtx[1], vtx[2], vtx[3]);
 
    stroke(0,128,255);
    line(tpnt.x-5,tpnt.y, tpnt.x+5,tpnt.y);
    line(tpnt.x,tpnt.y-5, tpnt.x,tpnt.y+5);
  }
}
 
int clicks = 0;
void mousePressed()
{
  if(clicks < 4) {
    vtx[clicks++] = new Vert(mouseX,mouseY,0);
  }
  else {
    pnt = new Vert(mouseX,mouseY,0);
  }
}
void mouseDragged()
{
  if(clicks==4) pnt = new Vert(mouseX,mouseY,0);
}
void keyPressed()
{
  clicks = 0;
  vtx = new Vert[4];
}
 
Vert unTransformQuad(Vert pnt, Vert a, Vert b, Vert c, Vert d)
{
  PerspectiveTransform persp = PerspectiveTransform.getQuadToSquare(
    a.x, a.y,
    b.x, b.y,
    c.x, c.y,
    d.x, d.y
  );
 
  Point2D p2d = persp.transform(new Point2D.Double(pnt.x,pnt.y), null);
 
  return new Vert((float)p2d.getX() * width, (float)p2d.getY() * height, 0);
}
 
class Vert
{
  float x, y, z;
 
  Vert(float _x, float _y, float _z)
  {
    x = _x; y = _y; z = _z;
  }
}
 
class Vector3
{
  float x, y, z;
 
  Vector3(float _x, float _y, float _z)
  {
    x = _x; y = _y; z = _z;
  }
 
  float mag()
  {
    return sqrt(x*x + y*y + z*z);
  }
}

Last night while browsing around looking for a better implementation of Xiaolin Wu's line drawing algorithm, I stumbled on (err.. explicitly searched for) a .pdf copy of the 1994 book Graphics Gems II. I found one here (direct link below). I think this is the wrong book for the line drawing algorithm but there's a ton of other useful stuff inside.

RapidShare .pdf

   ///\    ///\
  //  /\  //  /\
 //    /\//    /\
//      /\      /\
//   x      x   //
 //     ..     //
  //   ____   //     xx
   //        //     x..x
    //      //     x.  .x
   //\\    //\\    x.  .x
  //  \\  //  \\      .x
 //    \\//    \\    .x
//\     \/     /\\   .x
       //\\
      //  \\         xx
   ///\    /\\\      xx

       //\\\          _
     //.\\.\\\       | |
   //\\\\\\\\\\\     | |
   /////////////   _\| |/
    //\\\////    /\\\/\///
       /////      \\\\\///
    ////\\\\\\\    ||\||/
   //////\\\/\\\   ||\||/
  //\/////\/\\\\\  ||\||/
  //\\\//\\//\\\\\/||//
  //\\////\\//\\\\////
  //\///\\\\///\\\///
  //\\///\\///\\
  //\\\///\\//\\
  //\\\\//\////\
    //\\////\\\\
    ///\\  ///\\
    //\\\  //\\\
    ///\\  ///\\
    ///\\  //\\\
  ////\\/  /\/\\\\

copy and paste

I should have been playing Mario Galaxy last night, but I made this 2d sand thing in actionscript instead. This is the most basic of basic sand rulesets. Only, this time it's in Flash.

Super Simple Sand

A few months ago I worked on a visualization for Twitter called Blocks. In the last few days I made this logo as a finishing touch but it was taken out of the final app.

Twitter Blocks Logo (alt)