Class problem: Place four Sketches on the screen

Processing Coding Questions
1

Hi guys I have this situation: I created an exercise where inside of it I created a class object called A_square, but my goal would be has in a square 666x666, four different classes (A_B_C_D) which different graphic output.

My question: How Could I create a square 666x666 with inside of it four different smaller square (333x333) with different dynamic settings? Maybe with some PGraphics settings?

Sorry for my English, it is not my first Language.

//This below is the first situation:
A_square a1;

void setup () {
  size (333, 333);
  frameRate(12);

  background (0);
  a1 = new A_square();
}

void draw() {
  background (0);
  a1.graphic();
}

// ========================================================

class A_square {
  int x;
  int y;
  float r=0;
  boolean rotationMode = true;


  A_square () {
    // empty constructor
  }

  void graphic() {
    if (rotationMode) {
      translate (width/2, height/2);
      rotate (radians(r));
      r = r + 1;
    }
    for (int y=-width; y<width; y=y+20) {
      for ( int x=-height; x<height; x=x+20) {
        fill(random(0, 255), random(0, 255), random(0, 255)); 
        ellipse (x, y, random(5, 15), random(5, 15));
      }
    }
  }
}
2 Likes
2

depending of what you plan you can just make it so that class A_square
only produces output between 0 and 333 for x and y

  • and then next class from 334 to 666 for x and from 0 to 333 for y and so on
3

Could be, actually I don’t fully understand the second part of your message. However the concept is based on the idea to have different square (dynamic) inside of a bigger one.
The other three (B-C-D) I’m going to create, but before I would like to achive the 333x333 A_square inside of the 666x666 one, maybe A in the upper right of it.

Do you suggest to use map funcition for adjust the A_square output? Or inside the for loops?

The concept is simple but technically I’m stuck because the first A_square is based on the width and height of a square which is misured 333x333.

4

makes it so that class A_square
only produces output between 0 and 333 for x and y




//This below is the first situation:
A_square a1;
B_square b1; 
C_square c1; 

void setup () {
  size (666, 666);
  frameRate(12);

  background (0);
  a1 = new A_square();
  b1 = new B_square();
  c1 = new C_square();
}

void draw() {
  background (0);
  a1.graphic();
  b1.graphic();
  c1.graphic();
}

// ========================================================

class A_square {
  int width1=333;
  int height1=333;
  int x;
  int y;
  float r=0;
  // boolean rotationMode = true;

  A_square () {
    // empty constructor
  }

  void graphic() {

    ellipseMode(CENTER); 
    for (int y=0; y<width1; y=y+20) {
      for ( int x=0; x<height1; x=x+20) {
        pushMatrix();    
        fill(random(0, 255), random(0, 255), random(0, 255));
        translate(x, y);
        rotate (radians(r));
        ellipse (0, 0, random(5, 15), random(5, 15));
        popMatrix();
      }
    }
    r = r + 1;
  }
  //
}
// ========================================================

class B_square {
  void graphic() {
    fill(0, 0, 244); 
    rect(334, 0, 
      333, 333);
  }
}
// ========================================================

class C_square {
  void graphic() {
    fill(220, 0, 244); 
    rect(334, 334, 
      333, 333);
  }
}
1 Like
5

OR you use PGraphics (done only for A_class)



//This below is the first situation:
A_square a1;
B_square b1; 
C_square c1; 

void setup () {
  size (666, 666);
  frameRate(12);

  background (0);
  a1 = new A_square();
  b1 = new B_square();
  c1 = new C_square();
}

void draw() {
  background (0);

  a1.graphic();
  b1.graphic();
  c1.graphic();
}

// ========================================================

class A_square {
  int width1=333;
  int height1=333;
  int x;
  int y;
  float r=0;
  // boolean rotationMode = true;

  PGraphics pg1; 

  A_square () {
    // empty constructor
  }

  void graphic() {
    pg1=createGraphics(333, 333); 
    pg1.beginDraw(); 
    pg1.pushMatrix();
    pg1.translate(width/2, height/2);
    pg1.rotate(radians(r));
    pg1.ellipseMode(CENTER); 
    for (int y=-width; y<width; y=y+20) {
      for ( int x=-height; x<height; x=x+20) {
        pg1.pushMatrix();    
        pg1.fill(random(0, 255), random(0, 255), random(0, 255));
        pg1.translate(x, y);
        pg1.rotate(radians(r));
        pg1.ellipse (0, 0, 
          random(5, 15), random(5, 15));
        pg1.popMatrix();
      }
    }
    r = r + 1;
    pg1.popMatrix();
    pg1.endDraw();
    //
    image(pg1, 0, 0);
  }
  //
}
// ========================================================

class B_square {
  void graphic() {
    fill(0, 0, 244); 
    rect(334, 0, 
      333, 333);
  }
}
// ========================================================

class C_square {
  void graphic() {
    fill(220, 0, 244); 
    rect(334, 334, 
      333, 333);
  }
}
1 Like
6

Thank you so much!!! I have a question about the first case: Why the code is still? I mean the rotation, I would like to achive the rotation of the loops

7

Do you mean this case::: makes it so that class A_square
only produces output between 0 and 333 for x and y

They do rotate on my computer

But it’s only an example you can change it the way you want

8

Yes I mean that case, but the strange thing it’s on my pc the code doesn’t rotate…

9

Then you should fix it

10

Ok, but I don’t understand why on your pc it rotates, I took your code!

11

well each ellipse rotates around itself, the entire thing doesn’t

In this new version it does




//This below is the first situation:
A_square a1;
B_square b1; 
C_square c1; 
D_square d1;

void setup () {
  size (666, 666);
  frameRate(12);

  background (0);
  a1 = new A_square();
  b1 = new B_square();
  c1 = new C_square();
  d1 = new D_square();
}

void draw() {
  background (0);
  a1.graphic();
  b1.graphic();
  c1.graphic();

  d1.graphic();
}

// ========================================================

class A_square {
  int width1=333;
  int height1=333;
  int x;
  int y;
  float r=0;
  // boolean rotationMode = true;

  A_square () {
    // empty constructor
  }

  void graphic() {

    pushMatrix();
    ellipseMode(CENTER); 
    translate(333/2, 333/2);
    rotate (radians(r));

    for (int y=-width1/2; y<width1/2; y=y+20) {
      for ( int x=-height1/2; x<height1/2; x=x+20) {
        pushMatrix();    
        fill(random(0, 255), random(0, 255), random(0, 255));
        translate(x, y);
        rotate (radians(r));
        ellipse (0, 0, random(5, 15), random(5, 15));
        popMatrix();
      }
    }
    r = r + 1;
    popMatrix();
  }
  //
}
// ========================================================

class B_square {
  void graphic() {
    fill(0, 0, 244); 
    rect(334, 0, 
      333, 333);
  }
}
// ========================================================

class C_square {
  void graphic() {
    fill(220, 0, 244); 
    rect(334, 334, 
      333, 333);
  }
}

class D_square {
  void graphic() {
    fill(220, 0, 244); 
    rect(0, 334, 
      333, 333);
  }
}
1 Like
12

Awesome I’m very happy thank you!!!

1 Like