let t = 0;

let s;

let gridSize = 40;

let gridSizeX, gridSizeY;

let opacity = 255;

let string = "a";

let drawing;

let overlay;

let composite;

let actions = [0];

let actionsIndex = 0;

let capture;

let letterVisibility = true;

​

let frames = [];

const FRAME_RATE = 12;

const DELAY_SECONDS = 5;

let delayFrames = DELAY_SECONDS * FRAME_RATE;

​

let points = [];

​

let colorArray = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  drawing = createGraphics(width, height);

  overlay = createGraphics(width, height);

  composite = createGraphics(width, height);

​

  capture = createCapture(VIDEO);

  capture.hide();

​

  gridSizeX = ((gridSize * capture.height) / capture.width) * 3;

  gridSizeY = ((gridSize * capture.height) / capture.width) * 2;

​

  colorArray = [

    [185, 85, 200],

    [95, 195, 145],

    [70, 85, 245],

    [255, 255, 255]

  ];

}

​

function keyPressed() {

  if (key == "ArrowDown") {

    save(composite,"a", "png");

  } else if (keyCode == 16) {

    letterVisibility = !letterVisibility

  }

  deleteStroke();

}

​

function keyTyped() {

  if (!key) {

    string = "a";

  } else {

    string = key;

  }

}

​

function mousePressed() {

  actions.push(0);

  actionsIndex++;

}

​

function backgroundLetter() {

  if (letterVisibility == true) {

    stroke(255);

  } else {

    noStroke()

  }

​

  noFill();

  textSize(height);

  textAlign(CENTER, CENTER);

  text(string, width / 2, height / 2);

}

​

function deleteStroke() {

  if (key == "ArrowLeft") {

    if (actions[actionsIndex] == 0) {

      actions.pop();

      actionsIndex = max(actionsIndex - 1, 0);

    }

​

    points.splice(points.length - actions[actionsIndex], actions[actionsIndex]);

    actionsIndex = max(actionsIndex - 1, 0);

​

    if (actions.length > 1) {

      actions.pop();

    } else {

      actions = [0];

    }

  }

}

​

function draw() {

  background(0);

  t++;

​

  // Store the current frame in the array

  frames.push(capture.get());

​

  // Keep the size of the array to the delayFrames length

  if (frames.length > delayFrames) {

    frames.shift();

  }

​

  if (mouseIsPressed && t % 6 ==0) {

    actions[actionsIndex] = actions[actionsIndex] + 1;

    s = 80;

    points.push(

      (brush = {

        x: Math.round(mouseX / gridSizeX) * gridSizeX,

        y: Math.round(mouseY / gridSizeY) * gridSizeY,

        s: s,

        fillColor: colorArray[Math.round(random(3))]

      })

    );

  } else {

    size = 0;

  }

​

  if (frames.length === delayFrames) {

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

      let s = points[i].s + Math.sin(t/30 + i) * 50;

      let x = points[i].x - s / 2 + Math.sin(t/7.5 + i) * 10 ;

      let y = points[i].y - (s * capture.height) / capture.width / 2 + Math.cos(t/7.5 + i) * 10 ;

​

      overlay.noStroke();

      overlay.fill(points[i].fillColor);

      overlay.rect(x, y, s, (s * capture.height) / capture.width,20);

    }

​

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

      let s = points[i].s +  Math.sin(t/30 + i) * 50;

      let x = points[i].x - s / 2 + Math.sin(t/7.5 + i) * 10;

      let y = points[i].y - (s * capture.height) / capture.width / 2 + Math.cos(t/7.5 + i) * 10 ;

      drawing.push();

      drawing.beginClip();

      drawing.rect(x, y, s, (s * capture.height) / capture.width,20);

      drawing.endClip();

      drawing.image(

        frames[i % delayFrames],

        x,

        y,

        s,

        (s * capture.height) / capture.width

      );

      drawing.pop();

    }

    drawing.filter(THRESHOLD, 0.5);

  }

​

  composite.image(overlay, 0, 0);

  composite.push();

  composite.blendMode(MULTIPLY);

  composite.image(drawing, 0, 0);

  composite.pop();

  image(composite,0,0)

​

  backgroundLetter();

}

​