Category: Project-05-Wallpaper

Cathy Dong-Project-05-Wall Paper

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 5-wallpaper
*/

var ox = 50;
var oy = 75;
var xSpace = 80;
var ySpace = 120;

function setup() {
    createCanvas(420, 600);
    background(244, 239, 223);
}

function draw() {
	for (var i = 0; i < 5; i++) {
		for (var j = 0; j < 5; j++) {
			//avocado outer variable
			var outX1 = ox + i * xSpace - 33;
			var outY1 = oy + j * ySpace;
			var outX4 = ox + i * xSpace - 25;
			var outY4 = oy + j * ySpace - 30;
			var outX2 = ox + i * xSpace - 8;
			var outY2 = oy + j * ySpace - 60;
			var outX3 = ox + i * xSpace;
			var outY3 = oy + j * ySpace + 35;

			//avocado
			stroke(29, 59, 16);
			strokeWeight(2);
			fill(203, 223, 180);
			beginShape();
			curveVertex(outX4, outY4);
			curveVertex(outX2, outY2);
			curveVertex(outX2 + 7, outY2 - 2); //center point
			curveVertex(outX2 + 16, outY2);
			curveVertex(outX4 + 50, outY4);
			curveVertex(outX1 + 66, outY1);
			curveVertex(outX3 + 20, outY3 - 10);
			curveVertex(outX3, outY3);
			curveVertex(outX3 - 20, outY3 - 10);
			curveVertex(outX1, outY1);
			endShape(CLOSE);

			//avocado inner
			noStroke();
			fill(235, 234, 188);
			beginShape();
			curveVertex(outX4 + 10, outY4 - 5);
			curveVertex(outX2 + 10, outY2 + 10);
			curveVertex(outX2 + 17, outY2 + 8); //top center point
			curveVertex(outX2 + 20, outY2 + 10);
			curveVertex(outX4 + 40, outY4 - 10);
			curveVertex(outX1 + 60, outY1 - 10);
			curveVertex(outX3 + 15, outY3 - 15);
			curveVertex(outX3, outY3 - 5); //bottom center point
			curveVertex(outX3 - 20, outY3 - 15);
			curveVertex(outX1 + 10, outY1 - 10);
			endShape(CLOSE);

			// avocado shell
			if ((i % 2 == 0 & j % 2 == 1) || (i % 2 == 1 && j % 2 == 0)){
				drawShell(i,j);
			}
			// avocade without shell
			if ((i % 2 == 1 & j % 2 == 1) || (i % 2 == 0 && j % 2 == 0)){
				drawNoShell(i,j);
			}
		}
	}
	noLoop();
}

function drawShell(i,j) {
	//avocado center
	stroke(131, 98, 66);
	strokeWeight(2);
	fill(198, 140, 102);
	ellipse(ox + i * xSpace, oy + j * ySpace, 34, 36);

	//avocado center mid
	noStroke();
	fill(215, 158, 124);
	ellipse(ox + i * xSpace, oy + j * ySpace, 20, 23);

	//avocado center light
	stroke(240, 217, 174);
	strokeWeight(5);
	noFill();
	arc(ox + i * xSpace, oy + j * ySpace, 20, 20, 0, QUARTER_PI);
}

function drawNoShell(i,j) {
	//avocado center
	stroke(248, 241, 224);
	strokeWeight(1);
	fill(227, 217, 114);
	ellipse(ox + i * xSpace, oy + j * ySpace, 35, 38);

	//avocado center light
	stroke(202, 198, 75);
	strokeWeight(10);
	noFill();
	arc(ox + i * xSpace, oy + j * ySpace, 20, 20, 0, HALF_PI);

}

My project is about avocado patterns. To help coding, I first calculated important point x and y axis, using shell center as the origin.

Avocado Points

Ankitha Vasudev – Project 05 – Wallpaper

For this project I wanted to create a geometric pattern and was inspired by the designs on the antique wallpaper website. I experimented with various shapes, variables and colors before arriving at a final result. I particularly focused on creating quadrangles through diagonal lines. 

Initial starting idea for my wallpaper

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 05

//global variables 
var l = 25;
var diameter = 10;
var spacing = 50;

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

function draw() { 
    background(210, 140, 190);
    //command to draw wallpaper 
    drawWallPaper();
}

function drawWallPaper() {

    //thin yellow lines
    stroke(255, 215, 50);
    strokeWeight(8);
    for (var x = 0; x<=width; x += spacing) {
        for (var y = 0; y <= height; y+=spacing) {
      line(x-l, y+l, x+l, y-l);
      line(x+l, y+l, x-l, y-l);
      line(x-l, y+l, x+l, y-l);
      line(x+l, y+l, x-l, y-l);
    }
  }

    //thick blue diagonal lines
    stroke(130, 190, 230);
    strokeWeight(4);
    for (var x = 0; x<=width; x += spacing) {
        for (var y = 0; y <= height; y+=spacing) {
         line(x-l, y+l, x+l, y-l);
         line(x+l, y+l, x-l, y-l);
         line(x-l, y+l, x+l, y-l);
         line(x+l, y+l, x-l, y-l);
    }
  }

    //inner squares 
    strokeWeight(2);
    stroke(255, 215, 50);
    fill(255, 70, 160);
       for (var x = 0; x<=width; x += spacing/2) {
        for (var y = 0; y <= height; y+=spacing) {
            rectMode(CENTER);
            rect(x, y, l/4, l/4);
     }
   }

    //circles
    strokeWeight(4);
    stroke(130, 190, 230);
    fill(220);
     for (var x = 0; x<=width; x += spacing) {
        for (var y = 0; y <= height; y+=spacing) {
            ellipse(x, y, diameter);
     }
   }
}

Sarah Kang – project 05 – Wallpaper

wallpaper

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-05-wallpaper

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

function draw() {
    background(255, 207, 207);

    for (var y = 55; y < height + 100; y += 150) {
        for (var x = 55; x < width + 100; x += 150) {
            noFill();
            strokeWeight(7);
            stroke(31, 0, 97);
            rect(x, y, 40, 40); // thick purple squares

            strokeWeight(2);
            rect(x - 10, y - 10, 60, 60); // thin purple squares

            stroke(211, 240, 238);
            noFill();
            rect(x - 70, y - 70, 30, 30); // light blue squares

            fill(211, 240, 238);
            ellipse(x -  55, y - 55, 10, 10); // light blue circles
        }
    }

    for (var y = -70; y < height - 20; y += 150) {
        for (var x = -70; x < width - 20; x += 150) {
            noFill();
            strokeWeight(4);
            stroke(255, 254, 207);
            rect(x, y, 140, 140); // big yellow squares
        }
    }
}

For this wallpaper, I wanted to see what kind of graphics I could make by layering simple geometries such as squares.

initial sketch

Monica Chang – Project 05 – Wallpaper

sketch

//Monica Chang
//Section D
//mjchang@andrew.cmu.edu
//Project-5-Wallpaper

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

function draw() {
  background(191, 145, 45);
  drawGrid();

  
}

function drawGrid() {
  // noprotect
  
  //base of design
  for (var y = 0; y < 450; y += 10) {
        for (var x = 0; x < 650; x += 10) { //repeating ellipses          
            fill(0, 255, 38);
            noStroke();
            ellipse(x, y, 6, 10);
        }
// repetitive quads overlapping the ellipses    

  var xr = 20;
  for (var b = -50; b < height + 50; b += 20) { //quad rows
      for (var a = -50; a < width + 50; a += 20) { // quad columns
          noStroke();
          fill(0, 255, 38);
          quad(a, b, b + xr, b - sqrt(3) * xr / 4,  a + 2 * xr, b, a + xr,  b - sqrt(3) * xr / 4); // manipulating the quads so that they for mini-waves.
        }
    }
  }
}

For this project, I was inspired by the idea of green mesh details covering a nude fitting(design for fashion.)

It’s nice to know that loops can do so much work for us. I had a lot of trouble getting the quads to create a subtle wave but I managed to calculate the values that would help create that small detail.

Katrina Hu – Project 05 – Wallpaper

sketch_project05

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-05-Wallpaper*/

function setup() {
    createCanvas(570, 570);
    //background(255, 203, 196);
    background(0);
}

function draw() {
    //flower
    noStroke();
    for (var y = 0.5; y < 7; y++) {
        for (var x = 0.5; x < 7; x++) {
            fill(255);
            ellipse(y * 80, x * 80, 40, 10);
            ellipse(y * 80, x * 80, 10, 40);
            fill(255, 245, 173);
            ellipse(y * 80, x * 80, 25, 25);
            fill(186, 209, 255);
            ellipse(y * 80, x * 80, 10, 10);
        }

    }
    //small polka dots
    for (var y = 0.5; y < 6; y++) {
        for (var x = 0.5; x < 6; x++) {
            fill(255);
            ellipse(y * 80 + 40, x * 80 + 40, 5, 5);
        }
    }
}

This was a fun project to experiment with various shapes and how to create a design from them. I enjoyed seeing how the for loop would change the design.

The initial design sketch

Julia Nishizaki – Project 05 – Wallpaper

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project-05-Wallpaper

function setup() {
    createCanvas(600, 600);
    background(18, 120, 161);
    noLoop();
}

function draw() {
    //grid background
    for (var y = 0; y < height + 25; y += 50) {
        for (var x = 0; x < width + 25; x += 50) {
            //diagonal lines
            var linelength = 25;
            strokeWeight(5);
            stroke(63, 159, 188);
            line(x - linelength, y - linelength, x + linelength, y + linelength);
            line(x - linelength, y + linelength, x + linelength, y - linelength);
            //short crosses that break up the diagonal lines
            var linelengthHorizon = 5;
            stroke(18, 120, 161);
            strokeCap(ROUND);
            line(x - linelengthHorizon, y, x + linelengthHorizon, y);
            line(x, y - linelengthHorizon, x, y + linelengthHorizon);
        }
    }
    //normal bird layer
    for (var y = 0; y < height + 100; y += 100) {
        for (var x = 0; x < width + 100; x += 100) {
            bird(x, y);
        }
    }
    //offset bird layer
    for (var y = 50; y < height + 100; y += 100) {
        for (var x = 50; x < width + 100; x += 100) {
            bird(x, y);
        }
    }
}
function bird(x, y) {
    push();
    translate(x, y);
    noStroke();
   
    //bird variables:
    var birdHeadS = 20;
    var birdHeadX = -25;
    var birdHeadY = -33;
    var birdBodyW = 40;
    var birdBodyH = 30;
    var birdBodyX = -35;
    var birdBodyY = -25;
    var birdDisplacement = 12;
   
    //left bird: beak, head, body
    fill(255, 197, 67);
    triangle(birdHeadX - birdDisplacement, birdHeadY + 6, birdHeadX - birdDisplacement, birdHeadY - 6, (birdHeadX - birdDisplacement) - 15, birdHeadY);
    fill('white');
    ellipse(birdHeadX - birdDisplacement, birdHeadY, birdHeadS, birdHeadS);
    arc(birdBodyX - birdDisplacement, birdBodyY, birdBodyW, birdBodyH, PI * 7/4, PI * 3/4);
   
    //right bird: beak, head, body
    fill(255, 197, 67);
    triangle(birdHeadX + birdDisplacement, birdHeadY + 6, birdHeadX + birdDisplacement, birdHeadY - 6, (birdHeadX + birdDisplacement) + 15, birdHeadY - 5);
    fill('white');
    ellipse(birdHeadX + birdDisplacement, birdHeadY, birdHeadS, birdHeadS);
    arc(birdBodyX + birdDisplacement + 20, birdBodyY - 5, birdBodyW, birdBodyW, 0, PI);
    
    //eyes
    fill(6, 73, 112);
    ellipse(birdHeadX - birdDisplacement - 3, birdHeadY - 2, 3, 3);
    ellipse(birdHeadX + birdDisplacement + 3, birdHeadY - 2, 3, 3);
    pop();
}

For this project, I wanted to create something that was fairly simple and geometric, but also playful and fun. I started with some sketches, and developed the idea that I wanted to use a grid of some sort, along with pigeons. When I started to create the wall paper, I ended up deviating from my drawing, and I instead tried to explore different elements. For example, I decided to create generic birds, rather than pigeons, and I ended up rotating the grid, moving the birds, and playing with what they looked like.

Initial sketches before coding

Lauren Park – Project-05 – Wallpaper

sketch

var px =50;// x of first circle design
var py = 50;// y of first circle design

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

function draw() {
  background('#368A5A');
  stroke(230);
  
  for (var y = 0; y < 10; y++) {
    for (var x = 0; x < 11; x++) {
      var sx = px + x *50;//x of circle pattern 
      var sy = py + y *50;//y of circle pattern
      
      //circle flower pattern
      noFill(); 
      arc(sx-50, sy-50, 97, 97,0, PI, HALF_PI+QUARTER_PI);
      arc(sx-50, sy-50, 97, 97, PI, 0.1*QUARTER_PI,PI);
          
      //flower center
      fill('#F5EB61');
      ellipse(sx-50, sy-50, 15, 15);
              
        }
   }
}

For my wallpaper pattern, I was thinking about a floral design initially. However, I wanted to use other geometric elements like the ellipse to create a more abstract pattern that shows repetition, floral aspects, and other different forms that come together. I then incorporated my favorite color and wanted to include smaller, yellow circles to make the design stand out more. I mainly found it challenging when I adjusted these arcs to create a flowing pattern, so that each intricate detail shows. But, overall I enjoyed this project, in trying to create a design that I would wear.

Min Ji Kim Kim – Project 05 – Wallpaper


sketch

I need a new shower curtain, so for this week, I chose to design something that I would be willing to buy.  The circle and diamonds reminded me of water droplets and I kept a general blue color palette to go with the water theme.

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(500,500);
    background(255);

    //navy diamonds
    fill('#002548');
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            quad(x + 45, y + 15, x + 65, y + 45, x + 45, y + 75, x + 25, y + 45);
        }
    }

    //inside blue diamond with white outline   
    stroke(255);
    strokeWeight(3);
    fill('#5A7189');
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            quad(x + 45, y + 30, x + 55, y + 45, x + 45, y + 60, x + 35, y + 45);
        }
    }

    //blue circles
    noStroke()
    fill('#5A7189')
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            var db = 25; //big circle diameter
            circle(x + 10, y + 10, db);
        }
    }

    //small magenta dots
    noStroke()
    fill('#6C4971')
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            var ds = 10; //small circle diameter
            circle(x + 10, y + 45, ds);
        }
    }
    noLoop();
}

Ammar Hassonjee – Project 05 – Wallpaper

Wallpaper Sketch

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 05 - Wallpaper
   */

function setup() {
    createCanvas(600, 600);
    background(0, 0 , 100);
}

function draw() {
    // First for loop that sets the y grid of elements
    for (var y = 0; y < 7; y++) {
        for (var x = 0; x < 7; x++) {
            //variables declared to alter shapes generated for wallpaper
            var ax = x * 100;
            var ay = y * 100;

            noStroke();
            // making sure the wallpaper is mirrored every other to create
            // continuous art effect
            if (x % 2 == 0) {
                // Making the quarter circle shapes
                fill(200);
                arc(ax, ay, 80, 80, radians(0), radians(90));
                arc(ax + 100, ay + 100, 80, 80, radians(180), radians(270));
                // Making triangle shape
                fill(255);
                triangle(ax + 90, ay + 10, ax + 25, ay + 60, ax + 35, ay + 70);
                // Making the circle shape
                fill(0);
                ellipse(ax + 30, ay + 65, 20, 20);
              }
            else {
                // Making the quarter circle shapes again but a different color
                fill(255, 245, 76);
                arc(ax + 100, ay, 80, 80, radians(90), radians(180));
                arc(ax, ay + 100, 80, 80, radians(270), radians(360));
                fill(0);
                triangle(ax + 10, ay + 10, ax + 75, ay + 60, ax + 65, ay + 70);
                // Making the circle shape but a different color
                fill(255);
                ellipse(ax + 70, ay + 65, 20, 20);
              }
            }
          }
}

My inspiration for this sketch came from trying to replicate a starry night. In my initial coding where I started to draw shapes and mirror them, I found that through alternating panel directions and by changing the colors of the same elements in each iteration of the loops, I could create an interesting drawing.

Sarah Choi – Project-05 – Wallpaper

For this project, I was inspired by abstract lines. I wanted to create colorful wallpaper against a dark blue background, as I was intrigued by rooms with dark-colored walls with lighter designs on top after going to multiple home furniture design showrooms during the summer. I wanted to light up the room by using lighter colors like white, light yellow, and lavender. I have always liked abstract wallpapers using only symmetrical lines combining to create something more “chaotic” to pair with simple furniture.

project-05

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-05

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

function draw() {
    background(0, 0, 153);
    for (var y = 0; y < height+25; y += 50) {
        for (var x = 0; x < width+25; x += 50) {
            noStroke();
            fill(255); 
            rect(x + 33, y, 10, 400)
        }
    }
    for (var i = 0; i < 400; i += 4) {
        stroke(252, 255, 122);
        strokeWeight(5);
        line(i, i * 20 - 30, 600, i + 400);
    }

    for (var a = 0; a < 400; a += 7) {
        stroke(204, 153, 255);
        strokeWeight(7);
        line(a, a * 10 + 350, 700, a - 100);
    }
    for (var b = 0; b < 600; b += 50) {
        stroke(255);
        strokeWeight(7);
        line(b, 0, b, 400);
    }
}