2021 -- It Can't Be Worse (right?) [p5.js] Flashing Numbers!
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
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
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 (
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.
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
Every 15 seconds or so, the background shall change color.
I've added plenty of comments around the code, so feel free to explore the
script.js file to learn more about
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).
setup() function, I create a canvas with an initial background color black and I also set the
frameRate to 10.
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
b that are random numbers between
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!
Well, that's about it folks. RIP 2020.
Actually maybe not.
Oh, and last thing: