Emma NM-Project-05(Wallpaper)

My Wallpaper

/* 
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.