Processing.org: beyond sinusoidal gratings

Beyond sine waves: Perlin noise, images, and, yes, (pixel-based) sinusoids

My second attempt at creating a moving sine wave is somewhat different than in the first example (see previous post node/20). This time, I created a sine wave class, which during initialization creates an array holding the pixel values of a sine wave. I also added a Perlin noise class, for making a 2D noise pattern, as well as an image class to load an images.

After each iteration of the draw function, the pixel array is moved left or right (with the end of the array wrapping to the beginning, or vice versa), depending on the mouse X position (or serial input from an Arduino). The numbers in the array are then used to update the pixel color on the screen. Pressing keys from 1 to 0 results in changing the number of periods the sine wave contains.

This code was written so I can control the scroll speed of a variety of patterns with serial commands coming in from an Arduino microcontroller attached to a computer's USB board. Instead of input from an Arduino, this online demo takes information from the X position of the mouse pointer when it's hovering on the image. Mouse on the left means the matrix is shifted towards the left, mouse on the right makes the image move to the right. You might have to click on the image at first to make it run.

Keys that can be pressed while cursor is over the applet::

S … sinusoidal grating
number keys 1 to 0 … change spatial frequency of sinusoid from 1 to 10 periods per image width
n … spatial noise (Perlin noise)
x … re-initialize the noise to get a different pattern
i … image (sample image of leaves)

Java Applet

Note: You might have to click onto the applet to interact with it.

This browser does not have a Java Plug-in.
Get the latest Java Plug-in here.

Built with Processing

Source Code

You can play around with this code by opening the pde files linked below in your Processing IDE (download Processing from http://processing.org/.)

Each class below serves a function: VisMotCtrlDEMO.pde sets up the applet and key listeners, the other ones create the three different patterns that can be controlled by moving the mouse over the applet. As mentioned above, you can use keys to switch between different patterns.