Initial Commit

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/AdditiveWave/AdditiveWave.pde

@@ -0,0 +1,67 @@
+/**
+ * Additive Wave
+ * by Daniel Shiffman. 
+ * 
+ * Create a more complex wave by adding two waves together. 
+ */
+ 
+int xspacing = 8;   // How far apart should each horizontal location be spaced
+int w;              // Width of entire wave
+int maxwaves = 4;   // total # of waves to add together
+
+float theta = 0.0;
+float[] amplitude = new float[maxwaves];   // Height of wave
+float[] dx = new float[maxwaves];          // Value for incrementing X, to be calculated as a function of period and xspacing
+float[] yvalues;                           // Using an array to store height values for the wave (not entirely necessary)
+
+void setup() {
+  size(640, 360);
+  frameRate(30);
+  colorMode(RGB, 255, 255, 255, 100);
+  w = width + 16;
+
+  for (int i = 0; i < maxwaves; i++) {
+    amplitude[i] = random(10,30);
+    float period = random(100,300); // How many pixels before the wave repeats
+    dx[i] = (TWO_PI / period) * xspacing;
+  }
+
+  yvalues = new float[w/xspacing];
+}
+
+void draw() {
+  background(0);
+  calcWave();
+  renderWave();
+}
+
+void calcWave() {
+  // Increment theta (try different values for 'angular velocity' here
+  theta += 0.02;
+
+  // Set all height values to zero
+  for (int i = 0; i < yvalues.length; i++) {
+    yvalues[i] = 0;
+  }
+ 
+  // Accumulate wave height values
+  for (int j = 0; j < maxwaves; j++) {
+    float x = theta;
+    for (int i = 0; i < yvalues.length; i++) {
+      // Every other wave is cosine instead of sine
+      if (j % 2 == 0)  yvalues[i] += sin(x)*amplitude[j];
+      else yvalues[i] += cos(x)*amplitude[j];
+      x+=dx[j];
+    }
+  }
+}
+
+void renderWave() {
+  // A simple way to draw the wave with an ellipse at each location
+  noStroke();
+  fill(255,50);
+  ellipseMode(CENTER);
+  for (int x = 0; x < yvalues.length; x++) {
+    ellipse(x*xspacing,height/2+yvalues[x],16,16);
+  }
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Arctangent/Arctangent.pde

@@ -0,0 +1,57 @@
+/**
+ * Arctangent. 
+ * 
+ * Move the mouse to change the direction of the eyes. 
+ * The atan2() function computes the angle from each eye 
+ * to the cursor. 
+ */
+ 
+Eye e1, e2, e3;
+
+void setup() {
+  size(640, 360);
+  noStroke();
+  e1 = new Eye( 250,  16, 120);
+  e2 = new Eye( 164, 185,  80);  
+  e3 = new Eye( 420, 230, 220);
+}
+
+void draw() {
+  background(102);
+  
+  e1.update(mouseX, mouseY);
+  e2.update(mouseX, mouseY);
+  e3.update(mouseX, mouseY);
+
+  e1.display();
+  e2.display();
+  e3.display();
+}
+
+class Eye {
+  int x, y;
+  int size;
+  float angle = 0.0;
+  
+  Eye(int tx, int ty, int ts) {
+    x = tx;
+    y = ty;
+    size = ts;
+ }
+
+  void update(int mx, int my) {
+    angle = atan2(my-y, mx-x);
+  }
+  
+  void display() {
+    pushMatrix();
+    translate(x, y);
+    fill(255);
+    ellipse(0, 0, size, size);
+    rotate(angle);
+    fill(153, 204, 0);
+    ellipse(size/4, 0, size/2, size/2);
+    popMatrix();
+  }
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Distance1D/Distance1D.pde

@@ -0,0 +1,54 @@
+/**
+ * Distance 1D. 
+ * 
+ * Move the mouse left and right to control the 
+ * speed and direction of the moving shapes. 
+ */
+ 
+float xpos1;
+float xpos2;
+float xpos3;
+float xpos4;
+int thin = 8;
+int thick = 36;
+
+void setup() 
+{
+  size(640, 360);
+  noStroke();
+  xpos1 = width/2;
+  xpos2 = width/2;
+  xpos3 = width/2;
+  xpos4 = width/2;
+}
+
+void draw() 
+{
+  background(0);
+  
+  float mx = mouseX * 0.4 - width/5.0;
+  
+  fill(102);
+  rect(xpos2, 0, thick, height/2);
+  fill(204);
+  rect(xpos1, 0, thin, height/2);
+  fill(102);
+  rect(xpos4, height/2, thick, height/2);
+  fill(204);
+  rect(xpos3, height/2, thin, height/2);
+	
+  xpos1 += mx/16;
+  xpos2 += mx/64;
+  xpos3 -= mx/16;
+  xpos4 -= mx/64;
+  
+  if(xpos1 < -thin)  { xpos1 =  width; }
+  if(xpos1 >  width) { xpos1 = -thin; }
+  if(xpos2 < -thick) { xpos2 =  width; }
+  if(xpos2 >  width) { xpos2 = -thick; }
+  if(xpos3 < -thin)  { xpos3 =  width; }
+  if(xpos3 >  width) { xpos3 = -thin; }
+  if(xpos4 < -thick) { xpos4 =  width; }
+  if(xpos4 >  width) { xpos4 = -thick; }
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Distance2D/Distance2D.pde

@@ -0,0 +1,27 @@
+/**
+ * Distance 2D. 
+ * 
+ * Move the mouse across the image to obscure and reveal the matrix.  
+ * Measures the distance from the mouse to each square and sets the
+ * size proportionally. 
+ */
+ 
+float max_distance;
+
+void setup() {
+  size(640, 360); 
+  noStroke();
+  max_distance = dist(0, 0, width, height);
+}
+
+void draw() {
+  background(0);
+
+  for(int i = 0; i <= width; i += 20) {
+    for(int j = 0; j <= height; j += 20) {
+      float size = dist(mouseX, mouseY, i, j);
+      size = size/max_distance * 66;
+      ellipse(i, j, size, size);
+    }
+  }
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/DoubleRandom/DoubleRandom.pde

@@ -0,0 +1,26 @@
+/**
+ * Double Random 
+ * by Ira Greenberg.  
+ * 
+ * Using two random() calls and the point() function 
+ * to create an irregular sawtooth line.
+ */
+
+int totalPts = 300;
+float steps = totalPts + 1;
+  
+void setup() {
+  size(640, 360);
+  stroke(255);
+  frameRate(1);
+} 
+
+void draw() {
+  background(0);
+  float rand = 0;
+  for  (int i = 1; i < steps; i++) {
+    point( (width/steps) * i, (height/2) + random(-rand, rand) );
+    rand += random(-5, 5);
+  }
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Graphing2DEquation/Graphing2DEquation.pde

@@ -0,0 +1,39 @@
+/**
+ * Graphing 2D Equations
+ * by Daniel Shiffman. 
+ * 
+ * Graphics the following equation: 
+ * sin(n*cos(r) + 5*theta) 
+ * where n is a function of horizontal mouse location.  
+ */
+ 
+void setup() {
+  size(640, 360);
+}
+
+void draw() {
+  loadPixels();
+  float n = (mouseX * 10.0) / width;
+  float w = 16.0;         // 2D space width
+  float h = 16.0;         // 2D space height
+  float dx = w / width;    // Increment x this amount per pixel
+  float dy = h / height;   // Increment y this amount per pixel
+  float x = -w/2;          // Start x at -1 * width / 2
+  for (int i = 0; i < width; i++) {
+    float y = -h/2;        // Start y at -1 * height / 2
+    for (int j = 0; j < height; j++) {
+      float r = sqrt((x*x) + (y*y));    // Convert cartesian to polar
+      float theta = atan2(y,x);         // Convert cartesian to polar
+      // Compute 2D polar coordinate function
+      float val = sin(n*cos(r) + 5 * theta);           // Results in a value between -1 and 1
+      //float val = cos(r);                            // Another simple function
+      //float val = sin(theta);                        // Another simple function
+      // Map resulting vale to grayscale value
+      pixels[i+j*width] = color((val + 1.0) * 255.0/2.0);     // Scale to between 0 and 255
+      y += dy;                // Increment y
+    }
+    x += dx;                  // Increment x
+  }
+  updatePixels();
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/IncrementDecrement/IncrementDecrement.pde

@@ -0,0 +1,44 @@
+/**
+ * Increment Decrement. 
+ * 
+ * Writing "a++" is equivalent to "a = a + 1".  
+ * Writing "a--" is equivalent to "a = a - 1".   
+ */
+ 
+int a;
+int b;
+boolean direction;
+
+void setup() {
+  size(640, 360);
+  colorMode(RGB, width);
+  a = 0;
+  b = width;
+  direction = true;
+  frameRate(30);
+}
+
+void draw() {
+  a++;
+  if(a > width) {
+    a = 0;
+    direction = !direction;
+  }
+  if(direction == true){
+    stroke(a);
+  } else {
+    stroke(width-a);
+  }
+  line(a, 0, a, height/2);
+
+  b--;
+  if(b < 0) {
+    b = width;
+  }
+  if(direction == true) {
+    stroke(width-b);
+  } else {
+    stroke(b);
+  }
+  line(b, height/2+1, b, height);
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Interpolate/Interpolate.pde

@@ -0,0 +1,35 @@
+/**
+ * Linear Interpolation. 
+ * 
+ * Move the mouse across the screen and the symbol will follow.  
+ * Between drawing each frame of the animation, the ellipse moves 
+ * part of the distance (0.05) from its current position toward 
+ * the cursor using the lerp() function
+ *
+ * This is the same as the Easing under input only with lerp() instead. 
+ */
+ 
+float x;
+float y;
+
+void setup() {
+  size(640, 360); 
+  noStroke();  
+}
+
+void draw() { 
+  background(51);
+  
+  // lerp() calculates a number between two numbers at a specific increment. 
+  // The amt parameter is the amount to interpolate between the two values 
+  // where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 
+  // is half-way in between, etc.  
+  
+  // Here we are moving 5% of the way to the mouse location each frame
+  x = lerp(x, mouseX, 0.05);
+  y = lerp(y, mouseY, 0.05);
+  
+  fill(255);
+  stroke(255);
+  ellipse(x, y, 66, 66);
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Map/Map.pde

@@ -0,0 +1,24 @@
+/**
+ * Map.
+ * 
+ * Use the map() function to take any number and scale it to a new number 
+ * that is more useful for the project that you are working on. For example, use the
+ * numbers from the mouse position to control the size or color of a shape. 
+ * In this example, the mouse’s x-coordinate (numbers between 0 and 360) are scaled to
+ * new numbers to define the color and size of a circle.
+ */
+
+void setup() {
+  size(640, 360);
+  noStroke();
+}
+
+void draw() {
+  background(0);
+  // Scale the mouseX value from 0 to 640 to a range between 0 and 175
+  float c = map(mouseX, 0, width, 0, 175);
+  // Scale the mouseX value from 0 to 640 to a range between 40 and 300
+  float d = map(mouseX, 0, width, 40, 300);
+  fill(255, c, 0);
+  ellipse(width/2, height/2, d, d);   
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Noise1D/Noise1D.pde

@@ -0,0 +1,32 @@
+/**
+ * Noise1D. 
+ * 
+ * Using 1D Perlin Noise to assign location. 
+ */
+ 
+float xoff = 0.0;
+float xincrement = 0.01; 
+
+void setup() {
+  size(640, 360);
+  background(0);
+  noStroke();
+}
+
+void draw() {
+  // Create an alpha blended background
+  fill(0, 10);
+  rect(0,0,width,height);
+  
+  //float n = random(0,width);  // Try this line instead of noise
+  
+  // Get a noise value based on xoff and scale it according to the window's width
+  float n = noise(xoff)*width;
+  
+  // With each cycle, increment xoff
+  xoff += xincrement;
+  
+  // Draw the ellipse at the value produced by perlin noise
+  fill(200);
+  ellipse(n,height/2, 64, 64);
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Noise2D/Noise2D.pde

@@ -0,0 +1,44 @@
+/**
+ * Noise2D 
+ * by Daniel Shiffman.  
+ * 
+ * Using 2D noise to create simple texture. 
+ */
+ 
+float increment = 0.02;
+
+void setup() {
+  size(640, 360);
+}
+
+void draw() {
+  
+  loadPixels();
+
+  float xoff = 0.0; // Start xoff at 0
+  float detail = map(mouseX, 0, width, 0.1, 0.6);
+  noiseDetail(8, detail);
+  
+  // For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
+  for (int x = 0; x < width; x++) {
+    xoff += increment;   // Increment xoff 
+    float yoff = 0.0;   // For every xoff, start yoff at 0
+    for (int y = 0; y < height; y++) {
+      yoff += increment; // Increment yoff
+      
+      // Calculate noise and scale by 255
+      float bright = noise(xoff, yoff) * 255;
+
+      // Try using this line instead
+      //float bright = random(0,255);
+      
+      // Set each pixel onscreen to a grayscale value
+      pixels[x+y*width] = color(bright);
+    }
+  }
+  
+  updatePixels();
+}
+
+
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Noise3D/Noise3D.pde

@@ -0,0 +1,53 @@
+/**
+ * Noise3D. 
+ * 
+ * Using 3D noise to create simple animated texture. 
+ * Here, the third dimension ('z') is treated as time. 
+ */
+ 
+float increment = 0.01;
+// The noise function's 3rd argument, a global variable that increments once per cycle
+float zoff = 0.0;  
+// We will increment zoff differently than xoff and yoff
+float zincrement = 0.02; 
+
+void setup() {
+  size(640, 360);
+  frameRate(30);
+}
+
+void draw() {
+  
+  // Optional: adjust noise detail here
+  // noiseDetail(8,0.65f);
+  
+  loadPixels();
+
+  float xoff = 0.0; // Start xoff at 0
+  
+  // For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
+  for (int x = 0; x < width; x++) {
+    xoff += increment;   // Increment xoff 
+    float yoff = 0.0;   // For every xoff, start yoff at 0
+    for (int y = 0; y < height; y++) {
+      yoff += increment; // Increment yoff
+      
+      // Calculate noise and scale by 255
+      float bright = noise(xoff,yoff,zoff)*255;
+
+      // Try using this line instead
+      //float bright = random(0,255);
+      
+      // Set each pixel onscreen to a grayscale value
+      pixels[x+y*width] = color(bright,bright,bright);
+    }
+  }
+  updatePixels();
+  
+  zoff += zincrement; // Increment zoff
+  
+  
+}
+
+
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/NoiseWave/NoiseWave.pde

@@ -0,0 +1,40 @@
+/**
+ * Noise Wave
+ * by Daniel Shiffman.  
+ * 
+ * Using Perlin Noise to generate a wave-like pattern. 
+ */
+
+float yoff = 0.0;        // 2nd dimension of perlin noise
+
+void setup() {
+  size(640, 360);
+}
+
+void draw() {
+  background(51);
+
+  fill(255);
+  // We are going to draw a polygon out of the wave points
+  beginShape(); 
+  
+  float xoff = 0;       // Option #1: 2D Noise
+  // float xoff = yoff; // Option #2: 1D Noise
+  
+  // Iterate over horizontal pixels
+  for (float x = 0; x <= width; x += 10) {
+    // Calculate a y value according to noise, map to 
+    float y = map(noise(xoff, yoff), 0, 1, 200,300); // Option #1: 2D Noise
+    // float y = map(noise(xoff), 0, 1, 200,300);    // Option #2: 1D Noise
+    
+    // Set the vertex
+    vertex(x, y); 
+    // Increment x dimension for noise
+    xoff += 0.05;
+  }
+  // increment y dimension for noise
+  yoff += 0.01;
+  vertex(width, height);
+  vertex(0, height);
+  endShape(CLOSE);
+}

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/OperatorPrecedence/OperatorPrecedence.pde

@@ -0,0 +1,58 @@
+/**
+ * Operator Precedence
+ * 
+ * If you don't explicitly state the order in which
+ * an expression is evaluated, they are evaluated based
+ * on the operator precedence. For example, in the statement
+ * "4+2*8", the 2 will first be multiplied by 8 and then the result will
+ * be added to 4. This is because the "*" has a higher precedence
+ * than the "+". To avoid ambiguity in reading the program, 
+ * it is recommended that is statement is written as "4+(2*8)".
+ * The order of evaluation can be controlled through placement of
+ * parenthesis in the code. A table of operator precedence follows below.
+ * 
+ */
+ 
+// The highest precedence is at the top of the list and 
+// the lowest is at the bottom.
+// Multiplicative: * / %
+// Additive: + -
+// Relational: < > <= >=
+// Equality: == !=
+// Logical AND: &&
+// Logical OR: ||
+// Assignment: = += -= *= /= %=
+
+size(640, 360);
+background(51);
+noFill();
+stroke(51);
+
+stroke(204);
+for(int i=0; i< width-20; i+= 4) {
+  // The 30 is added to 70 and then evaluated
+  // if it is greater than the current value of "i"
+  // For clarity, write as "if (i > (30 + 70)) {"
+  if (i > 30 + 70) {
+    line(i, 0, i, 50);
+  }
+}
+
+stroke(255);
+// The 2 is multiplied by the 8 and the result is added to the 4
+// For clarity, write as "rect(5 + (2 * 8), 0, 90, 20);"
+rect(4 + 2 * 8, 52, 290, 48);
+rect((4 + 2) * 8, 100, 290, 49);
+  
+stroke(153);
+for (int i = 0; i < width; i+= 2) {
+  // The relational statements are evaluated 
+  // first, and then the logical AND statements and 
+  // finally the logical OR. For clarity, write as:
+  // "if(((i > 20) && (i < 50)) || ((i > 100) && (i < width-20))) {"
+  if (i > 20 && i < 50 || i > 100 && i < width-20) {
+    line(i, 151, i, height-1);
+  } 
+}
+
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/PolarToCartesian/PolarToCartesian.pde

@@ -0,0 +1,52 @@
+/**
+ * PolarToCartesian
+ * by Daniel Shiffman.  
+ * 
+ * Convert a polar coordinate (r,theta) to cartesian (x,y):  
+ * x = r * cos(theta)
+ * y = r * sin(theta)
+ */
+ 
+float r;
+
+// Angle and angular velocity, accleration
+float theta;
+float theta_vel;
+float theta_acc;
+
+void setup() {
+  size(640, 360);
+  
+  // Initialize all values
+  r = height * 0.45;
+  theta = 0;
+  theta_vel = 0;
+  theta_acc = 0.0001;
+}
+
+void draw() {
+  
+  background(0);
+  
+  // Translate the origin point to the center of the screen
+  translate(width/2, height/2);
+  
+  // Convert polar to cartesian
+  float x = r * cos(theta);
+  float y = r * sin(theta);
+  
+  // Draw the ellipse at the cartesian coordinate
+  ellipseMode(CENTER);
+  noStroke();
+  fill(200);
+  ellipse(x, y, 32, 32);
+  
+  // Apply acceleration and velocity to angle (r remains static in this example)
+  theta_vel += theta_acc;
+  theta += theta_vel;
+
+}
+
+
+
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Random/Random.pde

@@ -0,0 +1,22 @@
+/**
+ * Random. 
+ * 
+ * Random numbers create the basis of this image. 
+ * Each time the program is loaded the result is different. 
+ */
+
+void setup() {
+  size(640, 360);
+  background(0);
+  strokeWeight(20);
+  frameRate(2);
+}
+
+void draw() {
+  for (int i = 0; i < width; i++) {
+    float r = random(255);
+    stroke(r);
+    line(i, 0, i, height);
+  }
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/RandomGaussian/RandomGaussian.pde

@@ -0,0 +1,28 @@
+/**
+ * Random Gaussian. 
+ * 
+ * This sketch draws ellipses with x and y locations tied to a gaussian distribution of random numbers.
+ */
+
+void setup() {
+  size(640, 360);
+  background(0);
+}
+
+void draw() {
+
+  // Get a gaussian random number w/ mean of 0 and standard deviation of 1.0
+  float val = randomGaussian();
+
+  float sd = 60;                  // Define a standard deviation
+  float mean = width/2;           // Define a mean value (middle of the screen along the x-axis)
+  float x = ( val * sd ) + mean;  // Scale the gaussian random number by standard deviation and mean
+
+  noStroke();
+  fill(255, 10);
+  noStroke();
+  ellipse(x, height/2, 32, 32);   // Draw an ellipse at our "normal" random location
+}
+
+
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/Sine/Sine.pde

@@ -0,0 +1,32 @@
+/**
+ * Sine. 
+ * 
+ * Smoothly scaling size with the sin() function. 
+ */
+ 
+float diameter; 
+float angle = 0;
+
+void setup() {
+  size(640, 360);
+  diameter = height - 10;
+  noStroke();
+  noStroke();
+  fill(255, 204, 0);
+}
+
+void draw() {
+  
+  background(0);
+
+  float d1 = 10 + (sin(angle) * diameter/2) + diameter/2;
+  float d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
+  float d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
+  
+  ellipse(0, height/2, d1, d1);
+  ellipse(width/2, height/2, d2, d2);
+  ellipse(width, height/2, d3, d3);
+  
+  angle += 0.02;
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/SineCosine/SineCosine.pde

@@ -0,0 +1,47 @@
+/**
+ * Sine Cosine. 
+ * 
+ * Linear movement with sin() and cos(). 
+ * Numbers between 0 and PI*2 (TWO_PI which angles roughly 6.28) 
+ * are put into these functions and numbers between -1 and 1 are 
+ * returned. These values are then scaled to produce larger movements. 
+ */
+ 
+float x1, x2, y1, y2;
+float angle1, angle2;
+float scalar = 70;
+
+void setup() {
+  size(640, 360);
+  noStroke();
+  rectMode(CENTER);
+}
+
+void draw() {
+  background(0);
+
+  float ang1 = radians(angle1);
+  float ang2 = radians(angle2);
+
+  x1 = width/2 + (scalar * cos(ang1));
+  x2 = width/2 + (scalar * cos(ang2));
+  
+  y1 = height/2 + (scalar * sin(ang1));
+  y2 = height/2 + (scalar * sin(ang2));
+  
+  fill(255);
+  rect(width*0.5, height*0.5, 140, 140);
+
+  fill(0, 102, 153);
+  ellipse(x1, height*0.5 - 120, scalar, scalar);
+  ellipse(x2, height*0.5 + 120, scalar, scalar);
+  
+  fill(255, 204, 0);
+  ellipse(width*0.5 - 120, y1, scalar, scalar);
+  ellipse(width*0.5 + 120, y2, scalar, scalar);
+
+  angle1 += 2;
+  angle2 += 3;
+  
+}
+

Java/Processing/processing-3.3.6/modes/java/examples/Basics/Math/SineWave/SineWave.pde

@@ -0,0 +1,50 @@
+/**
+ * Sine Wave
+ * by Daniel Shiffman.  
+ * 
+ * Render a simple sine wave. 
+ */
+ 
+int xspacing = 16;   // How far apart should each horizontal location be spaced
+int w;              // Width of entire wave
+
+float theta = 0.0;  // Start angle at 0
+float amplitude = 75.0;  // Height of wave
+float period = 500.0;  // How many pixels before the wave repeats
+float dx;  // Value for incrementing X, a function of period and xspacing
+float[] yvalues;  // Using an array to store height values for the wave
+
+void setup() {
+  size(640, 360);
+  w = width+16;
+  dx = (TWO_PI / period) * xspacing;
+  yvalues = new float[w/xspacing];
+}
+
+void draw() {
+  background(0);
+  calcWave();
+  renderWave();
+}
+
+void calcWave() {
+  // Increment theta (try different values for 'angular velocity' here
+  theta += 0.02;
+
+  // For every x value, calculate a y value with sine function
+  float x = theta;
+  for (int i = 0; i < yvalues.length; i++) {
+    yvalues[i] = sin(x)*amplitude;
+    x+=dx;
+  }
+}
+
+void renderWave() {
+  noStroke();
+  fill(255);
+  // A simple way to draw the wave with an ellipse at each location
+  for (int x = 0; x < yvalues.length; x++) {
+    ellipse(x*xspacing, height/2+yvalues[x], 16, 16);
+  }
+}
+