As a first step for Experiment 1 (Introducing Random Elements), I used Processing to create randomly generated grid layouts that I want to use in further steps for the first poster experiment. In the first code, I generated grids with vertical and horizontal lines, and in the second, I added diagonal lines.
Code 1: Random grid with horizontal and vertical lines
This code generates a random grid of vertical and horizontal lines on an A3 poster layout (297mm x 420mm in pixels). It allows the user to create a new grid by pressing the space bar and to save the current grid as a PNG image by pressing the ’s‘ key.
Code:
int numLines = 9; // Number of random lines to draw
int saveCounter = 0; // Counter for saved files
void setup() {
size(420, 594); // Setting up the canvas size for an A3 poster in pixels
generateGrid();
}
void draw() {
// The draw function is intentionally left empty
// because we only need to redraw the grid on specific events
}
void generateGrid() {
background(255); // White background
stroke(0); // Black color for the lines
for (int i = 0; i < numLines; i++) {
drawRandomLine();
}
}
void drawRandomLine() {
boolean vertical = random(1) < 0.5; // Randomly decide if the line is vertical or horizontal
if (vertical) {
float x = random(width); // Random x position
line(x, 0, x, height); // Draw vertical line
} else {
float y = random(height); // Random y position
line(0, y, width, y); // Draw horizontal line
}
}
void keyPressed() {
if (key == ‚ ‚) { // If the spacebar is pressed
generateGrid();
} else if (key == ’s‘) { // If the ’s‘ key is pressed
saveGrid();
}
}
void saveGrid() {
saveCounter++;
String filename = „grid_“ + nf(saveCounter, 4) + „.png“; // Generate a filename with a 4-digit counter
save(filename);
}
Code 2: Random grid with horizontal, vertical, and diagonal lines
This extended code adds random diagonal lines that cross the entire canvas at random angles, while keeping the ability to regenerate and save the grid.
Code:
int numLines = 10; // Number of random lines to draw
int saveCounter = 0; // Counter for saved files
void setup() {
size(420, 594); // Setting up the canvas size for an A3 poster in pixels
generateGrid();
}
void draw() {
// The draw function is intentionally left empty
// because we only need to redraw the grid on specific events
}
void generateGrid() {
background(255); // White background
stroke(0); // Black color for the lines
for (int i = 0; i < numLines; i++) {
drawRandomLine();
}
}
void drawRandomLine() {
float type = random(1); // Randomly decide the type of line
if (type < 0.33) {
// Draw a vertical line
float x = random(width); // Random x position
line(x, 0, x, height); // Draw vertical line
} else if (type < 0.66) {
// Draw a horizontal line
float y = random(height); // Random y position
line(0, y, width, y); // Draw horizontal line
} else {
// Draw a diagonal line at a random angle spanning the entire screen
float angle = random(TWO_PI); // Random angle between 0 and 2*PI
float x1, y1, x2, y2;
if (angle < PI / 2) {
// Top-left quadrant
x1 = 0;
y1 = tan(angle) * width;
x2 = width;
y2 = height - tan(angle) * width;
} else if (angle < PI) {
// Top-right quadrant
x1 = width;
y1 = tan(PI - angle) * width;
x2 = 0;
y2 = height - tan(PI - angle) * width;
} else if (angle < 3 * PI / 2) {
// Bottom-right quadrant
x1 = width;
y1 = height - tan(angle - PI) * width;
x2 = 0;
y2 = tan(angle - PI) * width;
} else {
// Bottom-left quadrant
x1 = 0;
y1 = height - tan(TWO_PI - angle) * width;
x2 = width;
y2 = tan(TWO_PI - angle) * width;
}
line(x1, y1, x2, y2);}
}
void keyPressed() {
if (key == ‚ ‚) { // If the spacebar is pressed
generateGrid();
} else if (key == ’s‘) { // If the ’s‘ key is pressed
saveGrid();
}
}
void saveGrid() {
saveCounter++;
String filename = „grid_“ + nf(saveCounter, 4) + „.png“; // Generate a filename with a 4-digit counter
save(filename);
}
