Category: Project-05-Wallpaper

// 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.

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);
    rotate(radians(320));
    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.

da ‘working on 104 for tonight’ wallpaper

wallpapercompDownload

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();
//lamp shade
    fill(160);
    beginShape();
        vertex(-10,-75);
        vertex(10,-75);
        vertex(20,-65);
        vertex(-20,-65);
    endShape();
//person/chair
    //head
        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.