Share your repls and programming experiences

← Back to all posts
Purple Rain ☂️!
PowerCoder (734)

Very simple, but satisfying animation. These are div's, not gif's

Thanks for all the support (:

BenOD1 (10)

This is oddly satisfying.

PowerCoder (734)

My definition: A "div" is an HTML element. Div is short for divider.

W3schools definition :The <div> tag defines a division or a section in an HTML document.
W3schools :click here to W3schools div introduction

Coder100 (15762)

You really shouldn't be learning from w3schools though, MDN is better :) @DJWang

matthewproskils (462)


malvoliothegood (798)

Here is something like purple rain except it's raining cats and dogs . The HTML5 canvas and its methods are used:

lcsnickel (2)

Dude I love dis 😊

PVWalsh (2)

That is soo satisfying... ahhhhhhhhhhhhhhhhhhh

jamesscotta (1)

Very cool and really impressive since I have no idea what you did to make this happen.😊

Bookie0 (5668)

Me: Cool
Me 2 min later: coool
Me 10 min Later: why am I still here?
Me 3 hours later: *eyes glued to the screen coooooooooooooool

Seriously nice job dude!
Have a great day!

b3tafish (1)

this is awesome

DempseyMyers (2)

This makes me want to pet a cat

AlexanderHardco (1)

that cool bro, sub to my yt channel. Charles Leonard Gorril

sugarfi (600)

now we just need little red corvettes driving across the screen...

Staff (6)

1000000 and its just a pink day :)

ChezCoder (1596)

also whats with the backwards smile? (: makes me shiver lol. :)

ChezCoder (1596)

wow powercoder!
also, when are you free? you didn't really finish your styling XD

PowerCoder (734)

@ChezCoder Friend me on Discord so we can discuss it more. (I sent afriend request.) I'm Poseidon on discord. (And I'll correct my backwards smiley face.)

musediku (0)

i can look at this all day

R0upe (2)

I love this man, but I guess you can put in input one event listener "oninput" , I guess is better refresh the values if have values to refresh

document.getElementById('speed').oninput = () => {

  if ($('#speed').val() != '') {

MarcusWeinberger (680)

Put the speed as "1/" for a weird glitch

FelixMuntean (0)

When you write + in speed then the program malfunctions.

PowerCoder (734)

@FelixMuntean That’s because you’re supposed to put a number


If I open in new tab, it rains super hard. But it’s pretty satisfying, and good job.

PowerCoder (734)

@CodeABC123 Probablly means you have a small screen. (I might make something to adjust the speed.)


Yes, I do(mobile device). @PowerCoder

JeremyIrwin (43)

the best song I ever heard

Trapdoorspyder (102)

@JeremyIrwin Song? I don't hear one, and I checked my volume is up. Does it have to do with the fact that I'm on a chromebook?

JeremyIrwin (43)

@Trapdoorspyder no, it was a joke because there's a song called purple rain



mwilki7 (1130)

it stutters every half second or so


@mwilki7 Not just you, also happens to me too

mwilki7 (1130)

iirc the fix is:

// Canvas frame update handling
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) 
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];

instead of interval function

AdCharity (1362)

@mwilki7 no the solution is to make is so fast that people can’t see what’s happening