Project 1: Image in a grid

[huge_it_gallery id=”3″]

Project 1 of the 2D Generative Design is about an image in a grid that changes its color as you move the mouse on the image window, changes its size and orientation with key presses. In this case, the size increases with press of an up arrow key and decreases with press of a down arrow key. Notice, the size can only increase or decreases to a certain limit after which the image goes back to its original size. The image can be rotated clockwise with the press of a right arrow key and counterclockwise with the press of an left arrow key.

Below is a snippet of code that explains the key concept:


for (int gridY=0; gridY<tileCount-1; gridY++) {
for (int gridX=0; gridX<tileCount-1; gridX++) {
float posX = tileWidth*gridX + tileWidth/2;
float posY = tileHeight*gridY + tileHeight/2;
pushMatrix();
translate(posX, posY);
rotate(radians(rotateAngle));
if (scalePercent < 0) {
//if scale is negative go back to the original scale scalePercent = 1; } if (scalePercent > 2) {
//if scale is twice the original scale go back to the original scale
scalePercent = 1;
}
scale(scalePercent);
int hueVal = (int) map(mouseX, 0, width, 0, 360); //hueVal is dependent on mouse x position
int satVal = (int) map(mouseY, 0, height, 0, 100); //satVal is dependent on mouse y position
fill(hueVal, satVal, 100);
drawTrolley(tileWidth/2, tileHeight/2);
popMatrix();
}
}

The doubly nested loop creates a grid of rectangles whose width and height are based on the count of tiles along the horizontal and vertical axes. For each loop, an image function is called to draw the image at the center of the tile. The translate function is called to locate the origin of each image to the upper left corner of the tile without having to change the default origin of (0,0). The rotate function increases or decreases the rotation angle of every image in the tile. An important concept to highlight in this code is the use of push Matrix() and popMatrix() functions. pushMatrix() and popMatrix() are used in conjunction to control the scope of transformations of the coordinate system accomplished by the use of translate function. pushMatrix() saves the current coordinate system in the stack and the popMatrix restores the previous coordinate system.

Below is a set of few images that show some aspect of how the code was used to generate them:

[huge_it_gallery id=”2″]

Notice how each of the above images are of different colors, sizes and rotation angles. These are generated by any combination of mouse position over the window, and up/down/left/right arrow presses.

The source code of this project can be downloaded from here:
.zip file (2KB)