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.
