/*
Emma Nicklas-Morris
Section B
enicklas
Project-05
Wallpaper
*/
// width and height of diamonds (squares)
var big = 100;
var med = 90;
var sm = 80;
var smaller = 70;
var smallest = 60;
var tiny = 20;
// space between diamonds (based off the large one)
var space = 20;
function setup() {
createCanvas(500, 500);
background("#F5DEBB");
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
noStroke();
rectMode(CENTER);
drawBig(i, j);
drawMed(i, j);
drawSm(i, j);
drawSmaller(i, j);
drawSmallest(i, j);
tinyDiamond(i, j);
blueDiamond(i, j);
}
}
noLoop();
}
// Draws large purple diamond (square rotated)
function drawBig(i, j) {
push();
translate(width/2, -height/2);
rotate(radians(45));
fill("#581845")
rect(big * i + space * i, big * j + space * j, big, big);
pop();
}
// Draws medium purple-pink diamond (square rotated)
function drawMed(i, j) {
adj = 7.5;
push();
translate(width/2, -height/2 - adj);
rotate(radians(45));
fill("#900C3F");
nSpace = big - med + space
rect(med * i + nSpace * i, med * j + nSpace * j, med, med);
pop();
}
// Draws small magenta diamond (square rotated)
function drawSm(i, j) {
adj = 15;
push();
translate(width/2, -height/2 - adj);
rotate(radians(45));
fill("#C70039");
nSpace = big - sm + space
rect(sm * i + nSpace * i, sm * j + nSpace * j, sm, sm);
pop();
}
// Draws smaller orange diamond (square rotated)
function drawSmaller(i, j) {
adj = 22.5;
push();
translate(width/2, -height/2 - adj);
rotate(radians(45));
fill("#FF5733");
nSpace = big - smaller + space
rect(smaller * i + nSpace * i, smaller * j + nSpace * j, smaller, smaller);
pop();
}
// Draws smallest yellow diamond (square rotated)
function drawSmallest(i, j) {
adj = 30;
push();
translate(width/2, -height/2 - adj);
rotate(radians(45));
fill("#FFC30F");
nSpace = big - smallest + space
rect(smallest * i + nSpace * i, smallest * j + nSpace * j, smallest, smallest);
fill("#F5DEBB");
rect(nSpace * i * 2, 0, space, height * 3); // split the diamonds into smaller ones
rect(0, nSpace * j * 2, width * 3, space); // split the diamonds into smaller ones
pop();
}
// Draws blue diamond on top of big diamond
function blueDiamond(i, j) {
push();
translate(width/2, -height/3);
rotate(radians(45));
fill("#13B9BD");
b = tiny /2;
nSpace = big - b + space
rect(b * i + nSpace * i, b * j + nSpace * j, b, b);
pop();
}
// Draws tiny green diamond on top
function tinyDiamond(i, j) {
adj = 58.5
push();
translate(width/2, -height/2 - adj);
rotate(radians(45));
fill("#88D840");
nSpace = big - tiny + space
rect(tiny * i + nSpace * i, tiny * j + nSpace * j, tiny, tiny);
pop();
}
I knew I wanted to do something geometric and repetitive with the use of a nice color palette. I started with the idea of creating squares that would be rotated to look like diamonds. From there, I knew I wanted to create a bullseye-like effect where all of the diamonds start at the top corner. Once that was created, I played with the idea of creating more diamonds inside those larger diamonds. Finally, I created my color palette based the rainbow and incorporated smaller diamonds to add to the complexity.