Category: Project-05-Wallpaper

Caroline Song – 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);
    }

}

a quick sketch of some of the decisions I had to make for this project

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.

Ghalya Alsanea – Project 05 – Wallpaper

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu;
//Project-05

var density = 20;     //grid density
var tile;

function setup() {
    createCanvas(600, 600); 
    noLoop();
    tile = width / density;   //find tile dimension
}

function draw() {
    background(200);

    //create a grid 
    for (var gridY = 0; gridY <= density; gridY++) {
        for (var gridX = 0; gridX <= density; gridX++) {

            //random color generator
            array = ["DarkSalmon", "DarkSeaGreen", "LightCoral", "MediumAquaMarine"];
            colorSeed = int(random(0, 4));
            var color = array[colorSeed];
            stroke (color);
            strokeWeight(1);

            //define the grid's X and Y positions
            var posX = tile * gridX;
            var posY = height / density * gridY;

            //randomizer
            var toggle = int(random(0, 3));
            //randomize which direction the diagonal is drawn
            //whether it's (\) or (/)
            if (toggle == 0) {
                line(posX, posY, posX + tile, posY + height / density);
            }
            if (toggle == 1) {
                strokeWeight(2);
                line(posX, posY + tile, posX + height / density, posY);
            }
            // if it's not / or \ then draw a dot
            if (toggle == 2) {
                noStroke();
                fill(color);
                circle(posX, posY, tile / 4)

            }
            // if it's not / or \ or a dot then it becomes a torus flower
            else {
                noFill();
                stroke(color);
                strokeWeight(1);
                circle(posX, posY, tile / 3);                
                push();
                translate(posX, posY);
                for (i = 0; i < 6; i++) {
                    fill(255, 100);
                    circle(tile / 6, 0, tile / 3);
                    rotate(radians(60));
                }
                pop();
            }
        }
    }
}

function mousePressed() {
    //redraw the wallpaper when you click your mouse
    redraw();
}

A sketch showing my thought process and the layering of different types of graphics on the grid.

I started by creating a grid and then creating a maze like pattern based on a random toggle (i.e. if the line goes \ or /). I wanted to create a more fun pattern so I added to the conditional to add a flower or a dot in the places where there was no line. I was challenging myself to find a balance between structure and randomness. There’s also a random color associated with each graphic that is placed in the grid. Hence, every time you click your mouse a completely new wallpaper is drawn unlike the one before.

Yoshi Torralva – Project 05 – Wallpaper

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();
}

Alice Cai Project 5

original sketch
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);
        
           
}

Hyejo Seo – Project 05 – Wallpaper

sketch

/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project 5 - Wallpaper
*/
function setup() {
    createCanvas(600,600);
    background(255, 203, 215);
    var w = 150;
    var h = 120;
    var oy = 60;
    var ox = 75;
// background orange lines
    noFill();
    stroke(255, 178, 15);
    strokeWeight(2);
    for (var l = 0; l <= width; l+=5){
      line(l, 0, l, height);      
  }
//smiley FACES
    fill(255, 255, 27);
    stroke(0);
    strokeWeight(5);
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          ellipse(xx, yy, 80, 80);
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        ellipse(xx, yy, 80, 80);

        }
      }
    }   
// eyes
    fill(0);
    noStroke();
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          ellipse(xx - 13, yy - 10, 10, 20);
          ellipse(xx + 13, yy - 10, 10, 20);
          
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        ellipse(xx - 13, yy - 10, 10, 20);
        ellipse(xx + 13, yy - 10, 10, 20);
        }
      }
    }    
//mouth
    noFill();
    stroke(0);
    strokeWeight(5);
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          arc(xx, yy + 8, 50, 35, 0, PI);
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        arc(xx, yy + 8, 50, 35, 0, PI);      
        }
      }
    }  
//diamonds
    fill(0);
    noStroke(0); 
    for (var x = 225; x < width; x += 300) {
      for(var y = 30; y < height; y += 240){
        quad(x, y, x + 15, y + 25, x, y + 50, x - 15, y +25);        
      }
    } 
    for (var x = 75; x < width; x += 300) {
      for(var y = 155; y < height; y += 240){
        quad(x, y, x + 15, y + 25, x, y + 50, x - 15, y +25);        
      }
    } 
    noLoop();
}
function draw() {    
}

Initially, I was inspired by the Golf Wang Smiley Face Sweater. I added more elements such as the orange lines and diamonds to make it more interesting as a wallpaper. I have always wanted to create something with smiley faces even for my previous projects, and, this time, I was able to do it. I had fun creating this wallpaper. 

Smiley face sweater by a brand called “Golf Wang”

Fanjie Jin – Project 05 – Wallpaper

53

//Fanjie Mike Jin
//Section C
//rpai@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(400, 400);
    rectMode(RADIUS)
}

function draw() {
    background(100);
    drawGrid();
    drawSquare();
    drawCircle();
    noLoop();
}

function drawSquare() {
//nested loop for drawing the Squares
    for(var a = 1 ; a < 20; a ++){
      for(var b = 1 ; b < 20; b ++){
//change color transparency
        fill(255 - 7 * a, 255 - 2 * a, 200, 150);
        if(a % 2 == 0){
          strokeWeight(1);
          stroke(60, 211, 206, 90);
          rect(a * 20, b * 20, 20 - b , 20 - b);
        }else{
//odd columns that has a bigger square
          strokeWeight(1);
          stroke(255, 211, 206, 90);
          rect(a * 20, b * 20,  1 / 2 * b, 1 / 2 * b);
        }
      }
    }
}

function drawCircle(){
//nested loop for drawing the circles
    for(var a = 1 ; a < 20; a ++){
    for(var b = 1 ; b < 20; b ++){
      fill(255 - 2 * a, 255 - 2 * a,  100, 200);
      if(a % 2 == 0){
        strokeWeight(1);
        stroke(60, 211, 206, 90);
//color gradient
        ellipse(a * 20, b * 20, b , b);
      }else{
// odd columns
        strokeWeight(1);
        stroke(255, 211, 206, 90);
        ellipse(a * 20, b * 20, 20 - b, 20 - b);
      }
    }
  }
}

function drawGrid(){
//grids
    for(var c = 1 ; c < 20; c ++){
        stroke(255, 50);
        line(c * 20, 0, c * 20, height);
        line(0, c * 20, width, c * 20);
    }
}

I have experimented with using color transparency to create the perceptions of layerings in this wallpaper assignment. I aim to use some repetitive pattern to create some visually intriguing composition. From top to bottom, the size of the circle and square is either becoming larger or smaller. This process is enjoyable and I have gained much more familiarity with nested loop.

Joseph Zhang – Project 05 – Wallpaper

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.

Jamie Park – Project 05 – Wallpaper

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.

Raymond Pai-Project-05

sketch

//Raymond Pai
//Section D
//rpai@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(200, 150, 160);
    fill('yellow');
    for (var y = 7; y < height - 5; y += 30) {
        drawRow(y, 30);
    }
}


function drawRow(y, spacing) {
    spacing = max(2, spacing);
    for (var x = 7; x < width - 5; x += spacing) {
        strokeWeight(0);
        fill(y, x + 50, x + 100);
        rect(x, y, 25, 25);
    }
}

I wanted to make a tile wallpaper that resembled the walls of a shower from the 90’s, with more contemporary colors.

Image result for gradient tiles
Example of gradient tiles

Paul Greenway – Project 05 – Wallpaper

pgreenwa_wallpaper

/*Paul Greenway
Section 1A
pgreenwa@andrew.cmu.edu
Project-05-Wallpaper
*/


function setup() {
  createCanvas(580, 580);
}

//background
function draw() {
   background('white');
   
      
          
  //small background circles
  strokeWeight(1);
  for (var x = 0; x < 70; x++) {
    for (var y = 0; y < 70; y++) {
      fill('white');
      ellipse(10*x, 10*y, 10, 10);
      
    }
  }
  //black lines + circles
  strokeWeight(1);
  for (var x = 0; x < 11; x++) {
    for (var y = 0; y < 20; y++) {
      fill('black');   
      ellipse(50*x+40, 50*y + 40, 10, 10);
      rect(1*x, 50*y+14, 1000,2);
      rect(1*x, 50*y+39, 1000,2);
    }
  }
  //red outer rings
  strokeWeight(1);
  for (var y = 0; y < 10; y++) {
      for (var x = 0; x < 11; x++) {

        if (y % 2 !=0) {
          fill('red');
          ellipse(50*x+40, 50*y+40, 50, 50);
        }
      }
  }
    //inner gradient circles
    for (var y = 0; y < 10; y++) {
      for (var x = 0; x < 11; x++) {

        if (y % 2 !=0) {
          fill('white');
          ellipse(50*x+40, 50*y+40, 40, 40);
          fill(200,20*x,20*y);
          ellipse(50*x+40, 50*y+40, 25, 25);
        
          
        }
      }
  }
      strokeWeight(0);
      for (var y = 0; y < 11; y++) {
      for (var x = 0; x < 10; x++) {

        if (y % 2 ===0) {
          fill(30);
          ellipse(50*x+65, 50*y+40, 20, 25);
          
        }
      }
  }
}

For this project I wanted to created a symmetrical pattern that would have gradient colored circles based on their position within the grid. To segment these colored circles I added black lines with smaller white circles in the background to add more visual interest.