Archive for the 'Math' Category

Countdown Clock // ver DUH!

Monday, April 14th, 2008

_20080414_desktopClock_e
run the sketch—view the code

Download app: OSX, Windows

How do you use it?
The UP and DOWN arrows increase and decrease the countdown time in 5-minute increments. The TAB key restarts the countdown at the current time setting.

What is it?
A visual countdown timer. Time = area. You choose how much time you want to allot for completing a certain task and then leave this baby running in the corner of your screen. The red wedges show you the passing of each second and the number tells you how many minutes are left. The yellow circle gives a visual representation of the quantity of time remaining. No matter how many minutes you start with, the yellow circle an the red circle start out the same size. This provides a point of comparison as the yellow circle shrinks.
(see the digiLog Clock post for more of my musings on the subject of time)
Why is it cool?
On the last version I was changing the diameter of the yellow circle every second. My intention was for area to be equivalent to time. It occurred to me (while I was waiting in a doctor’s office, staring at a clock) that calculating the diameter resulted in a non-linear relationship between the passing of each second and the area of the circle—time and area were not equivalent. So I changed the math and now the area of the yellow circle shrinks in direct proportion to the time (the diameter is now the non-linear one).

Corkscrew

Tuesday, March 4th, 2008

Corkscrew
run the sketch—view the code

How do you use it?
Move the mouse up and down to compress or stretch the helix.
“w” and “x” rotate about the X-axis.
“a” and “d” rotate about the Y-axis.
“s” toggles between cylidrical and conic helix.

What is it?
I was really fascinated by the corkscrew line that I used to initialize the arrays in the 3deeLine project, so I decided to isolate it and play with it some more.

3deeLine // ver B

Monday, March 3rd, 2008

3deeLineB
run the sketch—view the code

How do you use it?
Click-and-drag to scribble a drawing. Then move the mouse around to rotate it in 3-D space.
z/a = zoom in/out
x = toggle the coordinate axes
d = toggle the (not quite right) depth cueing
r = resets zoom factor and re-initializes the arrays with that cool spiral

What is it?
The final (for now) version of Saturday’s post.

Why is it cool?
(I’ll update this with all the links soon.)
Graffiti Research Labs were in town this past week as part of the Spark Festival at the University of Minnesota. They demonstrated their L.A.S.E.R. Tag system. This, of course, reminded me of fi5e’s Graffiti Analysis project from a few years back, which made me think, “Hey, I want to draw in 3-D space.” So here it is.

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.

Complement.step3

Sunday, December 16th, 2007

Complement.step3
run the sketch—view the code—download

How do you use it?
Move the mouse up and down to change the Hue.
UP and DOWN arrows change the Brightness.
LEFT and RIGHT arrows change the Saturation.
TAB toggles the wheel on and off.

What is it?
My third step in developing a Complementary Color tool. Built on Complement.step2 and Complement.step1.

Why is it cool?
More controls. Mixes the complementary colors showing their neutral product. Includes a cool rounding function for displaying floats with a specified number of decimal places.

Complement.step2

Saturday, December 15th, 2007

Complement.step2
run the sketch—view the code—download

How do you use it?
Move the mouse up and down from the top to the bottom if the sketch window.

What is it?
My second step in the Complementary Color tool.

Why is it cool?
It calculates the complement of the current color (which is itself figured from mouseY).