let wave = [];

let itrSlider;

let select;

let radiusSlider;

function setup() {

    createCanvas(1000, 600);

    radiusSlider = createSlider(50, 150, 50);

    radiusSlider.position(50, 550);

    itrSlider = createSlider(1, 25, 1);

    itrSlider.position(200, 550);

    speed = createSlider(1, 10, 2);

    speed.position(350, 550);

    select = createSelect();

    select.option('sawtooth');

    select.option('square');

    select.position(500, 550);

}

​

function draw() {

    background(0);

    text('Iterations', itrSlider.x , itrSlider.y - 25);

    text('Speed', speed.x , speed.y - 25);

    text('Wave', select.x , select.y - 25);

    text('Radius', radiusSlider.x , radiusSlider.y - 25);

    translate(200, 250);

    let radius;

    let x = 0;

    let y = 0;

    let offset = 400;

​

    for(let i = 0; i < itrSlider.value(); i++){

        let prevX = x;

        let prevY = y;

        let n;

        let coef;

​

        if(select.value() == 'sawtooth'){

            // cerrucho

            if(i % 2 == 0){

                n = i+1;

            }else{

                n = -(i+1);

            }

            coef = i+1;

            radius = radiusSlider.value() * (2 / (n * PI));

        } else {

            // cuadrada

            coef = (i * 2)+ 1;

            n = i * 2 + 1;

            radius = radiusSlider.value() * (4 / (n * PI)); 

        }

​

        x += radius * (cos(coef * time));

        y += radius * (sin(coef * time));

​

        stroke(255);

        noFill();

        ellipse(prevX, prevY, radius * 2);

​

        fill(255);

        line(x, y, prevX, prevY);

    }

    wave.unshift(y);

​

    translate(offset, 0);

​

    line(x-offset, y, 0, wave[0]);

    noFill();

    beginShape();

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

        vertex(i, wave[i]);

    }

    endShape();

​

    if(wave.length > 500){

        wave.pop();

    }

​

    time -= speed.value() / 100;

}

​