Tricky grid

Hello people!

I'm trying to do a grid like this one:

Screen Shot 2016-04-06 at 3.00.06 PM

but the only way I know is writing the two bucles. Anyone know a simpler way?

float max_distance;

void setup() {
  size(640, 360); 
  smooth();
  noStroke();
  max_distance = dist(0, 0, width/3, height/3);
}

void draw() {
  background(0);

  for(int i = 10; i <= width; i += 20) {
    for(int j = 10; j <= height; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 2;
      ellipse(i, j, size, size);
    }
  }

  for(int i = 20; i <= width; i += 20) {
    for(int j = 20; j <= height; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 2;
      ellipse(i, j, size, size);
    }
  }
}
Tagged:

Answers

  • Answer ✓

    your grid is two square grids offset. the picture is a triangle grid...

    float max_distance;
    
    void setup() {
      size(640, 360); 
      smooth();
      noStroke();
      max_distance = dist(0, 0, width/3, height/3);
    }
    
    final float SEPARATION = 20.0;
    final float SIN60 = .866025404;
    
    void draw() {
      background(0);
    
      int count = 0;
      int start;
      // y increment is .866 that of x increment
      for(int y = 10; y <= height; y += SEPARATION * SIN60) {
        // alternate lines start indented
        if (count % 2 == 0) {
          start = 0;
        } else {
          start = (int)(SEPARATION / 2);
        }
        for(int x = start; x <= width; x += SEPARATION) {
          float size = dist(mouseX, mouseY, x, y);
          size = size / max_distance * 2;
          ellipse(x, y, size, size);
        }
        count++;
      }
    }
    
  • Thank you so much!

  • float max_distance;
    
    void setup() {
      size(640, 360); 
      smooth();
      noStroke();
      max_distance = dist(0, 0, width/3, height/3);
    }
    
    void draw() {
      background(0);
    
    
    
      for (int i = 10; i <= width; i += 20) {
        for (int j = 10; j <= height; j += 20) {
          float size = dist(mouseX, mouseY, i, j);
          size = size/max_distance * 2;
          if ((j-10) % 40 == 0)
            ellipse(i, j, size, size);
          else
            ellipse(i+10, j, size, size);
        }
      }
    }
    
  • edited April 2016 Answer ✓

    % delivers the remainder of a division ( of (j-10) by 40)

    when the rest is 0 it is 40 / 80 / 120 etc.

    thus you can identify every 2nd line and move it by adding 10 in the ellipse

    why is it 40? because we add 20 to j, so 2X20 is every 2nd time

    ;-)

  • so clear now, you guys made my day!

  • I think koogs is faster than mine (no relevance practically)

    also since max_distance * 2 is const we can calculate it before the loops and stored in a var for later usage (same for SEPARATION * SIN60)

    also, dist can be replaced by a formula (pythagoras)

    and % can be replaced too

  • dist can be replaced by a formula (pythagoras)

    dist() is pythagorus

    https://github.com/processing/processing-android/blob/a4324246eff7f4f3c8bbedd0ff9c537797141a2e/core/src/processing/core/PApplet.java

    static public final float dist(float x1, float y1, float x2, float y2) {
        return sqrt(sq(x2-x1) + sq(y2-y1));
    }
    

    and the java compiler is probably clever enough to know that a constant * a constant is a constant so it'll replace it at compile time, won't evaluate it every loop.

  • edited April 2016

    Indeed within this statement y += SEPARATION * SIN60, b/c both SEPARATION & SIN60 are compile-time final constant fields, the multiplication operation also happens in compile-time. \m/

    However, for Java/JS cross-mode performance's sake, it'd be a good idea to declare another constant using the result of that multiplication too. L-)

Sign In or Register to comment.