23 Sept 2018

Happy Clouds demo for Skrolli Party 2018

The Finnish computer magazine SKROLLI organized a party for the staff and writers but also for anyone who submitted an entry to either Wild or Realtime Compo, so I decided to make one.

I used Processing which I learned during Assembly 2018 and thought to make a summery demo about going to the beach. The first idea was to have a camera flying from midst of city over a forest, going towards the beach and sea. But things were harder than I thought and in the end I just had the sea and clouds.

My friend said that the clouds could smile like the ones in Super Mario games and I thought it looked cute. Then I wanted to add greetings in the form of boxes floating across the surface, but in the end made them jump out of the sea instead.

Biggest difficulty was to get the faces to show on clouds. Processing does not allow drawing 2D shapes in depth, which seems to mean that the depth is always 0, so I needed to make sure the clouds are further back, but not too much because then the face would be offset from the cloud because of the perspective projection.

Syncinc was also difficulty, mostly because I did not choose my parameters well and the default Rocket editor is so clumsy to use.

I made the music using Beepbox and discovered new features from it. I really like it because it is restricted by default, but allows for customization. And it is easy to share a song link.

I worked on the demo for 5 Saturdays and one Sunday, about 20 hours in total.

For the next time I learned to:
  • Leave an empty measure in the beginning of the song. It leaves space for transition and makes capturing and editing easier.
  • Choose colors and interpolate between them instead of syncing individual color components.
  • Generate random things in relation to previous result. That way I could have made sure that the cloud balls don't spawn inside each other and that adjacent greetings would have different colors.
  • Randomize width and height related things between 0 and 1 and then multiply with actual screen dimension. In this demo I took a random number between 0 and width, which meant that even when random seed was set, the result was different depending on the window size. 
  • Try to have everything depend on time. In this one only the boxes are, but the clouds and waves always keep moving. This helps with syncing.
For the next demo I want to use my own renderer. I think Processing is very good for starting out and trying things, but I came to feel that I want more control over things.

You can watch the demo over at Youtube and leave comments on Pouet.


No comments:

Post a Comment