​

​

let ida;

​

function preload() {

  ida = loadImage('ida.png');

}

​

function setup() {

  createCanvas(500, 800);

  angleMode(DEGREES);

​

}

​

function draw() {

  var color1 = color(124, 117, 189);

  var color2 = color(235, 160, 192);

  setGradient(0, 0, 500, 800, color1, color2, "Y");

​

  stars();

  moon();

  frontMountains();

  middleMountains();

  backMountains();

  pedestal(200, 800, 200, 460, 250, 480, 250, 800);

​

  //if(mouseIsPressed){

  push();

  translate(227, 320);

  scale(0.2);

  image(ida, 0, 0);

  pop();

  //}

​

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

  if (axis == "Y") { // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      var inter = map(i, y, y + h, 0, 1);

      var c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis == "X") { // Left to right gradient

    for (let j = x; j <= x + w; j++) {

      var inter2 = map(j, x, x + w, 0, 1);

      var d = lerpColor(c1, c2, inter2);

      stroke(d);

      line(j, y, j, y + h);

    }

  }

}

​

function stars() {

  noStroke();

  for (i = 0; i < 30; i++) {

    let x = random(10, 490);

    let y = random(10, 350);

    fill(253, 255, 209);

    ellipse(x, y, 4);

  }

  noLoop();

}

​

function moon() {

  fill(250, 250, 250);

  push();

  translate(width / 2, 250);

  scale(2.5, 2.5);

  rotate(180);

  beginShape();

  vertex(30, 20);

  bezierVertex(80, 20, 80, 75, 30, 75);

  bezierVertex(50, 75, 70, 35, 30, 20);

  endShape();

  pop();

}

​

function frontMountains() {

  fill(84, 103, 150);

  beginShape();

  vertex(0, 800);

  vertex(50, 600);

  vertex(250, 800);

  vertex(440, 600);

  vertex(500, 800);

  endShape();

}

​

function middleMountains() {

  fill(84, 103, 150, 170);

  beginShape();

  vertex(0, 800);

  vertex(0, 550);

  vertex(90, 800);

  vertex(200, 520);

  vertex(400, 800);

  vertex(500, 520);

  vertex(500, 800);

  endShape();

}

​

function backMountains() {

  fill(84, 103, 150, 60);

  beginShape();

  vertex(0, 800);

  vertex(50, 490);

  vertex(250, 700);

  vertex(370, 500);

  vertex(500, 800);

  endShape();

}

​

function pedestal(x1, y1, x2, y2, x3, y3, x4, y4) {

  // light side

  fill(245, 183, 154);

  quad(x1, y1, x2, y2, x3, y3, x4, y4);

  // dark side

  fill(224, 158, 128);

  quad(x1 + 50, y1, x2 + 50, y2 + 20, x3 + 50, y3 - 20, x4 + 50, y4);

  // top

  fill(255, 209, 189);

  quad(x1, y2, x3, y2 - 15, x3 + 50, y2, x4, y2 + 20);

  // inner rect

  noFill();

  stroke(224, 158, 128);

  strokeWeight(4);

  quad(x1 + 17, y2 + 1, x3, y2 - 9, x3 + 34, y2 + 1, x4, y2 + 13);

}

​