Tricky grid

alexdontsurf

Hello people!

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

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

koogs

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++;
  }
}

alexdontsurf

Thank you so much!

Chrisir

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

Chrisir

% 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

;-)

alexdontsurf

so clear now, you guys made my day!

Chrisir

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

koogs

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.

GoToLoop

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-)