Archive for the 'Images' Category

Mars Global Surveyor: MEGDR Viewer // ver B

Monday, May 26th, 2008

My Mars topography mine Their Mars topography theirs
download the sketch folder—view the code

How do you use it?
You have to tinker directly with the code to make this do anything.
This one doesn’t run in continuous mode and it isn’t interactive so there is no link to run it in the browser. Also, it processes a 2MB data file so it would be ridiculously slow to download an run it as an applet.

What is it?
As I mentioned yesterday, I’m geeking-out about Mars right now. I was surfing around some NASA and JPL web sites looking for more digital elevation maps and found a lot of data from the Mars Orbiter Laser Altimeter. This is an instrument on the Mars Global Surveyor craft that mapped the Red Planet from 1999 to 2006. Unlike the false-color topographic map I used in yesterday’s sketch, these new files I found are NOT images. They are data files that need to be rendered into images with special visualization software. Unfortunately—or perhaps, fortunately—I couldn’t find an OS X version of any of these software packages. So I thought (encouraged by Ben Fry’s Visualizing Data book), “I bet I can write something in Processing that could view these files.” Well, it’s been a long night, I’m not sure exactly how it works, and it sure ain’t perfect, but I’ve got something. The sketch reads the altitude data from the .img files, parses that into the pixel array and displays the resulting image.

If you run this yourself, be prepared, the image size is 1440 x 720 pixels.

Why is it cool?
There are so many reasons… but one thing that really shocked me is that it’s only 9 lines of code.

Our new Indy Car team

Saturday, May 24th, 2008

Green Zebra Racing
run the sketch—view the code

How do you use it?
Move the mouse up and down to hit the gas!

What is it?
Just a fun little diversion because, hey, Indy is tomorrow!!! It’s for() loop generating some random colors underneath a PNG-24 with transparency. The car design was done for the imaginary world where my alter ego (as humble letterpress printer for Armato Design & Press) owns an Indy Car team, Green Zebra Racing.

Why is it Cool?
It turns out that A) I’m a geek, B) I’m a big racing fan, and C) you can download EPS templates of Indy Cars.

Dynamic Mask // ver C

Friday, May 23rd, 2008

_20080522_dynamicMask_c
run the sketch—view the code

How do you use it?
Move the mouse around to reposition the mask window. Click the mouse to switch the mask mode.

What is it?
The .mask method requires either (A) the image that will be masked and a grayscale image for the mask itself, or (B) the image that will be masked and an integer array containing the color values for the mask (this is essentially an image for the mask but it hangs out in the RAM instead of being read from a file). This sketch demonstrates how to make a dynamic mask with both techniques.

(A) Before the photo is displayed, a separate grayscale image is loaded into the program to be used as the mask. The colors in this image’s pixels[] array are then modified based on the position of the mouse. Finally, the modified grayscale image is applied to the background image with the .mask method. Because this happens in each cycle of the draw() loop, the mask functions interactively.

(B) maskArray is an array containing the same number of integers as there are pixels in the background image. All values in this array are either 0, or 255 (ints btwn 0 and 255 can also be used). Before the photo is displayed, the values in the array are modified based on the position of the mouse. The array is then applied to the image using the .mask method which interprets its values as 0=black=opaque and 255=white=transparent.

Dynamic Mask // ver B

Thursday, May 22nd, 2008

_20080522_dynamicMask_b
download—view the code

How do you use it?
Just move the mouse around. This doesn’t run in a browser because it requires disk access to write a file.

What is it?
Simulates a “spotlight” effect by masking an image with PImage’s mask method. The mask method requires two image files: the image that will be masked, and a grayscale image for the mask itself. This sketch demonstrates a way to make a dynamic mask… Before the photo is displayed, the mouse movements position a white circle on a black background. This is then saved as a TIF file that is immediately loaded back into the program as the mask. Because this happens in each cycle of the draw() loop the mask functions interactively.

The look of ambient light is the result of the “black” color in the alpha image being not-quite-black. It is therefor interpreted as very slightly transparent rather than opaque. The circle is filled with pure white which results in the transparent area of the mask.

Dynamic Mask // ver A

Wednesday, May 21st, 2008

_20080521_dynamicMask_a
run the sketch—view the code

How do you use it?
If it worked, you would just move the mouse around.

What is it?
The intent is to make an interactive, dynamic image mask (like a “spotlight” effect). The mask method requires either an grayscale image file or an integer array containing the pixel gray values to be used for the mask. My idea is to update the pixels[] array of the mask image each time draw() loops.

Kaleidoscope

Tuesday, May 20th, 2008

_20080520_kaleidascope
run the sketch(P3D) (OpenGL)—view the code (OpenGL)—download (OpenGL)

How do you use it?
Follow the on-screen instructions.

What is it?
This is based on the Rudolph helix series from Nov 2007. I’ve been tinkering with it off-and-on for a while so I decided it was time to show off the latest version. This one has an optional GUI layer built into it. This time I’m using the OpenGL renderer instead of P3D (both are posted for comparison). The weird thing is, with OpenGL the transparent pixels in the image are only transparent in one direction. With P3D, the transparency works both ways, but it doesn’t handle z-translations entirely right…

In the P3D version you’ll notice the small “farther away in space” images remain at a reduced size even when they are rotated to the front. I understand why this happens* but I’m not sure how to correct for it. Perhaps I should rotate the camera instead of rotating the coordinate space. Any thoughts?

*P3D is reducing the size of the images that are positioned on the negative z-axis. Similarly, an image with a positive z-coordinate is made bigger. This is done absolutely, without regard for the POV of the viewer; negative z = smaller, positive z = bigger. When you move the mouse left or right, you are spinning the entire coordinate matrix about the y-axis, This eventually brings the negative z-axis to the front and with it come the scaled-down images.

Flashbelt is comming…

Sunday, May 18th, 2008

_20080518_FBbanner_a
run the sketch—view the code

How do you use it?
Just move the mouse around.

What is it?
I am speaking at the Flashbelt conference in Minneapolis next month. This is just me tinkering around with the Flashbelt logo and some Perlin noise.