Drawing circles in random sequence

jsco · September 3, 2021, 6:05pm

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);

paulstgeorge · September 3, 2021, 7:36pm

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?

jsco · September 3, 2021, 7:45pm

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

paulstgeorge · September 3, 2021, 7:53pm

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.

jsco · September 3, 2021, 7:56pm

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?

paulstgeorge · September 3, 2021, 8:21pm

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

jsco · September 3, 2021, 8:48pm

paulstgeorge:

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.

paulstgeorge · September 3, 2021, 9:16pm

Do you mean this?

rapatski · September 3, 2021, 9:25pm

“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;
}

jsco · September 4, 2021, 8:41pm

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

Chrisir · September 4, 2021, 9:17pm

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

jsco · September 4, 2021, 9:39pm

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.

Chrisir · September 6, 2021, 7:32pm

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();
}
//

Chrisir · September 6, 2021, 7:40pm

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();
}
//

rapatski · September 6, 2021, 7:53pm

@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?

Topic		Replies	Views
Random circles using arrays Coding Questions	1	768	December 12, 2018
I need random shapes to appear in a random order Coding Questions	2	885	August 13, 2021
How to assign random colors to multiple objects Coding Questions	3	675	August 25, 2021
Color selected from pallette randomly for ellipses drawn by an array Coding Questions	2	717	December 2, 2018
I want to create random circle walking how would I do this? Beginners	8	242	July 13, 2022

Drawing circles in random sequence

Related topics