Coding Challenge #4: Purple Rain in Processing

Coding Challenge #4: Purple Rain in Processing

Hello and welcome to today’s coding
challenge Today I’m going to make a purple rain in
Processing in honour of Prince So the only thing I’ve done to prepare so far
is pick 2 colours which were suggested by the Internet; Thank you very much A purple colour for the rain, and some
other colour for the background I am using the Processing programming
environment You can find out what Processing is if you
check the description to download
Processing The code will be written with the Java programming language I’m also going to make a JavaScript
version using something called “p5.js” So if you want to run this example in
the browser or on the web, you can find that version of the code as
well, in the description of this video Ok, let’s get started;
So the first thing that I need to do is just to write a “setup” function, and
write a “draw” function And then I’m going to add the “size”
function My glasses are falling down on my face I’m going to take this wonderful colour
suggested and use this as my background I’ve got an extra parentheses here and
I need a semi-colon I’m going to run this; And look at that,
there we go! So this is the start; This is the scene;
This is where I want my purple rain To make rain, I think a good way to do
that would be to create a single object which is a rain drop; and then from that
object, make an array with many of them I’ll go ahead and make a new tab;
I’m going to call it drop Then I’m going to say “class” drop;
Class being a template for making objects in the Java programming language;
In the JavaScript version this will look like a constructor function;
You’ll see that; This drop is going to have an “x”;
This drop will also have a “y” I need a function for the raindrop to fall And a function for the raindrop to be
rendered on the screen What do I want my drop to look like? Let’s have the drop be a line;
That might look like rain A line; at “x” and “y” To “x” and what? How about “y” plus something right? Something like like “y” plus 10 And then I want that line to be what?
Purple! I’m going to get the purple colour
right here Come back, come back Then in “fall”, I’m going to say “y”
equals to “y” plus “yspeed” ok “yspeed” doesn’t exist, so I’m going to
create that as a variable Now that I’ve made this object, this is
the core idea of the drop object It has an “x” and a “y”, and a “yspeed”
for falling “y” equals “y” plus “yspeed”
for it to fall And then a line to draw it Now the drop needs initial values for
these variables I’m going to have, by default right now a
drop that starts in the middle And have a drop that starts at the top of
the screen Whilst having the speed be equal to 1 Just to make sure things are working Here I’m going to create a variable “drop”
“d” equals new “drop” Then in “draw” I’m going to say
“d” dot “fall” And then “d” dot “show” I think that’s enough code to write
that I should test now I have a “drop” class; All the code for
the “drop” I have the “drop” object;
Let’s run this And let’s see our individual purple
drop There it is! Purple rain there’s the
purple rain! Falling! It’s only 1 drop, clearly what I need to
do is have many drops In order to get many drops I want to have
an array The way I’m going to do that; Is by
changing this to be an array Now look at this; The array syntax is the
kind of thing a drop with the brackets equals a new drop, and I’m going to have
an array with 100 elements of it Instead of making 1 single drop, I loop I think this is maybe the 1 millionth time
I’ve typed that loop in my life I’m going to loop through the entire
length of the array I’m going to say “drops” index “i” is a
new “drop” I’m going to make 100 new drops in that
array And then there should be more dancing!
I’m not going to be good enough to dance But there should be more dancing involved
for this particular example while I’m programming this; I’m going to then go
down to “draw”, and I’m going to say “drops” index “i” dot show; There should
be music playing at least; “drops” index “i” dot “fall”; Doesn’t
really matter what order these are in but I’m going to put “fall” first and now
I’m going to run this There should be 100 drops in the window But there’s still only 1 The reason there’s only 1 is because all
of the drops are in the same exact spot, moving at the
same exact speed I need to randomize them a little; So one thing I can do is give them all a random location Then we can see what happens there Now, look how all my rain is falling down exactly together Another thing I could do then would be to give them some random Y location So why don’t we actually have them starting outside the screen So their random location should be between -200 and -100, so they’re kind of way off the screen And now we can run that and will see this should be a little bit better And now we see that the rain in Spain falls mainly on the plain Now that things are spread out a little more. Subtitles by the community

100 thoughts on “Coding Challenge #4: Purple Rain in Processing

  1. Nice man! I ve played a bit with your code. I m new to Processing but I kinda start to like it. I ve done some nice Prince symbols dropping over some images with him. My code is here : Keep up the good work!!!

  2. I want to code this but I'm not familiar with GUI programming I only coded in console, can this be done in C#? I think he does it in Java Scipt.

  3. Wow, I actually can understand this really easily, up until the map part, but still, the rest was a breeze. I don't even know much java, but this is pretty simple.

  4. A little horizontal sliding motion could be implemented to the drops, randomly directed to the left or the right. And it might also be mapped to the distance from the subject. Tried to do it, and it works well so far.

  5. Idk what language You use and what type of project you use , can you tell me or at least someone who knows ( and name of programm) sorry im new

  6. I think it would create a much better visual effect if the gravity for far off raindrops (z less) was more than the nearer ones (z greater)

  7. Im new to coding and a little confused how you did this. I am used to creating methods and running them in a main method. How are you executing these methods without a main and seemingly outside of a class?

  8. I just turned on Purple Rain by prince on my audio system about 2 minutes ago. So I am still listening to it as of writing this comment. Then I sit down and update youtube homepage and scroll down and let it load in new videos a couple times and then this shows up in my feed. I thought to myself, "there is no way…." and so I touched my mic to see if it's on at the moment and sure thing, it was feeding the sound back into my ears. " I have it set up to where it will feed the audio coming in through the mic, out again into my ears, only if some software is USING the mic at the moment". These fuckers at google are literally listening to my room and giving me videos based on what I say or listen to. Never believed it until now.

  9. I code for living, I write far even complex programs then this for breakfast, and still I am here watching him make a purple rain 😂😂😂

  10. When choosing y position, just put random(-height). This guarantees and even spread no matter how tall the window is later, although a taller window will have a lower density. You could also just use height if you want the rain to begin with rather than a blank page first.

  11. The only other thing I would add is a fog effect.
    float r = map(z, 0, 20, 230-40, 138);
    float g = map(z, 0, 20, 230-40, 43);
    float b = map(z, 0, 20, 250-40, 226);
    and then add it to stroke(r, g, b);

    I included an offset of 40 to the background color because I didn't want the drops to completely fade into the background.

  12. Need some help. I see nothing in the output window when I run the code in Processing despite having no errors in the code.

  13. Thank you so much. Watching this video a few years ago made me want to be a programmer and now I can code quite well

  14. I learned coding in high school but forgot many things cause it's been 8 years and oh boy I miss coding so much. I might start to re-learn it.

  15. once you have coded and run the purple rain and it works, how do you go about adding a moving image across the screen

  16. I've never done C# before but your videos really interest me, it looks so simple to make something quick on a canvas like that

  17. Prince also defined variables to describe Purple Rain:

    Prince explained the meaning of "Purple Rain" as follows: "When there's blood in the sky – red and blue = purple(…)”

  18. Sir your video is awesome and I learned a lot but please can you explain what you did with the map(). Besides this I learned a lot from this video.Thank you .

  19. Tried to add some splashes. Hope you like it! ♥



  20. The parallax effect would have been more successful if you increased the density of rain the 'further' away.

  21. I really like your crazyness! I can relate 😜 But you have much more experience and knowledge than me ⚡ Can I quantum entangle your atoms in your brain. wanna download your knowledge 😂

  22. Hey, I did this is p5 js.

    Thank you, Dan for your awesome p5.js tutorial.

  23. Whoever wrote the fucking subtitle in Hindi is a genius. Seriously man! It was like I'm watching a peer Hindi YouTuber. But I'll recommend please use Devanagari script not Roman script. It'll help us to identify and understand it better. Thank you.

  24. sir ,in the when we are defining line " line(x,y,x,y+10); " intead of giving y+10 , i declared a float variable L=y+10 " line(x,y,x,L); " but in this it is directly drawing a line with the given speed.

  25. Great video. You don't need to add a gravity effect because in real life the rain drops move at terminal velocity meaning they do not accelerate but move with a constant velocity because of the air resistance.

Leave a Reply

Your email address will not be published. Required fields are marked *