Random position subordinated to random positions

Processing Coding Questions
1

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!

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

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
example674×633 802 Bytes

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:

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?

3

I liked this problem and ended up writing a solution:

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
And a great Java Course: https://learnjavathehardway.org/

4

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?

5

Hello,

You can draw fixed shapes and shuffle the colors.

Reference:
IntList \ Language (API) \ Processing 3+

Example using the reference:

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

:)

6

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?

7

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.

8

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