var canDraw = true;

var coeff = {};

var ansPoints = {};

var maxCircles = 50;

var drawCounter = 0;

var animResol = 500;

var animFram = 0;

var revolveResol = 1000;

var cirGr;

var previewResol = 300;

var revolveFrame = 0;

​

function setup() {

  createCanvas(600, 400);

  button = createButton('Start');

  button.position(250, 420);

  button.mousePressed(calcAndStart);

  circlesSlider = createSlider(1, maxCircles, maxCircles / 2);

  infoLabel = createElement('label', 'Draw a single loop in canvas');

  infoLabel.position(400, 10);

}

​

function mouseDragged() {

  if (canDraw)

    if (mouseX < width - 10 && mouseY < height - 10 && mouseX > 10 && mouseY > 10)

      points.push(createVector(mouseX, mouseY));

}

​

function calcAndStart() {

  if (canDraw) {

    infoLabel.html('Calculating...');

    points.push(points[0]);

    canDraw = false;

    calcAllCoeff();

    // Final shape calculation

    for (var i = 0; i <= maxCircles; ++i) {

      ansPoints[i] = [];

      for (var j = 0; j < previewResol; ++j) {

        var x = map(j, 0, previewResol, -1 * Math.PI, Math.PI);

        var cn = coeff[i];

        var cs = createVector(Math.cos(i * x), Math.sin(i * x));

        var vec = complexMult(cn, cs);

        if (i != 0) {

          vec.add(ansPoints[i - 1][j]);

          cn = coeff[-1 * i];

          cs = createVector(Math.cos(i * x), Math.sin(-1 * i * x));

          vec.add(complexMult(cn, cs));

        }

        ansPoints[i].push(vec);

      }

      ansPoints[i].push(ansPoints[i][0]);

    }

    console.log(points.length);

    console.log("Calculated");

    drawCounter++;

    cirGr = new circlesGroup(coeff);

  }

}

​

function calcAllCoeff() {

  var n = maxCircles;

  for (i = -1 * n; i <= n; ++i) {

    coeff[i] = calcCoeff(i);

  }

}

​

function calcCoeff(n) {

  var ans = createVector(0, 0);

  for (var i = 0; i < points.length - 1; ++i) {

    ans.add(integrateLine(i, n));

  }

  return ans;

}

​

function complexMult(v1, v2) {

  var a = v1.x;

  var b = v1.y;

  var c = v2.x;

  var d = v2.y;

  return createVector((a * c) - (b * d), (b * c) + (a * d));

}

​

function integrateLine(pos, n) {

  var ll = map(pos, 0, points.length - 1, -1 * Math.PI, Math.PI);

  var ul = map(pos + 1, 0, points.length - 1, -1 * Math.PI, Math.PI);

  var ans = createVector(0, 0);

  for (var i = 0; i < 10; i++) {

    var x = map(i, 0, 10, ll, ul);

    var cs = createVector(Math.cos(n * x), Math.sin(-1 * n * x));

    var midvec = p5.Vector.lerp(points[pos], points[pos + 1], i / 10);

    ans.add(complexMult(midvec, cs));

  }

  ans.div(points.length - 1);

  ans.div(10);

  return ans;

}

​

function alwaysDraw() {

  noFill();

  stroke(0);

  strokeWeight(1);

  beginShape();

  for (var i = 0; i < points.length; ++i) {

    vertex(points[i].x, points[i].y);

  }

  endShape();

  //if (points.length > 0) {

  //    stroke(255, 0, 0);

  //    strokeWeight(4);

  //    point(points[1].x, points[1].y);

  //}

}

​

function drawAnim() {

  stroke(255, 0, 0);

  strokeWeight(1);

  beginShape();

  var curr = map(animFram, 0, animResol, 0, maxCircles);

  var left = Math.floor(curr);

  var right = left + 1;

  for (var i = 0; i <= previewResol; ++i) {

    var temp = p5.Vector.lerp(ansPoints[left][i], ansPoints[right][i], (curr - left));

    vertex(temp.x, temp.y);

  }

  endShape();

  animFram++;

  infoLabel.html("Showing Frames "+animFram+"/"+animResol);

  if (animFram == animResol) {

    drawCounter++;

  }

}

​

function draw() {

  background(220);

  alwaysDraw();

  if (drawCounter == 1) {

    drawAnim();

  }

  if (drawCounter == 2) {

    cirGr.update();

    cirGr.show();

    revolveFrame++;

    infoLabel.html("Showing Frames "+revolveFrame+"/"+revolveResol);

    if(revolveFrame==revolveResol) {

      revolveFrame = 0;

      cirGr.points = [];

    }

  }

}