​

let inc = 0.1;

let minInc = 0.05;

let maxInc = 10;

let minSld = 0;

let maxSld = 1000000;

​

let period = 40;

let startDiam = 10;

let diagonal;

let diagonalRoot;

let sldPeriod;

let spnPeriodVal;

let sldStepInc;

let spnStepIncVal;

​

function setup() {

  createCanvas(400, 400);

​

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

  diagonalRoot = sqrt(diagonal);

​

  createElement("br");

  createSpan("period");

  sldPeriod = createSlider(0, 200, period);

  spnPeriodVal = createSpan(sldPeriod.value());

​

  createElement("br");

  createSpan("stepInc");

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

    // valToSld(minStepInc),

    // valToSld(maxStepInc),

    // valToSld(stepInc));

//  spnIncVal = createSpan(sldToVal(sldStepInc.value()));

    spnIncVal = createSpan(sldToInc(sldInc.value()));

  console.log("si: " + inc);

  console.log("siS: " + incToSld(inc));

  console.log("mi: " + minInc);

  console.log("miS: " + incToSld(minInc));

  console.log("ma: " + maxInc);

  console.log("maS: " + incToSld(maxInc));

  console.log("sVal: " + sldInc.value());

  noFill();

  stroke(0);

​

}

​

function sldToInc(sld) {

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

  let exp = pow(norm, 2);

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

  return inc;

}

​

function incToSld(inc) {

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

  let norm = sqrt(exp, 2);

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

  return sld;

}

​

function draw() {

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

​

  background(220);

  stroke(0);

​

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

    let [s, ys, i, yi] = sysiyiFromX(x);

​

    strokeWeight(4);

    stroke(150);

    point(x, ys);

    strokeWeight(2);

    stroke(255, 0, 0);

    point(x, yi);

  }

  strokeWeight(1);

  stroke(0);

  line(mouseX, 0, mouseX, height);

  noStroke();

  fill(0);

  let [s, ys, i, yi] = sysiyiFromX(mouseX);

  text("s: " + s, 10, 20);

  text("i: " + i, 10, 30);

​

}

​

function sysiyiFromX(x) {

  let s = map(x, 0, width, minSld, maxSld);

  let ys = map(s, minSld, maxSld, 0, height);

  ys = height - ys;

​

  let i = sldToInc(s);

  let yi = map(i, minInc, maxInc, 0, height);

  yi = height - yi;

  return [s, ys, i, yi];

}

​

function draw2() {

  // background(220);

​

  text("stepInc: " + sldStepInc.value(), 10, 20);

​

  stroke((frameCount / 100) % 255, 10);

​

  translate(width / 2, height / 2);

​

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

​

  //stroke(0, 0, 255 - step * (255 / period));

  drawStep(p);

​

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

​

  //stroke(255 - step * (255 / period), 0, 0);

  drawStep(p2);

​

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

​

  //noLoop();

​

  //   drawSmallerSteps(p / 2);

  //   drawLargerSteps(p * 2);

​

  //   step = step + stepInc;

  //   if (step > diagonalRoot){

  //     while (step * step 

  //    step = 1;

  //   }

}

​

function drawStep(p) {

​

  //stroke(255, 0, 0);

  ellipse(0, 0, p);

}

​

function drawSmallerSteps(ps) {

  if (ps < 1) {

    return;

  }

​

  //stroke(0, 255, 0);

  ellipse(0, 0, ps);

​

  drawSmallerSteps(ps / 2);

}

​

function drawLargerSteps(pl) {

  console.log(pl);

  if (pl > diagonal) {

    return;

  }

​

  //stroke(0, 0, 255);

  ellipse(0, 0, pl);

​

  drawLargerSteps(pl * 2);

}

​

function keyPressed() {

  loop();

}