# Random position subordinated to random positions

**URL:** <https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302>\
**Category:** Coding Questions\
**Created:** [July 17, 2021, 2:58pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302 "2021-07-17T14:58:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [July 17, 2021, 2:58pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/1 "2021-07-17T14:58:53Z")

</div>

hi there! I want to use random function to give this blocks random positions in that canvas, but I really don’t know how to do it. I can make the pink one has y valor between 0 and 500: rect(0,random(0,500),900,400); but I don’t know what to do with yellow one and the others to move them up and down depending on the position of the rest. And my level, as you can see, is absolutely beguinner. So do you have any a idea about how to progress with this? Thank you so much!

```auto
void setup() {
  
  size(900, 900);
  background(255,255,255);
  
  fill(255,0,255);
  rect(0,0,900,400);
  
  fill(255,255,0);
  rect(0,400,900,200);
  
  fill(0,255,255);
  rect(0,600,900,100);
  
  fill(0,0,255);
  rect(0,700,900,100);
  
  fill(0,128,128);
  rect(0,800,900,100);
  
  }
  
  

```

---

<div class="post-metadata">

**Author:** ![TomD](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@TomD](https://discourse.processing.org/u/TomD)\
**Post date:** [July 17, 2021, 3:46pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/2 "2021-07-17T15:46:36Z")

</div>

Hi there,

Do you mean that you would like to position the boxes randomly to segment the height to of the canvas?  
Something like this?

 ![example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3cdd10a693b53ba89897fed3adbcb39f5514407a.png)

If so you could set a variable for the height of the first box,  
give it a random value,  
draw that box using the variable as the lower corner of the box,  
remove the height of that box you’ve just drawn from the random range,  
use that height to position the top corner of the next box,  
calculate a random height for the next box in the remaining canvas space  
and so on.

The random() function in processing allows you to set a upper and lower bounds for the range of values that you’d like to produce. i.e:

```auto
float value = random(lower_bounds, upper_bounds);

```

You can also make use of the built in static variables height and width within the draw loop, as these default to the height and width of the canvas defined by size() in setup()

Does that help?

---

<div class="post-metadata">

**Author:** ![TomD](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@TomD](https://discourse.processing.org/u/TomD)\
**Post date:** [July 17, 2021, 4:09pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/3 "2021-07-17T16:09:01Z")

</div>

I liked this problem and ended up writing a solution:

```auto
float height1, height2;
int numBoxes = 5;

void setup() {
  size(800, 800);
  background(255);
  noLoop();
}

void draw() {
  height1 = 0;
  for (int i=0; i<numBoxes-1; i++) {
    height2 = random(height1, height);
    fill(random(255), random(255), random(255));
    rect(0, height1, width, height2);
    height1 = height2;
  }
  fill(random(255), random(255), random(255));
  rect(0, height1, width, height);
}

```

If you are new to processing and/or Java can I suggest the following resources:

Dan Shiffman’s tutorials are **excellent** : [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
And a great Java Course: [https://learnjavathehardway.org/](https://learnjavathehardway.org/)

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [July 17, 2021, 4:27pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/4 "2021-07-17T16:27:06Z")

</div>

Oh, thank you so much! That is really interesting and I think about playing with widths, but what I really want to change are the position of the blocks, I mean, pink box has to have a width of 400 px, and the same with the others. Do you think there is a way to move them randomly without hide them behind themselves?

---

<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:** [July 17, 2021, 4:48pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/5 "2021-07-17T16:48:26Z")

</div>

Hello,

You can draw fixed shapes and shuffle the colors.

Reference:  
_[IntList \ Language (API) \ Processing 3+](https://processing.org/reference/IntList.html)_

Example using the reference:

```auto
IntList inventory;

void setup() 
  {
  size(200, 200);
  inventory = new IntList();
  inventory.append(color(255, 0, 0));
  inventory.append(color(0, 255, 0));
  inventory.append(color(0, 0, 255));
  //println(inventory);
  //prints color in hex
  
  //These are your colors
  inventory.shuffle();
  println(hex(inventory.get(0)));
  println(hex(inventory.get(1)));
  println(hex(inventory.get(2)));
  
  noLoop();
  }

```

`:)`

---

<div class="post-metadata">

**Author:** ![TomD](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@TomD](https://discourse.processing.org/u/TomD)\
**Post date:** [July 17, 2021, 4:55pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/6 "2021-07-17T16:55:31Z")

</div>

So you’d want to have some sort of data structure for saving the positions of the boxes so that you can make a logical check against them so that none overlap.

You could create a 2D boolean array the same size as the canvas, and when you draw a box set those positions in the array to True (or false), that is, they contain a box.

Then when trying to draw the next box you can check for overlap using that array.

Really this would be kind of a brute force solution for finding valid positions but I think it may do the job?

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [July 17, 2021, 11:15pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/7 "2021-07-17T23:15:07Z")

</div>

Thank you so much for you help, I really appreciate it. I don’t find the way to do it, I think that I need to think it out of the application, I dont know what i have to program! But I will think about those things that you told me, thanks again.

---

<div class="post-metadata">

**Author:** ![TomD](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@TomD](https://discourse.processing.org/u/TomD)\
**Post date:** [July 18, 2021, 2:09pm UTC](https://discourse.processing.org/t/random-position-subordinated-to-random-positions/31302/8 "2021-07-18T14:09:26Z")

</div>

No Worries, Sorry I couldn’t help more.  
Do let us know if you eventually get it figured out though!