#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Tricky grid

edited April 2016

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);
}
}
}
``````
Tagged:

• 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.

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