let inc = 0.15;

​

let step = 0;

​

let minInc = 0.05;

let maxInc = 10;

let minSld = 0;

let maxSld = 1000000;

let midSld = (minSld + maxSld) / 2;

​

let startDiam = 10;

let diagonal;

let diagonalRoot;

let sldPeriod;

let spnPeriodVal;

let sldStepInc;

let spnStepIncVal;

let spnStepVal;

let sldH;

let spnHVal;

let sldPH;

let spnPHVal;

let sldV;

let spnVVal;

let sldPV;

let spnPVVal;

let doInc = true;

let chkClear;

​

function setup() {

  createCanvas(400, 400);

  colorMode(HSB, 360, 100, 100, 100);

  background(0, 0, 80);

​

  diagonal = sqrt(2 * pow(max(width, height), 2));

  diagonalRoot = sqrt(diagonal);

    initUI();

  updateSpanVals();

  noFill();

  stroke(0);

}

​

function draw() {

  console.log(chkClear.checked());

  if (chkClear.checked()){

      background(0, 0, 80);

  }

  inc = sldToInc(sldInc.value());

  period = sldPeriod.value();

​

  updateSpanVals();

  stroke(100);

  // stroke(255, 0, 0);

  let p = startDiam + pow(step, 2);

  drawStep(p);

  // stroke(0, 0, 255);

  let p2 = startDiam + pow(step + period * inc, 2);

  drawStep(p2);

  if (doInc){

    doStep();

  } 

}

​

function doStep(){

    step = (step + inc) % (period * inc);

}

​

function drawStep(p) {

  let h = normSld(sldH.value());

  let pH = normSld(sldPH.value(), -1, 1);

  let v = normSld(sldV.value());

  let pV = normSld(sldPV.value(), -1, 1);

  ellipse(h * width + pH * p, v * height + pV * p, p);

}

​

function initUI(){

  createElement("br");

  createSpan("step: ");

  spnStepVal = createSpan(step);

​

  createElement("br");

  sldPeriod = createSlider(0, 200, period);

  createSpan("period: ");

  spnPeriodVal = createSpan();

​

  createElement("br");

  sldInc = createSlider(minSld, maxSld, incToSld(inc));

  createSpan("inc: ");

    spnIncVal = createSpan();

  createElement("br");

  sldH = createSlider(minSld, maxSld, midSld);

  createSpan("hProp: ");

    spnHVal = createSpan();

  createElement("br");

  sldPH = createSlider(minSld, maxSld, midSld);

    createSpan("pHProp: ");

    spnPHVal = createSpan();

  createElement("br");

  sldV = createSlider(minSld, maxSld, midSld);

  createSpan("vProp: ");

    spnVVal = createSpan();

  createElement("br");

  sldPV = createSlider(minSld, maxSld, midSld);

  createSpan("pVProp: ");

  spnPVVal = createSpan();

  chkClear = createCheckbox("clear", true);

}

​

function updateSpanVals(){

  spnPeriodVal.html(sldPeriod.value());

    spnIncVal.html(sldToInc(sldInc.value()));

    spnHVal.html(normSld(sldH.value()));

    spnHVal.html(normSld(sldH.value()), -1, 1);

    spnHVal.html(normSld(sldH.value()));

    spnHVal.html(normSld(sldH.value()), -1, 1);

}

​

// Converts from a slider value to an increment.

// Maps linear slider onto an exponential scale. 

function sldToInc(sld) {

  let norm = normSld(sld);

  let exp = pow(norm, 4);

  let inc = map(exp, 0, 1, minInc, maxInc);

  return inc;

}

​

// Converts from an (exponential) increment scale to a slider value.

function incToSld(inc) {

  let exp = map(inc, minInc, maxInc, 0, 1);

  let norm = sqrt(sqrt(exp));

  let sld = map(norm, 0, 1, minSld, maxSld);

  return sld;

}

​

// Normalise a slider from minSld..maxSld to 0..1

function normSld(sld, a = 0, b = 1){

    return map(sld, minSld, maxSld, a, b);

}

​

// Round a floating point number to a given precision

function roundTo(num, places){

    return round(num * places) / places;

}

​

function keyPressed() {

  if (key == ' ' && !doInc){

    doStep();

  } else {

    doInc = !doInc

  }

}

​

​