Falling droplets question

JavaScript
#1

I am a total beginner but I was working on this project and I have some questions. After fiddling around with the code I got it do what I want but I’m unsure why it works. I commented out the two sections I am having trouble grasping any help would be awesome.

var xPositions = [200];
var yPositions = [0];
var bottom=[200];
var change=[0];
draw = function() {
background(204, 247, 255);

for (var i = 0; i < xPositions.length; i++) {
    noStroke();
    fill(0, 200, 255);
    ellipse(xPositions[i], yPositions[i], 10, 10);
    yPositions[i] += 5;
 ellipse(xPositions[i], bottom[i], 10, 10);
    bottom[i]-=5;

if (bottom[i] > 50 && bottom[i]===yPositions[i]){

strokeWeight(4);
fill(255, 0, 0);
ellipse(200,150,500,50);
}

for (var x=0;x<change.length;x++){

fill(255, 0, 0);
ellipse(0,change[x],50,50);
change[x]+=5; //why does the var have to be an array to get the drops to fall (x) x=-5 doesn’t work

if (change[x] >=400 ){
fill(255, 0, 0);
ellipse(0,change[x],50,50);
change[x]-=500; //why does this not work if the value is only -=5? that is repeat over and over it just stops

}

}//x child for looop end
} //parent for loop end

#2

change doesn’t have to be an array, but if you are going to be running more than one of these, this is one way to manage the change of multiple elements. Not the best, in my opinion, but one.

If, however, you change that line

change[x] += 5;

to

x += 5;

then you need to also change any reference from change[x] to x, throughout.

Do you have this (and the supporting HTML) on a codepen or somewhere public?

#3

Uhhhh, ProcessingJS!

It doesn’t, but you have initialised thr variable as an array, so you need to treat t as an array for the variable to be updated

Your canvas is 400x400
And your drop goes to bottom.
If you reduce the x position by 5, then you are not returning it to the canvas, it is just stating stable because for each frame your drop goes toward bottom by 5 pixels (in the first line that I quoted).
You can also just do change[x] = -10 (Reassigning the variable instead of changing it with mathematical operations)

1 Like
#4

Ahh man thank you so much for the explanation!

#5

Its the last challenge on khan array section: https://www.khanacademy.org/computing/computer-programming/programming/arrays/pp/project-make-it-rain

#6

Its the last challenge on khan array section: https://www.khanacademy.org/computing/computer-programming/programming/arrays/pp/project-make-it-rain

#7

I know that Khan Academy has not much support from users, but if you need to ask outside of it again please remember to post the link to the challenge, or better your project/spin-off, and to specify that it is ProcessingJS
I recognised it because I have done those lessons, but someone else wouldn’t have any idea of what you are talking about

1 Like
#8

Like me. I had no clue, and there are bits of code just missing (like the opening function draw()... part).

Good idea to post a link to either a referent site, and/or to an active “sandbox” on codePen, or Repl.it, or jsfiddle – something.

#9