Archive for February, 2008

dist(ance);

Friday, February 29th, 2008

_20080229_distanceB.png
run the sketch—view the code

How do you use it?
Click and drag.

What is it?
A drawing program. The circle diameter is based on the speed of the mouse. It turned into an ironic programming lesson; I spent a bunch of time working out the algebra and logic for determining the distance between two points, then discovered—by chance—that there was already a function that did the same thing. See below…

Why is it cool?
It turns out that all of this…
if(pmouseY>mouseY){
if(pmouseX>mouseX){
dX=pmouseX-mouseX;
dY=pmouseY-mouseY;
}
if(mouseX>pmouseX){
dX=mouseX-pmouseX;
dY=pmouseY-mouseY;
}
}
if(mouseY>pmouseY){
if(pmouseX>mouseX){
dX=pmouseX-mouseX;
dY=mouseY-pmouseY;
}
if(mouseX>pmouseX){
dX=mouseX-pmouseX;
dY=mouseY-pmouseY;
}
}
distance=sqrt(sq(dX)+sq(dY));

Can be done with just this…
distance=dist(pmouseX, pmouseY, mouseX, mouseY);

Image Array Animation // 2

Wednesday, February 6th, 2008

_20080205_anim
run the sketch—view the code

How do you use it?
Move the mouse left and right.

What is it?
Navigating through an array with the mouse position.

Why is it cool?
This time it runs through the array twice.

Image Array Animation

Tuesday, February 5th, 2008

_20080205_anim
run the sketch—view the code

How do you use it?
Move the mouse left and right.

What is it?
Navigating through an array with the mouse position.

RGB Channels // step 6

Sunday, February 3rd, 2008

RGB Channels // part f
run the sketch — view the code

How do you use it?
You don’t use it. It doesn’t work.

What is it?
An attempt to update the pixel array rather that re-drawing the image with one-pixel rectangles (as it has been done in previous versions). This should be much more efficient.

Why is it cool?
It is bit shifting the pixels rather than using the red(), green() and blue() functions. See the Processing reference for an explanation of this as it relates to image manipulation.

RGB Channels // step 5

Saturday, February 2nd, 2008

RGB Channels // part e
run the sketch — view the code

How do you use it?
Click on the applet to giveit focus. Type R, G or B to display the corresponding color channel.

What is it?
It is loading a full-color RGB image and displaying only the red, green or blue value of each pixel. It’s slow and clunky but it’s working. Note the color bar on the left. Whichever rectangle is white indicates the channel you are viewing.

RGB Channels // step 4

Friday, February 1st, 2008

RGB Channels // part d
run the sketch — view the code

How do you use it?
Just look at it, and learn from the code.

What is it?
It’s not interactive yet, but it is loading a full-color RGB image and displaying only the red value of each pixel.