​

let outputScale = 5;

let currentScale;

let myScaledCanvas;

let canvas;

​

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

function setup() { // setup

  canvas = createCanvas(700, 400);

  myScaledCanvas = createGraphics(700, 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 * 700, currentScale * 400);

  draw();

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

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

  myScaledCanvas = createGraphics(700, 400);

  draw();

}

​

function keyReleased() {

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

}

​

function mousePressed() {

  loop();

}

​

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

function drawMyDesign() {

​

  myScaledCanvas.background(253, 153, 141);

  //tree variables

  var tx = 200 //position

  var ty = 120

  var tz = 15 //trunk width

  var tq = 90 //trunk height

  var tu = 230 //triangle needles shape first point

  var tt = 170

  var ta = 180 // second point both coords

  var te = 210 //third

  var td = 75

​

  //background clouds

  myScaledCanvas.noStroke();

​

  myScaledCanvas.colorMode(HSB);

​

​

  // var cloud1 = random(205, 245)

  // myScaledCanvas.fill(cloud1, 130, 140)

  // myScaledCanvas.circle(random(width), random(height), 75)

​

  var cloud2 = random(255, 250)

  myScaledCanvas.fill(cloud2, 30, 100)

  myScaledCanvas.ellipse(random(width), random(height), 150)

​

​

  myScaledCanvas.fill("violet");

  myScaledCanvas.ellipse(400, 380, 900, 400);

​

  //top trees

  myScaledCanvas.fill(50, 35, 32);

  myScaledCanvas.rect(tx, ty, tz, tq);

​

  myScaledCanvas.fill(random(320, 360), 60, random(103, 170));

  myScaledCanvas.triangle(tu, tt, ta, ta, te, td);

​

  myScaledCanvas.fill(50, 35, 32);

  myScaledCanvas.rect(tx + 40, ty - 15, tz, tq);

​

  myScaledCanvas.fill(random(330, 360), 70, random(103, 170));

  myScaledCanvas.triangle(tu + 40, tt - 15, ta + 40, ta - 15, te + 40, td - 15);

​

  //for loop bottom trees

  myScaledCanvas.fill(random(180, 200), 170, random(33, 50));

​

  var numTrees = 20

  for (var i = -.5; i < numTrees; i++) {

​

    var tx1 = i * 50 + random(-10, 10);

    var ty1 = 350;

​

    var tx2 = i * 50 + 50;

    var ty2 = 150 + random(-50, 30);

​

    var tx3 = i * 50 + 100;

    var ty3 = 350;

​

    myScaledCanvas.triangle(tx1, ty1, tx2, ty2, tx3, ty3);

  }

​

  myScaledCanvas.fill(random(10, 30), 170, random(33, 50));

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

​

    myScaledCanvas.rect(i * 50 + 10, 350, 20, 35);

  }

​

}