createCanvas(600, 400);

  landscape();

}

​

// Slide Variable

var columnSlider;

​

function setup() {

  var canvas = createCanvas(600, 400);

  var main = canvas.parent();

  console.log(main);

​

  // Generate Image Button

  var landscapeButton = createButton("Generate an image");

  landscapeButton.mousePressed(landscape);

  landscapeButton.parent(main);

​

  // Save Image Button 

  var saveButton = createButton("Save image");

  saveButton.mousePressed(saveImage);

  saveButton.parent(main);

  saveButton.id("save-button");

  saveButton.class("button-class");

​

  //Slider 

  createSpan("Slide for Animation");

  columnSlider = createSlider(0, 30, 10);

  columnSlider.input(landscape);

​

  landscape();

}

​

//Save Image Button 

function saveImage() {

  save("landscape.png");

}

​

// LANDSCAPE

function landscape() {

  background("black");

  fill("khaki");

  noStroke();

  //circle (20, 20, 25)// Moon

​

  //Moon 

  Moon(20, 50);

  for (var x = 0; x <= width; x += 20) {

  var y = random(40, 290);

  star(x, y, "yellow");

​

  var r = random(20, 100);

  mountain(x, 320, r);

  }

}

​

  //stars

 function star(x, y, c) {

  fill("yellow");

  //circle(x, y, 10);

  circle(x - 20, y + 30, 9);

  circle(x, y, 4);

}

​

//Mountains 

function mountain(x, y, r) {

  fill("skyblue");

  square(x, y, 100);

  fill("white");

  circle(x + 10, y, r);

}

​

//Moon

function Moon() {

  noStroke();

  fill("khaki");

 circle(20, random(150), 75);

}

​