Sally Linares 

  March 25, 2024 

  Landscape with Functions 

*/

​

var columnSlider;

​

function setup() {

  var canvas = createCanvas(600, 400);

  var main = canvas.parent();

  console.log(main);

  var landscapeButton = createButton("Generate a landscape");

  landscapeButton.mousePressed(landscape);

  landscapeButton.parent(main);

  var saveButton = createButton("Save image");

  saveButton.mousePressed(saveImage);

  saveButton.parent(main);

  saveButton.id("Save-button");

  saveButton.class("button-class");

  createSpan("Set number of trees:");

  columnSlider = createSlider(0, 20, 10);

  columnSlider.input(landscape);

  landscape();

}

​

function saveImage() {

  save("landscape.png");

}

​

function landscape (){

  background("lightblue");

  fill("green");

  noStroke();

  rect(0, 300, width, 100);

//pond

  fill("lightblue");

  ellipse(300, 370, 400, 40);

  Sun(15, 50);

​

  //Three circles

  fill("lime");

  circle(120, 330, 20);

  fill("aqua");

  circle(300, 310, 15);

  fill("deeppink");

  circle(550, 320, 10);

//number of trees

  var n = columnSlider.value();

  var w = width/ n; //width of each column

​

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

    var y = random(20, 140);

    cloud(x, y, 'white');

    var s = random(50, 100);

    tree(x, 220, s);

    var f = random(50, 100);

    flower(x, 290, f);

    var r = random(90, 140)

    rain(x, y + 30, r);

  }

}

​

function Sun(){

  fill("Gold");

  circle(30, random(130), 80);

}

​

function rain(x,y,r){

  fill("DeepSkyBlue");

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

  circle(x - 40, y + 60, 9);

  circle(x, y, 4);

}

​

function cloud(x, y, c){

  fill(c);

  circle(x , y, 50);

  circle(x + 20, y + 20, 50);

  circle(x + 20, y + 20, 50);

  circle(x - 20, y + 20, 50);

}

​

function tree(x, y, s) {

  fill('brown');

  rect(x, y, 20, 100, 5);

  fill('green');

  circle(x + 10, y, s);

}

​

function flower(x, y, f){

  fill("ForestGreen");

  rect(x - 15, y - 15, 10, 60, 10);

 fill(random(255), random(255), random(255));

  ellipse(x,y,20,20)

  ellipse(x-15,y+5,20,20)

  ellipse(x-25,y-5,20,20)

  ellipse(x-17,y-20,20,20)

  ellipse(x,y-15,20,20)

}

​

​

​

​

​

​