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