# Processing Array Circle Art

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?

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 )

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:

``````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]);
}
}

``````

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?

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

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…

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

or a different int variable?

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?

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.

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

pls test

``````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]);
}
}
``````

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

making the circles appear more random?

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

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

got it. thanks so much

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

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