Project 5 – Groovy Wallpaper

It seems in my experience, wallpaper gets a bad reputation. One quick search of “interior design” on Pinterest will reveal the modern day obsession with sleek and minimal aesthetic choices. In the face of this, I chose to design a wallpaper that riffs off of aesthetic choices perhaps equally as brawny – inspired by the loud colors of post modernism.

sketchDownload
// JUBBIES STEINWEH-ADLER
// PROJECT 05 - GROOVY WALLPAPER
// SECTION D

//GLOBAL VALUES
x = 0;
y = -150;// initial y value off canvas to create seamless pattern
d = 0; // arrow direction ( 1 = left 0 = right )

function setup() {
  createCanvas(500, 400);
  background(250, 240, 220);
  blendMode(MULTIPLY); // color blend mode multiplies rgb value of overlapping colors
}

function draw() {
    //ROW PROPERTIES
  for(var loop = 0; loop < 5; loop +=1) { // number of total rows limited to 5
     if (d == 0) { //switching direction for each loop
     d = 1; //left arrows
    } else {
     d = 0; //right arrows
 }
        //TRIANGLE PROPERTIES
         for(var row = 0; row < 1; row +=1) {  // triangle x-offset and tracking
               x = -120; // initial x value for the first triangle
               y += 110; // vertical spacing, tracking
       
            for(var rep = 0; rep < 7; rep +=1) { 
            x += 120; // distance between each module (width)
            stack(d, x, y); 
       }
     }
  }
  noLoop(); //disables automatic looping from draw function
}

// TRIANGLE PACKAGE - Grouped for single 'anchor point'
function stack(d, x, y) { 
  push();
  translate(x, y);  // translate by determined x and y value
  module(d); // draw a single triangle module
  pop();
}

//TRIANGLE MODULE DRAW COMMAND
function module(d) {
  noStroke();
  var r = 180; //red value
  var g = 40;  //green value
  var b = 190; //blue value


    //RIGHT ARROW MODULE
        if (d == 0){ 
         px = 0; //linked X coordinate
         py = 0; //linked y coordinate
  
        //vertical leg
        fill(r, g, b);
        push();
        translate(px, py);
        rect(0, 0, 50, 170, 70);
        pop();

        //top angled leg
        fill(g, b, r);
        push();
        translate(px-10, py+35);
        rotate(radians(300));
        rect(0, 0, 50, 170, 70);
        pop();


        //bottom angled leg
        fill(b, r, g);
        push();
        translate(px+15, py+180);
        rotate(radians(240));
        rect(0, 0, 50, 170, 70);
        pop();
  
    //LEFT ARROW MODULE
    } else if (d == 1) { 
        
        fill(r, g, b);
        ptO = 60; // OFFSET VALUE TO ALTERNATE ROW START POSITION 
        ptT = 0;
  
        //vertical leg
        push();
        translate(ptO, ptT);
        rect(0, 0, 50, 170, 70);
        pop();
  
        //top leg
        fill(g, b, r);
        push();
        translate(ptO +35, ptT - 10);
        rotate(radians(60));
        rect(0, 0, 50, 170, 70);
        pop();
  
        //bottom leg
        fill(b, r, g);
        push();
        translate(ptO + 60, ptT + 135);
        rotate(radians(120));
        rect(0, 0, 50, 170, 70);
        pop();
  }    

}

For the actual pattern shape, I was inspired by this pattern I found on the internet. I really enjoyed how the colors interacted where the shapes overlapped. This pushed me to discover that p5.js has blending modes. Using multiply blending mode and adjusting the opacity is how I got my final result.