# Placement of objects next to each other

Hi Everyone !

I was wondering if any of you could help me by explaining, how to keep the displacement & rotation of the smileys, but make the top of every 2. row hit the middle of the upper row.
See example on my sketch (the blue one) And this is my code

``````import processing.pdf.*;

PShape smiley;
float step;
float antal = 10;
int k = 1;
float [] startAngles = new float;
boolean startRecord = false;
boolean slutRecord = false;

void setup() {
size(1000, 1000);
frameRate(30);
smooth();
for (int i = 0; i < 100; i++) {
startAngles[i] = random(10);
}
background(251, 240, 255);
step = width/antal;
}

void draw() {
background(251, 240, 255);

if (startRecord) {
beginRecord(PDF, "smiley###.pdf");
startRecord = false;
slutRecord = true;
}
shapeMode(CENTER);
smiley.disableStyle();
fill(255, 0, 0);
noStroke();

for (int j = 0; j < antal; j ++ ) {
for (int i = 0; i < antal; i ++) {
if (j%2 == 0) {
pushMatrix();
translate(i*step, j*step);
rotate(startAngles[i*j]+k*PI/15);
shape(smiley, 0, 0, 100, 100);
popMatrix();
}
if (j%2 == 1) {
pushMatrix();
translate(i*step+step/2, j*step);
rotate(startAngles[i*j]+k*PI/15);
shape(smiley, 0, 0, 100, 100);
popMatrix();
}
}
}
k++;
if (slutRecord) {
endRecord();
}
}

void keyPressed() {
if (key == 's') {
startRecord =true;
}

}
``````

This it how it looks so far 1 Like

You’re close. Notice that the pattern creates tiles of isosceles triangles. Then the question becomes what is the width and height offset from one point of the isosceles triangle to another: Each angle in the isosceles triangle is 60 degrees. You got the horizontal offset correct. Using trigonometry:

w = cos(60 deg) * d = 0.5 * d

Then to get the right vertical offset, we use:

h = sin(60 deg) * d

1 Like

Thank you FSXAC !
I figured it out now Now I’m struggling how to get every second row of smileys, to have 11 smileys, so it goes all the way to the width of the canvas.
I tried to change antalX to 11, but that just makes 11 smiley in the row, instead of the previous 10.

``````import processing.pdf.*;

PShape smiley;
float stepX, stepY;
float antalX = 10;
float antalY = 12;
float x1 = 50;
float y1 = 50;
float x2 = 50;
float y2 = 50;
int k = 1;
float [] startAngles = new float;
boolean startRecord = false;
boolean slutRecord = false;

void setup() {
size(1000, 1000);
frameRate(30);
smooth();
for (int i = 0; i < 100; i++) {
startAngles[i] = random(10);
}
background(251, 240, 255);
stepX = width/antalX;
stepY = sqrt((stepX*stepX)*3/4);
}

void draw() {
background(251, 240, 255);

if (startRecord) {
beginRecord(PDF, "smiley###.pdf");
startRecord = false;
slutRecord = true;
}
shapeMode(CENTER);
smiley.disableStyle();
fill(255, 0, 0);
noStroke();

for (int j = 0; j < antalY; j ++ ) {
for (int i = 0; i < antalX; i ++) {
if (j%2 == 0) {
pushMatrix();
translate(i*stepX, j*stepX-j*(stepX-stepY));
rotate(startAngles[i*j]+k*PI/15);
shape(smiley, 0, 0, x1, y1);
popMatrix();
}
if (j%2 == 1) {
pushMatrix();
translate(i*stepX+stepX/2, j*stepY);
rotate(startAngles[i*j]+k*PI/15);
shape(smiley, 0, 0, x2, y2);
popMatrix();
}
}
}
k++;
if (slutRecord) {
endRecord();
}
}

void keyPressed() {
if (key == 's') {
startRecord =true;
}

if (key == 'z') {
x1 -= 5;
x2 -= 5;
y1 -= 5;
y2 -= 5;
}

if (key == 'x') {
x1 += 5;
x2 += 5;
y1 += 5;
y2 += 5;
}

if (key == 'c') {
x1 -= 5;
y1 -= 5;
}

if (key == 'v') {
x1 += 5;
y1 += 5;
}

if (key == 'b') {
x2 -= 5;
y2 -= 5;
}

if (key == 'n') {
x2 += 5;
y2 += 5;
}

if (key == 'k') {
x2 -= 5;
}

if (key == 'l') {
x2 += 5;
}
}

``````
1 Like

In addition to changing antalX, you need to stride past the edge of the width. Without refactoring your loops, that requires your strides to add up to one more than the width of the screen – on every row. So update this line as well

`````` stepX = width/(antalX-1);
``````

Note that you could also use this approach to stepY.

A drawback in general is that you are storing your rotations in an array. This makes your code brittle, because any changes that increases the number of smileys could break the sketch because you the rotations will no longer match. You should size that array dynamically

`````` startAngles = new float[antalX*antalY];
``````

…or not use it at all, and compute the values on the fly?