Putting rectangles in random positions

Processing
1

Hi everyone, I’m new to processing, and in this class, I’m in I’m trying to place rectangles in a scattered array behind this big star that I have already in place.
The image I have attached is my sketch for this project

Animated sketch design
Animated sketch design1460×1091 9.23 KB

the code I have right now is this

void setup(){
  size(1360, 1400);
}

void draw() {
  background(51);
  fill(41,171,226);
  stroke(255);
  strokeWeight(2);
  beginShape();
  vertex(785, 233);
  vertex(881,431);
  vertex(1098,464);
  vertex(939, 617);
  vertex(975, 834);
  vertex(781, 730);
  vertex(586, 831);
  vertex(625, 614);
  vertex(468, 460);
  vertex(686, 430);
  endShape(CLOSE);
}
{
  float r = 0;
  float g = 0;
  float b = 0;
  float a = 0;
  float X = 0;
  float Y = 0;
 if (mousePressed){
                r = int(random(0, 255));
                g = int(random(0, 255));
                b = int(random(0, 255));
                a = int(random(0, 255));
                X = int(random(10, 60));
                Y = int(random(10, 60));
                   fill(r, g, b, a);
                rectMode(CENTER);
                rect(mouseX, mouseY, X, Y);
              }
            }

whenever i run this code i only get the star and not the rectangles, i would greatly appreciate any and all help!

2

Take the background(51) out of the draw() function. This will erase everything on every draw cycle which occurs 60 times per second by default. I presume that if you draw a rectangle you want it to stay on your screen, so leave it out.

Use this mousePressed() and it should work:

void mousePressed() {
  r = int(random(0, 255));
  g = int(random(0, 255));
  b = int(random(0, 255));
  a = int(random(0, 255));
  X = int(random(10, 60));
  Y = int(random(10, 60));
  fill(r, g, b, a);
  rectMode(CENTER);
  rect(mouseX, mouseY, X, Y);
}
1 Like
3

Thank you soo much svan but now its saying that "int does not match with “processing.core.PGraphics”.

void setup(){
  size(1360, 1400);
}

void draw() {
  fill(41,171,226);
  stroke(255);
  strokeWeight(2);
  beginShape();
  vertex(785, 233);
  vertex(881,431);
  vertex(1098,464);
  vertex(939, 617);
  vertex(975, 834);
  vertex(781, 730);
  vertex(586, 831);
  vertex(625, 614);
  vertex(468, 460);
  vertex(686, 430);
  endShape(CLOSE);
}
{
  float r = 0;
  float g = 0;
  float b = 0;
  float a = 0;
  float X = 0;
  float Y = 0;}

void mousePressed() {
  r = int(random(0, 255));
  g = int(random(0, 255));
  b = int(random(0, 255));
  a = int(random(0, 255));
  X = int(random(10, 60));
  Y = int(random(10, 60));
  fill(r, g, b, a);
  rectMode(CENTER);
  rect(mouseX, mouseY, X, Y);
}

its saying those variable doesnt exist when i have it setup to exist?

4

Remove the brackets around your variables (you don’t need the brackets). Usually those variables go at the top of your code.

float r = 0;
float g = 0;
float b = 0;
float a = 0;
float X = 0;
float Y = 0;
1 Like
5

You are amazing thank you, i do have one more request how would i setup to make the star spin after pressing then have the rectangle pop up around the spinning star

6

how would i setup to make the star spin after pressing then have the rectangle pop up around the spinning star

That’s a postgraduate question and I’m not sure I know the answer. We like to limit these threads to one problem, one solution for the next person who searches the archive and reads this. To avoid confusion, it would probably be best to open a new thread; someone else may have a solution to the above question.

1 Like
7

I appreciate all your help so far thank you!

8

I would not advise to get rid of background() since in 99% of the case that will create more problem that it will solve.

Take the example below. We start by drawing a simple white rectangle in the middle of the screen. When a key is pressed, we draw a red rectangle on top of the white one.

void setup() {
  size(600, 600);
  background(20);
}

void draw() {
  noStroke();
  fill(240);
  rect(200, 200, 200, 200);
}

void keyPressed() {
  noStroke();
  fill(240, 0, 0);
  rect(250, 250, 100, 100);
}

You can see how the red rectangle only stay one frame since the white rectangle is being drawn on top . That would be your case if you would draw a rectangle on top of your star with your current code.

The way to do it is to store somewhere the rectangles that you want to draw and to handle in draw() how you want to draw them. One way is to use several ArrayList to store the position, size and color. A better way would be to create a rectangle class holding all that info and use an arraylist to store those rectangle object. Here’s an exemple:

ArrayList<PVector> rectanglesPos;
ArrayList<PVector> rectanglesDim;
ArrayList<Integer> rectanglesCol;

void setup() {
  size(1360, 1400);
  
  rectanglesPos = new ArrayList<PVector>();
  rectanglesDim = new ArrayList<PVector>();
  rectanglesCol = new ArrayList<Integer>();
}

void draw() {
  background(20);
  
  // Draw rectangles
  rectMode(CENTER);
  noStroke();
  for (int i = 0; i < rectanglesPos.size(); i++) {
    fill(rectanglesCol.get(i));
    rect(rectanglesPos.get(i).x, rectanglesPos.get(i).y, rectanglesDim.get(i).x, rectanglesDim.get(i).y);
  }
  
  
  // Draw star
  fill(41, 171, 226);
  stroke(255);
  strokeWeight(2);
  beginShape();
  vertex(785, 233);
  vertex(881, 431);
  vertex(1098, 464);
  vertex(939, 617);
  vertex(975, 834);
  vertex(781, 730);
  vertex(586, 831);
  vertex(625, 614);
  vertex(468, 460);
  vertex(686, 430);
  endShape(CLOSE);
}

void mousePressed() {
  float r = random(0, 255);
  float g = random(0, 255);
  float b = random(0, 255);
  float a = random(0, 255);
  float X = random(10, 60);
  float Y = random(10, 60);

  rectanglesPos.add(new PVector(mouseX, mouseY));
  rectanglesDim.add(new PVector(X, Y));
  rectanglesCol.add(color(r, g, b, a));
}
2 Likes