​

let cloud;

let rocket;

let astro;

let posX = 0;

let posY = -500;

​

//inserting images

function preload() {

  cloud = loadImage("cloud.png");

  rocket = loadImage("rocket.png");

  astro = loadImage("astro.png");

  sky = loadImage("sky.png");

}

​

function setup() {

  createCanvas(600, 600);

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

    clouds.push(new Cloud(random(width), random(100, 400)));

  }

}

​

function draw() {

  background(1, 150, 300);

  image(sky, 0, 0);

  for (let i = 0; i < clouds.length; i++) {

    clouds[i].run();

  }

​

  //clouds moving left/right

  // image(cloud, -posX + 800, 0, 250, 200);

  // image(cloud, posX + 400, 110, 280, 200);

  // image(cloud, -posX + 50, 100, 350, 250);

  // image(cloud, posX + 100, 0, 300, 200);

  // image(cloud, -posX + 600, 100, 250, 200);

​

  //rocket going upwards and disappearing off the screen

  image(rocket, 0, -posY, 0, 0);

​

  //controlling the astro with mouse

  image(astro, mouseX, mouseY, 120, 180);

​

  // //speed of clouds

  // posX += 1;

  // //speed of rocket

  posY += 2;

  // noStroke();

  // fill(100);

​

  //making the clouds reappear on the screen

  // if (posX > width + posX / 2) {

  //   posX = -posX / 2;

  // }

}

​

  //making a class, which has a constructor, which holds all the features of my cloud - like the speed, size and movement

  class Cloud {

    constructor(x, y) {

      this.posX = x;

      this.posY = y;

      this.cloudSpeed = random(-3, 3);

      this.width = random(250, 350);

      this.height = random(200, 250);

    }

    run() {

      this.imageCloud();

      this.moveCloud();

    }

    imageCloud() {

      image(cloud, this.posX, this.posY, this.width, this.height);

    }

    moveCloud() {

      this.posX += this.cloudSpeed;

      if (this.posX > width) {

        this.posX = -this.posX;

      } else if (this.posX < -this.width){

        this.posX = width

      }

    }

  }

​