let x, y, px, py, xScale, yScale, precisionFactor, phaseOffset, phaseQty;

​

let genny = {

    x: 0,

    y: 0,

    size: 50

};

​

let speed, rOffset, lineLength;

​

function setup() {

    createCanvas(600, 400);

    background(255);

​

    //set your scale and precision factors:

    xScale = 20;

    yScale = 50;

    precisionFactor = 1;

​

    //set phase offset and number of phases:

    phaseOffset = 2 / 3 * PI;

    phaseQty = 3;

​

    //set rectMode to corners (to help below) and fill to white

    rectMode(CORNERS);

    fill(255);

​

    //genny parameters:

    lineLength = 50;

​

    //set speed of animation

    speed = 0.05;

    rOffset = 0;

​

}

​

​

​

function draw() {

    drawSineWave(50,height/2,500,xScale,yScale,0);

}

//  //redraw background in each frame to allow ball animation

//  background(255);

​

//  push();

//  //set this to center

//  translate(width / 4, height / 2);

​

​

//  //create the sine wave at several separate phases

//  for (let j = 0; j < phaseQty; j++) {

​

//      //reset previous x and y to starting point

//      //formula for previous y is same as formula for making sine wave at x=0

//      px = 0;

//      py = -sin(j * phaseOffset - rOffset) * yScale;

​

//      //in every phase instance, run from x=0 to x>width creating small lines

//      for (let i = 0; i < width; i += 1 / precisionFactor) {

//          //set x to i, and y to sine of x (with scaling and centering for readability)

//          x = i;

//          y = -sin((x / xScale) + (j * phaseOffset) - rOffset) * yScale;

​

​

​

//          //make the line

//          if (j == 0) {

//              stroke(255, 0, 0);

//          }

//          if (j == 1) {

//              stroke(0, 0, 0);

//          }

//          if (j == 2) {

//              stroke(0, 0, 255);

//          }

//          strokeWeight(2);

//          line(x, y, px, py);

​

//          //set previous x and y to current i and y

//          px = x;

//          py = y;

//      }

//  }

//  pop();

​

//  //create the 3 phase generator in the center

//  push();

//  //set in center

//  translate(width / 4 - lineLength, height / 2);

//  //greate bounding circle:

//  ellipse(0, 0, lineLength * 2, lineLength * 2);

​

//  //rotate the whole genny in sync with the output sinewaves

//  rotate(rOffset - 1.5);

​

//  //set stroke weight:

//  strokeWeight(4);

//  //phase 1:

//  push();

//  stroke(255, 0, 0);

//  line(0, 0, 0, lineLength);

//  pop();

​

//  //phase 2:

//  push();

//  rotate(2 / 3 * PI);

//  stroke(0, 0, 255);

//  line(0, 0, 0, lineLength);

//  pop();

​

//  //phase 3:

//  push();

//  rotate(2 * 2 / 3 * PI);

//  stroke(0, 0, 0);

//  line(0, 0, 0, lineLength);

//  pop();

​

//  pop();

​

//  //advance the rotational offset:

//  rOffset += speed;

​

//  //make a center horizontal line:

//  stroke(0);

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

//  //vertical division line

//  line(width/4,0,width/4,height);

// }

​

// function mousePressed(){

//  phaseQty++;

//  if (phaseQty > 3){

//      phaseQty = 0;

//  }

// }

​

​

function drawSineWave(startX,centerY,length,xScale, yScale,phaseOffset){

    translate(startX,centerY);  

    noFill();

    beginShape();

    for (let x = 0; x<length; x++){

        let y = -sin((x / xScale) + phaseOffset) * yScale;

        curveVertex(x,y);

    }

    endShape();

}