# Processing Array Circle Art

**URL:** <https://discourse.processing.org/t/processing-array-circle-art/4888>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 26, 2018, 12:19am UTC](https://discourse.processing.org/t/processing-array-circle-art/4888 "2018-10-26T00:19:43Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 12:19am UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/1 "2018-10-26T00:19:44Z")

</div>

Hi there, I am currently trying to make a drawing of multiple colored circles in an array. I have ints set for different sets of colors, but for some reason, I can only get two to work at a time. Can someone tell me where I am going wrong here?

> [@chisholmem](#):
>
> Hi there, I am currently trying to make a drawing of multiple colored circles in an array. I have ints set for different sets of colors, but for some reason, I can only get two to work at a time. Can someone tell me where I am going wrong here?
> 
> int no = 20;
> 
> float x = new float[no]; // x-position  
> float y = new float[no]; // y-position  
> float d = new float[no]; // diameter  
> int c = new int[no]; // color of circle 0-red, 1- green  
> int e = new int[no];
> 
> void setup() {  
> size(500, 500);  
> ellipseMode(CENTER);  
> for (int i = 0; i \< no; i++) {  
> d[i] = random(10, 50);  
> x[i] = random(d[i], width - d[i]); // always show full circles  
> y[i] = random(d[i], height - d[i]); // always show full circles  
> c[i] = int(random(0, 2));  
> e[i] = int(random(0,3));  
> }  
> }
> 
> void draw() {  
> background(255);  
> noStroke();  
> for (int i=0; i\<20; i++) {
> 
> ```
> if (dist(x[i], y[i], mouseX, mouseY) <= d[i]/2) { //when mouse is inside any circle
> 
> if (c[i] == 0) {
> } 
> } else {
> if (c[i] == 0) {
> fill(136, 217, 207); // fill blue
> } else {
> fill(232, 95, 115); // fill red
> }
> ellipse(x[i], y[i], d[i], d[i]);
> }
> 
> ```
> 
> }
> 
> for (int i=0; i\<20; i++) {  
> if (dist(x[i], y[i], mouseX, mouseY) \<= d[i]/5) {  
> if (e[i] == 0) {  
> fill (237,174,107); //fill orange  
> } else {  
> fill (191, 203, 92); //fill green  
> }  
> } else {  
> if (e[i] == 0) {  
> fill (237,174,107); //fill orange  
> } else {  
> fill (191, 203, 92); //fill green  
> }  
> ellipse (x[i], y[i], d[i], d[i]);  
> }  
> }  
> }

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 26, 2018, 1:50am UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/2 "2018-10-26T01:50:08Z")

</div>

i see two parts of program what  
draw the same ellipse,  
i guess the second wins.  
so the first one using the c[i] has no effect.  
( test: disable the first ellipse and you get same picture )

second: your if structure  
about the mouseover is like  
not draw the ellipse ( is that wanted or did you expect a other color )

there is a e[i] array not named containing 0 || 1 || 2  
detected by if structure only if ( 0 ) {orange} else {green}  
there you could add a third color.

i try:

```auto
int no = 20; // number of objects

int[] x = new int[no]; // x-position
int[] y = new int[no]; // y-position
int[] d = new int[no]; // diameter
int[] e = new int[no]; // color 

void setup() {
  size(500, 500);
  ellipseMode(CENTER);
  colorMode(HSB, 100, 100, 100);
  for (int i = 0; i < no; i++) {
    d[i] = int(random(15, 50));
    x[i] = int(random(d[i], width - d[i])); // always show full circles
    y[i] = int(random(d[i], height - d[i])); // always show full circles
    e[i] = int(random(0, 101)); // kll 0 .. 100 HSB colors
    println("x "+nf(x[i],3,1)+" y "+nf(y[i],3,1)+" d "+nf(d[i],3,1)+" HSB color "+nf(e[i],3));
  }
}

void draw() {
  background(20, 50, 80);
  for (int i=0; i<no; i++) {
    if (dist(x[i], y[i], mouseX, mouseY) <= d[i]/2) {
      noFill(); // but show circle
      stroke(50, 100, 100);
    } else {
      noStroke();
      fill (e[i], 100, 100);
    } 
    ellipse (x[i], y[i], d[i], d[i]);
  }
}

```

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:02pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/3 "2018-10-26T17:02:35Z")

</div>

Thanks so much for your response.

I am trying to modify this code for a homework assignment, and i am super new to processing and 100% don’t know what I am doing.

What I am trying to achieve with this code is to create a picture with 4-6 different colors of ellipses. Do you know what variable I can change to make the second set of colored ellipses different from the first set?

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:04pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/4 "2018-10-26T17:04:30Z")

</div>

and with the if structure, I was hoping for another color instead of not drawing the ellipse. again, I’m very new to this :’(

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 26, 2018, 5:15pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/5 "2018-10-26T17:15:05Z")

</div>

hi, again, i not see 2 sets…  
what i see in your program was, that you print a array(list) of circles 2 times / on same position…  
if you use my code get more random colors, but not 2 sets.  
how should that look, and what has that to do with the “mouseover”

you could make all in the upper half of the picture and print them again with y + 250  
and there you could allow ( for all the second set/print )  
a other color by mouse position…  
fill(e[i]+mouseX/5,100,100); or in the intensity…

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:16pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/6 "2018-10-26T17:16:19Z")

</div>

So if i wanted to make another set of colors I should make a different array?

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:17pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/7 "2018-10-26T17:17:53Z")

</div>

or a different int variable?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 26, 2018, 5:23pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/8 "2018-10-26T17:23:24Z")

</div>

if you use the c[i] and e[i] as 2 different color arrays,  
you need to print the array 2 times / and at different position /  
for many color use my random HSB color

again, what you need the mouse to do?

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:31pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/9 "2018-10-26T17:31:17Z")

</div>

I don’t need the mouse part of it. It was leftover code from what my teacher provided. I’d prefer to just have a static image of circles, unchanging.

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:32pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/10 "2018-10-26T17:32:09Z")

</div>

and so I would need a separate println statement for variable c?  
how would I change the position?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 26, 2018, 5:38pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/11 "2018-10-26T17:38:08Z")

</div>

pls test

```auto
int no = 10; // number of objects

int[] x = new int[no]; // x-position
int[] y = new int[no]; // y-position
int[] d = new int[no]; // diameter
int[] c = new int[no]; // color set 1
int[] e = new int[no]; // color set 2

void setup() {
  size(500, 500);
  ellipseMode(CENTER);
  colorMode(HSB, 100, 100, 100);
  for (int i = 0; i < no; i++) {
    d[i] = int(random(15, 50));
    x[i] = int(random(d[i], width - d[i])); // always show full circles
    y[i] = int(random(d[i], height/2 - d[i])); // always show full circles UPPER HALF
    c[i] = int(random(0, 101)); // kll 0 .. 100 HSB colors
    e[i] = int(random(0, 101)); // kll 0 .. 100 HSB colors
    println("x "+nf(x[i],3,1)+" y "+nf(y[i],3,1)+" d "+nf(d[i],3,1)+" HSB color "+nf(e[i],3));
  }
}

void draw() {
  background(20, 50, 80);
  fill(0);
  rect(0,250,500,250);
  for (int i=0; i<no; i++) {
    fill(c[i],100,100);
    ellipse (x[i], y[i], d[i], d[i]);
    fill(e[i],100,100);
    ellipse (x[i], y[i]+250, d[i], d[i]);
  }
}

```

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:43pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/12 "2018-10-26T17:43:15Z")

</div>

this is more close to what I am looking for. is there a way to make it not separated between bottom & top?

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:43pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/13 "2018-10-26T17:43:46Z")

</div>

making the circles appear more random?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 26, 2018, 5:46pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/14 "2018-10-26T17:46:38Z")

</div>

> [@chisholmem](#):
>
> is there a way to make it not separated between bottom & top?

you can move it anywhere, and delete the black rectangle…

you should get clear what you mean with 2 sets??

---

<div class="post-metadata">

**Author:** ![chisholmem](https://avatars.discourse-cdn.com/v4/letter/c/bbe5ce/32.png) [@chisholmem](https://discourse.processing.org/u/chisholmem)\
**Post date:** [October 26, 2018, 5:47pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/15 "2018-10-26T17:47:00Z")

</div>

got it. thanks so much

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 26, 2018, 5:53pm UTC](https://discourse.processing.org/t/processing-array-circle-art/4888/16 "2018-10-26T17:53:51Z")

</div>

but if you want again some interactivity ( mouse )  
try second fill

```auto
    fill(c[i],e[i],mouseX/5);

```