const drawSteps = 50;

const frames = 100000;

​

function setup() {

  createCanvas(100, 100);  

  windowResized();

​

  // console.log(chaos(1, 10, 0));  

  colorMode(HSB, 1);

}

​

function windowResized() {

  const size = min(windowWidth, windowHeight);

  resizeCanvas(size, size);  

}

​

function chaos(x, y, t) {

  return {

    x: pow(x, 2) - x * t + y * y - x,

    y: pow(-y, 2) - pow(t, 2) - x * y - x * t - y * t - y, 

    // x: (y + x) * t,

    // y: (y * 2 - x * 1.5) * t,

  };

}

​

function constructChaosShape(steps, x, y, t) {  

  let shape = [];

  for (let i=0; i<steps; i++) {

    shape.push({x, y});

    ({x, y} = chaos(x, y, t))

    if (x == Infinity || y == Infinity)

      break;

  }

  return shape;

}

​

function constructBoundingRect(shape) {

  const xs = shape.map(s => s.x);

  const ys = shape.map(s => s.y);

​

   const maxX = max(...xs);

   const minX = min(...xs);

   const maxY = max(...ys);

   const minY = min(...ys);         

​

  const rangeX = maxX - minX;

  const rangeY = maxY - minY;

  return { 

    maxX, minX, 

    maxY, minY,

    rangeX, rangeY,

  }

}

​

function constructShape(x, y, t) {

  const shape = constructChaosShape(steps, x, y, t);

  const boundingRect = constructBoundingRect(shape);

  return shape.map(p => getLocalP(p, boundingRect));

}

​

function getLocalP(p, boundingRect) {

  const { minX, rangeX, minY, rangeY } = boundingRect;

  return {

    x: 0.25 + 0.5 * (p.x - minX) / rangeX,

    y: 0.25 + 0.5 * (p.y - minY) / rangeY,

  }

}

​

function lerpShape(shape, f) {

  const v = f * shape.length;

  const i1 = constrain(floor(v), 0, shape.length-1)

  const i2 = constrain(ceil(v) , 0, shape.length-1)

  const p1 = shape[i1];

  const p2 = shape[i2];

​

  const lf = fract(v);

  return {

    x: lerp(p1.x, p2.x, lf),

    y: lerp(p1.y, p2.y, lf),

  }

}

​

let t = 0;

let mx, my;

function draw() {

  t = frameCount / frames;

  mx = mouseX / width;

  my = mouseY / height;

  background(0);

  strokeWeight(2);

  noFill();

  drawShape(t);

}

​

function drawShape(t) {

  const lt = invCosn(t);

  const v = lt * 0.1;

  let shape = constructShape(v, v, v);

  const step = 1 / drawSteps;

  for (let i=0; i<drawSteps; i++) {

    const f = i / drawSteps;

    let p1 = lerpShape(shape, f - 1 * step);

    let p2 = lerpShape(shape, f + 0 * step);

    let p3 = lerpShape(shape, f + 1 * step);

    let p4 = lerpShape(shape, f + 2 * step);

​

//     circle(

//       p1.x * width,

//       p1.y * height,

//       10

//     );

    // line(

    //   p1.x * width,

    //   p1.y * height,

    //   p2.x * width,

    //   p2.y * height

    // );

    stroke(f, 0.75, 1, 1);

    curve(

      p1.x * width,

      p1.y * height,

      p2.x * width,

      p2.y * height,

      p3.x * width,

      p3.y * height,

      p4.x * width,

      p4.y * height

    )

  }

}

​

function sinn(v) {

  return sin(v * TAU) * 0.5 + 0.5;

}

function cosn(v) {

  return cos(v * TAU) * 0.5 + 0.5;

}

function invCosn(v) {

  return 1 - cosn(v);

}