Category: Project-05-Wallpaper

Jai Sawkar Project 05 – Wallpaper

Sketch

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-04 


function setup() {
    createCanvas(400, 600); 
    background('#b3b1aa')
    noLoop()

}

function draw() { 
   
  for (var x = 0; x < width; x += 4){ //Background Sky
    for (var y = 0; y < 45; y += 5){
        
        fill('#bcc0c4')
        noStroke()

        fill('#0a293d')
        ellipse(x * 2, y * 2, 10, 10)

        push()
        fill('#071e2c')
        translate(0, 50)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0a293d')
        translate(0, 100)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0c354e')
        translate(0, 150)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#0f405f')
        translate(0, 200)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#124c70')
        translate(0, 250)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#155781')
        translate(0, 300)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#176392')
        translate(0, 350)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1a6ea2')
        translate(0, 400)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1d7ab3')
        translate(0, 450)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#1f85c4')
        translate(0, 500)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        push()
        fill('#2291d5')
        translate(0, 550)
        ellipse(x * 2, y * 2, 10, 10)
        pop()
        
    }
 } 

fill('#deddd5') //moon color
noStroke()
ellipse(width/2, 50, 100) //moon

for (var x = 0; x < 500; x += 40){ //mountains
        
        var mountainColor = random(80, 94)
        var top4 = random(200, 250)

        fill(mountainColor) //darker tree color
        triangle(x - 60, height, x + 60, height, x, height - top4) //third row of trees
}

for (var x = 0; x < 500; x += 20){ //tree 3
        
        var top3 = random(90, 100)

        fill('#142414') //darker tree color
        triangle(x+10, height-60, x+40, height - 60, x + 25, height - top3) //third row of trees
}

for (var x = 0; x < 500; x += 20){ //tree 2
        
        var top2 = random(80, 95)

        fill('#1b361b') //darker tree color
        triangle(x-10, height-40, x+30, height - 40, x + 10, height - top2) // Second Row of Trees
}
fill(0,0,0, 150); //blackish
rect(0, height-30, width, height); //darkness beneath trees
    
for (var x = 0; x < 500; x += 20){ //tree front
    for (var y = 0; y < 1; y += 1){
        
        var T = sqrt(3)/2
        var top = random(75,90)
        
        fill('#422d1c') //brown
        rect(x + 10, height - 45, 10, 45) //tree stumps
        fill("#244024"); //tree color
        triangle(x, height-30, x + 30, height - 30, x + 15, height - top) //trees
        stroke('#1c2e1c');
        line(x -1 , height - 31, x + 15, (height - top) + 1); //line for tree depth

        noStroke()
}
}
}

When beginning this project, I had no clue what I wanted my wallpaper to be. I turned to my friend and noticed a landscape as the background of his. I enjoyed its aesthetic and decided to portray the Pacific Northwest in Wallpaper-format.

Initial Concept Sketch

Gretchen Kupferschmid-Project 05- Wallpaper

sketch

var x;
var y;

function setup() {
    createCanvas(480,480);
}
 function draw (){
    background(247, 173, 209);
    drawGrid();
 }
 function drawGrid(){
     //create tile through looping x and y values no more than height and width of canvas
     for (y= -6; y<height; y+=94){
         for(x=-6; x<width ; x+=94){
             //translate the grid to the new x/y position each loop
             push();
             translate(x,y);
             drawShadowPink();
             drawWhites();
             drawShadowEgg();
             drawYolk();
             pop();
         }
     }
 }
//create egg white shape
function drawWhites(){
    fill(255);
    strokeWeight(3);
    beginShape();
    curveVertex(41.77, 38.02);
    curveVertex(82.95, 38.2);
    curveVertex(96.47, 39.8);
    curveVertex(101.98, 41.56);
    curveVertex(103.88, 46.61);
    curveVertex(97.46, 51.37);
    curveVertex(96.27, 59.94);
    curveVertex(92.47, 67.03);
    curveVertex(88.92, 66.25);
    curveVertex(72.82, 68.51);
    curveVertex(55.28, 73.71);
    curveVertex(47, 71.42);
    curveVertex(42.5, 67.12);
    curveVertex(40.78, 63.32);
    curveVertex(21.58, 53.57);
    curveVertex(20.22, 51.85);
    curveVertex(24.11, 47.02);
    curveVertex(30.22, 44.07);
    curveVertex(31.38, 41.25);
    curveVertex(35.3, 38.36);
    curveVertex(41.93, 38.2);
    curveVertex(41.77, 38.02); 
    endShape();
}
//create yolk shape
function drawYolk(){
    fill(250, 212, 25);
    strokeWeight(1);
    beginShape();
    curveVertex(41.38, 41.62);
    curveVertex(47.15, 28.01);
    curveVertex(57.11, 23.11);
    curveVertex(68.59, 23.89);
    curveVertex(79.61, 31.47);
    curveVertex(82.02, 35.39);
    curveVertex(82.61, 40.38);
    curveVertex(71.89, 47.39);
    curveVertex(57.46, 48.21);
    curveVertex(41.38, 41.62);
    curveVertex(47.15, 28.01);
    curveVertex(57.11, 23.11);
    endShape();
}
//shadow underneath whites
function drawShadowPink(){
    fill(224, 112, 168);
    strokeWeight(0);
    ellipse(66.77, 60.15, 82.86, 37.3);
}
//shadow underneath egg yolk
function drawShadowEgg(){
    fill(219, 150, 0);
    strokeWeight(0);
    ellipse(65.05, 43.14, 47.3, 18.7);
}

I used the pattern of an egg, which is a little doodle/drawing I constantly draw. I even named my website eggontoast.store because of the eggs I draw

I used this simple egg drawing and added some shadows to give it dimension and a more interesting factor.

Xiaoyu Kang – Project 05 – Wallpaper


sketch


//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-05

var s1 = 20;
var s2 = 15;
var s3 = 10;
function setup(){
createCanvas(620, 620);
    noStroke();
}
 
function draw() {
    background(172,198,253);

//lines
    for (var a = 0; a < 620; a += 80){
    	fill(235,226,158);
        rect(a + 65,0,10,620);
    }
   
    //clouds
    for (var y = 0; y < 620; y += 4) {
        for (var x = 0; x < 620; x += 4) {
        	fill("white");
            ellipse(y * s1 + (s1 / 20) + 30, x * s1 + (s1 / 20) + 30,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 15, x * s1+ (s1 / 20) + 30,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 35, x * s1 + (s1 / 20) + 35,s1,s1);
            ellipse(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 38,s2,s2);
            ellipse(y * s1 + (s1 / 20) + 45, x * s1 + (s1 / 20) + 32,s2,s2);
        }   
    }
    
    //yellow stars
    for (var y = 0; y < 620; y += 4) {
        for (var x = 0; x < 620; x += 4) {
        	fill(243,246,202);
        	quad(y * s1 + (s1 / 20) + 25, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 66, y * s1 + (s1 / 20) + 33, x * s1 + (s1 / 20) + 72, y * s1 + (s1 / 20) + 29, x * s1 + (s1 / 20) + 78)
        }
    }
}

For this project, I was inspired by the wallpaper in my bedroom when I was young. I remembered that it consists of many white clouds printed over a blue canvas. So I tried to recreate that with some additional decorations to make the drawing look more diverse.

 

Project 05 – Ilona Altman – Section A

sketch

var step = 0

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

function draw() {

    background(255, 255, 255);


    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 100) {
            fill(250,180,112,40);
            ellipse(x, y, 200, 200);
            stroke(255,50,50);
        }
    }

    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 100) {
            fill(255,240,240);
            ellipse(x, y, 10, 10);
            stroke(150,70,75);
        }
    }

    for (var y = 0; y < height+25; y += 50) {
        for (var x = 0; x < width+25; x += 100) {
            fill(230,255,255);
            ellipse(x, y, 5, 5);
            stroke(60,110,100);
        }
    }

    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 50) {
            fill(0,0,0);
            line(x, y, x+50, y+50);
            stroke(204, 102, 0);
        }
    }
}

lil sketch

I am really interested in how a simple shape like a circle can become incredibly complex, through the repetition of its form repeating. I have always loved the idea of intersections, and transparency. I wanted to experiment with these ideas, the transparency of color and harshness of the outlines.

Joanne Chui – Project 05 -Wallpaper

sketch

/*
Joanne Chui
Section C 
Project 5
*/

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


function draw(){
	for(i = 0; i < 5; i++){
		for(a = 0; a < 5; a++){
			var quadX = i * 100 - 50;
			var quadY = a * 100;
			noStroke();
			fill(255, 182, 56);
			if(i % 2 == 0){
				quad(quadX, quadY, quadX + 150, quadY, quadX + 75, quadY + 50, quadX - 75, quadY + 50);
				stroke("white");
				strokeWeight(2);
				line(quadX, quadY, quadX - 75, quadY + 50);
			}else{
				noStroke();
				fill(170, 120, 40);
				quad(quadX + 50, quadY + 50, quadX + 100, quadY + 50, quadX + 50, quadY + 100, quadX - 50, quadY + 100);
				stroke("white");
				strokeWeight(2);
				line(quadX, quadY, quadX + 50, quadY + 100);
				line(quadX, quadY, quadX + 100, quadY);
			}
		}
	}
}

I wanted to create a wallpaper that showed depth and had a lot of layers. I also experimented with creating an abstract design.

Xu Xu -Project 05 – Wallpaper

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project 05
var diameter = 8;
var spacing = 600/12;
var distance = 600/40;
var diam = 4;

function setup() {
    createCanvas(570, 570);
}
function draw() {
    background("black");
//love
  for (var y = 0; y < 20; y += 1) {
        for (var x = 0; x < 15; x += 1) {
        	noStroke();
            fill("white");
            circle(x*spacing + (diameter/2) + 5, y* spacing * 3 + (diameter), diameter);
            circle(x*spacing + (diameter*1.5) +5 , y* spacing * 3 + (diameter), diameter);
            triangle(x*spacing +5, y* spacing * 3 + (diameter), x*spacing + (diameter)+5, y*spacing *3 + 2.5*diameter, x*spacing + (diameter*2) +5, y* spacing *3 + (diameter));
        }
    }
//death
  for (var y = 0; y < 20; y += 1) {
        for (var x = 0; x < 15; x += 1) {
        	strokeWeight(4);
          	stroke("white");
          	strokeCap(PROJECT);
            line(x*spacing + 5*diameter, y* spacing * 3 + 7.5*diameter,x*spacing + 3.5*diameter, y* spacing * 3 + 6*diameter);
            strokeCap(ROUND);
            line(x*spacing + 5*diameter, y* spacing * 3 + 6*diameter,x*spacing + 3.5*diameter, y* spacing * 3 + 7.5*diameter);
        }
    }
//robots
  for (var y = 0; y < 20; y += 1) {
        for (var x = 0; x < 15; x += 1) {
        	noStroke();
            fill("white");
            rect(x*spacing + 0.5*diameter+3, y* spacing * 3 + 12*diameter, diameter*2, diameter*2);
            fill("black");
            circle(x*spacing + diameter+3, y* spacing * 3 + 12.5*diameter, diam);
            circle(x*spacing + 2*diameter+3, y* spacing * 3 + 12.5*diameter, diam);
        }
    }  

    noLoop();
}

For this project, I was inspired by the patterns of the Netflix show “Love, Death + Robots”, which I wanted to incorporate as part of my wallpaper design. Therefore I used the black and white logo colours, and organized the logos onto the wallpaper. I included details such as the different stroke caps of the “death” symbol, but to me organizing the logos using code was the most challenging part.

Austin Garcia – Project 05 – Section C

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project-05
*/

var s = 20

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

}

function draw() {
    background(100)


    strokeWeight(10)
    fill(50)

    //background
    for (var i = 0; i <= width; i += width / 20) {
        for (var l = 0; l <= height; l += 40) {
            rect(i, l, width / 20, height)
        }
    }

    // base circles
    for (var x = 0; x <= width; x += s * 2) {
        for (var y = 50; y <= height; y += s * 4) {
          ellipse (x, y, 40, 40)
          fill(y / 2, x / 2, y * 3)
        }
    }
    //blue circles
    for (var x = 20; x <= width; x += s * 2) {
        for (var y = 50; y <= height; y += s * 4) {
          ellipse(x - 5, y - 5, 10, 20)
        }
    }
    for (var x = 20; x <= width; x += s * 2) {
        for (var y = 50; y <= height; y += s * 4) {
          ellipse(x + 5, y - 5, 10, 20)
        }
    }
    //inner  circles creating curves of 'potions'
    for (var x = 20; x <= width; x += s * 2) {
        for (var y = 50; y <= height; y += s * 4) {
          ellipse(x - 5, y - 5, 5, 10)
        }
    }
    for (var x = 20; x <= width; x += s * 2) {
        for (var y = 50; y <= height; y += s * 4) {
          ellipse(x + 5, y - 5, 5, 10)
        }
    }
    for (var x = 20; x <= width; x += s * 2) {
        for (var y = 50; y <= height; y += s * 4) {
          ellipse(x, y + 10, 15, 10)
        }
    }
    //shelves
    for (var i = 0; i <= width / 20; i += width / 20 * 2) {
        for (var l = 0; l <= height; l += 40 * 2) {
            rect(i, l - 15, width, 20)
            fill(101, 67, 33)
            strokeWeight(0)
        }
    }
    //bubbles
    for (var x = 4; x <= width; x += s * 2) {
        for (var y = 20; y <= height -100; y += s * 4) {
          ellipse (x, y, 5, 5)
          fill(225)
          strokeWeight(0)
        }
    }
    for (var x = -2; x <= width; x += s * 2) {
        for (var y = 15; y <= height -100; y += s * 4) {
          ellipse (x, y, 4, 4)
          fill(225)
          strokeWeight(0)
        }
    }
    for (var x = 0; x <= width; x += s * 2) {
        for (var y = 25; y <= height - 50; y += s * 4) {
          ellipse (x, y, 6, 6)
          fill(225)
          strokeWeight(0)
        }
    }





}

I was playing around with patterns and realized I had created a potion looking form by layering circles. I decided to add a background and bubbles coming up from the potions as well as potion racks to finish off the pattern

Jasmine Lee – Project 05 – Wallpaper

sky

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project 5 (Sky)

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

    //dark-blue background
    background(17, 35, 94);

    //short star trail
    for(var a = 0; a < 701; a += 100){
        for(var b = 0; b < 701; b += 100){
            noStroke();
            fill(255, 255, 255);
            ellipse(a, b, 3, 3);
            ellipse(a + 4, b + 4, 1, 1);
        }   
    }

    for(var c = 25; c < 701; c += 100){
        for(var d = 25; d < 701; d += 100){

            //long star trail
            fill(255, 255, 255);
            ellipse(c, d, 3, 3);
            ellipse(c + 20, d + 10, 2, 2);
            ellipse(c + 25, d + 15, 1, 1);
            ellipse(c + 30, d + 15, 1, 1);
            ellipse(c + 10, d + 20, 1, 1);
            ellipse(c + 5, d + 10, 2, 2);


            //ufo ship glass
            fill(255, 255, 255, 100);
            ellipse(c + 15, d + 20, 30, 30);
            fill(208, 255, 161, 200);
            //ufo ship beam
            triangle(c + 15, d + 22, c + 5, d + 70, c + 25, d + 70)
            fill(161, 222, 255);
            //ufo ship body
            ellipse(c + 15, d + 22, 40, 15);

            //alien
            fill (122, 39, 163);
            ellipse(c + 15, d + 20, 12, 17);
            ellipse(c + 10, d + 10, 4, 4);
            ellipse(c + 20, d + 10, 4, 4);
            fill (0);
            ellipse(c + 12, d + 17, 3, 3);
            ellipse(c + 17, d + 17, 3, 3);

            //ufo ship lights
            fill(245, 205, 73);
            ellipse(c, d + 23, 5, 5);
            ellipse(c + 10, d + 25, 5, 5);
            ellipse(c + 20, d + 25, 5, 5);
            ellipse(c + 30, d + 23, 5, 5);

            //small cloud
            fill(255, 255, 255, 50);
            ellipse(c + 30, d, 20, 10);
            ellipse(c + 35, d, 20, 15);
            ellipse(c + 40, d, 20, 10);

            //big cloud
            fill(255, 255, 255, 120);
            ellipse(c + 10, d + 40, 40, 15);
            ellipse(c + 15, d + 35, 30, 20);
            ellipse(c + 20, d + 40, 40, 15);
        }
    }


}

For my wallpaper, I was inspired by classic children’s designs. I decided to create a alien-themed wallpaper and the starry sky. With this project, I enjoyed playing around with the transparency of the elements in order to depict the clouds. In my sketch, I arranged how I wanted my elements to appear before actually coding it.

A sketch, on grid paper, of the repeating pattern of ellipses.

Crystal-Xue-Project-05

sketch-379.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-05

var vA = 10; //vertical coordinate change of shorter edge
var hA = 17.32;//horizontal coordinate change of the shorter edge = √3 * vA
var vB = 40; //vertical coordinate change of the longer edge
var hB = 69.28;//vertical coordinate change of the longer edge = √3 * vB

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

function draw() {
    background(0);
    noStroke();
    scale(0.7);

    for (var x = 0; x < 600 ; x +=  hB + 2 * hA) {
        for (var y = 0; y < 1200 ; y += 2 * vB + 4 * vA) {
            if (x % (2 * (hB + 2 * hA)) == 0) {

                push();
                translate(-85, 0);
                fill(200);

                //top side
                beginShape();
                vertex(x, y); //pt1
                vertex(hA + x, -vA + y);//pt2
                vertex(hA + hB + x, vB - vA + y);//pt3
                vertex(hA + 2 * hB + x, -vA + y);//pt4
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //left side
                beginShape();
                fill(120);
                vertex(x, y);//pt1
                vertex(x, 2 * vA + y);//pt7
                vertex(hB + x, 2 * vA + vB + y);//pt8
                vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                // right side
                beginShape();
                fill(50);
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
                vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
                vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);
                pop();

            }
            else {

                push();
                translate(-85, -vB - 2 * vA);

                //top side
                fill(200);
                beginShape();
                vertex(x, y); //pt1
                vertex(hA + x, -vA + y);//pt2
                vertex(hA + hB + x, vB - vA + y);//pt3
                vertex(hA + 2 * hB + x, -vA + y);//pt4
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //left side
                beginShape();
                fill(120);
                vertex(x, y);//pt1
                vertex(x, 2 * vA + y);//pt7
                vertex(hB + x, 2 * vA + vB + y);//pt8
                vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //right side
                beginShape();
                fill(50);
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
                vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
                vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);
                pop();
            }

        }

    }




}

diagram

Using trigonometry of 30-degree triangles, I dissected this single unit piece into two sizes of triangles. I nested the units with each other and created this interlocking pattern.

Rachel Shin – Project 05 – Wallpaper


reshin-project05

/*Rachel Shin
	reshin@andrew.cmu.edu
	15-104 Section B
	Project 05- Wallpaper
*/

var spacing;

function setup(){
    createCanvas(400, 400);
    background(235, 234, 223);
    spacing = 50;
}


function draw(){
    for (var y = 0; y < height - (spacing/2); y += spacing/2) { //dotted background, adjusted to fit entire circle, avoid cut offs
    	for (var x = 0; x < width-(spacing/2); x += spacing/2){
    		noStroke();
    		fill(255);
    		ellipse(x+(spacing/2), y+(spacing/2), spacing/5, spacing/5);
    	}
    }

    for (var y = 0; y < height; y += spacing){ //burgundy rounded rectangles
    	for (var x = 0; x < width; x += spacing) {
    		stroke(112, 107, 105);
    		noFill();
    		square (x + (spacing/5), y + (spacing/5), spacing/3, 2);
    	}
    }

    for (var y = 0; y < height; y += spacing) { //sky blue trapezoids across canvas
        for (var x = 0; x < width; x += 70) {
        	noStroke();
        	fill(167, 200, 212);
            quad(x + (spacing/5), y + (spacing/5), x + spacing, y + spacing, x + spacing, y + (spacing+10), x + (spacing/5), y + spacing);
        }}

        noLoop();
}

Brainstorm/Initial Sketch

While thinking of ways to code and design this project, I decided to layer various geometric shapes to create a cohesive visual of repeated patterns of circles, trapezoids, and rounded rectangles. I found it interesting how I was able to recreate this sketch by figuring out how layers of shapes interacted to create this pattern.