​

let outputScale = 5;

let currentScale;

let myScaledCanvas;

let canvas;

​

​

​

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

function setup() { // setup

  canvas = createCanvas(500, 800);

  myScaledCanvas = createGraphics(500, 800);

  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 * 500, currentScale * 800);

  draw();

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

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

  myScaledCanvas = createGraphics(500, 800);

  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."

​

​

  var a = random(148, 212);

  var b = random(169, 190);

  var c = random(132, 212);

​

​

  myScaledCanvas.background(a, b, c);

  myScaledCanvas.frameRate(1)

  myScaledCanvas.noLoop()

  myScaledCanvas.rectMode(CENTER)

​

​

  myScaledCanvas.translate(-10, -10)

  for (var i = 50; i < 500; i = i + 60) {

    for (var j = 50; j < 800; j = j + 60) {

​

      myScaledCanvas.noStroke()

      var r = random(0, 255); //red range is higher

      var g = random(0, 255); //green range is lower

      var b = random(0, 255); //blue range is in the middleish

      myScaledCanvas.fill(r, g, b, 200);

      myScaledCanvas.rect(i, j, random(20, 50), random(10, 70));

​

      var r = random(60, 240); //high red range

      var g = random(200, 255); //small green range

      var b = random(200, 255); //small blue range

      myScaledCanvas.fill(r, g, b);

      myScaledCanvas.circle(i + random(i, i * random(0, 5)), j, random(5, 70)); //allows the bottom circle to be placed in a different x coordinate

​

      var r = random(0, 150); //low red range

      var g = random(0, 150); // high green range

      var b = random(0, 150);

      myScaledCanvas.fill(r, g, b);

      myScaledCanvas.stroke("white")

      myScaledCanvas.circle(i, j, random(20, 40) / random(0.5, 5));

​

    }

  }

​

}