Placement of objects next to each other

Processing Coding Questions
1

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

And this is my code

import processing.pdf.*;

PShape smiley;
float step;
float antal = 10;
int k = 1;
float [] startAngles = new float[100];
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;
  smiley = loadShape("smiley-03.svg");
}


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

}
2

This it how it looks so far :slight_smile:

smiley-0043
smiley-0043.jpg1000×1000 385 KB

1 Like
3

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:
image

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
4

Thank you FSXAC !
I figured it out now :slight_smile:

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.

25
Skærmbillede 2019-03-07 kl. 10.14.25.png1004×1000 206 KB 

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[100];
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); 
  smiley = loadShape("smiley-03.svg");
}


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
5

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?