let slider;

let colorPicker;

let lander;

​

function setup() {

  createCanvas(600, 400);

  noStroke();

  slider = createSlider(0, 300, 50, 1);

  colorPicker = createColorPicker("cyan");

  lander = createButton("Land");

  lander.mousePressed(() => (ufo.landing = true));

}

​

function drawSky() {

  background(colorPicker.value());

  strokeWeight(2);

  stroke("white");

  randomSeed(3);

  for (let i = 0; i < 1000; i++) {

    point(random(0, width), random(0, height));

  }

  noStroke();

}

​

function drawGrass() {

  fill("green");

  rect(0, 300, width, height);

}

​

function drawSun() {

  fill("yellow");

  circle(width, 0, 200);

}

​

function drawUfo() {

  if (ufo.landing) {

    if (ufo.y < 350) ufo.y += 1;

  } else {

    ufo.x += 1;

    ufo.y = slider.value();

    if (ufo.x > width) {

      ufo.x = 0;

    }

  }

  if (ufo.light) {

    fill("white");

    triangle(ufo.x, ufo.y, ufo.x - 20, 350, ufo.x + 20, 350);

    ellipse(ufo.x, 350, 40, 20);

  }

  fill("gray");

  ellipse(ufo.x, ufo.y, 80, 30);

  ellipse(ufo.x, ufo.y - 10, 30, 30);

}

​

function mousePressed() {

  if (mouseY < 350) ufo.light = true;

}

​

function mouseReleased() {

  ufo.light = false;

}

​

function draw() {

  drawSky();

  drawGrass();

  drawSun();

  drawUfo();

}

​