I really wanted to create something that celebrated the many amazing films set in space. In particular, these films always seem to have a hyperjump scene with a star field. I wanted to make something based on the hyperjump, and decided to make a countdown timer where the end of the timer is signalled by the hyperjump occurring.

What it does

It take an integer value from the user, and on the press of the 'Go!' button counts down for the number of seconds defined by the user-input integer.

How I built it

I started by taking the star field code developed by Daniel Shiffman from The Coding Train. As I am still pretty new js and specifically p5.js, I spent an hour or so just messing with the code (changing variables, adding functions, reordering sections etc) to really get a sense for what every part of the code does.

I then went about making the speed change in accordance to a countdown. This was relatively simple.

I then added the functionality to allow the user to enter a number of seconds. This was tricky.

Challenges I ran into

I found adding the functionality to allow the user to enter a number of seconds challenging. At first I planned to add the button in the html file, but I quickly found it difficult to feed the input from the html file into the javascript file. I then moved onto to creating the input box and button in the js file, but this is not something I had done with js before. To overcome this I looked up some online examples and used the p5.js reference site.

Accomplishments that I'm proud of

When I was struggling to get the user input feature to work, I considered just leaving it out and making it run a pre-determined amount of time. Instead of giving up though, I decided to take a break and do something else for a while. I then came back with a clearer mind and this allowed me to solve the problem. I am proud that I didn't give up on the feature!

What I learned

I learnt how to integrate p5.js with html (prior to this I ad only really worked in the p5.js web editor

What's next for Hyperjump Countdown

I would love to make the app more aesthetically pleasing and add sound effects to enhance the experience. I would also like to host it so that other people can easily make use of it.

Built With

Share this project: