# I need random shapes to appear in a random order

**URL:** https://discourse.processing.org/t/i-need-random-shapes-to-appear-in-a-random-order/31716
**Category:** Coding Questions
**Created:** [August 13, 2021, 2:35pm UTC](https://discourse.processing.org/t/i-need-random-shapes-to-appear-in-a-random-order/31716 "2021-08-13T14:35:14Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![maroslan](https://avatars.discourse-cdn.com/v4/letter/m/13edae/32.png) [@maroslan](https://discourse.processing.org/u/maroslan)
#### Post date: [August 13, 2021, 2:35pm UTC](https://discourse.processing.org/t/i-need-random-shapes-to-appear-in-a-random-order/31716/1 "2021-08-13T14:35:14Z")

</div>

Hi everyone

For an assignment I am trying to make two shapes (ellipse and rectangle) appear in a random order (with random color and position).

The color and position I got down, but I cannot seem to seperate the ellipse and the rectangle. Now they appear at the same time. But I don’t want that, I want one or the other, chosen randomly which one.

I am a really beginner so there might be an easy solution but I cannot seem to figure it out!

My code:

```auto
float x;
float y;
float w;
float h;  
  
void setup() {
 size(1920, 1080);
 background(255);
 frameRate(10);
 noStroke();
}

void shape() {

  for (int i=0; i<1; i=i+1) { 
    x = int(random(width));
    y = int(random(height));
    w = int(random(50, 200));
    h = int(random(50, 200));
  }
 
 ellipse(x, y, w, h); 
 fill(random(255), random(255), random(255));

 rect(x, y, w, h);
 fill(random(255), random(255), random(255));
}

void draw() {
 random(ellipse, rect);
}

```

Obviously the last part doesn’t work, but I cannot understand how else I can do it! I appriciate every reply, thank you!

---

<div class="post-metadata">

### Author: ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)
#### Post date: [August 13, 2021, 3:02pm UTC](https://discourse.processing.org/t/i-need-random-shapes-to-appear-in-a-random-order/31716/2 "2021-08-13T15:02:44Z")

</div>

the simplest way to separate the appearance of the two shapes, you could do something like

```auto
int scenario = round(random(1)); //either 0 or 1
int x = 20, y = 20, a = 15, x2 = 100, y2 = 100, a2 = 20;
void setup() {
  size(200,200);
}
void draw() {
  if (scenario == 0) {
    if (frameCount>20) circle(x, y, a);
    if (frameCount>50) square(x2, y2, a2);
  } else if (scenario == 1) {
    if (frameCount>20) square(x, y, a);
    if (frameCount>50) circle(x2, y2, a2);
  }
}

```

Try to do something similar.

At first, you choose which scenario appears at first. Either the square or the circle.  
After that, you wait 20 frames for the first shape to appear.  
After 50 frames has passed, the second shape will appear.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 13, 2021, 6:17pm UTC](https://discourse.processing.org/t/i-need-random-shapes-to-appear-in-a-random-order/31716/3 "2021-08-13T18:17:36Z")

</div>

Hello @maroslan,

Your code with a modification:

```auto
float x;
float y;
float w;
float h;

void setup() {
  size(1920, 1080);
  background(255);
  frameRate(10);
  noStroke();
}

void shape() {

  for (int i=0; i<1; i=i+1) {
    x = int(random(width));
    y = int(random(height));
    w = int(random(50, 200));
    h = int(random(50, 200));
  }

  ellipse(x, y, w, h);
  fill(random(255), random(255), random(255));

  rect(x, y, w, h);
  fill(random(255), random(255), random(255));
}

void draw() {
  //random(ellipse, rect);
  shape();
}

```

Does this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aefcb3c4436def1af178814b57fe72b68877a26a.png)

It still needs work…

Check out the resources here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

`:)`
