[3.0.1]Overlapping shapes (as a sort of clipping mask)

edited November 2015 in Questions about Code

Hi everyone! I'm newbie at Processing and starting a tumblr blog about Processing-related CGIs. (It is still empty, but I'm preparing the first post :D)

I'm trying to recreate by scratch this amazing piece of art by Hakim el Hattab: http://lab.hakim.se/hypnos/

Here's my code:

  void setup(){
    size(600,600);
    rectMode(RADIUS);
    smooth();
  }
    int n = 200;
  void draw(){
    clear();
    background(255);
    for (int j = 0 ; j < n ; ++j){
      pushMatrix();
      translate(300-150*sin(radians(j*360/n)),300-150*cos(radians(j*360/n)));
      rotate(radians(j+millis()/30));
      rect(0,0,25,25);
      popMatrix();
    }
  }

And the result: hypnos

I'd like to get rid of that overlapping square, hiding it behind the first one instead of deleting it.

Can anyone help me? Thanks so much in advance ;)

Answers

  • it needs to be 3d, that way the z-buffer will fix the hiding.

  • edited November 2015

    I am not convinced that z ordering would solve the problem because one of the sqyares MUST be nearest the viewpoint so will appear above the rest but I am willing to be proved wrong :)

    void setup() {
      size(600, 600, P3D);
      rectMode(RADIUS);
      smooth();
      hint(DISABLE_OPTIMIZED_STROKE);
    }
    
    int n = 200;
    
    void draw() {
      clear();
      background(255);
      for (int j = 0; j < n; ++j) {
        pushMatrix();
        translate(300-150*sin(radians(j*360/n)), 300-150*cos(radians(j*360/n)), -j * 0.001);
        rotate(radians(j+millis()/30));
        rect(0, 0, 25, 25);
        popMatrix();
      }
    }
    
  • 3D rendering doesn't solve the problem, as the last element is still on top of the others. In the original source there is some sort of 'clipping mask'. Is there anything similar in Processing?

  • Here is a start. I don't have time to finish it. The idea is to make the top and the bottom separate. All you need to do now is to fix the translate / rotation for the top one so it doesn't finish in the top but finishes in the bottom.

    PGraphics top, bottom;
    
    void setup() {
      size(600, 600);
    
      top = createGraphics(width, height/2);
      bottom = createGraphics(width, height/2);
      top.smooth();
      bottom.smooth();
    }
    int n = 200;
    
    void draw() {
    
      for (int i = 0; i < 2; i++) {
        PGraphics pg;
    
        if (i == 0) {
         pg = top;
        }
        else {
          pg = bottom;
        }
    
        pg.beginDraw();
        pg.rectMode(RADIUS);
        pg.background(255);
    
        if (pg == bottom) pg.fill(255,0,0);
    
        for (int j = 0; j < n; ++j) {
          pg.pushMatrix();
          if (pg == bottom) {
            pg.translate(0, -top.height);  
          }
          pg.translate(300-150*sin(radians(j*360/n)), 300-150*cos(radians(j*360/n)));
          pg.rotate(radians(j+millis()/30));
          pg.rect(0, 0, 25, 25);
          pg.popMatrix();
        }
        pg.endDraw();
      }
      image(top, 0, 0);
      image(bottom, 0, top.height);
    }
    
  • About the one in 3D. It should be possible to rotate them slightly. Like how they would stick under each other in real life.

  • Done.

    PGraphics top, bottom;
    
    void setup() {
      size(600, 600);
    
      top = createGraphics(width, height/2);
      bottom = createGraphics(width, height/2);
      top.smooth();
      bottom.smooth();
    }
    int n = 200;
    
    void draw() {
    
      for (int i = 0; i < 2; i++) {
        PGraphics pg;
    
        if (i == 0) {
          pg = top;
        } else {
          pg = bottom;
        }
    
        pg.beginDraw();
        pg.rectMode(RADIUS);
        pg.background(255);
    
        if (pg == top) {
    
          for (int j = 0; j < n-7; ++j) {
            pg.pushMatrix();
            pg.translate(300, 300);
            pg.translate(-150*sin(radians(180+j*360/n)), -150*cos(radians(180+j*360/n)));
            pg.rotate(radians(180*j/n+millis()/30));
            pg.rect(0, 0, 25, 25);
            pg.popMatrix();
          }
        } else {
          for (int j = 0; j < n; ++j) {
            pg.pushMatrix();
            pg.translate(0, -top.height);
            pg.translate(300, 300);
            pg.translate(-150*sin(radians(j*360/n)), -150*cos(radians(j*360/n)));
            pg.rotate(radians(180*j/n+millis()/30));
            pg.rect(0, 0, 25, 25);
            pg.popMatrix();
          }
        }
        pg.endDraw();
      }
      image(top, 0, 0);
      image(bottom, 0, top.height);
    }
    

    Thanks a lot to everyone (but in special to @clankill3r to solve this thing :D).

Sign In or Register to comment.