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 = 30;

    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() {

    //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;

    }

}