Inspiration

Life can be stressful, so it is nice to slow down sometimes. We wanted to recreate the gentle experience of watching the clouds float by. We also wanted to explore the intersection of art and coding.

What it does

It procedurally generated pixel clouds that float in the sky. There are control buttons that can change the color of the clouds, the time of day, cloud mode, decrease and increase speed, and reset speed. There are 5 different color options for the clouds. The cloud mode button changes the ratio of cloud to sky. The speed of the clouds moving can be increased and decreased using the increase speed and decrease speed buttons. The time of day can be either day or night, and can be controlled using the time of day button.

How we built it

We collaborated by chatting over Discord audio and contributing to a GitHub repo. We used p5js to easily convert data into images. We split up the tasks along the way; one of us worked on generating noise while the other worked on creating the pixel grid; one of us worked on turning the noise into images while the other worked on colors; etc.

Challenges we ran into

Initially, we wanted to write a function to generate noise ourselves, but soon realized that would take 24 hours all by itself. Indeed, there were many times that we had to decide which functionalities to prioritize, and how cleanly we should try to implement them.

Accomplishments that we're proud of

We finished a stand-alone project in time. Both of us successfully completed our first hackathon. We collaborated effectively even though we just met on gather.town!

What we learned

We learned how to code in javascript in 24 hours. We improved our html and css skills. We learned how to work with an external library (p5js). We learned how Perlin noise works.

What's next for Pixel Skyscape

There is room for additions onto existing features, such as adding more color and cloud modes, as well as new features, such as experimenting with different types of noise, and letting the computer procedurally generate color schemes rather than iterating through pre-selected ones. This may be a project for us to revisit whenever we need to destress :)

Built With

Share this project:

Updates