Assignment 3: Functions, Arrays and Object-Oriented Programming

For this assignment, I initially knew I wanted to create something that captured the essence of the night sky and stars, as I’ve always found it incredibly captivating. However, I was unsure of the specific visual direction I wanted to take. It was during this contemplation that my friend coincidentally shared a comic strip featuring aliens, which instantly sparked my imagination. I thought, “Why not incorporate an alien spaceship into this assignment?”

Inspiration:

As I sketched the alien character, he naturally became a “Ben” in my mind, so I decided to call this “Ben’s Late Night Sky Chromatics”.

The part of the code that I’m most proud of is the spaceship class.

//spaceship 
class Spaceship {
  constructor(x, y, bodyWidth, bodyHeight, cockpitWidth, cockpitHeight) {
    this.x = x;
    this.y = y;
    this.bodyWidth = bodyWidth;
    this.bodyHeight = bodyHeight;
    this.cockpitWidth = cockpitWidth;
    this.cockpitHeight = cockpitHeight;
    this.speed = 6; //initial speed
  }

  update() {
    this.x += this.speed; //spaceship moving across the screen

    if (this.x > width + 50) {
      this.x = -50; //continuous and seamless movement of the spaceship across the screen 
    }

    laserX = this.x;//laser moving with the spaceship
  }

  display() {
    //spaceship's body
    fill(240, 55, 55); 
    stroke(0); 
    strokeWeight(2);
    ellipse(this.x, this.y, this.bodyWidth, this.bodyHeight);

    //lights on the spaceship's body
    fill(222, 209, 29);
    circle(this.x - 16, this.y + 5, 5);
    circle(this.x, this.y + 11, 5);
    circle(this.x + 16, this.y + 5, 5);

    //cockpit
    fill(255); 
    ellipse(this.x, this.y - 20, this.cockpitWidth, this.cockpitHeight);

    //alien
    fill(69, 163, 94); 
    circle(this.x, this.y - 14, 25); //alien head
    fill(255);
    circle(this.x - 6, this.y - 15, 1); //alien eyes
    circle(this.x + 6, this.y - 15, 1);// alien eyes
    noFill();
    arc(this.x, this.y - 7, 10, 5, 0, PI); //alien mouth

    //alien ears 
    fill(0);
    line(this.x - 14, this.y - 26, this.x - 10, this.y - 10); 
    circle(this.x - 14, this.y - 26, 2);//left ear
    line(this.x + 14, this.y - 26, this.x + 10, this.y - 10); 
    circle(this.x + 14, this.y - 26, 2);//right ear

    //spaceship legs
    fill(255); 
    triangle(this.x - 47, this.y + 41, this.x - 35, this.y + 18, this.x - 30, this.y + 20); //left leg
    triangle(this.x + 46, this.y + 41, this.x + 30, this.y + 21, this.x + 35, this.y + 19); //right leg
  }
}


//mouse click to randomly change laser beam color
function mousePressed() {
  const randomIndex = int(random(colors.length)); //picking random index within the array of the laser beam color
  laserColor = colors[randomIndex]; //randomly selected color for the laser beam
}

Designing the spaceship and getting all the values just right was a bit challenging. I started by sketching the spaceship and the night sky background separately, and then I had to merge them, which required a bit of trial and error. However, after a few hours of tweaking, I managed to create a spaceship that I was pleased with. I love the way the spaceship itself and Ben turned out, as well as a bit of interactivity in how the spaceship’s beam changes color upon clicking. Despite its simplicity, I also like the part of code that randomizes the positions of the stars each time the sketch starts. I like how this subtle feature adds an element of unpredictability and liveliness to the scene.

As for future improvements, I’d like to consider adding more spaceships and perhaps introducing some of Ben’s friends to make the scene even more engaging and cute. However, overall, I’m satisfied with how this assignment has turned out so far.