Project 5 – Wallpaper

butterandmilk
``````// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
//Project-05

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

function draw() {
background(145,204,236);
noStroke();
//repetition of butter on plate as wallpaper
for (var x = 0; x < width; x += 80) {
for (var y = 0; y < height; y += 80 ) {
push();
translate(x, y);
drawButter();
pop();
}
}

//repetition of milk as wallpaper
for (var x = 0; x < width; x += 80) {
for (var y = 0; y < height; y += 80 ) {
push();
translate(x - 60, y - 60);
drawMilk();
pop();
}
}

//orange juice
fill(255,140,0);
ellipse(197, 189, 12, 3);
quad(191, 189, 203, 189, 203, 202, 191, 202);
ellipse(197, 202, 12, 3);
}

//milk drawing
function drawMilk() {
//milk cup - gray
fill(207, 212, 214);
ellipse(97, 79, 14, 3);
quad(90, 79, 104, 79, 104, 103, 90, 103);
ellipse(97, 103, 14, 3);

//milk - white
fill(255);
ellipse(97, 89, 12, 3);
quad(91, 89, 103, 89, 103, 102, 91, 102);
ellipse(97, 102, 12, 3);
}

//butter drawing
function drawButter() {
//plate dark side - light gray
fill(212, 211, 206);
quad(66, 49, 75, 55, 51, 63, 42, 55);

//plate right light side - white
fill(233,229,234);
quad(75, 55, 75, 56, 51, 64, 51, 63);
//plate left light side - white
quad(42, 55, 51, 63, 51, 64, 42, 56);

//butter light side - light yellow
fill(255, 229, 155);
quad(49, 50, 67, 45, 71, 49, 53, 55);
//butter light side (cut piece)
quad(49, 56, 53, 61, 46, 62, 42, 57);

//butter medium dark side - medium dark yellow
fill(236,195,93);
quad(49, 50, 53, 55, 53, 61, 49, 56);
//butter medium side (cut piece)
quad(42, 57, 46, 61, 46, 62, 42, 58);

//butter dark side - dark yellow
fill(218,177,72);
quad(71, 49, 71, 55, 53, 61, 53, 55);
//butter dark side (cut piece)
quad(46, 61, 53, 60, 53, 61, 46, 62);
}
``````

I personally love the butter and milk emojis so I wanted to make a wallpaper containing these emojis. It looks quite simple from far away, but I tried to detail the butter as much as I could to replicate the emoji in my iPhone as closely as possible. I added a slight randomness of orange juice for visual playfulness.

Project 5 – Wallpaper

sketch
``````function setup() {
createCanvas(410, 380);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(241, 224, 197);

//flowers
for(var column = 1; column <= 7; column += 1) {
//column 1
push();
translate(50, 50 * column);
flowers(1);
pop();

//column 2
push();
translate(150, 50 * column);
flowers(1);
pop();

//column 3
push();
translate(250, 50 * column);
flowers(1);
pop();

//column 4
push();
translate(350, 50 * column);
flowers(1);
pop();

//leaves
for(var row = 1; row <= 7; row += 1) {
//row 1
push();
translate(100, 50 * row);
leaves(1);
pop();

//row 2
push();
translate(200, 50 * row);
leaves(1);
pop();

//row 3
push();
translate(300, 50 * row);
leaves(1);
pop();
}

//dots
for(var shape = 1; shape <= 40; shape += 1) {
fill(41, 39, 76);

//shape 1
push();
translate(10 * shape, 8);
circle(0, 0, 3);
pop();

//shape 1
push();
translate(10 * shape, height - 8);
circle(0, 0, 3);
pop();
}

}

function flowers() {

noStroke();
push();
translate(0, -10);
//pedal color
fill(255, 104, 107);
//pedals
circle(-10, -4, 20);
circle(10, -4, 20);
circle(0, -11, 20);
circle(8, 8, 20);
circle(-8, 8, 20);
//center pedal
fill(247, 230, 48);
circle(0, 0, 10);
pop();

}

function leaves() {
fill(0, 168, 120);
noStroke();

push();
translate(0, -10);
arc(0, 0, 27, 7, 0, PI, OPEN);
arc(0, 0, 27, 7, PI, 0, OPEN);
pop();

}

}
``````

For this project, I wanted to create a simple, yet visually intriguing wallpaper. I was inspired by Tyler the Creator’s clothing brand, Golf. The simple shapes are repeating patterns are attractive to the eye.

I used for loops to complete the project. I first had to create a function for the different components in the design, such as the flower, the leaves and the dots. Then, using the for loop, I just called the functions and translated it accordingly.

Project-05-Wallpaper

da ‘working on 104 for tonight’ wallpaper

``````function setup() {
createCanvas(600, 600);
background(30);
rectMode(CENTER);
angleMode(DEGREES);
noLoop();
}

function draw() {
for(let i=-100; i<800;i+=200){
for(let j=-300; j<800;j+=400){
push();
translate(j,i);
patterndraw();
pop();
}
}
for(let i=-200; i<800;i+=200){
for(let j=-100; j<800;j+=400){
push();
translate(j,i);
patterndraw();
pop();
}
}
}

function patterndraw(){
linebg();
cord();
//display cord
stroke(0);
beginShape();
curveVertex(0,-30);
curveVertex(0,-30);
curveVertex(40,-30);
curveVertex(40,30);
curveVertex(50,45);
curveVertex(50,45);
endShape();
noStroke();
//table legs
fill(60);
rect(-60,30,5,60);
rect(60,30,5,60);
//tabletop
fill(75);
rect(0,0,150,10);
//display
fill(20);
rect(0,-35,70,40);
fill(210);
rect(0,-35,65,35);
//lines on display
strokeWeight(2);
stroke(80);
for(let r=0; r<26; r+=4){
line(-30,-48+r,random(-27,27),-48+r);
}
noStroke();
//coffee cup
//cup
fill(120);
rect(-50,-12,10,14,0,0,4,4);
//handle
noFill();
stroke(120);
strokeWeight(2);
arc(-46,-12,8,8,-90,90);
noStroke();
//steam
fill(60);
beginShape();
curveVertex(-50,-20);
curveVertex(-50,-20);
curveVertex(-52,-23);
curveVertex(-47,-28);
curveVertex(-50,-32);
curveVertex(-50,-32);
endShape();
//floor
fill(255,255,255,20);
beginShape();
curveVertex(-63,60);
curveVertex(-63,60);
curveVertex(0,85);
curveVertex(63,60);
curveVertex(63,60);
endShape();
//light casting
fill(156,196,255,60);
beginShape();
curveVertex(0,-75);
curveVertex(0,-75);
curveVertex(85,0);
curveVertex(0,85);
curveVertex(-85,0);
curveVertex(0,-75);
curveVertex(0,-75);
endShape();
fill(160);
beginShape();
vertex(-10,-75);
vertex(10,-75);
vertex(20,-65);
vertex(-20,-65);
endShape();
//person/chair
fill(20);
ellipse(0,-30,20,25);
//humanarms
ellipse(-26,-2,10,13);
ellipse(26,-2,10,13);
triangle(-31,-4,-20,-2,-20,-20);
triangle(31,-4,20,-2,20,-20);
//chairbase
//vert part
rect(0,40,6,35);
//supports
triangle(0,60,-30,60,0,50);
triangle(0,60,30,60,0,50);
//human legs
beginShape();
vertex(-18,60);
vertex(-10,60);
vertex(-6,30);
vertex(-16,30);
endShape();
beginShape();
vertex(18,60);
vertex(10,60);
vertex(6,30);
vertex(16,30);
endShape();
fill(35);
//seatback
beginShape();
vertex(-23,-22);
vertex(23,-22);
vertex(20,30);
vertex(-20,30);
endShape();
//chairarms
rect(-26,5,10,5);
rect(26,5,10,5);
//computer
fill(110);
rect(50,45,18,30);
//power symbol on computer
noFill();
stroke(255);
strokeWeight(1);
arc(50,45,8,8,-60,-120,OPEN);
line(50,40.5,50,44);
}

function linebg(){
fill(85,88,77);
noStroke();
beginShape();
curveVertex(-80, 50);
curveVertex(-80, 50);
curveVertex(-20,30);
curveVertex(20,-30);
curveVertex(120, -50);
curveVertex(120, -50);
endShape();
}

function cord(){
noFill();
strokeWeight(3);
stroke(110);
beginShape();
curveVertex(-150, -40);
curveVertex(-150, -40);
curveVertex(-150,-41);
curveVertex(-110,0);
curveVertex(-45,-100);
curveVertex(0,-71);
curveVertex(0, -70);
curveVertex(0, -70);
endShape();
}``````

I used a quick drawing to understand how the pieces that connected from tile to tile, as well as the layering of all the objects because some were semi-translucent. I tried to add a little visual intrigue with randomized text lengths.