​

let outputScale = 5;

let currentScale;

let myScaledCanvas;

let canvas;

​

// Background Color Palette

let BackColors = ["pink", "lightsalmon", "lightyellow", "lightgoldenrodyellow", "saddlebrown", "maroon", "darkolivegreen", "olive", "darkcyan", "white", "brown", "darksalmon", "lightblue"];

​

// Border Color Palette

let BordColors = ["black", "white", "yellow", "cyan", "red", "blue", "lime", "magenta", "indigo", "midnightblue"];

​

// Card Back Color Palette

let CardColors = ["firebrick", "dodgerblue", "gold", "seagreen"];

​

// Each back used only once

let CardColor = []

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

  var index = Math.floor(Math.random() * CardColors.length);

  CardColor[i] = CardColors[index];

  CardColors.splice(index, 1);

}

​

// Tape Names Array

let tapeNames = ["She's the Man", "Pinocchio", "Iron Man", "Mulan", "The Hangover", "La La Land", "She's All That", "Snow White", "The Rescuers", "Hercules", "Tarzan", "Brother Bear", "Notting Hill", "Zootopia", "The Avengers", "Easy A", "Clueless", "Bring It On", "Starstruck", "Mean Girls", "The Proposal", "21 Jump Street"];

​

// Each name used only once

let tapeName = [];

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

  var index = Math.floor(Math.random() * tapeNames.length);

  tapeName[i] = tapeNames[index];

  tapeNames.splice(index, 1);

}

​

//=================================================================

function setup() { // setup

  canvas = createCanvas(400, 400);

  myScaledCanvas = createGraphics(400, 400);

  currentScale = 1; // initialize to 1; don't touch

}

​

function draw() {

  // Don't touch the contents of the draw loop!

  // Instead, modify the guts of the drawMyDesign() function.

  myScaledCanvas.clear();

  myScaledCanvas.push();

  myScaledCanvas.scale(currentScale);

  drawMyDesign();

  myScaledCanvas.pop();

  image(myScaledCanvas, 0, 0); // Show on the main canvas

  noLoop();

}

​

// Scale up graphics before exporting

function exportHighResolution() {

  currentScale = outputScale; // High-Res Export

  myScaledCanvas = createGraphics(currentScale * 400, currentScale * 400);

  draw();

  save(myScaledCanvas, "highResImage", 'png');

  currentScale = 1; // Reset to default scale 1:1

  myScaledCanvas = createGraphics(400, 400);

  draw();

}

​

function keyReleased() {

  if (key == 'e') exportHighResolution();

}

​

function mousePressed() {

  loop();

}

​

//=================================================================

function drawMyDesign() {

  // Draw your design in this function -- into the scaled canvas.

  // Notice how all drawing functions begin with "myScaledCanvas."

​

  // Background all good

  for (let rx = 0; rx <= width; rx = rx + 67) {

    for (var ry = -1; ry <= height; ry = ry + 67) {

      myScaledCanvas.noStroke();

      myScaledCanvas.fill(random(BackColors));

      myScaledCanvas.rect(rx, ry, 67, 67);

    }

  }

​

  // Random Large Square for dynamics all good

  if (random(0, 1) < 0.5) {

    myScaledCanvas.rect(0, 200, 201, 201);

  } else {

    myScaledCanvas.rect(201, 0, 200, 200);

  }

​

  // Two loops for borders this is ok

  for (let rx = 0; rx <= width; rx = rx + 15) {

    myScaledCanvas.noStroke();

    myScaledCanvas.fill(random(BordColors));

    myScaledCanvas.rect(rx, 0, 15, 15);

  }

  for (let rx = 0; rx <= width; rx = rx + 15) {

    myScaledCanvas.noStroke();

    myScaledCanvas.fill(random(BordColors));

    myScaledCanvas.rect(rx, 385, 15, 15);

  }

​

  myScaledCanvas.rectMode(CENTER);

​

  // Tape Nested Loop

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

    for (let j = 0; j < 3; j++) {

​

      let ox = 35;

      let oy = 37;

      let x = ox + i * 70;

      let y = oy + j * 70;

​

      // Random chance of special tape

      if (random(0, 1) < 0.08) {

        drawSpecialTape(x, y);

      } else {

        drawTape(x, y, (i * 3) + j);

​

      }

    }

  }

​

  // Card nested loop

  for (let h = 0; h < 2; h++) {

    for (let k = 0; k < 2; k++) {

​

      let oa = 133;

      let ob = 137;

      let a = oa + h * 133;

      let b = ob + k * 137;

​

      // Random chance of card back

      if (random(0, 1) < 0.25) {

        drawCardBack(a, b, (h * 2) + k);

      } else {

        drawCard(a, b);

      }

    }

  }

​

}

​

// Heart for card

function drawHeart() {

  myScaledCanvas.beginShape();

  myScaledCanvas.curveVertex(200, 143);

  myScaledCanvas.curveVertex(200, 143);

  myScaledCanvas.curveVertex(180, 123);

  myScaledCanvas.curveVertex(150, 120);

  myScaledCanvas.curveVertex(130, 135);

  myScaledCanvas.curveVertex(125, 160);

  myScaledCanvas.curveVertex(150, 200);

  myScaledCanvas.vertex(195, 245);

  myScaledCanvas.vertex(200, 250);

  myScaledCanvas.vertex(205, 245);

  myScaledCanvas.curveVertex(250, 200);

  myScaledCanvas.curveVertex(275, 160);

  myScaledCanvas.curveVertex(270, 135);

  myScaledCanvas.curveVertex(250, 120);

  myScaledCanvas.curveVertex(220, 123);

  myScaledCanvas.curveVertex(200, 143);

  myScaledCanvas.curveVertex(200, 143);

  myScaledCanvas.endShape();

}

​

// Card

function drawCard(a, b) {

  myScaledCanvas.push();

  myScaledCanvas.stroke("black");

  myScaledCanvas.strokeWeight(2);

  myScaledCanvas.fill("white");

​

  myScaledCanvas.rotate(radians(random(-2, 2)));

  myScaledCanvas.rect(a, b, 65, 100, 5);

​

  myScaledCanvas.push();

  myScaledCanvas.noStroke();

  myScaledCanvas.fill("red");

  myScaledCanvas.translate(a - 39, b - 35);

  myScaledCanvas.scale(0.2);

  drawHeart();

  myScaledCanvas.pop();

​

  myScaledCanvas.textFont("Futura");

  myScaledCanvas.noStroke();

  myScaledCanvas.fill("red");

  myScaledCanvas.text("A", a - 25, b - 31);

​

  myScaledCanvas.push();

  myScaledCanvas.translate(a + 224.25, b + 31.5)

  myScaledCanvas.rotate(PI);

  myScaledCanvas.text("A", 200, 0);

  myScaledCanvas.pop();

​

  myScaledCanvas.push();

  myScaledCanvas.translate(a - 34, b - 36);

  myScaledCanvas.scale(0.07);

  drawHeart();

  myScaledCanvas.pop();

​

  myScaledCanvas.push()

  myScaledCanvas.translate(a + 33.5, b + 36);

  myScaledCanvas.rotate(PI);

  myScaledCanvas.scale(0.07);

  drawHeart();

  myScaledCanvas.pop();

  myScaledCanvas.pop();

​

}

​

// Card back

function drawCardBack(a, b, index) {

  myScaledCanvas.push();

  myScaledCanvas.stroke("black");

  myScaledCanvas.strokeWeight(2);

  myScaledCanvas.fill(CardColor[index]);

​

  myScaledCanvas.rotate(radians(random(-2, 2)));

  myScaledCanvas.rect(a, b, 65, 100, 5);

  myScaledCanvas.stroke("white");

  myScaledCanvas.strokeWeight(3);

  myScaledCanvas.circle(a, b, 40);

  myScaledCanvas.fill("white");

  myScaledCanvas.circle(a, b, 25);

  myScaledCanvas.noFill();

  myScaledCanvas.rect(a, b, 55, 90, 5);

  myScaledCanvas.pop()

​

}

​

// Normal Tape

function drawTape(x, y, index) {

  myScaledCanvas.push();

  myScaledCanvas.scale(1.9);

  myScaledCanvas.strokeWeight(3);

  myScaledCanvas.stroke(0);

​

  myScaledCanvas.fill(50);

  myScaledCanvas.rect(x, y, 50, 30);

​

  myScaledCanvas.fill(0);

  myScaledCanvas.circle(x - 15, y + 4, random(12, 14));

  myScaledCanvas.circle(x + 15, y + 4, random(10, 14));

​

  myScaledCanvas.fill(255);

  myScaledCanvas.circle(x - 15, y + 4, 10);

  myScaledCanvas.circle(x + 15, y + 4, 10);

​

  myScaledCanvas.fill(0);

  myScaledCanvas.rect(x, y - 12, 50, 7);

​

  myScaledCanvas.fill(50);

  myScaledCanvas.rect(x, y + 4, 25, 12);

​

  myScaledCanvas.fill("white");

  myScaledCanvas.strokeWeight(0.3);

  myScaledCanvas.textSize(3.2);

  myScaledCanvas.textFont("Futura");

  myScaledCanvas.textAlign(CENTER);

  myScaledCanvas.text(tapeName[index], x, y + 5.5);

  myScaledCanvas.pop();

}

​

// Special tape

function drawSpecialTape(x, y) {

  myScaledCanvas.push();

  myScaledCanvas.scale(1.9);

  myScaledCanvas.strokeWeight(3);

  myScaledCanvas.stroke(0);

​

  myScaledCanvas.fill("orange");

  myScaledCanvas.rect(x, y, 50, 30);

​

  myScaledCanvas.fill(0);

  myScaledCanvas.circle(x - 15, y + 4, random(12, 14));

  myScaledCanvas.circle(x + 15, y + 4, random(10, 14));

​

  myScaledCanvas.fill(255);

  myScaledCanvas.circle(x - 15, y + 4, 10);

  myScaledCanvas.circle(x + 15, y + 4, 10);

​

  myScaledCanvas.fill("darkorange");

  myScaledCanvas.rect(x, y - 12, 50, 7);

​

  myScaledCanvas.fill("yellow");

  myScaledCanvas.rect(x, y + 4, 25, 12);

​

  myScaledCanvas.fill("black");

  myScaledCanvas.strokeWeight(0.3);

  myScaledCanvas.textSize(3.5);

  myScaledCanvas.textFont("Futura");

  myScaledCanvas.textAlign(CENTER);

  myScaledCanvas.text("Rugrats", x, y + 5.5);

  myScaledCanvas.pop();

}