2021 -- It Can't Be Worse (right?) [p5.js] Flashing Numbers!
Bookie0 (5616)

Post title: 2021 -- It Can't Be Worse (right?)


Happy Happy Happy...

Happy flippin' New Year!!! ✨ 🎉 🥳 🎊

I know, I know, I'm kinda late (ok fine 8 days late) but I got caught up with tests (3 big ones) in the first week (2 on Tuesday, 1 yesterday) of back to school (how mean are those teachers?!). Nonetheless, I hope ya'll had a fantastic break celebrating Hanukkah, Christmas, and of course, the end of 2020.

Anyways, there's @CodingCactus' really cool New Year Jam (here). At first, I didn't really know what to do, then initially decided to make some sort of fireworks animation in Python, then gave up on the first print statement because I was in no mood to do ASCII. Next, I resolved to do the same thing but in p5.js. Again, I wasn't motivated to do some kind of animation.

I then thought, dang, what a great way to start 2021 -- not in the mood and not motivated to some sort of coding project, and that's when I had this little idea to make these cool numbers (2021) in p5.js!

What this is

So yea, because of I didn't have much time (did I mention my WiFi decided to commit toaster bath in the middle of the school (zoom) day and this lasted for almost the rest of the day? By the way, fun fact, at the moment of writing this, my WiFi decided to jump from a cliff so I'm currently typing this in the .md file hoping it doesn't crash and lose my work), so, because I didn't have much time to really think through and make a 'bigger' thing for the jam, I've decided to just let this be my submission oof what a long sentence.


So, when you run this program epilepsy warning!!!, you'll see the numbers 2021 on the screen. The crude way they are written in is intentional. Those numbers will be continously changing colors.

Changing Size

There's also the option to change the size of the numbers; just click = to make them bigger, and - to make them smaller. You'll see that if you make them bigger, then reduce the numbers' size, you'll get this cool effect of different 'layors' of colors:

Stopping Change of colors

If you want to stop the colors from flashing, you can press S to stop it. Then, when you want to get the changing of the colors again, click A.

Background colors

Every 15 seconds or so, the background shall change color.

The Code

I've added plenty of comments around the code, so feel free to explore the script.js file to learn more about p5.js.

But basically, first, I have some variables; lineThickness for how big the numbers are, a boolean variable changeColors which determines if the numbers should change color or not, and counter is kind of changing the background color periodically (more on that later).

In the setup() function, I create a canvas with an initial background color black and I also set the frameRate to 10.

In the draw() function (which is a bit like a while True loop), I increment the variable counter. Next, with a if statement, I check using the modulo operator (%) if the expression counter % 100 == 0 evaluates to true. This means that every time counter has a value that can be divided by 100 (so when 100 is a factor of counter), then it changes the background color. Like I said above, this happens every 15 seconds or so.

Next, I assign the strokeWeight to the variable lineThickness that can vary. I also have the variables r, g, and b that are random numbers between 1 and 255. Those are the colors of the numbers, as well as the background.

Afterwards, a another if statement; if the colors of the numbers are meant to change, then it sets the frameRate and fills and strokes the numbers with those random colors.

You'll then see a bunch of line functions, those are the lines that compose the numbers.

Finally, in the function keyPressed(), that's when the program checks if the user clicks = (increase number size), - (decrease number size), s (stop numbers from changing colors), and a (make numbers change colors).

So yea, a pretty straightforward program!

Some Sources


Well, that's about it folks. RIP 2020.

Actually maybe not.

Oh, and last thing:

A funny video to say goodbye to 2020

  • Baiiiii!!! 👋

You are viewing a single comment. View All