Archive for the 'Examples' Category

3D Grid, for loop Demo

Saturday, May 7th, 2011

run the sketch—view the code

How do you use it?
Demo to explain nesting for() loops and the pushMatrix() and popMatrix() functions.

What is it?
Mouse around to rotate the cube. Up and Down arrow keys zoom in and out.

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…

Scanning the pixels[] Array

Friday, November 7th, 2008
Diagram of the Processing sketch output

run the sketch—view the code

How do you use it?
There is no interactivity. Just sit back and watch.

What is it?
Two things: First, it is an example of loading and scanning the pixels[] array. Second, it is the first step in the development of a program that will play images as sound. Stay tuned…

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.

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.