Pico-8 Bach Inventions Effects ~ Day 4: Happy Little Clouds (Patreon)

Hi everyone!

I'm very tired today so this is going to be a LIST of what you need to do to make those puffy procedurally-generated animated clouds happen! But first, a little introduction!

Today's Bach portrait features procedurally-generated animated clouds! It's another cheap-but-effective trick can be used to spice up any background sky!

The main idea rests on how Bob Ross paints clouds. Yes, seriously. When Bob Ross paints clouds, he first uses a darker paint and draws a vague puffy cloud shape, and then he uses a much lighter paint to cover the top of those cloud shapes. The lighter paint becomes the biggest part of the clouds and makes it look like the sun is shining above, while the darker paint shows only on the underside of the clouds, making it look like the clouds are blocking the sun.

And that is pretty much what we're going to do as well!

1. We're initializing our clouds in the _init().
2. Every cloud is a table storing x and y coordinates, and then data for a bunch of circles.
3. Every circle is itself a table, with coordinates relative to those of the cloud, a radius, and then two random values rnda<1 and 1<rndb<4 which we will use later to animate the cloud.
4. Store all the clouds in one 'clouds' table.
5. Now we're drawing the clouds in the _draw().
6. First you should calculate where you want your clouds to be on the screen. If you just want them scrolling by, add the time() to it (*10) and do a modulo so that it loops from one side of the screen to the other. If you want parallax or make the positions relative to a camera system, just, uh, do your calculations now.
7. Now you use 'camera(-x,-y)' to center on where you want your cloud to be on screen.
8. For every circle in your cloud, do the next two steps:
9. Add this to its y coordinate: circle.rndb * cos(circle.rnda + t()). (this step is optional - it's for the animation)
10. Then draw the circle with the color 13 (purple).
11. Repeat steps 8, 9, 10 with y-1, radius-1 and the color 6 (light grey) and then again with y-2, raidus-2 and the color 7 (white).
12. You're all done!

I hope this format was alright! I know it was less detailed than I usually make those, but these things take more time and energy than you might imagine and this felt like a good compromise!

My generous 5$+ supporters can download the source files for this portrait and all the others over there!

Thank you for reading! See you tomorrow!

Take care!

TRASEVOL_DOG