var xPo = [20,70,120,170];
var b = 0;
var y = 0;
draw = function() {
background(224, 224, 168);
for(b = 0; b < xPo.length;b = b + 1)
{
ellipse(xPo[b],y,40,40);
y = y + 1;
}
};
I am fiddling around with this “Make It Rain Project”. Thus far, I have got it to the point where I have 4 rain drops falling simultaneously - but then they disappear off the bottom of the canvas. How could I implement code such that when the drops reach the bottom of the screen - the cycle repeats itself? I know that it is going to be an if statement of some sort such that if y > 380 start the cycle anew - but I can’t see how to implement this.
That’s pretty much it right there. Just put that if check at the bottom of the for loop (inside the loop) and if true, set y back to 0;
if (y > 380) {
y = 0;
}
var xPo = [20,70,120,170];
var b = 0;
var y = random(0,400);
draw = function() {
background(224, 224, 168);
for(b = 0; b < xPo.length;b = b + 1)
{
ellipse(xPo[b],y,40,40);
y = y + 1;
if (y > 380) { y = 0 }
}
};
Thanks for the tip - quite simple if you know what you are doing. Now - just to amp things up a bit I would like the circles to do the same thing - that is to go from the top of the screen to the bottom but each would do this randomly - independent of each other - whereas with the way I have it at the moment, they fall in unison.
I thought that inserting
var y = random(0,400);
instead of
var y = 0;
would do the trick but no, the circles still fall in unison. I know that the incrementation rate
y = y + 1
would stay the same but I can’t figure out how to make the circles fall independently. The answer has to incorporate the random function but I just don’t see how to place that in the code.
If you want to do this with the individual circles, you need to track each circle’s y values independently. A single y won’t cut it. So instead, just like you’re doing with the x values, you can have your y values in an array. Then you replace y with the value in that array for the current circle like so:
var xPo = [20,70,120,170];
var yPo = [120,20,170,70];
var b = 0;
draw = function() {
background(224, 224, 168);
for(b = 0; b < xPo.length; b = b + 1)
{
ellipse(xPo[b],yPo[b],40,40);
yPo[b] = yPo[b] + 1;
if (yPo[b] > 380) { yPo[b] = 0 }
}
};
You will notice that the circles are falling slower now. This is because you had only 1 y before and you were adding 1 to it 4 times for each circle in each draw call. Now each circle has its own y so it only gets 1 added to it 1 time for each draw. If you want to make it go back to its original speed, you can change the + 1 to a + 4.
With this example I hardcoded the starting values of the yPo array, but you could also decide to make those random.
that’s terrific - thanks - it’s getting me much closer to where I want to be with this Falling Stars project
var xPo = [20,70,120,170];
var yPo = [120,20,170,70];
var b = 0;
draw = function() {
background(224, 224, 168);
for(b = 0; b < xPo.length; b = b + 1)
{
ellipse(xPo[b],yPo[b],40,40);
yPo[b] = yPo[b] + 1;
if (yPo[b] > 380) { yPo[b] = 0 }
}
};
changing 380 aligns all circles in a row again
I have had a bit of time now to play with the code you sent me - it works perfectly once I add a ; to the last line yPo[b] - one strange behaviour of the circles that I noted was - in the last line I thought that I would change yPo[b ] > 380 from 380 to 420 - I thought the only effect of this change would be that the balls just disappear off the screen before they reappear again at the top - but no, this change from 380 to 420 results in the balls aligning horizontally - could you explain why this would be the case because I don’t get it.
They shouldn’t align with that change. There might be something else going on, though I’m not sure what. I tried the code you posted and changed the 380 to 420 and it seemed to be working as expected.
OK that’s fine - as long as you agree that the change shouldn’t cause horizontal alignment - must be something amiss at my end. Before I let this go though -
var x = [10,50,90,130,170];
var y = [250,10,200,70];
var b = 0;
draw = function() {
background(235, 211, 211);
for (b = 0; b < y.length; b++) {
ellipse(x[b],y[b],40,40);
y++;
if (y > 380) {
y = 0; }
}
};
I thought that I would try to duplicate the falling circles on my own with this code which I patterned on your successful code for the same. I thought that I had followed your example closely but alas - this code isn’t doing anything - could you let me know where I went wrong ?
You’re using y as a number though its an array. You don’t want to use ++ on an array (which is what y++ is doing). Instead you’d want to use it with the respective value in that array, i.e. y[b]++. Same for checking for > 380 and setting to 0. y[b], not y.
1 Like
Ahh … the subtleties of Java Script ! I didn’t think of that at all when I wrote my code but yes - now that I have had it pointed out to me, it makes perfect sense - thanks !
