var sideL = 80; // side length of each square tile
function setup() {
createCanvas(400, 480);
}
function draw() {
// blue background
background(142, 154, 175);
// green triangles
for (var y = 0; y <= height; y += sideL) {
for (var x = sideL; x <= width; x += sideL) {
fill(174, 181, 171);
noStroke();
triangle(x, y, x - sideL, y + sideL, x, y + sideL);
}
}
// tan triangles
for (var y = sideL / 2; y <= height; y += sideL) {
for (var x = sideL / 2; x <= width; x += sideL) {
fill(229, 211, 197);
noStroke();
triangle(x, y, x - sideL / 2, y + sideL / 2, x, y + sideL / 2);
}
}
// orange triangles
for (var y = sideL / 2; y <= height; y += sideL) {
for (var x = sideL / 2; x <= width; x += sideL) {
fill(229, 162, 126);
noStroke();
triangle(x, y, x, y + sideL / 2, x + sideL / 2, y + sideL / 2);
}
}
// 3/4 circle
for (var y = sideL / 2; y <= height; y += sideL) {
for (var x = sideL / 2; x <= width; x += sideL) {
fill(237, 238, 192);
noStroke();
arc(x, y, sideL / 2, sideL / 2, 3/4 * PI, 1/4 * PI);
}
}
noLoop();
}
My wallpaper is meant to be an abstract representation of the sun rising behind a pyramid. I vaguely remember seeing a wallpaper at a museum that represented the Pyramid of Giza using two like-toned triangles. Starting with that idea, I played around with layers of overlapping shapes and colours.
In the process, I found it much easier to control the shapes’ position after setting a tile length variable. I am happy with the way it turned out using just triangles and one circle per tile. Even though I like the abstraction and simplicity, I’d like to explore more organic forms in future projects.