"Shooting Stars"

1

var x = 15;
var y = 15;
draw = function() {
background(0, 255, 234);
fill(255, 162, 0);
ellipse(x,y,15,15);
x +=1;
y +=1;
};

this codes for a “shooting star” that goes from upper left to lower right
now I would like to code for another “shooting star” that goes from the upper right to the lower left
can I code for the second star in the existing draw code?
do I have to do up a second draw function for the second star?
I tried that(doing a second draw function) and got nothing at all so I would like to know the best way to approach this issue
If I wanted a third star in the middle dropping straight down - how would that be implemented? A third draw function? All three stars in one draw function?

2

There is only one draw function, so anything you need to do when drawing needs to be done in that. Though you can delegate that out to other functions. This means you can do something like:

draw = function () {
    drawMySquares()
    drawMyText()
    drawMyWhatever()
}

If you have a variable number of things to draw like shooting stars, you’ll generally want to keep track of them in an array, especially for things like this which may come in and out of being drawn. So when you want a shooting star to shoot, you’d add it to the array, then when off the screen, you’d remove it from the array. You’re kind of doing that with the boxes now. The same would apply to the stars, but you’d want to be able to add and remove them from the array when they’re off screen… unless you want to reuse the stars, which is also an option. For example once one is off screen you can keep it in there until you want another to appear and shoot, then you’d just reuse that star again moving it back to the top of the screen. It depends on how you want these stars to appear and how many are on the screen at the same time etc.