Category: Project-05-Wallpaper

Claire Yoon-Project 05 -Wallpaper

sketch

/* Claire Yoon
   claireyo@andrew.cmu.edu
   Section E
   Wall Paper */
    var pu;
    var pi;

    function setup() {
      createCanvas(640, 600);
      background(140,171,190);
      //gradient for lines
      pu = color(164, 168, 209);
      pi = color(187, 160, 178);
      setGradient(pu, pi);
    }
    function draw() {
      //vertical loop for pattern y
      for(var y = 20; y <= height; y += 50){
        //horizontal loop for pattern x
        for(var x = 20; x <= width; x += 50){
          //call pattern
          pattern (x,y);
        }
      }
      noLoop()
    }
    function pattern(x, y) {
      fill(209,242,255);
      strokeWeight(0);
      rect(x, y, 20, 20);

      noFill();
      stroke(194, 85, 100);
      strokeWeight(1.5);
      line(0, y - 15, width, y - 15);
      line(x - 15, 0, x - 15, height);
    }
    function setGradient(pu,pi) {
      //gradient for the background
      noFill();
      strokeWeight(1.5);
      for (var c = 0; c < height; c++ ) {
      var blend = map(c, 0, height, 0, 1)
      var m = lerpColor(pu, pi, blend);
      stroke(m);
      line(0, c, width, c);
    }
  }




//187,160,178
// stroke(164, 191, 235);
// strokeWeight(1);

It was fun to experiment with different shapes and lines and I got inspiration from the scaling on the turtle’s shell and further gave dimension by adding a gradient.

Minjae Jeong-project-05

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-05



function setup() {
    createCanvas(350, 350);
    background(0);
    stroke(255);
}

function draw() {
    stroke(255);
    for (i = 0; i < 4; i++) { //Xs
        for (j = 0; j < 4; j++) {
            var x1 = 45 + i * 80;
            var x2 = 65 + i * 80;
            var y1 = 15 + j * 100;
            var y2 = 35 + j * 100;
            line(x1, y1, x2, y2);
            line(x2, y1, x1, y2);
        }
    }
    stroke("red");
    for (i = 0; i < 3; i++){ //circles
        for (j = 0; j < 3; j++){
            noFill();
            var x = 95 + i * 80;
            var y = 75 + j * 100;
            ellipse(x, y, 30, 30);
        }
    }
    // big X
    stroke('red');
    line(0, 0, 350, 350);
    line(350, 0, 0, 350);

    stroke('red');
    ellipse(175, 175, 165, 165);
    stroke('white');
    ellipse(175, 175, 255, 255);
}

For this project, I got my inspiration from crosshair of a firearm. When I thought of a crosshair, it was appropriate to use crosses and circles. With black background and red elements, it provides a feeling that no one is safe.

Jacky Tian’s Project 05

sketch

//Yinjie Tian
//Section D
//yinjiet@andrew.cmu.edu
//project-05

function setup() {
    createCanvas(600, 400);
    background(128, 128, 128);
    var tw = 60;
    var th = 60;
    var oy = 25;
    var ox = 5;

    for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 10; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
           
            strokeWeight(0);
            fill(200, 190,  100)
            rect(px, py, 50, 50);
            strokeWeight(2);
            stroke(255);
            line(px,  py + 15,  px + 80,  py + 15);
            strokeWeight(4);
            stroke(65, 105, 225);
            line(px + 35, py, px + 35, py +  80)
            noStroke()
            fill(128, 0, 0);
            ellipse(px + 50, py + 50, 10, 10);
        }
    }
  noLoop();
    
    }

function draw() {
    // draw is not called due to noLoop() in setup()
}

EARLY SKETCH / CONCEPT SKETCH

From the early concept sketch, you can see that i was intrigued by grids combined with rectangles and dots. I was then inspired by the color scheme of the original Burberry pattern which also has the grids and rectangles.

Project 05 – Wallpaper


sketch

// Deklin Versace Section E
var patX = 120;
var patY = 120;

function setup() {
    createCanvas(900, 900);
    background(238, 195, 246);
    var xSpace = -30;
    var ySpace = 110;
    noStroke();

    for (var y = 0; y < 7; y++) {
      if (y % 2 === 0) {
        for (var x = 0; x < 12; x++) {
            var sety = ySpace + y * patY;
            var setx = xSpace + x * patX;
            drawHead1(setx, sety, random(1, 90));
        }
      } else {
          for (var x = 0; x < 11; x++) {
            var sety = ySpace + y * patY;
            var setx = xSpace + x * patX;
            drawHead1(setx + patX / 2, sety, random(1, 90));
          }
      }
    }
    noLoop();
}

function drawHead1(centerX, centerY, rotation) {
  fill(173, 60, 70);
  ellipseMode(CENTER);
  ellipse(centerX, centerY, patX, patY);
  ellipse(centerX, centerY - patY / 2, patX / 5, patY / 5);
  ellipse(centerX - patX / 7, centerY - patY / 2, patX / 6, patY / 6);
  ellipse(centerX + patX / 7, centerY - patY / 2, patX / 6, patY / 6);
  fill(89, 22, 22);
  triangle(centerX, centerY + patY / 3, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  fill(117, 40, 53);
  triangle(centerX, centerY - patY / 4, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  triangle(centerX, centerY + patY / 5, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  fill("white");
  ellipse(centerX - patX / 5, centerY - patY / 6, patX / 5, patY / 5);
  ellipse(centerX + patX / 5, centerY - patY / 6, patX / 5, patY / 5);
  fill("black");
  ellipse(centerX + patX / 5, centerY - patY / 6, patX / 8, patY / 8);
  ellipse(centerX - patX / 5, centerY - patY / 6, patX / 8, patY / 8);
}

Shannon Ha – Project 05 – Wallpaper

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 05

function setup() {
    createCanvas(600, 400);
    background(237, 197, 17);
}
function draw() {
  var ox = 15; // x origin
  var oy = 40; // y origin
  var sizeAX = 30 //width of green ellipse
  var sizeAY = 20 //height of green ellipse


  for (var y = 0; y < height; y++) {
    for (var x = 0; x < 12; x++) {
//green ellipse
      noStroke();
      fill(191, 227, 205);
      ellipse(ox * x * 10, oy * y - 20, sizeAX + 10, sizeAY);
//purple ellipse
      noStroke();
      fill(166, 120, 222);
      ellipse((ox - 10)* x * 20, oy * y - 20, sizeAX-15, sizeAX-10);
//blue ellipse
      noStroke();
      fill(16, 9, 92);
      ellipse((ox - 10) * x * 10, oy * y - 20, sizeAX-20, sizeAX-20);
//overlapping red circles
      noFill();
      strokeWeight(2);
      stroke(237, 57, 17);
      ellipse(ox * x * 10, oy * y + 20, sizeAX + 100, sizeAX + 100);

    }
        }

      }

For this project, I looked at how patterns and shapes could alternate through tiles and so I make a series of ellipses that were abstract by itself, but combined together in the middle column to form an eye pattern.

Nadia Susanto – Project 05 – Wallpaper

sketch

/* Nadia Susanto
   nsusanto@andrew.cmu.edu
   Section B
   Project - 05 - Wallpaper */

function setup() {
    createCanvas(550, 550);
    background(92,160,219);
}

function draw() {
    //triangle pizza variables
    var triX1 = 50;
    var triY1 = 25;
    var triX2 = 25;
    var triY2 = 75;
    var triX3 = 75;
    var triY3 = 75;
    //pizza crust variables
    var crustX = 50;
    var crustY = 70;
    var crustW = 50;
    var crustH = 10;
    //peperoni variables
    var pepSize = 5;
    var pepX1 = 50;
    var pepY1 = 38;
    var pepX2 = 45;
    var pepY2 = 47;
    var pepX3 = 55;
    var pepY3 = 53;

    var flip = false;
    for (var triY1 = 25; triY1 < height; triY1 += 75) {
      triX1 = 50;
      triX2 = 25;
      triX3 = 75;
      pepX1 = 50;
      pepX2 = 45;
      pepX3 = 55;
      crustX = 50;
      for (var triX1 = 50; triX1 < width; triX1 += 75) {
          //cheese
          stroke(255, 241, 153);
          strokeWeight(0.5);
          fill(255,241,153);
          //upwards pizza
          if (flip == true)
          {
            triangle(triX1, triY1, triX2, triY2, triX3, triY3);
            fill(222,12,0)
            circle(pepX1, pepY1, pepSize, pepSize);
            circle(pepX2, pepY2, pepSize, pepSize);
            circle(pepX3, pepY3, pepSize, pepSize);
            //crust
            fill(226,104,60);
            ellipse(crustX, crustY+2, crustW, crustH);
            triX2 +=75;
            triX3 += 75;
            flip = false;
          }
          else { //downwards pizza
            triangle(triX1, triY2, triX2, triY1, triX3, triY1);
            fill(222,12,0);
            circle(pepX1, pepY1, pepSize, pepSize);
            circle(pepX2, pepY2, pepSize, pepSize);
            circle(pepX3, pepY3, pepSize, pepSize);
            stroke(226,104,60);
            strokeWeight(1);
            fill(226,104,60);
            ellipse(crustX, crustY-42, crustW, crustH);
            triX2 +=75;
            triX3 += 75;
            flip = true;
          }
          pepX1 += 75;
          pepX2 += 75;
          pepX3 += 75;
          crustX += 75;
    }
    triY2 += 75;
    triY3 += 75;
    pepY1 += 75;
    pepY2 += 75;
    pepY3 += 75;
    crustY += 75;
    }

}

I was confused at first on what to draw, but then I became hungry and thought of pizza. I was then inspired by this pizza wallpaper I found online. I started coding first the initial pizza on the top left, then I initialized the variables using the numbers I got from my first pizza. I then incorporated for loops and other elements to flip the pizzas and make it a repeating pattern. 

Carly Sacco – Project 05 – Wallpaper

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 5: Wallpaper

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

function draw() {

	background(145, 185, 217);
		
	fill(255); //white rectangles
	noStroke();
	for(var x = 0; x < 100; x = x + 1) {
		rect(x, 20, width, 25); //top two white lines
		rect(x, 100, width, 100);
		
		rect(x, 440, width, 25); //bottom two white lines
		rect(x, 300, width, 100);
}

	fill(178, 206, 219); //blue rectangles
	noStroke();
	for(var y = 0; y < 100; y = y + 1) {
		rect(x + 50, y, x, 25); //top set of three rectangles
		rect(x + 200, y + 50, x, 25);
		rect(x - 100, y + 50, x, 25);
		
		rect(x + 50, y + 205, x, 25); //middles set of rectangles
		rect(x + 200, y + 250, x, 25);
		rect(x - 100, y + 250, x, 25);
		
		rect(x + 50, y + 420, x, 25); //bottom set of rectangles
		rect(x + 200, y + 470, x, 25);
		rect(x - 100, y + 470, x, 25);
}

	stroke(186, 191, 194); //grey line set
	line(125, 0, 125, 500);
	line(275, 0, 275, 500);
	line(115, 0, 115, 500);
	line(135, 0, 135, 500);
	line(265, 0, 265, 500);
	line(285, 0, 285, 500);

	stroke(214, 120, 145); //pink
	line(0, 30, 500, 30); //top set of three pink lines
	line(0, 20, 500, 20);
	line(0, 45, 500, 45);
	
	line(0, 440, 500, 440); //bottom set of pink lines
	line(0, 450, 500, 450);
	line(0, 465, 500, 465);
}

The inspiration for my wallpaper were different types of line types that were abstracted. Therefore, I used dotted lines, different line thicknesses, and different colored lines.

Margot Gersing – Project 05 – Wallpaper

mgersing-project5

// Margot Gersing - Project 5 - Section E - mgersing@andrew.cmu.edu

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

}

function draw(){
	background(249, 209, 99);

	// blue
	for (var y = height/24; y < height; y += height/6) {
        for (var x = width/24; x < width; x += width/6) {
            fill(61, 93, 112);
            noStroke();
            rect(x + 17.5, y, 15, 50);
            rect(x, y + 17.5, 50, 15);
        }
    }

    // red +
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            fill(213, 85, 39);
            noStroke();
            rect(x - 7.5, y, 15, 50);
            rect(x - 25, y + 17.5, 50, 15);
        }
    }

    // green shape
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 25; x < width + width/6; x += width/6) {
            fill(139, 163, 126);
            noStroke();
            rect(x, y - 25, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // gray shape
    for (var y = 75; y < height + height/6; y += height/6) {
        for (var x = 75; x < width + width/6; x += width/6) {
            fill(50);
            noStroke();
            rect(x, y, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // white horizontal dots
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = width/12; x < width + width/6; x += width/6) {
            fill(255);
            ellipse(x, y + 15, 5, 5);
            ellipse(x - 15, y + 15, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
          
        }
    }

    // white vertical dots
    for (var y = height/12; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            ellipse(x + 15, y, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
            ellipse(x + 15, y + 30, 5, 5);
            
          
        }
    }

}

For this project I wanted to create a geometric pattern. I also wanted to use festive colors. It was fun to make a playful pattern from simple shapes.

YouieCho-Project-05-Wallpaper

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-05-Wallpaper*/

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

function draw() {
    background(0);
    drawPattern();
}

function drawPattern() {
    var diam = 5; // dots
    var r = 0;
    var b = 0;
    var ratioC = 0; //increase for circle
    var ratioR = 0; //increase for rectangle
    var increment = 25;
    for (var y = increment; y < height; y += increment) {
        for (var x = increment; x < width; x+= increment) {
            //color gradient
            r = map(y, 0, height, 255, 0);
            b = map(x, 0, height, 0, 255);
            fill(r, 100, b);
            //dot
            ellipse(x, y, diam, diam);
            //outer circle increases from bottom to top
            noFill();
            stroke(r, 100, b);
            strokeWeight(0.5);
            ratioC = map(y, 0, height, 110, 0);
            ellipse(x, y, diam + ratioC, diam + ratioC);
                //inner circle increases from bottom to middle
                if(y < width / 2) {
                    strokeWeight(0.3);
                    ellipse(x, y, diam + ratioC / 2, diam + ratioC / 2);
                //squares decrease from bottom to middle
                } else {
                    rectMode(CENTER);
                    ratioR = map(y, height, 0, 60, 0);
                    rect(x, y, diam + ratioR, diam + ratioR);
                }
        }
    }
    noLoop();
}

During this project, it was fun to experiment with mapping color, scale, and shapes along vertical and horizontal axes. The pattern shapes are composed of: 1. dot + inner circle + outer circle, and 2. dot + inner circle + square.

Initial layout with pattern shapes

Mari Kubota- Project- 05- Wallpaper

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 5
*/

var spacing= 100; //space bewtween elements

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

//draws wallpaper
function draw(){
    background (150,200,200);
    Wallpaper();

}

//function that creates patterns
function Wallpaper(){ 

//cactus
    for (var x = 50; x<=width; x += spacing) {
        for (var y = 50; y <= height; y+=spacing) {
            stroke (154,205,50);
            fill(152,181,104);
            ellipse(x,y,20,20);
            ellipse(x+15, y+15, 20, 20);
            ellipse(x,y+15, 20, 20);
            ellipse(x+15,y, 20, 20);

//sparkles
    for (var a = 100; a<width; a += spacing) {
        for (var b = 100; b < height; b+=spacing) {
            stroke(204,204,0);
            fill("yellow");
            quad(a-10, b, a, b+15, a+10, b, a, b-15);
        }
    }

}
}
}

In this project I made a wallpaper with cactus and diamonds on a turquoise background. By relying on nested loops, I was able to create orderly rows of the pattern interchangeably. The challenge of this project was creating a function called Wallpaper which contained the pattern that had to be called in a draw function without looping repeatedly.