Grid variations
One advantage of using code in a design is introducing a grid that uses precise measurements and then adding variation.
We can break our composition down into a grid using a nested for loop based on the width and height of the canvas and the number of rows and columsn we want in the grid.
function setup() {
createCanvas(640, 640);
background("white");
var columns = 32;
var rows = 32;
var w = width / columns;
var h = height / rows;
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
rect(x, y, w, w);
}
}
}
The important part is what happens after we decide on the number of columns.
Because columns go across the sketch and rows go up and down, we can get the right width for our rectangles by dividing total width by the number of columns. Likewise, we can get the right number of rows by dividing the total height by number of rows.
var w = width / columns;
var h = height / rows;
Then we can loop through the columns and rows testing to see if we have gotten to the bounds of the sketch.
For each column we loop through all of the rows, and then go to the next column. That's how we get our nested for loop, and our design grid.
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
// drawing functions
}
}
Random Colors
This template should work for any grid based design you want to draw. Okay, let's bring the color back in.
function setup() {
createCanvas(640, 360);
background("white");
noStroke();
var columns = 32;
var rows = 32;
var w = width/columns;
var h = height/rows;
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
var r = random(0,255);
var g = random(0,255);
var b = random(0,255);
fill(r, g, b);
rect(x, y, w, w);
}
}
}
Color palettes
Adjust the range of random colors to get different palettes. If you want mostly green, put in less red and less blue, and more green:
function setup() {
createCanvas(640, 360);
noStroke();
var columns = 32;
var rows = 32;
var w = width/columns;
var h = height/rows;
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
var r = random(0,100);
var g = random(100,255);
var b = random(0,100);
fill(r, g, b);
rect(x, y, w, w);
}
}
}
Color can also be mapped to the space of the grid.
function setup() {
createCanvas(640, 360);
background(220);
noStroke();
var columns = 32;
var rows = 32;
var w = width/columns;
var h = height/rows;
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
var r = map(y, 0, height, 0,255);
var g = random(100,200);
var b = random(0,20);
fill(r, g, b);
rect(x, y, w, w);
}
}
}
Size variation
We can also vary the size of each shape in the gird to get a different effect.
function setup() {
createCanvas(640, 360);
background(220);
rectMode(CENTER)
noStroke();
var columns = 32;
var rows = 16;
var w = width/columns;
var h = height/rows;
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
var r = map(y, 0, height, 0,255);
var g = random(100,200);
var b = random(0,20);
fill(r, g, b);
var s = random(-10, 10); // random s
rect(x, y, w + s, w + s);
}
}
}
Choosing shapes
We can also use random and logic to change the shape function.
random(1) will be a value between 0 and 1. Half the time it will be greater than 0.5.
if (random(1) > 0.5) {
rect(x, y, w, w);
} else {
ellipse(x, y, w);
}
function setup() {
createCanvas(640, 360);
background(220);
rectMode(CENTER)
noStroke();
var columns = 32;
var rows = 16;
var w = width/columns;
var h = height/rows;
for (var x = 0; x < width; x += w) {
for (var y = 0; y < height; y += h) {
var r = map(y, 0, height, 0,255);
var g = random(100,200);
var b = random(0,20);
fill(r, g, b);
var s = random(-10, 10); // random s
if (random(1) > 0.5) {
ellipse(x, y, w + s);
} else {
rect(x, y, w + s, w + s);
}
}
}
// save(); // uncomment to save an image
}
How can the effects be combined to create a meaningful composition?