Share your repls and programming experiences

← Back to all posts
2021 -- It Can't Be Worse (right?) [p5.js] Flashing Numbers!
h
Bookie0 (6268)

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

Heyo!

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.

Numbers

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

Conclusion

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

Actually maybe not.


Oh, and last thing:

A funny video to say goodbye to 2020

  • Baiiiii!!! 👋

Comments
hotnewtop
SwaroopBappanad (240)

Fun fact: If you ask Rick Astley to give you the movie Up, he will refuse, because he's never gonna give you Up. But by not giving you up, he's letting you down. This is known as the Astley Paradox.

Bookie0 (6268)

Also, like they say in those cheesy American movies:

"God Bless America".

God Bless the (new) President.

God Get Rid of the Current One.

God Bless Repl.it.

And most importantly...:

God Bless 2021.

OldWizard209 (1528)

I have abetter feeling for 2021 after this.

KINDA

Anyways, pretty kowl @Bookie0

angrydoge (481)

HAHAHAHAHA I HAVE NO SUCH WEAKNESSES!!!!

:'(
DSAEvan (21)

@angrydoge lol you sure or just HACKED? is it blocked or what

angrydoge (481)

@elburg

I SAID I HAVE NO SUCH WEAKNESSES HAHAHAHA

angrydoge (481)

lol. @SwaroopBappanad
Im invincible to rickrolls lol

SwaroopBappanad (240)

@angrydoge Have you seen the Mr. Beast video where he buys out 5 stores? Its pretty great. Here it is if you want:

https://www.youtube.com/watch?v=dQw4w9WgXcQ

angrydoge (481)

What do you think I am, an idiot @SwaroopBappanad?

Bookie0 (6268)

@SwaroopBappanad pls enough with da pings! ;)

angrydoge (481)

@SwaroopBappanad @Bookie0 yeah jeez I got 5 pongs bc u spam question mark lol

angrydoge (481)

ive been ponged two times now -_- @SwaroopBappanad

XD
elburg (41)

@angrydoge yep, this is going into my rickroll filter.

Wilke000 (636)

But there is nothing there!

Lol, the first frame of a new backround color

elburg (41)

My rickroll filters on uBlock failed me :( so you win 🅱️ookie0

SwaroopBappanad (240)

Nice try with the link, but you can't fool a veteran lmao. Also, pog project!

LeoXu2 (41)

Thank you sir you let me realize I haven't liked rick astley never gonna give you up yet. Have an upvote :)

FloCal35 (668)
Before anyone can say it...

POG

Bookie0 (6268)

lmfao I said that was what I said.. @FloCal35

angrydoge (481)

We all know 2021 is gonna be better because its off to such a great start....

angrydoge (481)

@Bookie0

 _________        .---"""      """---.              
:______.-':      :  .--------------.  :             
| ______  |      | :                : |             
|:______B:|      | |  Loading more  | |             
|:______B:|      | |  Stupid jokes  | |             
|:______B:|      | |                | |             
|         |      | |                | |             
|:_____:  |      | |                | |             
|    ==   |      | :                : |             
|       O |      :  '--------------'  :             
|       o |      :'---...______...---'              
|       o |-._.-i___/'             \._              
|'-.____o_|   '-.   '-...______...-'  `-._          
:_________:      `.____________________   `-.___.-. 
                 .'.eeeeeeeeeeeeeeeeee.'.      :___:
    fsc        .'.eeeeeeeeeeeeeeeeeeeeee.'.         
              :____________________________:
angrydoge (481)

E̷̡̧̨̧̢̨̨̧̡̡̨̡̨̧̢̧̧̧̧̢̢̧̧̢̡̨̧̧̡̛̛̛̛̟̖̬̬̟̮̗̣̣̳͔͇̥̟̭̱͍͙̱̜͓̺͇̠̜̜̖̩͔͎͕̗͇̮̫͙͙͙̹͚̬͚̯̖̪̱̖͍͍̗̗̙̻̰͓͔̳͔̠̯͓̟̝͈̝͉͖̯̳͕̳͔̮̬͎̗̖̣̳̺̤̠̫̻̻̥̜̹͓̞̻͚̳͔͇͈̗͓͙̱̣͕͔̳̯͓̝͔̮̬̳̩̹͖̜͚͈͚̣̟̜̮̪̩̩̰̫̻̹̼͎̺̹͓̣͍̻̼̰͍̯̙͖͓͍̼͓̺̖͕͚̯̯͓̪̠̙̫͙̭̼̦͉̰͕̟̤̹̣̘̗̱̫̲̠͎͍̥͓̫̞̟̣̫͙̣̜͙͓͖̰͇̯̝̠͚͇̯̣̪͖͉̜͙̲͓̼̭̭̖͓͐̍̓̌̓̅̊͌̏͂̀͑̑̿̈́̐̃̃̒̀͐́̄̇́̈̍̊͗͊͒̄̈̄̆̂̓̽̒̽́̽̋̄̉̐̓̾̉͑͑̊̄͛̊͛̿̄͊̄̃͗͗̔͆͂̃̋́̊͗̐̋̋̓̑͋̈́̿̀͒̌̆̍̅́͂̏̑̃̓̃̊̀͌̇̓̈͐́̏̀̓͑̅́͑̈́̎͋̿́̀́́̉̋͂̓̽̿͆͊̽̎̆͛̃͌͒̀͆̍̀̀̈̐͒̈́̉̊̆̓̒͗͌͂̓̓̀̊̎̒̈̈́́̄̊͐̈̐͌̃̒͛͗̎̑̇̿͛͐̉̅͆̅̒̏̾̉͆̽͂̈̈́͆̒̿͊̚̚̕̕̕̚͘̕͘͘͜͜͜͜͜͜͜͜͝͠͝͠͝͠͝͠͝͝͝͠͠͝͠͝͝ͅͅͅͅͅ @Bookie0

JBloves27 (1883)

...It seems like the first second time ive seen you post a html post xd

Bookie0 (6268)

@JBYT27 nah I've posted a few other HTML repls lol, but this is the second time I've made a p5.js.

Bookie0 (6268)

@DSAEvan A JS Library. Check this out for more! ;)

IntellectualGuy (822)

Hmmm. wifi issues, maybe another reason not to have a mac?

Bookie0 (6268)

@IntellectualGuy wifi issues ≠ because of mac

it was a problem with the wifi at our home, not because of the mac lol

DSAEvan (21)

is it possible to display 2022 for next year?

Bookie0 (6268)

@DSAEvan Well that would be next year lol

DSAEvan (21)

@Bookie0 but is it possible to change it easily

Bookie0 (6268)

@DSAEvan I would just change the 1 of 2021 to a 2 of 2022 lol. Why?

DSAEvan (21)

@Bookie0 to make it display 2022

Bookie0 (6268)

yea, look at the code and replace 1 with 2. @DSAEvan

Bookie0 (6268)

@DSAEvan check the part with all the line() functions ;)

DSAEvan (21)

@Bookie0 thas complicated tho. I no understand it

Bookie0 (6268)

@DSAEvan it's pretty simple, you just call line() and inside you put the arguments where the points' coordinates are.

For example, line(100,100,200,200) puts a point at coordinate 100, 100 and another one at 200, 200 then puts a line through those two point! :)

For lines(), check this out :)

Baconman321 (1097)

Is that vid a rickroll?

Bookie0 (6268)

*replies innocently What vid 😇
@Baconman321

Baconman321 (1097)

@Bookie0 not knowing he is falling into my twap
IDK I thoght tere wuz a vid tho on tha post?

Bookie0 (6268)

@Baconman321

*oh it was a twap i thought it waz a tlap

hum hum yez there might be

Baconman321 (1097)

@Bookie0

EXPOSED

GUYS THERE IS A RICKROLL IN HERE DO NOT CLICK VID IN DESCRIPTION!

:D