Category: Project-05-Wallpaper

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 05 - Wallpaper

var color1; 
var color2;

function setup() {
    createCanvas(600, 600);
    //Defining colors
    color1 = color(159, 233, 255);
    color2 = color(1, 95, 124);
    setGradient(color1, color2);
}


function draw() {
    noFill();
    stroke(255);
    strokeWeight(1);
    for (var y = 0; y <= 12; y++) {
        if (y % 2 == 0) {
            for(var x = 0; x <= width; x += 50) {
                triangle(0 + x, 50+(y*50), 25 + x, 0+(y*50), 50 + x, 50+(y*50));
            }
        }
        else {
            for(var x = 0; x <= width; x += 50) {
                triangle(-25 + x, 100+((y-1)*50), 0 + x, 50+((y-1)*50), 25 + x, 100+((y-1)*50));
            }
        }
    }
}

function setGradient(c1, c2) {
    //Creating blue gradient
    for(var i = 0; i <= height; i++) {
      var x1 = map(i, 0, height, 0, 1);
      var c3 = lerpColor(color1, color2, x1);
      stroke(c3);
      line(0, i, width, i);
    }

}

For this wallpaper, I wanted to play around with colors so that my finished product would resemble something from the ocean or the beach. And so, I created a soft blue gradient. Overlaying that, I made a repeating pattern of triangles in a white color in order to keep the soft color palette I was aiming for.

With this project, I wanted to create a pattern that had a cooking element to it as if the design could be placed on an apron. I choose to use a sunflower yellow color pallette for a pleasant tone. A coffee bean, straw, and cup are present.

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section E
//Project-05-Wallpaper 

function setup() {
    createCanvas(600, 600);

}
function draw() {
    background(0);
    // nested loop for x + y rows
    for (var x = 0; x < width / 3; x+=1) {
        for (var y = 0; y < height / 8; y+=1) {
            // var bay and bax made to adjust function b coordinates
            var bay = y * 100; // adjustment to space squares evenly 
            var bax = x * 200; // adjustment to space squares evenly
            ba(bax, bay);
            // subtracting 50px to create alternating design
            b(bax, bay - 50);
        }
    }
}
// dark yellow background
function ba(x, y) {
    push();
    translate(x, y);
    fill(221, 178, 16);
    noStroke();
    rect(0, 0, 100, 100);
    fill(253, 215, 70);
    ellipse(50, 50, 80, 80);
    fill(221, 178, 16);
    ellipse(50, 50, 70, 70);
    //coffee
    fill(136, 97, 13);
    ellipse(50, 50, 70, 70);
    //straw above mouseIsPressed to appear
    stroke(253, 215, 70);
    strokeWeight(5);
    line(50, 50, 10, 10);
    pop();
}
// coffee bean tile
function b(x,y) {
    push();
    translate(x, y);
    fill(0);
    textSize(32);
    noStroke();
    fill(253, 215, 70);
    rect(100, 0, 100, 100);
    fill(221, 178, 16);
    ellipse(150, 50, 80, 90);
    fill(253, 215, 70);
    rect(140, 0, 20, 100);
    pop();
}

This is my original sketch. I wanted to make a bubbly wallpaper with baby light tones like blue and poink ( didn’t have copics that color). To do this I first created a draw bubbles function that made layers of circles, and then in the draw function I called for loops to make a grid. I decided to add pink lines across the circles to make it more visually interesting and also it now looks like tiles.

sketch

//Alice Cai
//alcai
//week5 Project
//Section E

//pink background
function setup() {
    createCanvas(600,600);
    background('pink')
}

function draw () {
//vertical forloop for y
    for (var y = 25; y <= height; y += 50) {

//horizantal forloop for x
        for (var x = 25; x <= width; x += 50) {

//call drawbubble shape
           drawBubble (x,y);
           
//pink lines over blue bubbles to create tile effect
           strokeWeight(10);
           stroke('pink');
           line(x, y, x, y + x);
           line(x, y, x, y - x);
           line(x, y, x + 30, y);
           line(x - 30, y, x, y);
        }
        
    }   
    noLoop(); 
//so that draw is only called once
}

//bubble shape, x y variable coordinates to be called in for loop
function drawBubble ( x, y) {
            fill(209,242,255);
            strokeWeight(0);
            ellipse(x, y, 50, 50);
        
            fill(100,200,230);
            ellipse(x, y, 35, 35);
        
            fill(118,230,250);
            ellipse(x, y, 20, 20);
        
           
}

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-05: Wallpaper

function setup() {
    createCanvas(600,600);
    background('green');
}

// ellipse diam
var diam = 70;
  
function draw() {
    noStroke();
    // creates grid system
    for (x = 0; x < width/30; x+=1) {
        for ( y = 0; y < height/30; y += 1) {
                bigCircle(30 +  60 * x, 30 + 60 * y);
                smallCircleRect(30 +  60 * x, 30 + 60 * y);
        }
    }
    noLoop();
}

// creates the black portion
function bigCircle(xPos,yPos) {
    fill('black');
    ellipse(xPos, yPos, diam , diam)
}

// creates the white portion
function smallCircleRect(xPos,yPos) {
    fill('white');
    rectMode(CENTER);
    rect(xPos, yPos, diam / 1.3, diam / 1.3);
    ellipse(xPos, yPos, diam - 7, diam - 7);
}

For this project, I pulled a lot of inspiration from the Tartan plaid pattern that’s often associated with Carnegie Mellon. That’s why I went with the grid-like pattern and the black green color scheme.

sketch

//Jamie Park (jiminp)
//15-104 Recitation E
//Project 5

var rectSize = 50;
var spacing = 160;

function setup(){
    createCanvas(500, 500);
    background(212, 230, 135);

    //odd row of roses
    for (var xWidth = rectSize; xWidth < width + rectSize; xWidth += spacing){
        for (var yHeight = rectSize; yHeight < height + rectSize; yHeight += spacing){
            rose(xWidth, yHeight);
        }
    }
    //even row of roses
    for (var xWidth2 =  -rectSize * 0.6; xWidth2 < width + rectSize; xWidth2 += spacing){
        for (var yHeight2 = rectSize * 2.6; yHeight2 < height + rectSize; yHeight2 += spacing){
            rose(xWidth2, yHeight2);
        }
    }

    noLoop();
}

function draw(){
    //nothing in draw because called noLoop
}

function rose(x, y){
    noStroke();
    //rectangle set to the center to make rotation easy
    rectMode(CENTER);

    //RED ROSE
    //largest square
    fill(209, 67, 56);
    rect(x, y, rectSize, rectSize);
    //second square
    push();
    translate(x, y)
    rotate(radians(45));
    fill(217, 95, 87);
    rect(0, 0, rectSize * 0.7 , rectSize * 0.7);
    pop();
    //third square
    fill(209, 67, 56);
    rect(x, y, rectSize * 0.5, rectSize * 0.5);
    //fourth square
    push();
    translate(x, y)
    rotate(radians(45));
    fill(217, 95, 87);
    rect(0, 0, rectSize * 0.3 , rectSize * 0.3);
    pop();
    //leaf on the left
    push();
    translate(x - (rectSize * 0.8), y);
    rotate(radians(45));
    fill(127, 191, 54);
    rect(0, 0, rectSize * 0.4, rectSize * 0.4);
    pop();
    //leaf on the top
    push();
    translate(x, y - (rectSize * 0.8));
    rotate(radians(45));
    fill(66, 171, 31);
    rect(0, 0, rectSize * 0.4, rectSize * 0.4);
    pop();

    //YELLOW ROSE
    //largest square
    fill(237, 209, 116);
    rect(x + rectSize * 1.6, y, rectSize, rectSize);
    //second square
    push();
    translate(x + rectSize * 1.6, y)
    rotate(radians(45));
    fill(250, 236, 147);
    rect(0, 0, rectSize * 0.7 , rectSize * 0.7);
    pop();
    //third square
    fill(237, 209, 116);
    rect(x + rectSize * 1.6, y, rectSize * 0.5, rectSize * 0.5);
    //fourth square
    push();
    translate(x + rectSize * 1.6, y)
    rotate(radians(45));
    fill(250, 236, 147);
    rect(0, 0, rectSize * 0.3 , rectSize * 0.3);
    pop();
    //leaf on the left
    push();
    translate(x + (rectSize * 0.8), y);
    rotate(radians(45));
    fill(127, 191, 54);
    rect(0, 0, rectSize * 0.4, rectSize * 0.4);
    pop();
    //leaf on the top
    push();
    translate(x + rectSize * 1.6, y - (rectSize * 0.8));
    rotate(radians(45));
    fill(66, 171, 31);
    rect(0, 0, rectSize * 0.4, rectSize * 0.4);
    pop();
}

I wanted to create alternating rows of “roses” using squares. I am content with the final product, and I wonder what it would look like to have an entire room full of this wallpaper pattern.