Archive for the 'Tools' Category

Touch-screen Mobile Timer

Thursday, August 16th, 2012

Countdown Timer screen shot
view the pageview the code

I am resurrecting Countdown Timer from, oh, about, 4 years ago! I have yet to find a simple timer app for iPhone that I like; so why not make one myself?

So, it’s not an iOS app (yet…), but to get it running on the mobile, quick-and-dirty-like, I used processing.js to throw it into and HTML5 <canvas>. I have also begun re-working the controls to be more touch-appropriate. For example, it no longer relies on keyboard input to adjust the time; now you increase and decrease the time in 5-minute increments by simply tapping (or clicking) in the top or bottom half of the page.

There are still a few kinks to work out and some maths to tweak, but I think its a pretty good proof-of-concept for ~20 minutes of work.

What’s Tim thinking?

Tuesday, December 2nd, 2008


run the sketch—view the code

How do you use it?
Move your mouse up and down.

What is it?
Just playing with an array of JPGs.

Why is it cool?
This began as a discussion about updating Facebook profile pictures. It may yet become a tool for automatically generating them…

Mars Altimetery Graph // ver B // Monday Banner

Monday, June 2nd, 2008

Mars Altimetery Graph ver B
run the sketch—view the code—download

How do you use it?
Primarily just watch and enjoy. A mouse click toggles the drawing of the green lines. (This looks best if you let it run for a while so I recommend downloading and running it in Processing locally.)

What is it?
This is a functioning version of Friday’s post. I thought it might help me figure out the MEGDR Viewer if I looked at the same data in a different way, so I enlisted the techniques from the Line Graph sketch. It now creates an overlapping area graph of Mars altimetry data*. I switched to continuous mode (i.e. using setup() and draw()), and had to load the data into a string instead of a byte array. I could only get the byte array to work if it was instantiated inside of draw(). Loading a 2MB file in each cycle of the draw loop made it unbearably slow.

*Citation:
Smith, D., G. Neumann, R. E. Arvidson, E. A. Guinness,
and S. Slavney, “Mars Global Surveyor Laser Altimeter Mission
Experiment Gridded Data Record”, NASA Planetary Data System,
MGS-M-MOLA-5-MEGDR-L3-V1.0, 2003.

Mars Altimetery Graph // ver A

Friday, May 30th, 2008

Code of Mars Altimetery Graph
download the sketch—view the code

What is it?
I thought it might help me figure out the MEGDR Viewer if I looked at the same data in a different way. This sketch is meant to render an area graph of Mars altimetry data. It is written to run in basic mode since it is meant to render one image and there is no interactivity. But… it doesn’t work. I either get a file not accessible error on the loadBytes line, or the drawing window simply never pops up. Maybe I’m being too impatient and I should let it run overnight. But even if that is the case, something must still be wrong with my code because this shouldn’t be that hard for the computer.

Line Graph Prototype // ver A

Tuesday, May 27th, 2008

Line Graph Prototype // ver A
run the sketch—view the code

How do you use it?
Move the mouse around and dissect the code.
What is it?
A tool for creating point or line graphs.

Banner Ad

Friday, April 18th, 2008

_20080417_bannerType.png
run the sketch—view the code

How do you use it?
Move the mouse left and right to spin the informational text.

What is it?
This is an interactive banner ad I created to promote a Processing workshop I am teaching for graphic design students. It uses nested for loops to make the grid and the random() function to keep the colors changing. Actually, I created a grid() function that takes values for X-position and width, so the two chunks of grid seen here are the result of two different calls to grid(). The what, where, and when info spins around in P3D space.

Why is it cool?
The aforementioned grid() is a good example of user-defined functions. Also, I just love playing with type in 3-D space.

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).