​

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

  draw();

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

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

  myScaledCanvas = createGraphics(800, 800);

  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 = 20 //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);

  //myScaledCanvas.blendMode(MULTIPLY);

​

  myScaledCanvas.fill(random(142, 230), 170, random(33, 80));

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

    myScaledCanvas.triangle(i * 50, 550, i * 45, 550, i * 35, 220)

    myScaledCanvas.triangle(i * 25 + 10, 350, i * 45, 350, i * 35, 220)

​

  }

​

  myScaledCanvas.fill(50, 35, 32);

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

​

  myScaledCanvas.fill("violet");

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

​

  myScaledCanvas.fill(50, 35, 32);

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

​

  myScaledCanvas.fill("violet");

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

}