// Mertcan Çezik

// https://editor.p5js.org/cezikmertcan/sketches/JiW8l-bCu

// https://youtu.be/-OL_sw2MiYw

​

const boxSize = 10; //Box size in px

let boxes = [];

let infoP;

let minX, maxX;

let N = 0;

​

let isRunning = false;

​

let runButton;

​

function setup() {

  var canvas = createCanvas(750, 750);

  infoP = createP();

  createP("You can click on canvas to increase N or you can run it.")

  runButton = createButton("Run");

​

​

  noLoop();

​

  boxes.push(new Box(0, 0));//Adding the first box

​

  minX = Infinity;

  maxX = -1 * Infinity;

​

​

  canvas.mousePressed(onCanvasMousePressed);

  runButton.mousePressed(onRunButtonMousePressed);

​

}

​

function onRunButtonMousePressed() {

  isRunning = !isRunning;

​

  if (isRunning) {

    runButton.html("Stop");

    frameRate(5);

    loop();

  }

  else {

    runButton.html("Run");

    noLoop();

  }

}

​

function onCanvasMousePressed() {

  if (!isRunning) {

    createOthers();

    redraw();

  }

}

​

function createOthers() {

  var nextBoxes = boxes.filter(a => !a.done);

  for (let box of nextBoxes) {

    box.createOthers();

  }

}

function draw() {

​

  if (isRunning) {

    createOthers();

  }

  background(0);

​

  translate(width / 2, height / 2);

  if (maxX === -1 * Infinity) {

    scale(40);

  }

  else {

    var scaleFactor = (width / (maxX - minX));

    scale(scaleFactor);

  }

  rectMode(CENTER);

  for (let box of boxes) {

    box.show();

  }

​

​

  var newBoxesCount = boxes.filter((a) => !a.done).length;

  for (let box of boxes) {

    minX = min(box.x * boxSize, minX);

    maxX = max(box.x * boxSize, maxX);

  }

  minX -= boxSize * 1.5;

  maxX += boxSize * 1.5

​

  N++;

​

  infoP.html(`N:${N}, Total Box Count: ${boxes.length}, New Boxes:${newBoxesCount}`);

​

​

}