Processing.org: Sick Sine Wave

Armin's Forays into Processing

Recently, I have started spending some of my evenings playing around with Processing, just because it's AWESOME!

Note: Java has to be enabled to see the applets. The applets might not run on all computers. It depends very much on the JAVA version installed. (It works on all my Macs, but I needed to update JAVA on one of the PCs in the lab to make it work.)

Sick Sine Wave

My very first interactive applet created in Processing. The speed and spatial frequency of this sinusoidal grating can be influenced by moving the mouse over the animation. X controls speed, Y controls the number of periods shown. I also made a version (based on Tim Igoe's code) that listens to serial input from an Arduino attached to my computer to contol the speed of the motion. I find it very exciting to be able to control what's happening on my computer screen by turning the knob of a potentiometer attached to my Arduino...

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.

Source code: Sick_Sine_Wave
Built with Processing

Source code

You can play around with this code by copying the code below into your Processing IDE (download Processing from http://processing.org/.)

  1. float scaleVal = 150;      // max value for the resulting sine wave (255 = white)
  2. float periods = 4;         // how many periods per window width (will be controlled by mouse Y)
  3. float colorValue;         // holds the result of the sine wave color for each position
  4. float sine_phase = PI;
  5. float increment = PI/8; // how much the phase should shift / redraw; controlled by mouse X.
  6.  
  7.  
  8. void setup () {
  9.   //size(screen.width, screen.height);   // uncomment: go full screen
  10.   size(300,300);
  11.   smooth();  // anti-aliasing
  12.   frameRate(30);  // set frame rate
  13. }
  14.  
  15.  
  16. void draw() {
  17.   displaySine(sine_phase, periods);     // call the display function
  18.  
  19.   increment = map(mouseX, 0, width, PI/4,-PI/4);  // mouse X controls speed of wave
  20.   periods = map(mouseY, 0, height, 2, 12);        // mouse Y controls how many periods / screen width
  21.   sine_phase = sine_phase + increment;   // increment phase for next drawing loop
  22.   if (sine_phase >= 2*PI) {
  23.     sine_phase = 0.0;
  24.   }
  25. }
  26.  
  27.  
  28. // function that displays the sine wave (takes phase and periods as arguments):
  29. void displaySine(float sine_phase, float periods) {
  30.   for (int x = 0; x < (width); x++) { 
  31.     float xValue = x/float(width)*periods;    // location along x axis
  32.     colorValue= ( (sin(2*PI*xValue + sine_phase) * scaleVal) + scaleVal ) / 2.0;   // calculate grey value for each x position
  33.     stroke(colorValue);           // set color to that value
  34.     line(x,0, x, height);         // draw vertical line for each x
  35.   }
  36. }