tracking.js

// following tracks

var track = [];

function setup() {
  createCanvas(340, 340);
  for (var x = width / 4; x < 3*width/4; x += 10) {
    track.push({
      x: x,
      y: height/4
    });
  }
  for (var y = height/4; y < 3*height/4; y += 10) {
    track.push({
      x: 3*width/4,
      y: y
    });
  }
  // x, y already defined in the previous for loops
  for (x = 3*height/4; x > height/4; x -= 10) {
    track.push({
      x: x,
      y: 3*height/4
    });
  }
  for (y = 3*height/4; y > height/4; y -= 10) {
    track.push({
      x: width/4,
      y: y
    });
  }
}

function draw() {  
  background(220);
  // drawTrackLine();
  // drawTrackPoints();
  drawMarchingRects();
}

function mousePressed() {
  // track = [];
}

function mouseDragged() {
  track.push({
    x: mouseX,
    y: mouseY
  });
}

function drawTrackPoints() {
  for (var i = 0; i < track.length; i++) { // "i++" is another way of writing "i = i + 1"
    var pt = track[i];
    noFill();
    stroke(120);
    ellipse(pt.x, pt.y, 3);
  }
}

function drawTrackLine() {
  noFill();
  stroke(120);
  beginShape();
  for (var i = 0; i < track.length; i++) { // "i++" is another way of writing "i = i + 1"
    var pt = track[i];
    vertex(pt.x, pt.y);
  }
  endShape();
}

var march = [
  {index: 0, size: 50},
  {index: 1, size: 40},
  {index: 2, size: 30},
  {index: 3, size: 20},
  {index: 4, size: 10}
];

function drawMarchingRects() {
  rectMode(CENTER);
  noFill();
  stroke(50);
  
  if (track.length > 4 && ! mouseIsPressed) {  
    for (var i = 0; i < 5; i++) {     // "i++" is another way of writing "i = i + 1"
      var m = march[i];               // get the current march information 
      if (m.index >= track.length) {  // loop around if too far
        m.index = 0;
      }
      var pt = track[m.index];        // get the track point for this march
      rect(pt.x, pt.y, m.size, m.size);
      m.index += 1;                   // move the march to the next point
    }
  }
}