Share your repls and programming experiences

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

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

Thanks for all the support (:

Staff (6)

1000000 and its just a pink day :)

ChezCoder (1582)

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

ChezCoder (1582)

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

PowerCoder (711)

@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() != '') {

jamesscotta (1)

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

Bookie0 (5008)

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!

MarcusWeinberger (596)

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

lcsnickel (2)

Dude I love dis 😊

FelixMuntean (0)

When you write + in speed then the program malfunctions.

PowerCoder (711)

@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 (711)

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


Yes, I do(mobile device). @PowerCoder

DempseyMyers (2)

This makes me want to pet a cat

JeremyIrwin (41)

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 (41)

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

AlexanderHardco (1)

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

PowerCoder (711)

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 (12542)

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

matthewproskils (448)




PVWalsh (2)

That is soo satisfying... ahhhhhhhhhhhhhhhhhhh

mwilki7 (1113)

it stutters every half second or so


@mwilki7 Not just you, also happens to me too

mwilki7 (1113)

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 (1345)

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

sugarfi (602)

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

tangert (69)

neat. would love to see something like this made with p5.js or something :)

AdCharity (1345)

@tangert it's probably easier with p5 though

tangert (69)

@AdCharity yes and it's more powerful for graphics like this

AdCharity (1345)

@tangert well no kidding never thought about using dom manipulation to make rain

malvoliothegood (771)

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