I am trying to figure out how to rasterize a PImage(); by connecting the rotation of each tile to a value each pixel. So far I have figured out the rotation of the rectangle and the maze tile pattern, but I can’t figure out why my maze tiles are not rotating as well?
(Maze Tile code via “ Processing: Creative Coding and Computational Art” by Ira Greenberg)
/*
Maze Tile
*/
// Load the image to be rasterized
PImage img;
// declare variables
float x, y;
float x2, y2;
float h, w;
float xShift, yShift;
// these values can be changed
// Set the size of the rectangles
int xSclFactor = 30;
int ySclFactor = 30;
//set size of steps in the square
float wStep = 2;
float hStep = 2;
void setup(){
//these values can be changed
size(1000,1000);
pixelDensity(2);
img = loadImage("11.jpg");
img.resize(950,950);
// Set the image mode to center the image within the canvas
imageMode(CENTER);
background(0);
strokeWeight(1);
stroke(255);
noFill();
smooth();
// end of changeable details
x = width / xSclFactor;
y = height / ySclFactor;
y2 = x2 = 0;
for(int i = 0; i < width; i+=x){
for(int j = 0; j < height; j+=y){
h = w = 0;
yShift = j;
xShift = i;
createMaze();
}
}
}
void draw(){
// Iterate over the pixels of the image
for (int x = 0; x < width; x += xSclFactor) {
for (int y = 0; y < height; y += ySclFactor) {
// Calculate the average color of the current pixel
int c = getAverageColor(x, y, xSclFactor, ySclFactor);
noFill();
stroke(1);
// Calculate the rotation of the rectangle based on the pixel color
float rotation = map(brightness(c), 0, 255, 0, TWO_PI);
// Draw a rotated rectangle at the current position
pushMatrix();
translate(x + xSclFactor/2, y + ySclFactor/2);
rotate(rotation);
rect(-xSclFactor/2, -ySclFactor/2, xSclFactor, ySclFactor);
popMatrix();
}
}
}
// Function to calculate the average color of a region within the image
int getAverageColor(int x, int y, int w, int h) {
int r = 0;
int g = 0;
int b = 0;
int count = 0;
// Iterate over the region and sum the color values
for (int i = x; i < x+w; i++) {
for (int j = y; j < y+h; j++) {
color c = img.get(i, j);
r += red(c);
g += green(c);
b += blue(c);
count++;
}
}
// Calculate the average color and return it
r /= count;
g /= count;
b /= count;
return color(r, g, b);
}
void createMaze(){
beginShape();
vertex((x-w)+ xShift, (y2+h) + yShift);
for(float i = min(width/xSclFactor, height/ySclFactor);
i > min (width/ xSclFactor, height/ySclFactor/2);
i-= max(wStep, hStep)){
vertex((x-w)+xShift, (y-h)+yShift);
vertex((x2+w)+xShift, (y-h)+yShift);
vertex((x2+w)+xShift, (y2+h)+yShift);
w += wStep;
vertex((x-w)+xShift, (y2+h)+yShift);
h += hStep;
}
endShape();
}
As you can see, the orientation of the maze tiles is not lining up with the pixel rotation algorithm…
/*
Maze Tile
*/
// Load the image to be rasterized
PImage img;
// declare variables
float x, y;
float x2, y2;
float h, w;
float xShift, yShift;
// these values can be changed
// Set the size of the rectangles
int xSclFactor = 30;
int ySclFactor = 30;
//set size of steps in the square
float wStep = 2;
float hStep = 2;
void setup(){
//these values can be changed
size(1000,1000);
pixelDensity(2);
img = loadImage("11.jpg");
img.resize(1000,1000);
// Set the image mode to center the image within the canvas
imageMode(CENTER);
background(0);
strokeWeight(1);
stroke(255);
noFill();
smooth();
// end of changeable details
x = width / xSclFactor;
y = height / ySclFactor;
y2 = x2 = 0;
for(int i = 0; i < width; i+=x){
for(int j = 0; j < height; j+=y){
h = w = 0;
yShift = j;
xShift = i;
createMaze(x + xSclFactor, y + ySclFactor);
}
}
}
void draw(){
// Iterate over the pixels of the image
for (int x = 0; x < width; x += xSclFactor) {
for (int y = 0; y < height; y += ySclFactor) {
// Calculate the average color of the current pixel
int c = getAverageColor(x, y, xSclFactor, ySclFactor);
noFill();
stroke(1);
// Calculate the rotation of the rectangle based on the pixel color
float rotation = map(brightness(c), 0, 255, 0, TWO_PI);
// Draw a rotated rectangle at the current position
pushMatrix();
translate(x + xSclFactor/2, y + ySclFactor/2);
rotate(rotation);
createMaze(-xSclFactor/2, -ySclFactor/2);
popMatrix();
}
}
}
// Function to calculate the average color of a region within the image
int getAverageColor(int x, int y, int w, int h) {
int r = 0;
int g = 0;
int b = 0;
int count = 0;
// Iterate over the region and sum the color values
for (int i = x; i < x+w; i++) {
for (int j = y; j < y+h; j++) {
color c = img.get(i, j);
r += red(c);
g += green(c);
b += blue(c);
count++;
}
}
// Calculate the average color and return it
r /= count;
g /= count;
b /= count;
return color(r, g, b);
}
void createMaze(float x, float y){
beginShape();
vertex((x-w)+ xShift, (y2+h) + yShift);
for(float i = min(width/xSclFactor, height/ySclFactor);
i > min (width/ xSclFactor, height/ySclFactor/2);
i-= max(wStep, hStep)){
vertex((x-w)+xShift, (y-h)+yShift);
vertex((x2+w)+xShift, (y-h)+yShift);
vertex((x2+w)+xShift, (y2+h)+yShift);
w += wStep;
vertex((x-w)+xShift, (y2+h)+yShift);
h += hStep;
}
endShape();
}
The two reasons that you’re not getting an answer is that 1. we don’t have your image file and so can’t run your program on our own machines, and 2. it’s not really obvious from your question what you think the output should look like. We don’t know what you’re doing wrong because we don’t know what you think would be right.
One suggestion is to simplify your code so that you can see more clearly what it is doing. Instead of a full image, just do a 1x1 or 2x2 image with rotations that you expect. Make it simple enough that you can walk through the code line by line to see where it’s doing something different than what you want.
Also, please make use of Processing’s translate() and scale() functions. Instead of adding xShift and yShift, just translate( xShift, yShift ); and similar for xSclFactor and ySclFactor.
My desired output would be to have the “maze tiles” shift in relation to each pixel. At the moment I have rectangles shifting in the way I had planned the maze tiles to, but the maze tiles underneath are in their organized orientation. So, I would like the maze tiles to act like the rect() function.
Greatly simplify your createMaze() function so that it draws the shape you want, centered at the origin and with a scale from -0.5 to 0.5. In your draw, for each pixel of the image (use img.width and img.height instead of width and height in your for loop), do a translate() and rotate() before calling createMaze() for that pixel.
Put a single scale() function outside of the for loops that scales by width / img.width to get things the right size.
