For Uncommon Hacks 2021, I made Cosmos Trespassers, a Space Invaders clone. I wanted to stick with the space theme, while also honoring this year's exploration theme. Therefore, I decided to make a simple space exploration piece.

What it does

Random space-themed objects are placed on a scene. Users move their rocket ship via the mouse to explore the vast unknown. There are no goals - just see what you can find! The scene loops around to allow infinite scrolling, and every visit to the webpage results in a new, unique scene.

How I built it

I drew all the art myself. I used p5.js to programmatically combine the space objects into a scene that could be traversed.

Challenges I ran into

I was hoping to programmatically color in each individual space object a random color, to further increase the chaos. However, doing resulted in an absolutely atrocious loading time. So I ended up just creating a few different palette swaps for each sprite, to give it some diversity.

Accomplishments that I'm proud of

Getting the rocket to rotate properly was a pain, & I am glad I got that to work. Getting the scene to loop so that infinite scrolling is possible was also a challenge that seems to work as desired.

What I learned

I need to take the time to create more art. Using my programming skills to enhance my art is a lot of fun.

What's next for Cosmos Explorer

  • A truly endless map (& not one that loops on itself to provide the illusion)
  • Programmatic coloring of sprites that doesn't result in a 10 year loading time

Built With

Share this project: