# The Mysteries Never Cease

**URL:** https://forum.kirupa.com/t/the-mysteries-never-cease/643927
**Category:** Uncategorized
**Created:** [August 22, 2020, 2:14am UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927 "2020-08-22T02:14:23Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [August 22, 2020, 2:14am UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/1 "2020-08-22T02:14:23Z")

</div>

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 ?

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [August 22, 2020, 11:49am UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/2 "2020-08-22T11:49:31Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [August 22, 2020, 2:15pm UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/3 "2020-08-22T14:15:53Z")

</div>

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

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [August 22, 2020, 2:16pm UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/4 "2020-08-22T14:16:23Z")

</div>

![Screen Shot 2020-08-22 at 7.13.52 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/8d7dcd54e3adea9cfe83705df91e7623202b0796.png)

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [August 23, 2020, 10:43am UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/5 "2020-08-23T10:43:29Z")

</div>

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.

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

```

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/6/64bcdfc42b5c73d819ba9eeca7c41b5734ad65ae.png)

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [August 23, 2020, 4:52pm UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/6 "2020-08-23T16:52:14Z")

</div>

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 ?

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [August 23, 2020, 8:20pm UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/7 "2020-08-23T20:20:39Z")

</div>

You’re doing the same thing with x that you were doing with y 😉 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]) {

```

---

<div class="post-metadata">

### Author: ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)
#### Post date: [August 24, 2020, 4:02pm UTC](https://forum.kirupa.com/t/the-mysteries-never-cease/643927/8 "2020-08-24T16:02:14Z")

</div>

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