How can I make a grid of tiles (that can be rotated randomly) in processing?

Miguel Henrique Salviatti

I have the following code in Processing that will produce a grid of randomly selected tiles from loaded files:

static int img_count = 6;

PImage[] img;

void setup() {
  size(1200, 800);
  img = new PImage[img_count];
  for (int i = 0; i < img_count; i++) {
    img[i] = loadImage("./1x/Artboard " + (i+1) + ".png");
  }
}

void draw() {
  for (int i = 0; i < 12; i++) {
    for (int j = 0; j < 12; j++) {
      int rand_index = int(random(img_count));
      image(img[rand_index], 100 * i, 100 * j, 100, 100 );
    }
  }
}

By itself, it almost does what I want:

image

But I need that every tile be randomly rotated as well, so I tried this:

void draw() {
  for (int i = 0; i < 12; i++) {
    for (int j = 0; j < 12; j++) {
      float r = int(random(4)) * HALF_PI;     // I added this
      rotate(r);                              // I added this
      int rand_index= int(random(img_count));
      image(img[rand_index], 100 * i, 100 * j, 100, 100 );
    }
  }
}

This second code doesn't act as I intended, as rotate() will rotate the entire image, including tiles that were already rendered. I couldn't find an appropriate way to rotate a tile the way I want, is there any way to rotate the tile before placing it?

George Profenza

You will probably need to translate before rotating. The order of transformations is important (e.g. translating, then rotating will be a different location than rotation, then translating). In your case image(img, x, y) makes it easy to miss that behind the scenes it's more like translate(x,y);image(img, 0, 0);.

I recommend:

void draw() {
  for (int i = 0; i < 12; i++) {
    for (int j = 0; j < 12; j++) {
      float r = int(random(4)) * HALF_PI;     // I added this
      translate(100 * i, 100 * j);            // translate first
      rotate(r);                              // I added this
      int rand_index= int(random(img_count));
      image(img[rand_index], 0, 0, 100, 100 );
    }
  }
}

(depending on your setup, you might find imageMode(CENTER); (in setup()) handy to rotate from image centre (as opposed to top left corner (default)))

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can i make an output of multiple images with an for loop in processing?

How can I make text vertical (rotated 90 deg) in react native?

How can I make this grid variation of the voronoi diagram?

How can I make a div span multiple rows and columns in a grid?

How can I make a responsive menu with diagonal grid in CSS?

How do i make the tiles in a grid change color When pressed?

How can I make image block-grid RTL?

How can I make this responsive grid layout?

How can I make this sidebar fixed Vertically using CSS Grid?

How can I make my CSS grid even with the background color?

How can I make my grid items next to each other?

How can I make an input element respect the dimensions of a grid container?

How can I make these images stay in a "grid"?

How can I make my bot that plays piano tiles faster?

How can I randomly make holes in snake?

How Can I Make An Arrow Image Move Rotated Direction? { Pygame }

How Can I Make An Arrow Image Move Rotated Direction?

How can I make a montage which seamlessly tiles the same one image file?

Processing:How can I make a 9 become a 10?

How can I make these processing.js functions in javascript?

How can I make a tetradecagon with Processing.Js?

How can I make tables respect the grid in Bootstrap 3?

How can I make the android to mvoe between the waypoints randomly?

How can I make infinite grid with canvas?

How can I make video size responsive with CSS Bootstrap grid?

How can I make small grid lines above ChartJS labels?

How can I make 3 grid design like this?

How can I make responsive grid layout in html css

How can I make a repeated pattern in a css grid