Shapevent

Gesture Capture Pics

zevan — Fri, 16 Apr 2010 18:23:26 +0000

I uploaded some pictures of my Gesture Capture performance to flickr:

Performance Pics

Imperfect Boxes

zevan — Wed, 07 Apr 2010 19:39:22 +0000

Today I was thinking about a simple way to draw imperfect boxes and this is what I came up with:

This technique is pretty straight forward and just uses lerp and a random offset:

PLAIN TEXT

Actionscript:

graphics.lineStyle(0,0x000000);
rect(this.graphics, new Rectangle(100,100,200,200));
rect(this.graphics, new Rectangle(320, 100, 50, 200), 3);
rect(this.graphics, new Rectangle(390, 100, 50, 200));
rect(this.graphics, new Rectangle(460, 100, 100, 100));
rect(this.graphics, new Rectangle(460, 210, 100, 120));
var g0:Shape = makeGrid();
g0.x = 200;
g0.y = 120;
var g1:Shape = makeGrid(15, 9, 31);
g1.x = 100;
g1.y = 320;
function makeGrid(num:int = 9, cols:Number=3, size:Number=30):Shape{
var grid:Shape = new Shape();
grid.graphics.lineStyle(0,0x000000);
addChild(grid);
var smallSize:Number = size - 10;
for (var i:int = 0; i){
var xp:Number = (i % cols) * size;
var yp:Number = int(i / cols) * size;
rect(grid.graphics, new Rectangle(xp,yp,smallSize,smallSize), 3);
}
return grid;
}
function rect(g:Graphics, rect:Rectangle, res:Number = 8):void{
var a:Point = new Point(rect.left, rect.top);
var b:Point = new Point(rect.right, rect.top);
var c:Point = new Point(rect.right, rect.bottom);
var d:Point = new Point(rect.left, rect.bottom);
var diff:Number = ( b.x - a.x);
var dab:Number = int(diff/res);
var xp:Number, yp:Number;
var action:String;
trace(dab);
for (var i:int = 0; i){
action = "lineTo";
if (i == 0){
xp = a.x;
yp = a.y;
action = "moveTo"
}
xp = a.x + (diff) * (i/dab);
yp = a.y + Math.random() * 5 - 2;
g[action](xp, yp);
}
diff = c.y - b.y;
dab = int(diff / res);
for (i = 0; i){
xp = b.x + Math.random() * 5 - 2;
yp = b.y + (diff) * (i/dab);
g.lineTo(xp, yp);
}
diff = d.x - c.x;
dab = Math.abs(int(diff / res));
for (i = 0; i){
xp = c.x + (diff) * (i/dab);
yp = c.y + Math.random() * 5 - 2;
g.lineTo(xp, yp);
}
diff = a.y - d.y;
dab = Math.abs(int(diff / res));
for (i = 0; i){
xp = d.x + Math.random() * 5 - 2;
yp = d.y + (diff) * (i/dab);
g.lineTo(xp, yp);
}
}

Synesthesia Sketch

zevan — Thu, 01 Apr 2010 15:09:31 +0000

I'm slowly working on some software related to synesthesia. This is a very simple but interesting sketch that I created. Clicking once will set the numbers to black, clicking again will associate random colors with the numbers 0-9:

Click numbers to toggle random colors

This is the first in a series of sketches I'll be doing related to synesthesia.

Gesture Capture Stills

zevan — Wed, 31 Mar 2010 18:53:00 +0000

I'm working on getting Gesture Capture exhibited somewhere so I took a few stills of it in action. Additionally I created a mini-site to describe the project.

Mini-Site
Pics

Bicuspid Variation Tooth

zevan — Fri, 26 Mar 2010 16:05:27 +0000

Last summer I spent some time in search of a nice equation for a tooth. This one worked out well in the end.

On Way Animated

zevan — Thu, 25 Mar 2010 14:46:54 +0000

I decided to animate one of my writings today.

Have a look here.

Processsing Snippet

zevan — Wed, 17 Mar 2010 15:05:57 +0000

PLAIN TEXT

JAVA:

import processing.pdf.*;
int pointNum = 14;
Point[] points = new Point[pointNum];
void setup(){
size(500,500, JAVA2D);
beginRecord(PDF, "shape.pdf");
translate(width / 2, height / 2);
background(255);
strokeWeight(0.5);
smooth();
noFill();
addPoints();
connectPoints();
endRecord();
}
void addPoints(){
float step = TWO_PI / pointNum;
float theta = step / 2;
float radius = 200;
for (int i = 0; i){
float x = radius * cos(theta);
float y = radius * sin(theta);
points[i] = new Point(x, y);
theta += step;
}
}
void connectPoints(){
for (int i = 0; i){
Point a = points[i];
for (int j = 0; j){
Point b = points[j];
if (a != b){
//if (int(a.x) == int(b.x) || int(a.y) == int(b.y)){
line(a.x, a.y, b.x, b.y);
// }
}
}
}
}
class Point{
float x;
float y;
Point(float x, float y){
this.x = x;
this.y = y;
// ellipse(x,y, 10, 10);
}
}

Connect the dots, try changing pointNum.

Actually have a good deal more to say about this snippet... maybe in the next day or two.

Znode

zevan — Tue, 16 Mar 2010 00:42:19 +0000

I'm working on a node based editor for brainstorming. I often find myself drawing psuedo-UML on whiteboards and inside the flash IDE. I like UML but it's often more than i need so I've slowly been developing Znode... which will allow the creation of super simple diagrams like these:

I hope to have Znode finished and open sourced in a week or two. The code is all pretty simple. Here is a short feature list:

Add nodes with text
Resize nodes
Connect nodes to other nodes
Zoom in and out
Pan
Save and Load Node structures (XML format)

And for phase two of the project:
Undo and Redo functionality

Programming Like a Portrait Painter

zevan — Sun, 14 Mar 2010 22:14:31 +0000

Beginner programmers are attached to their code. REALLY attached. After having been programming for around 10 years I realize that the way for me to write the best software is to work more like a painter. A painter might do 10 or 20 sketches before actually moving on and painting a portrait. The painter may review some of these sketches and take elements from them - maybe in one study, the chin was more accurate, maybe in another study the ears came out perfect. The painter will use these sketches as a reference as he works on the final portrait.

I do the same thing with programming. If I want to program something complex, I'll do anywhere from 3 to 6 studies/sketches. These code sketches are usually messy quickly written code. The idea is to get my head wrapped around the problem. It isn't until I feel I have a good grasp of the problem that I go ahead and try and tackle it. Even then, when I hit a wall I'll often go back to sketching mode.

The main requirement for this approach is time. You need to make sure your client understands right off the bat that programming software isn't a speedy process.

This technique is nothing new, there are variations and fancier names for this kind of thing... I just thought since I find myself telling this to my students all the time, I'd write a quick post about it.

Gesture Capture

zevan — Fri, 12 Mar 2010 04:59:10 +0000

Gesture Capture is a mini-drawing program that allows the user to draw single gestures (shapes, letters etc...) - the program then randomly scales, rotates, tints and translates these gestures repeatedly on the canvas. The user may continue to draw as it does this, the more gesture drawn, the more the program will have to randomly choose from.

Try Gesture Capture:

I created Gesture Capture as an entry for actionsnippet and something made me think of it today. I was playing with it for awhile and decided it was worth mentioning here.

The original post and code can be found here