*  Adding sine and cosine waves

 *  

 *************************************************/

​

var theta = 0;

​

// Amplitute

var r1 = 0;

var r2 = 0;

​

// Frequency

var n1 = 1;

var n2 = 1;

​

// Phase

var p1 = 0;

var p2 = 0;

var amp = 50;

​

var wave = [];

var swave = [];

var cwave = [];

​

var rate = 30;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(240);

  frameRate(rate);

  // The Sine Wave

  r1 = 1;

  n1 = 1;

  p1 = PI/2;

  let w1 = r1 * sin(n1 * theta + p1);

  w1 = -amp * w1;

  swave.unshift(w1);

  // The Cosine Wave

  r2 = 1.5;

  n2 = 1;

  p2 = 0;

  let w2 = r2 * cos(n2 * theta + p2);

  w2 = -amp * w2;

  cwave.unshift(w2);

  // Summation

  let sum = w1 + w2;

  wave.unshift(sum);

  translate(0, height/2);

  // x- and y- axes

  stroke(100, 100);

  // line(0, -height/2, 0, height/2);

  line(0, 0, width, 0);

  // Draw Sine wave

  stroke(255, 0, 0);

  strokeWeight(3);

  noFill();

  beginShape();

  for(let i = 0; i < wave.length; i++) {

    vertex(width-i, swave[i]);

  }

  endShape();

  // Draw Cosine wave

  stroke(0, 255, 0);

  strokeWeight(2);

  noFill();

  beginShape();

  for(let i = 0; i < wave.length; i++) {

    vertex(width-i, cwave[i]);

  }

  endShape();

  // Draw summed wave

  stroke(0, 0, 255);

  strokeWeight(1);

  noFill();

  beginShape();

  for(let i = 0; i < wave.length; i++) {

    vertex(width-i, wave[i]);

  }

  endShape();

  // Legend

  noStroke();

  textSize(15);

  fill(255, 0, 0);

  text("Sine wave", 200, -180);

  fill(0, 255, 0);

  text("Cosine wave", 200, -160);

  fill(0, 0, 255);

  text("Summed wave", 200, -140);

  // print(wave.length);

  if (wave.length > 400) {

    wave.pop();

  }

  if (swave.length > 400) {

    swave.pop();

  }

  if (cwave.length > 400) {

    cwave.pop();

  }

  theta += 0.05;

}

​

function mouseClicked() {

  if (rate == 30) rate = 1;

  else rate = 30;

}