Interactive Landscape

  with dom elements

  3.24.2024

*/

​

var columnSlider;

​

function setup() {

  var canvas = createCanvas(600, 400);

  var main = canvas.parent();

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

  landscapeButton.mousePressed(universe);

  var saveButton = createButton("Save image");

  saveButton.mousePressed(saveImage);

  saveButton.id('save-button');

  saveButton.class('button-class');

  createSpan("Set number of planets:")

  columnSlider = createSlider(0, 20, 10);

  columnSlider.input(universe);

  universe();

}

​

function saveImage() {

  save("universe.png");

}

​

function universe() {

  background("#040C6D");

​

  var numStars = columnSlider.value();

​

  // planets and stars

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

    var x = random(width);

    var y = random(0, 400);

    var size = random(5, 50);

    var r = random(0,255);

    var g = random(0,255);

    var b = random(0,255);

    var starColor = color(r, g, b);

    noStroke();

    fill(starColor);

    circle(x, y, size);

  }

  // sun

  var sunX = width-50;

  var sunY = 60;

  fill("#FFD700"); 

  circle(sunX, sunY, 300);

​

​

}

​

​