The Mysteries Never Cease

1

var x = [100,300,140,20];
var y = [20,60,140,100];
var c = 0;
draw = function() {
for(c = 0; c < y.length; c++) {
background(255, 0, 204);
ellipse(x[c],y[c],40,40);
y[c] = y[c] + 1;
if (y[c] > 420) {y[c] = 0;}
}
};

//the mysteries never cease - I thought this code would give me 4 circles floating down - but I only get one - how come ?

2

The background command paints over the entire screen to create a background of that color. Since its in your loop now, you’re calling it every time right before you draw a circle. This means every next circle will completely cover up the previous circle with a background before drawing itself. The result is you only see one circle. All the others are covered up by backgrounds.

3

I don’t get it since taking it out of the loop gives me this smear effect which is not what I want -

4

Screen Shot 2020-08-22 at 7.13.52 AM
Screen Shot 2020-08-22 at 7.13.52 AM688×682 5.34 KB

5

If you take it out completely, you never draw the background, meaning you never clear the previous frame of the animation. If you don’t clear the previous frames, they stay on and give you the smear.

Generally you only want to call background once at the start of every draw frame (at the top of the draw function). This clears the previous frame providing a new “blank canvas” for the next frame.

As far as the smear goes, you can also use that to your advantage. While you might not want a complete, solid smear, something you can do for a cool effect is, when drawing the background, use transparency. This will only show a little of the previous frame, and a little less of the previous frame before that, providing a pretty cool ghostly trailing effect.

draw = function() {
  background(255, 0, 204, 20);
  // ...

image

6

Excellent ! Finally - I get it. The background has to be Inside the draw function but Not in the loop. So I am trying to make things a bit more interesting - one step at a time - and I thought it would be nice to have a different color assigned to each circle. I thought this code would do it but no - once again I am missing some subtlety in coding -

var x = [100,300,140,20];
var y = [20,60,140,100];
var c = 0;
draw = function() {
background(255, 0, 204);
for(c = 0; c < y.length; c++) {

switch (x)  {
    case(100) : fill(255, 0, 0); break;     //red
     case(300) : fill(255, 149, 0); break;  //orange
      case(140) : fill(247, 255, 0); break; //yellow
       case(20) : fill(0, 157, 255);  }     //blue

ellipse(x[c],y[c],40,40);
y[c] = y[c] + 2;
if (y[c] > 420) {y[c] = 0;}
}
};

because while the circles are now falling nicely, they are all the color (red) specified by the first line in the switch block of code. So could you, once again, show me where I’m going astray ?

7

You’re doing the same thing with x that you were doing with y :wink: x is an array. You’re using your switch case to check x against numbers when you want to really check the current circle’s x (value in the x array). For that change the switch to:

switch (x[c])  {
8

Thanks ! - that worked - obviously I have to be more careful in my thinking