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 !