Home / Internet / 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 Amara.org community .

Check Also

How does an engine work

– Hear that, boys? – What is it? Just another narrow body aircraft. Hey! My …