mreyes-project 05-wallpaper

project-05.js

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-03


// back pattern variables 
var cH1 = 40; // larger circle height 
var cW1 = 20; // larger circle width
var cX = 0; // circles x cordinate 
var cY = 0; // circles y cordinate 

var cH2 = cH1/2; // smaller circle height
var cW2 = cW1/2; // smaller circle height

var spaceingX = cW1*2; // pattern spacing 
var spaceingY = cH1; // pattern spacing 

// front pattern variables 

function setup() {
  createCanvas(700, 700);
  background(255, 204, 204); 
}

function draw() {  
// back pattern loop
for (var x = 0; x < height; x += 1){
        for (var y = 0; y < width ; y += 1){
         
            backPattern(x,y);

        }
    }
//front pattern loop 
for (var x = 0; x < height; x += 1){
        for (var y = 0; y < width ; y += 1){

            frontPattern(x,y);
            
            //ghosty effect 
            push()
            translate(5,10)
            frontPattern(x,y);
            pop()

        }
    }
noLoop()//draw once
}


function backPattern(x,y){ // circle patern

    cX = x * spaceingX; // x spacing between circles
    cY = y * spaceingY; // y spacing between circles

    //outer circle 
    strokeWeight(3);
    stroke(255, 128, 128);
    fill(255, 204, 204);
    ellipse(cX,cY,cW1,cH1);

    // inner circle 
    fill(255, 128, 128);
    ellipse(cX,cY,cW2,cH2);

noLoop();
}

function frontPattern(x,y){
    spaceingX = 200
    spaceingY = 200

    x = x * spaceingX // x spacing between triangles 
    y = y * spaceingY // y spacing between 

  
    noStroke()

    //larger tiangle 
    fill(128, 191, 255)  
    triangle(60+x, 160+y, 60+x, 40+y, 160+x, 80+y);

    //smaller triangles
    push()
    translate(10,20)
    fill(255,200)
    triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
    translate(10,20)
    fill(255,200)
    triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
    pop()

noLoop()// draw once 
}

Inspired by my old shower curtain, I wanted to combine two patterns that had two separate own there own but, together would create a harmonious rhythm. I was hoping more interesting things would happen with layering the transparent blue over the pink, but the patterns just kinda got confusing so I ended up having the blue triangles solid.

Looks pretty close to the sketch honestly (minus the rat).