Category: Project-05-Wallpaper

Jessica Medenbach WallPaper

Wanted to create something that reminded me of 1960’s wallpaper in terms of color and style. wallpaper

function setup() {
    createCanvas(650, 400);
    background(255,255,185);
    var tw = 60;
    var th = 60;
    var oy = 50;
    var ox = 50;
    var rowCount = 0;

    rowCount++;

    for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 10; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
            
     if (y*rowCount%2==0){
        fill(64,209,151);
     	ellipse (px,py,20,20);
        fill(255,255,0);
        ellipse (px-10,py-10,10,10);
        ellipse (px-15,py,10,10);
        ellipse (px+15,py,10,10);
        ellipse (px+10,py+10,10,10);
     }

     else {
        fill(255);
     	ellipse(px, py, 20, 20);

        }

}
}


    

    noLoop();
}






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

Wallpaper

I liked the overlapping shapes and the contrast between the colors and the types of shapes used.

 

indexsketch

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//wallpaper



function setup() {
    createCanvas(640, 400);
   
}
function draw (){

    for (var x=10; x<width; x+=10) {//creates the overlapping shapes
        for (var y=10; y < height; y+=100) {
            wallpaper(x,y)
        }
    }
    
}

function wallpaper (x,y) {
	fill (134, 185, 50)
    ellipse (x, y, 50,50)
    fill (200,200,255)
    rect (x, y, x+5, x+5, 50,50)

}

Project-05-Wallpaper

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Project-05-Wallpaper

function setup() {
    createCanvas(640,480);  
    noLoop();

}

function draw(){
	background(147,238,255);
//create loops for wallpaper
	for (var x = 100; x < width - 50; x = x + 100) {
		for (var y = 100; y < height - 50; y = y + 100) {
			Wallpaper(x,y);
		}
	}
}

function Wallpaper(x,y) {
//create center pink ellipse
    fill(255,187,245);
    ellipse(x,y,25,25);
//create top green triangle
    fill(0,255,126);
    triangle(x-30,y-25,x,y-50,x+30,y-25);
//create maroon side ellipses
    fill(196,41,158);
    ellipse(x + 50,y,25,25);
    ellipse(x - 50,y,25,25);
//create diagonal ellipses going above the green triangle
    fill(0,100,255); //creates blue color
    ellipse(x-40,y-25,10,10);
    fill(0,100,255); 
    ellipse(x+40,y-25,10,10);
    fill(220); //creates gray color
    ellipse(x-35,y-40,5,5);
    ellipse(x+35,y-40,5,5);
    fill(0);
    ellipse(x-38,y-50,2,2);
    ellipse(x+38,y-50,2,2);

    
}

I found this to be a very fun project. I had originally intended to create something more intricate, but I really enjoyed the simplicity of the picture that I sketched below, and so decided to create it instead. I also used the color-experimenting tool that the Week 1 notes linked to and found that I liked how these colors worked together.

img_6070

Charlie Mo-project 5-wallpaper

sketch

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

}

function draw() {
background(51,0,17);

var xOG = 0;
var yOG = 0;
var xBetween = 105;
var yBetween = 90;
var offset = xBetween/2;

for (var y = 0; y < 9; y++){

  if(y==2||y==4||y==6||y==8){ //offsets every other two lines up
   yOG=yOG-35;
 		}	
	if (y%2==0){
		for (var x = 0; x < 7; x++){
			var py = yOG + y * yBetween;
			var px = xOG + x * xBetween;

			hexagon(px,py);//call hexagon function
		}
	}
	if (y%2==1){ //offsets every other line to the to the right
		for (var x = 0; x < 9; x++){
			var py = yOG + y * yBetween;
			var px = xOG + x * xBetween+offset;
			hexagon(px,py);
		}
  	}
}
var rxOG=-61.7;
var ryOG=70;
var rxBetween=35;
var ryBetween=145;
for (var ry = 0; ry<5; ry++){//draws a series of orange rectangles that covers parts of the hexagon 
	
	for(var rx = 0; rx<20; rx++){
		var ty = ryOG + ry * ryBetween;
		var tx = rxOG + rx * rxBetween;
		noStroke();
		fill(206,105,16);
		

		if(rx%3==0){
			rect(tx,ty,0,0);
		}
		else{
			rect(tx,ty,17.7,45);

		}

	}
}
var rrxOG=-8.9;
var rryOG=60;
var rrxBetween=105;
var rryBetween=145;
for (var rry = 0; rry<5; rry++){//draws a series of dark maroon rectangles that also covers part of the hexagon
	for(var rrx = 0; rrx<10; rrx++){
		var tty = rryOG + rry * rryBetween;
		var ttx = rrxOG + rrx * rrxBetween;
		
		fill(51,0,17);
		rect(ttx,tty,17.7,68);
	}

}	
}

function hexagon(x,y){ //hexagon function


var r = 30*PI/180;
push();
translate(x,y);
rotate(r);
noStroke();
fill(51,0,17);
polygon(0,0,70,6);//call polygon function
fill(206,105,16);
polygon(0,0,50,6);
fill(51,0,17);
polygon(0,0,30,6);
fill(135,17,58);
polygon(0,0,15,6);
pop();

}


function polygon(x, y, radius, sides) {//can produce polygons with various numbers of sides and various sizes
  var angle = TWO_PI / sides;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I was inspired by the imagery of the floor pattern in the movie, “The Shining,” and wanted to recreate it. I learned a lot and this project helped me to reinforce my knowledge of loops.

 

zhuoyinl- project05 wallpaper

wallpaper.js

//Zhuoying Lin
//section a 
//zhuoyinl@andrew.cmu.edu
//project

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


function draw() {
    background(240);

    //monster
    var mx = random(-50,100);//origin x
    var my = random(30,100);//origin y
    var sy = 200;//y spacing
    var sx = 200;//x spacing
    for (var y = 0; y<7; y++) {
        if (y%2==0) {
            for (var x = 0; x<5; x++) {
                monster(mx+x*sx, my+y* (sy*sqrt(3)/2));
            }
        } else {
            for (var x = 0; x<5; x++) {
                monster(mx+sx/2+x*sx, my+y* (sy*sqrt(3)/2));
            }
        }
    }
    noLoop();

    //duck
    var dx = random(0,50);//origin x
    var dy = random(30,50);//origin y
    var sy = 150;//y spacing
    var sx = 250;//x spacing
    for (var y = 0; y<7; y++) {
        if (y%2==0) {
            for (var x = 0; x<5; x++) {
                duck(dx+sx/2+x*sx, dy+y* (sy*sqrt(3)/2));
            }
        } else {
            for (var x = 0; x<5; x++) {
                duck(dx+x*sx, dy+y* (sy*sqrt(3)/2));
            }
        }
    }
    noLoop();

}

function monster(mx, my) {//draw monster
    push();
    translate(mx, my);
    stroke(137,78,115);
    strokeWeight(5);
    line(25, -25, 25, 0);//ear1
    line(45, -25, 35, 0);//ear2
    line(30, 30, 85, 40);//tail
    stroke(244,179,220);
    strokeWeight(30);
    line(10, 0, 50, 0);//monster head
    strokeWeight(5);
    line(35, 40, 35, 60);//foot1
    line(45, 40, 45, 60);//foot2
    line(55, 40, 55, 60);//foot3
    line(65, 40, 65, 60);//foot4
    strokeWeight(50);
    line(50, 10, 50, 30);//monster body
    fill(255);
    noStroke();
    ellipse(22, 0, 15, 15);//left eye
    ellipse(42, 0, 15, 15);//right eye
    fill(0);
    noStroke();
    ellipse(20, 0, 5, 5);//eyeball1
    ellipse(40, 0, 5, 5);//eyeball2
    pop();
}

function duck(dx, dy) {//draw duck
    push();
    translate(dx, dy);
    stroke(255, 183, 0);
    strokeWeight(5);
    line(-15, 60, -15, 85);//foot1
    line(-5, 60, -5, 85);//foot2
    stroke(154, 231, 217);
    strokeWeight(40);
    line(0, 0, 0, 30);//neck
    strokeWeight(40);
    line(-30, 40, 0, 40);//body
    strokeWeight(10);
    line(-55, 40, -30, 40);//tail
    stroke(255, 183, 0);
    strokeWeight(7);
    line(10, 7, 25, 7);//mouse
    line(10, 14, 25, 14);//mouse
    fill(255);
    noStroke();
    ellipse(0, 0, 10, 10);//eye
    fill(0);
    noStroke();
    ellipse(1, 0, 5, 5);



    pop();
}

For this wallpaper, I used ‘random’ command to generate a little bit different patterns each time it is opened, and I tried to make the grid hexagon to add some interest to the grid.

sketch

Project-05

I was inspired by Lilly Pulitzer’s famous prints for this project.  I spent a few hours looking through her prints and identifying the key aspects in them.  They all have a beach theme, use bright colors, and are relatively simple in the patterns.  To create the code, I made functions for each of the different elements and then called them within a for loop in the draw function.  The only exception was the wave function which I called in the setup so that it would act more like a background than an element in the foreground.

Preliminary Sketch:

img_7438

sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-05

   var spacing = 100;


function setup() {
    createCanvas(800,600);
    background(150,225,249);
    wave(0,100);
    wave(0,300);
    wave(0,450);
}

function draw() {
for (var i = 0; i<=8; i++){
	star(i+ i*spacing+50,190);
	palmTree(i+ i*spacing-50,40);
	star(i+ i*spacing+50,490);
	beachBall(i + i*spacing+10,360);
}
}


function palmTree(x,y){
	push();
	translate(x,y);
	fill(250,9,162);
	stroke(135,0,36);
	strokeWeight(0);
	rect(x,y,25,80);
	fill(229,77,174);
	strokeWeight(12);
	line(x,y-12,x-20,y-16); //first half of lower left palmleaf
	line(x-20,y-16,x-45,y); //second half of lower left palmleaf
	line(x+25,y-12,x+45,y-16); //first half of lower right palmleaf
	line(x+45,y-16,x+70,y); //second half of lower right palmleaf
	strokeWeight(0);
	ellipse(x+17,y-8,20,20); //leftmost coconut
	ellipse(x+25,y+8,20,20); //lowermost coconut
	ellipse(x+30,y-5,20,20); //rightmost coconut
	strokeWeight(12);
	line(x,y-32,x-20,y-36); //first half of upper left palmleaf
	line(x-20,y-36,x-45,y-25); //second half of upper left palmleaf
	line(x+25,y-32,x+45,y-36); //first half of upper right palmleaf
	line(x+45,y-36,x+70,y-25); //second half of upper right palmleaf
	pop();
}

function star(x,y){
	push();
	strokeWeight(0);
    fill("Yellow");
    ellipse(x,y,20,50);   //x = 150, y = 100

    push();
    translate(x+10,y);
    rotate(45);
    fill("Yellow");
    ellipse(20,0,20,50);
    pop();

    push();
    translate(x+20,y+40);
    rotate(15);
    fill("Yellow");
    ellipse(0,0,20,50);
    pop();

    push();
    translate(x,y+43);
    rotate(0);
    fill("Yellow");
    ellipse(0,0,20,50);
    pop();

    push();
    translate(x-30,y+33);
    rotate(225);
    fill("Yellow");
    ellipse(20,0,20,50);
    pop();

    push();
    translate(x-12,y+35);
    rotate(180);
    fill("Yellow");
    ellipse(0,0,20,50);
    pop();
    pop();
}

function beachBall(x,y){
	fill(253,55,85);
	noStroke();
    ellipse(x,y,60,60);
}

function wave(x,y){
    for (var x = 0; x < width; x = x + 1) {
        stroke(11,11,249);
        strokeWeight(5);
        point(x, y - 50 * sin(radians(x)));
        stroke(8,70,117);
        strokeWeight(5);
        point(x, y - 50 * cos(radians(x)));
    }
}

 

Liu Xiangqi-Project-05

sketch

// Liu Xiangqi xiangqil@andrew.cmu.edu Section A Project-05

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


function draw() {
    var y = 0;
    var x = 0;
    for (y = 0; y + 50 < height - 50; y += 100){
        for (x = 0; x + 50 < width - 50; x += 100){
            //draw the roses
            fill(255);
            ellipse(50+x, 50+y, 10, 10);
            stroke(255, 77, 77);
            strokeWeight(6);
            noFill();
            for(var i = 1; i < 11; i ++){
                if (i%4 == 1) {
                    arc(50+x, 50+y, 4*i + 12.5, 4*i + 12.5, 0, HALF_PI);
                }else if (i%4 == 2) {
                    arc(50+x, 50+y, 4*i + 20, 4*i + 20, HALF_PI, PI);
                }else if (i%4 == 3) {
                    arc(50+x, 50+y, 4*i + 27.5, 4*i + 27.5, PI, PI+HALF_PI);
                }else{
                    noFill();
                    arc(57+x, 45+y, 4*i + 5, 4*i + 5, PI+HALF_PI, TWO_PI+QUARTER_PI);
                }
            }
            //draw the leaves
            fill(204, 255, 153);
            noStroke();
            beginShape();
            vertex(50+x, 80+y);
            curveVertex(50+x, 80+y);
            curveVertex(80+x, 100+y);
            curveVertex(90+x, 120+y);
            curveVertex(80+x, 110+y);
            curveVertex(50+x, 80+y);
            vertex(50+x, 80+y);
            endShape();
        }
    }
    
}

mreyes-project 05-wallpaper

project-05.js


//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-03


// back pattern variables 
var cH1 = 40; // larger circle height 
var cW1 = 20; // larger circle width
var cX = 0; // circles x cordinate 
var cY = 0; // circles y cordinate 

var cH2 = cH1/2; // smaller circle height
var cW2 = cW1/2; // smaller circle height

var spaceingX = cW1*2; // pattern spacing 
var spaceingY = cH1; // pattern spacing 

// front pattern variables 

function setup() {
  createCanvas(700, 700);
  background(255, 204, 204); 
}

function draw() {  
// back pattern loop
for (var x = 0; x < height; x += 1){
        for (var y = 0; y < width ; y += 1){
         
            backPattern(x,y);

        }
    }
//front pattern loop 
for (var x = 0; x < height; x += 1){
        for (var y = 0; y < width ; y += 1){

            frontPattern(x,y);
            
            //ghosty effect 
            push()
            translate(5,10)
            frontPattern(x,y);
            pop()

        }
    }
noLoop()//draw once
}


function backPattern(x,y){ // circle patern

    cX = x * spaceingX; // x spacing between circles
    cY = y * spaceingY; // y spacing between circles

    //outer circle 
    strokeWeight(3);
    stroke(255, 128, 128);
    fill(255, 204, 204);
    ellipse(cX,cY,cW1,cH1);

    // inner circle 
    fill(255, 128, 128);
    ellipse(cX,cY,cW2,cH2);

noLoop();
}

function frontPattern(x,y){
    spaceingX = 200
    spaceingY = 200

    x = x * spaceingX // x spacing between triangles 
    y = y * spaceingY // y spacing between 

  
    noStroke()

    //larger tiangle 
    fill(128, 191, 255)  
    triangle(60+x, 160+y, 60+x, 40+y, 160+x, 80+y);

    //smaller triangles
    push()
    translate(10,20)
    fill(255,200)
    triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
    translate(10,20)
    fill(255,200)
    triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
    pop()

noLoop()// draw once 
}

Inspired by my old shower curtain, I wanted to combine two patterns that had two separate own there own but, together would create a harmonious rhythm. I was hoping more interesting things would happen with layering the transparent blue over the pink, but the patterns just kinda got confusing so I ended up having the blue triangles solid.

img_4903

Looks pretty close to the sketch honestly (minus the rat).

rnayyar puppy wallpaper

sketch

//Rhea Nayyar
//rnayyar@andrew.cmu.edu
//Section C
//Project 05-C; Wall Paper





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

function draw() {
    background(204, 157, 204);
    for (var y = 0; y < height+20; y += 80) {
        for (var x = 0; x < width; x += 205) {
            fill('SaddleBrown'); //Longer Rows of Paw Prints
            ellipse(x+20, y, 10, 15); //Toe 1
            ellipse(x+30, y-13, 10, 15); //Toe 2
            ellipse(x+45, y-15, 10, 15); //Toe 3
            ellipse(x+55, y, 10, 15); //Toe 4
            ellipse(x+30,y+17,20,20); //Pad part 1
            ellipse(x+45,y+17,20,20); //Pad part 2
            ellipse(x+38,y+12,30,15); //Pad part 3 (connects two pads with oval)
    }

 }

 for (var y = 50; y < height-20; y += 100) {
        for (var x = 65; x < width; x += 205) {
            fill('SaddleBrown'); //Shorter Rows of Paw Prints
            ellipse(x+20, y, 10, 15);
            ellipse(x+30, y-15, 10, 15);
            ellipse(x+45, y-13, 10, 15);
            ellipse(x+55, y, 10, 15);
            ellipse(x+30,y+17,20,20);
            ellipse(x+45,y+17,20,20);
            ellipse(x+38,y+12,30,15);
           
    }

 }
 for (var y = 20; y < height+45; y += 85) {
        for (var x = 65; x < width; x += 205) { //Dog bones
             push();
            rotate(radians(2));
            fill('PapayaWhip');
            rect(x+95,y-5,45,10);
            ellipse(x+90,y-4,15,15);
            ellipse(x+91,y+6,15,15);
            ellipse(x+140,y-4,15,15);
            ellipse(x+141,y+6,15,15);
            pop();
            
            
}
}
    noLoop(); 
}

I love dogs and I miss mine dearly. I find their paw prints to be incredibly precious <3
I made a nifty graphic to commemorate the canine existence!

Project-05-Lydia Jin

sketch

//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
// Project 5
var flag = false;
function setup() {
    createCanvas(600, 600); //setup canvas
    background('black');
}

function draw() {
    for (var y = 50; y<=550; y+=100){ 
    //iterate loop for rows until hits botton
        if (flag == false){ 
    //use a boolean to alternate between two sets of shape
            for (var x = 0; x<522; x+=30){ //iterate set A for columns
                if (x==0){ 
            //draw a PAC MAN at each beginning of the iteration
                    fill('yellow');
                    noStroke();
                    arc(50, y, 50, 50, QUARTER_PI*0.7, -QUARTER_PI*0.7);
                }
                noStroke();                
                fill(random(255), random(255),random(255)); //random color of the dots
                ellipse(x+80, y, 8); //draw the PAC-dots

            }
            flag = true; 
            //change the state of boolean
        }
        else{
            for (var x = 600; x>78; x-=30){ 
            //to iterate the another set of shape
                if (x==600){ 
                //draw a PAC MAN at each beginning of the iteration
                    fill('yellow');
                    noStroke();
                    arc(550, y, 50, 50, PI + QUARTER_PI*0.7, PI -QUARTER_PI*0.7);
                }
                noStroke();
                fill(random(255), random(255),random(255)); //random color of the dots
                ellipse(x-80, y, 8); //draw the PAC-dots
            }
            flag=false; 
            //change the state of boolean
        }
    }   
    noLoop();//Stop all loops, make static wallpaper

}

At first, I wanted random PAC MANs to appear in every row. But later on I decided to make it look more dynamic by putting in the beads along with the Pac Man to make the wallpaper more colorful. This would be a cool wall paper for a kid’s bedroom. 🙂
317037023