const groundElevation = 100

let grassTexture

let ufoTexture

let starTexture

let skyRotation = 0

​

function preload() {

  grassTexture = loadImage('grass.png')

  ufoTexture = loadImage('ufo.png')

  starTexture = loadImage('stars.png')

}

​

function setup() {

  createCanvas(500, 500, WEBGL);

  noStroke()

}

​

function draw() {

  directionalLight(255, 255, 255, -1, 1, -1)

  spotLight(255, 255, 255, ufo.x, ufo.y, ufo.z, 0, 1, 0, Math.PI/6, 3)

  drawBackground()

  drawGround()

  drawUfo()

  moveUfo()

}

​

function drawBackground() {

  push()

  rotateZ(skyRotation)

  translate(0, 0, -800)

  texture(starTexture)

  plane(2000, 2000)

  skyRotation += 0.002

  pop()

}

​

function drawGround() {

  push()

  texture(grassTexture)

  translate(0, 100, 0)

  rotateX(radians(90))

  //fill('lightgreen')

  plane(900, 550)

  pop()

}

​

function drawUfo() {

  push()

  texture(ufoTexture)

  translate(ufo.x, ufo.y, ufo.z)

  rotateY(ufo.spin)

  ellipsoid(100, 20, 100);

  translate(0, -15, 0);

  sphere(30)

  translate(0, 35, 0)

  emissiveMaterial('white')

  sphere(10)

  pop()

}

​

function moveUfo() {

  ufo.spin += 0.01

  if (ufo.z < 0) {

    ufo.z += 1

  } else if (ufo.y < groundElevation - 20) {

    ufo.y += 1

  } else {

    noLoop()

  }

}