Project – 05 – Wallpaper

sketch

function setup() {
    createCanvas(400, 600);
    background(0);

}
var squareSize = 80

var bSO = squareSize * (1/8)
var wLO = squareSize * (3/8)
var cr = squareSize * (2/10)
var obl = 5

function TSquare(x,y,w,h) {
    // Red Squares background of grid
    fill(148,3,3)
    stroke(0)
    strokeWeight(4)
    rect(x,y,w,h)

    // White line back 
    stroke(255)
    strokeWeight(5)
    line(x-obl, y-obl, x+w, y+h)

    // Blue square rounded corner transparent
    noStroke()
    fill(0, 0, 100, 200)
    //tint(255,127)
    rect(x+ bSO, y + bSO, w-(2 * bSO), h-(2 * bSO), cr, 0, cr, 0)

    // White line foreground   
    stroke(255)
    strokeWeight(5)
    line(x+30, y+30, x+w-30, y+h-30)

    //foreground black grid
    noFill()
    stroke(0)
    strokeWeight(4)
    //rect(x,y,w,h)

}

function draw() {
    for(xi=0; xi<width; xi = xi + squareSize){
        for(yj=0; yj<height; yj = yj + squareSize){
           
           TSquare(xi, yj, squareSize, squareSize)
        }
    } 

}

My inspiration for the start of this project was a plaid pattern. As I set out to attempt to recreate it, I made an error that ended up creating a very interesting novel pattern. I then riffed off of this new creation messing around with the alpha function which controls transparency. The pattern is a square of width and height 80 pixels iterated over x and y using for loops.