# Drawing circles in random sequence

Hi, so I am just a beginner, so this may be a silly question. But in searching, I haven’t quite found what I want.

I have a bunch of ellipses being drawn. Now I know they are drawn in the sequence they are written from top to bottom. But I want every time that it is run, the sequence to be random. Is this possible?

For example, my circles are like this.

void setup() {
size(300,300);
frameRate(10);
}

void draw() {
background(0);
fill(#009CFA);

float ab = noise(t+4);
ab = map(ab,0,1,0,width);
ellipse(ab,height/2,60,60);

float ac = noise(t+5);
ac = map(ac,0,1,0,width);
ellipse(ac,height/3,60,60);

Hi,
The code was missing a value for t so I added `float t = 4.0;` before your first line.

You say you want the “sequence to be random”. What is it that you want to be random, the size of the ellipses, the location of the ellipses, the order they are drawn, something else?

Yes, the order in which they are drawn I want to be random.

How will you know which is which? You get one ellipse with a random location, then another with a different location. Is there something else that will be included? We need something else.

Hmm, I’m not positive I understand your question. But I am coloring the ellipses differently. So I think it’d be nice if sometimes it’s ran and for example the black ellipses is in front, but other times towards the back. Does that make sense?

I made a simple demo. This has different coloured ellipses in different locations. Ignoring the finer details, such as noise or random, is this what you are wanting?

``````int diameter = 60;

void setup() {
size(600, 600);
frameRate(10);
noLoop();
}

void draw() {
background(0);

for (int i = 0; i < 4; i = i+1) {

float x = random(width);
float y = random(height);

noStroke();
color someColour = (int) random(#000000);
fill(someColour);
ellipse(x, y, diameter, diameter);
}
}
``````

Wow thank you. Yea I guess that does basically what I was trying to do in a much simpler way. A couple questions.

I had been setting it up one by one on ellipses and selecting a color that I thought blended well. So I guess that is what I lose on doing it all random.

I have seen the “int” used before, but don’t quite know how. Would it be possible to use that with my existing framework?

I really appreciate the help.

Do you mean this?

“int” just means integer, a “number”; eg.

``````int age = 7
``````

simply defines a variable as a number. “float” is a number with decimal precision. You can convert a float or other datatype to an int by “casting” it, either by putting (int) in front of it, or by using the int() conversion function.

``````int age = (int) 22.3; // stores 22
``````

Regarding your question, I’m not sure what you’re trying to achieve, but if it’s more about randomising the colour of the circle in a series, here’s a variation that does that. It actually highlights that drawing a set of things (a set or list is called an “array”, and notated using square brackets[] ) in a random order without repeating isn’t actually that simple. I’ve included examples of both approaches below by adapting @paulstgeorge sketch:

``````int diameter = 60;

/*
here are two different ways of picking a set of colours that's
different (almost) every time you run it.
*/

// this is an array with a number of hand picked colours
color[] colours = {
#98F7DF,
#98D8F7,
#E298F7,
#F7A098
};

color[] randomisedColors;

void setup() {
size(600, 600);
frameRate(10);
noLoop();

// sorts the colours array randomly
randomisedColors = returnRandomSortedArray(colours);
}

void draw() {
background(0);

for (int i = 0; i < 4; i = i+1) {

// this method picks a random colour from the color array
// it could pick the same colour multiple times
int randomColourIndex = int(random(colours.length));
color randomColour = colours[randomColourIndex];

float x1 = width/3 + 10*i;
float y1 = height/2 + 10*i;

noStroke();
fill(randomColour, 60);
ellipse(x1, y1, diameter, diameter);

// this method uses the randomised colour array
// it will not pick the same colour, given the list is long enough
color colourFromRandomList = randomisedColors[i];

float x2 = width/3 + 10*i + width/3;
float y2 = height/2 + 10*i;

noStroke();
fill(colourFromRandomList, 60);
ellipse(x2, y2, diameter, diameter);
}
}

color[] returnRandomSortedArray(color[] colours) {

color[] temp_colours = colours;
color[] returned_array = new color[0];

while (temp_colours.length > 0) {

int random_index = int(random(0, temp_colours.length-1));
returned_array = append(returned_array, temp_colours[random_index]);

temp_colours[random_index] = temp_colours[temp_colours.length-1];
temp_colours = shorten(temp_colours);
}

return returned_array;
}
``````
1 Like

I really appreciate the help. I’m going to have to dig through it to try and understand better

To randomize the sequence (order) and not size, color or diameter does only make sense when they have

• a predefined color and
• when the overlap.

Otherwise you can’t really see a different order.

I assume that you don’t know Object Oriented Programming yet.

Therefore you can make 3 parallel arrays which hold the data for each ellipse and shuffle the index for them

1 Like

Right, ideally I want predefined colors and I’ve been experimenting with using Noise and really like the positioning that I get and potential for overlap makes it interesting.

1 Like

I made a version for you

Remark

As I said, technically it changes only the order in which we draw. The color and position don’t change (probably not what you want).

Explanation

• First I made 2 parallel arrays (parallel in so far as the data of the 0th ellipse is in x_Pos_Ellipse[0] AND colorEllipse[0]. Think of 2 lists where we look up data from the same line (0th line) to get data for the same ellipse.
• This in setup()
• Then I use a for-loop to display the ellipses using the data from the 2 arrays
• This in draw().

the tricky part

Now the tricky part. Instead of using `i` in draw() as the index (line number) for the arrays, I use another list named `order`. This list initially holds 0,1,2,3 (just like i runs up) but I can shuffle the list. So it is 3201 or so. Now i still runs up from 0 to 3 so order.get(i) in the for loop gives me 3201 as index.

• see reference IntList

Hope this helps.

Warm regards,

Chrisir

Full Code

``````
float t=0.0;

float[] x_Pos_Ellipse = new float [4];
color[] colorEllipse = new color [4];

IntList order=new IntList();

// -------------------------------------------

void setup() {
size(300, 300);
frameRate(10);

for (int i=0; i<x_Pos_Ellipse.length; i++) {
order.append(i);
}

println(order);
// order.shuffle();
println(order);

float ac = (t+.4);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/2, 60, 60);
x_Pos_Ellipse[0]=ac;
colorEllipse[0]=color(255, 0, 0);

ac = (t+.5);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/3, 60, 60);
x_Pos_Ellipse[1]=ac;
colorEllipse[1]=color(0, 255, 0);

ac = (t+.6);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/3, 60, 60);
x_Pos_Ellipse[2]=ac;
colorEllipse[2]=color(0, 0, 255);

ac = (t+.7);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/3, 60, 60);
x_Pos_Ellipse[3]=ac;
colorEllipse[3]=color(255, 0, 255);
}

void draw() {
background(0);

fill(255);
text("Hit any key to shuffle the order of drawing", 17, 17);

for (int i=0; i<x_Pos_Ellipse.length; i++) {
fill(colorEllipse[order.get(i)]   );
ellipse(x_Pos_Ellipse[order.get(i)], height/3, 60, 60);
}
}

// -------------------------------------------

void keyPressed () {
// shuffle
order.shuffle();
}
//

``````
1 Like

2nd version where we change the order of the positions

``````
float t=0.0;

float[] x_Pos_Ellipse = new float [4];
color[] colorEllipse = new color [4];

IntList order=new IntList();

// -------------------------------------------

void setup() {
size(300, 300);
frameRate(10);

for (int i=0; i<x_Pos_Ellipse.length; i++) {
order.append(i);
}

println(order);
// order.shuffle();
println(order);

float ac = (t+.4);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/2, 60, 60);
x_Pos_Ellipse[0]=ac;
colorEllipse[0]=color(255, 0, 0);

ac = (t+.5);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/3, 60, 60);
x_Pos_Ellipse[1]=ac;
colorEllipse[1]=color(0, 255, 0);

ac = (t+.6);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/3, 60, 60);
x_Pos_Ellipse[2]=ac;
colorEllipse[2]=color(0, 0, 255);

ac = (t+.7);
ac = map(ac, 0, 1, 0, width);
// ellipse(ac, height/3, 60, 60);
x_Pos_Ellipse[3]=ac;
colorEllipse[3]=color(255, 0, 255);
}

void draw() {
background(0);

fill(255);
text("Hit any key to shuffle the order of drawing", 17, 17);

for (int i=0; i<x_Pos_Ellipse.length; i++) {
fill(colorEllipse[order.get(i)]   );
ellipse(x_Pos_Ellipse[i],
height/3, 60, 60);
}
}

// -------------------------------------------

void keyPressed () {
// shuffle
order.shuffle();
}
//

``````
1 Like

@Chrisir Haha I love how complicated the solution to this problem actually is… way beyond what the op can handle, but at least we had fun… xkcd: Nerd Sniping much?

1 Like