const STAGE_HEIGHT = 400;

const L_BORDER = 25;

const COLBG = 220;

const COL1 = 100;

const COL2 = 195;

const PIVOTRADI = 10;

const LINEGAP = 5;

let UNITRADI = 50;

let DW;

let RT_BORDER;

let LM_X = 0;

const LM_MAXT = 600;

let LM_T = 0;

​

let TICK = 0.03;

let D = [];

let wave = [];

let time = 0;

​

let presetIndex = 0;

const PRESETS = [

  ["square","4/(PI*((2*i)+1))","(2*i)+1","0"],

  ["sawtooth","2/(PI*(i+1))*pow(-1,(i+1))","i+1","0"],

  ["phased square","4/(PI*((2*i)+1))","(2*i)+1","PI/20"],

];

​

function setup() {

  STAGE_WIDTH = windowWidth;

  createCanvas(STAGE_WIDTH, STAGE_HEIGHT);

  //D = [[50,1,0],[25,2,0],[10,3,0]] // manual diagram test

  var gen = (n,a,f,p) => Array.apply(null, Array(n)).map((_,i)=>i).map(

    (i) => [UNITRADI * eval(a), eval(f), eval(p)]);

  let a_TXT = createInput();

  let f_TXT = createInput();

  let p_TXT = createInput();

  let BTN = createButton("submit");

  let TICK_SLIDER = createSlider(1,20,3);

  let UNITRADI_SLIDER = createSlider(25,100,50);

  let ITERATIONS_SLIDER = createSlider(1,20,3);

  let SEL = createSelect();

  PRESETS.map(([o]) => SEL.option(o));

  const setupD = () => { 

    n = ITERATIONS_SLIDER.value();

    D = gen(n,a_TXT.value(), f_TXT.value(), p_TXT.value());

    DW = D.reduce((pr,[a,f,p]) => pr + abs(a),0);

    updateBorder();

  }

  const setpresetText = () => {

    a_TXT.value(PRESETS[presetIndex][1]);

    f_TXT.value(PRESETS[presetIndex][2]);

    p_TXT.value(PRESETS[presetIndex][3]);

  }

  setpresetText();

  SEL.changed(() => {

    presetIndex = PRESETS.reduce((pr,[name,a,f,p],i) =>

      SEL.value() == name ? i : pr,-1);

    setpresetText();

    setupD();

  });

  BTN.mousePressed(() => setupD());

  TICK_SLIDER.input(() => TICK = TICK_SLIDER.value()/100);

  UNITRADI_SLIDER.input(() => {

    UNITRADI = UNITRADI_SLIDER.value();

    setupD();

  });

  ITERATIONS_SLIDER.input(() => {

    setupD();

  });

  setupD();

}

​

function updateBorder() {

  RT_BORDER = STAGE_WIDTH + LM_X - L_BORDER * 2;

}

​

function draw() {

  background(COLBG);

  translate(-LM_X + L_BORDER, STAGE_HEIGHT * 0.5);

  if(LM_T < LM_MAXT) {

    LM_T++;

  }else {

    LM_X++;

  }// ease retract left min border

  (([x,y]) => {

    stroke(COL2);

    noFill();

    line(LM_X, 0, RT_BORDER, 0);

    line(x,y,DW,y);

    ellipse(DW,y,PIVOTRADI);

    stroke(COL1);

    beginShape();

    wave.unshift(y);

    wave = wave.splice(0, RT_BORDER - DW);

    wave.map((y,i) => vertex(DW + i, y));

    endShape();

  }) (D.reduce(([x,y],[a,f,p],i) => {

    let nx = x + a * cos(p + f * time);

    let ny = y + a * sin(p + f * time);

    // calculate pivot point

    let olmx = LM_X;

    LM_X = min(LM_X, x - abs(a));

    if(olmx != LM_X || round((olmx - (x - abs(a)))*0.1) == 0) LM_T = 0;

    updateBorder();

    // calculate left minimum border

    stroke(COL2);

    noFill();

    ellipse(nx,ny,PIVOTRADI);

    ellipse(x,y,a * 2);

    let rx = DW - ((D.length - 1) * LINEGAP) + (i * LINEGAP);

    line(rx,y,rx,ny);

    ellipse(rx,ny,LINEGAP);

    fill(COL1);

    stroke(COL1);

    line(x,y,nx,ny);

    return [nx, ny];

  }, [0,0]));

  time += TICK;

}