Posted by Armin on Friday, December 31, 2010
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. 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)
Javascript Applet
The Javascript demo will open in a new window. You might have to click on the pattern once to be able to interact with it. Try entering the keys listed above to show different patterns. Move the mouse to change scrolling speed.
Open a JavaScript Demo of this code. (Exported with ProcessingJS.)
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/.) or by downloading the source folder from the "file attachment" section at the bottom of the page.
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.
