Category: Project-05-Wallpaper

Project – 05 – wallpaper

drippyDownload
var size = 60
function setup() {
    createCanvas(420, 470);
    background(220);
    
}

function draw() {
	background (255, 143, 233);
	for (var y = size/2 ; y < height + size/2 ; y += size *2){
		for (var x = size/2; x< width + size / 2 ; x += size *2){
			//stripes
			noStroke();
			fill(93, 146, 245, 30);
            rect(x + 45, 0, width/14, height);
			noStroke();
			//face
			fill(245, 237, 93);
			circle(x, y, size);
			//drips
			ellipse(x, y + size/2, 10, 40);
			circle(x, y + size/2 + 18, 12);
			ellipse(x - size/2 + 8, y + size/2 - 8, 10, 30);
			circle(x - size/2 + 8, y + size/2 + 2, 12);
			ellipse(x + size/2 - 7, y + size/2 - 4, 8, 30);
			circle(x + size/2 - 7, y + size/2 + 6, 10);
			//eyes
			stroke(0);
			line(x-15, y - 15, x-5, y - 5);
			line (x - 15, y - 5, x -5, y - 15);
			line(x+15, y - 15, x+5, y - 5);
			line (x + 15, y - 5, x + 5, y - 15);
			//lightning bolt
			noStroke();
			fill(255, 156, 253);
			quad (x + 50, y + 45, x + 75, y + 45, x + 65, y + 65,
			 x + 45, y + 65);
			quad(x + 65, y + 65,  x + 45, y + 65, x + 60, y + 80,
				x + 75, y + 80);
			triangle(x + 60, y + 80, x + 75, y + 80, x + 55, y + 110)
			//mouth
			if (x == y){
				noFill();
				stroke(0);
				arc(x, y + 20, size/2, size/2, PI, 2*PI); // frown
				fill(93, 146, 245);
				noStroke();
				circle(x - 15, y+3, 5);
				triangle(x - 17.5, y +3, x - 12.5, y+ 3, x - 15, y - 5)
				//text
			    textSize(15);
			    stroke(245, 237, 93);
			    fill(93, 146, 245);
		        text("drippy", x - 20, y + size + 10);

			}else{
				noFill();
				stroke(0);
				arc(x, y, size / 2, size /2, .1*PI, .9 * PI); // smile
			}
		}
	}
	noLoop();
}

I based this design off a doodle that i have been drawing for a while and decided to play with gradients, shapes, and texts to create a textile fabric pattern that I would love to wear.

Project 5 – Wallpaper

The famous Coca-Cola bottle and its mascot, the polar bear, were my inspiration for this wallpaper. I first digitally sketched a Coca-Cola bottle to use as a template, as shown at the bottom, and then, I added some polar bears as decoration.

sketch
/* Michelle Kim
 * michell4
 * Section B
 */

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

function draw() {
    background(255, 244, 196);
    //cola
    for(var x = 75; x < width; x += 200) {
        for(var y = 50; y < height; y += 220) {
            push();
            translate(x, y);
            cola();
            pop();
        }
    }
    //polar bear
    for(var a = -40; a < width; a += 200) {
        for(var b = 20; b < height; b += 220) {
            push();
            translate(a, b);
            bear();
            pop();
        }
    }
}

function cola() {
    push();
    scale(0.5);
    //bottle
    fill(193, 252, 255);
    noStroke();
    rect(0, 0, 40, 70);
    quad(40, 65, 0, 65, -12, 95, 52, 95);
    ellipse(20, 130, 75, 125);
    quad(-13, 160, 53, 160, 40, 190, 0, 190);
    quad(45, 190, -5, 190, -18, 225, 58, 225);
    arc(20, 280, 95, 200, radians(170), radians(10), CHORD);
    noFill();
    stroke(223, 248, 255);
    strokeWeight(12);
    arc(-7, 58, 25, 50, 0, radians(60));
    arc(47, 58, 25, 50, radians(120), radians(180));
    arc(-15, 185, 23, 75, radians(283), radians(80));
    arc(55, 185, 23, 75, radians(100), radians(256));
    arc(20, 287, 82, 15, 0, radians(180));
    //soda
    fill(68, 32, 10);
    noStroke();
    arc(20, 90, 40, 200, radians(340), radians(200), CHORD);
    arc(11, 125, 40, 100, radians(80), radians(255));
    arc(29, 125, 40, 100, radians(285), radians(100));
    rect(0, 165, 40, 50);
    arc(20, 278, 75, 178, radians(170), radians(10), CHORD);
    arc(20, 284, 74, 21, 0, radians(180));
    noFill();
    stroke(68, 32, 10);
    strokeWeight(12);
    arc(-7, 183, 23, 80, radians(290), radians(80));
    arc(47, 183, 23, 80, radians(100), radians(250));
    //cap
    fill(170, 0, 0);
    noStroke();
    rect(0, 0, 40, 16);
    circle(1, 8, 15);
    circle(39, 8, 15);
    //label
    rect(-15, 110, 70, 40);
    noFill();
    stroke(170, 0, 0);
    strokeWeight(5);
    arc(-11, 130, 8, 55, radians(100), radians(260));
    arc(51, 130, 8, 55, radians(280), radians(80));
    //bubbles
    fill(200);
    noStroke();
    circle(23, 95, 10);
    circle(33, 100, 5);
    circle(37, 91, 7);
    circle(10, 160, 5);
    circle(25, 168, 8);
    circle(12, 180, 13);
    circle(27, 183, 5);
    circle(0, 270, 5);
    circle(-7, 280, 10);
    circle(40, 260, 15);
    circle(25, 270, 7);
    circle(45, 275, 5);
    pop();
}

function bear() {
    push();
    //polar bear ears
    fill(255);
    noStroke();
    circle(5, -12, 20);
    circle(45, -12, 20);
    fill(220);
    circle(5, -12, 10);
    circle(45, -12, 10);
    //polar bear body
    fill(255);
    rect(0, 0, 50, 70);
    arc(25, 0, 50, 40, radians(180), 0);
    circle(-5, 45, 15);
    circle(45, 46, 50);
    circle(70, 45, 15);
    noFill();
    stroke(255);
    strokeWeight(5);
    arc(60, 10, 25, 35, radians(110), radians(190));
    line(3, 0, 1, 40);
    fill(255);
    arc(52, 45, 46, 50, radians(0), radians(120));
    arc(5, 45, 30, 50, radians(60), radians(175));
    ellipse(28, 65, 25, 10);
    //polar bear outlines
    fill(220);
    noStroke();
    circle(63, 47, 4);
    circle(70, 47, 4);
    circle(72, 53, 4);
    circle(62, 58, 12);
    noFill();
    stroke(220);
    strokeWeight(2);
    arc(-7, 46, 10, 50, radians(300), radians(80));
    arc(1, 65, 10, 15, radians(130), radians(190));
    arc(13, 46, 10, 50, radians(300), radians(80));
    arc(21, 65, 10, 15, radians(130), radians(190));
    arc(38, 46, 10, 50, radians(300), radians(80));
    arc(46, 65, 10, 15, radians(130), radians(190));
    arc(67, 52, 30, 30,radians(205), radians(272));
    //polar bear face
    fill(220);
    noStroke();
    circle(25, 10, 18);
    fill(0);
    circle(13, 0, 6);
    circle(37, 0, 6);
    ellipse(25, 7, 7, 5);
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(23, 10, 4, 8, 0, radians(130));
    arc(27, 10, 4, 8, radians(50), radians(180));
    pop();
}

Project-05-Wallpaper

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

function draw() {

    	

        
    
    //big pumpkins
    for(var s = 100; s < height-90; s +=400){
    	for(var d = 100; d < width-80; d+=400){
            pumpkin1(d, s);
        
        }
    }

    for(var s = 300; s < height-90; s +=400){
    	for(var d = 300; d < width-80; d+=400){

            pumpkin1(d, s);
        
        }
    }
     //little pumpkins
     for(var m = 300; m < height-90; m +=400){
     	for(var j = 100; j < width-80; j+=400){

       pumpkin2(j, m);
       
        }

    }

    for(var m = 100; m < height-90; m +=400){
     	for(var j = 300; j < width-80; j+=400){

       pumpkin2(j, m);
       
        }

    }
	       

    //star
    for(var s = 100; s < height+50; s +=200){
    	for(var d = 0; d < width+50; d+=200){
            star1(d, s);
        
        }
    }

    //star
    for(var s = 0; s < height+50; s +=200){
    	for(var d = 100; d < width+50; d+=200){
            star2(d, s);
        
        }
    }

}

    
//big pumpkin
	function pumpkin1(x,y) {

        
           
           push();
           translate(x,y);
           rotate(radians(20));
           noStroke();
           //strokeWeight(1.5);

           //stroke(0, 100, 20);
           fill(0, 198, 51);
           rect(-5, -35, 10, 13);

           //stroke(176, 45, 36);
           fill(241, 90, 41);

           ellipse(25, 3, 40, 60);
           ellipse(-25, 3, 40, 60);
           ellipse(13, 3, 40, 62);
           ellipse(-13, 3, 40, 62);
           ellipse(0, 3, 40, 64);

           fill(247, 148, 29);
           triangle(-20, -5, -4, -2, -12, -16);
           triangle(20, -5, 4, -2, 12, -16);
           triangle(-6, 8, 6, 8, 0, -2);

           arc(1, 11.5, 55, 29, radians(0), radians(180), CHORD);

           fill(241, 90, 41);
           
           rect(9, 10, 8, 5.5);
           noStroke();
           rect(8, 7, 9.9, 4);


           
	       pop();
	              

}

//little pumpkin
	function pumpkin2(x,y) {

        
           
           push();
           translate(x,y);
           rotate(radians(-20));
           noStroke();
           //strokeWeight(1.5);

           //stroke(0, 100, 20);
           fill(0, 198, 51);
           rect(-5, -20, 10, 13);

           //stroke(176, 45, 36);
           fill(241, 90, 41);

           ellipse(20, 5, 30, 40);
           ellipse(-20, 5, 30, 40);
           ellipse(10, 5, 30, 40);
           ellipse(-10, 5, 30, 40);
           ellipse(0, 5, 30, 40);

           fill(247, 148, 29);
           ellipse(-10, 2, 10, 10);
           ellipse(10, 2, 10, 10);
           rect(-2, 2, 4, 4);

           arc(0, 10, 20, 15, radians(0), radians(180), CHORD);

           fill(241, 90, 41);
           
           rect(3, 8.2, 4, 4);
           noStroke();
           rect(2, 7.2, 6, 2.1);


           
	       pop();
	              

}

//big star

function star1(x, y) {


	 push();
           translate(x,y);
           strokeWeight(1.5);
           rotate(radians(-20));

           fill(255, 251, 202);

           beginShape();
           vertex(-16, -3.5);
           vertex(-5, -5);
           vertex(0,-16);
           vertex(5, -5);
           vertex(16, -3.5);
           vertex(8, 4);
           vertex(10, 16);
           vertex(0, 10);
           vertex(-10, 16);
           vertex(-8, 4);
           endShape(CLOSE);
	       pop();


}

//small star

function star2(x, y) {


	 push();
           translate(x,y);
           strokeWeight(1.5);
           rotate(radians(20));

           fill(255, 251, 202);

           beginShape();
           vertex(-8, -1.75);
           vertex(-2.5, -2.5);
           vertex(0,-8);
           vertex(2.5, -2.5);
           vertex(8, -1.75);
           vertex(4, 2);
           vertex(5, 8);
           vertex(0, 5);
           vertex(-5, 8);
           vertex(-4, 2);
           endShape(CLOSE);
	       pop();


}

Project 05- Wallpaper

I created a wallpaper with illustrations of birds, rainbows, and clouds. Recently, I saw two parrots outside my window (it was odd because I live in the middle of an urban city). I was worried they might not survive the cold weather, but they flew away as my family opened the window to bring them in. I wanted to create visuals of the scene I saw that day in my wallpaper.

sketch
//Stefanie Suk
//15-104 Section D

var positionbx = 10;     //starting position x for blue bird
var positionby = 10;     //starting position y for blue bird
var offsetbx = 120;      //spacing x for blue bird
var offsetby = 140;      //spacing y for blue bird

var positionyx = 75;     //starting position x for yellow bird
var positionyy = 75;     //starting position y for yellow bird
var offsetyx = 120;      //spacing x for yellow bird
var offsetyy = 140;      //spacing y for yellow bird

var positionrx = 10;     //starting position x for rainbow
var positionry = 95;     //starting position y for rainbow
var offsetrx = 120;      //spacing x for rainbow
var offsetry = 140;      //spacing y for rainbow

var positioncx = 70;     //starting position x for cloud
var positioncy = 20;     //starting position y for cloud
var offsetcx = 120;      //spacing x for cloud
var offsetcy = 140;      //spacing y for cloud

var positiondx = 0;     //starting position x for dots
var positiondy = 0;     //starting position y for dots
var offsetdx = 20;      //spacing x for dots
var offsetdy = 20;      //spacing y for dots


function setup() {
    createCanvas(500, 600);
    background(195, 213, 195);
    noLoop();
}

function draw() {

	for(var a=0; a<50; a++){                                                        //column of grid
    	for(var b = 0; b<50; b++){                                                  //row of grid                                    
    		push();
    		translate(positiondx + offsetdx*b, positiondy + offsetdy*a);                                                            //scale down 
    		dots();
    		pop();
    	}
	}

	// blue bird grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positionbx + offsetbx*b, positionby + offsetby*a);
    		scale(0.5);                                                            //scale down 
    		bluebird();
    		pop();
    	}
	}

	// yellow bird grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positionyx + offsetyx*b, positionyy + offsetyy*a);
    		scale(0.4);														       //scale down
    		yellowbird();
    		pop();
    	}
	}

	//rainbow grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positionrx + offsetrx*b, positionry + offsetry*a);
    		scale(0.5);                                                            //scale down
    		rainbow();
    		pop();
    	}
	}

	//cloud grid
	for(var a=0; a<5; a++){                                                        //column of grid
    	for(var b = 0; b<5; b++){                                                  //row of grid                                    
    		push();
    		translate(positioncx + offsetcx*b, positioncy + offsetcy*a);
    		cloud();
    		pop();
    	}
	}
}

function bluebird() {
	//body 
	noStroke();
	fill(178, 232, 245);
	ellipse(0, 0, 50, 50);     //head
	ellipse(0, 40, 60, 80);
	fill(178, 232, 245);       //body
	push()
	rotate(radians(30));
	ellipse(48, 30, 10, 60)    //tail

	// white section of head
	fill(250);
	rotate(radians(220));
	arc(0, 0, 45, 45, 0, QUARTER_PI);
	pop();

	//beak
	fill(187, 201, 205);
	ellipse(4, 0, 10, 10);           //right grey circle
	ellipse(-4, 0, 10, 10);          //left grey circle
	fill(157, 170, 173);
	triangle(-6, 2, 6, 2, 0, 18);    //dark grey beak

	//eye
	fill(10);
	ellipse(10, -2, 7, 7);           //right eye
	ellipse(-10, -2, 7, 7);          //left eye

	//wings
	fill(132, 163, 170);
	ellipse(20, 40, 15, 40);         //right dark blue wing
	ellipse(-20, 40, 15, 40);        //left dark blue wing
}

function yellowbird() {
	//body 
	noStroke();
	fill(245, 242, 125);
	ellipse(0, 0, 50, 50);     //head
	ellipse(0, 40, 60, 80);
	fill(245, 242, 125);       //body
	push()
	rotate(radians(30));
	ellipse(48, 30, 10, 60)    //tail

	// orange section of head
	fill(255, 176, 117);
	rotate(radians(220));
	arc(0, 0, 45, 45, 0, QUARTER_PI);
	pop();

	//beak
	fill(212, 208, 150);
	ellipse(4, 0, 10, 10);           //right greyish yellow circle
	ellipse(-4, 0, 10, 10);          //left greyish yellow circle
	fill(151, 150, 131);
	triangle(-6, 2, 6, 2, 0, 18);    //dark greyish yellow beak

	//eye
	fill(10);
	ellipse(10, -2, 7, 7);           //right eye
	ellipse(-10, -2, 7, 7);          //left eye

	//wings
	fill(160, 212, 150);
	ellipse(20, 40, 15, 40);         //right green wing
	ellipse(-20, 40, 15, 40);        //left green wing
}

function rainbow() {
	push();
	noStroke();
	fill(255, 92, 92);
	rotate(radians(158));
	arc(0, 0, 35, 35, 0, PI+QUARTER_PI, OPEN);     //red layer
	fill(255, 156, 92);                            
	arc(0, 0, 30, 30, 0, PI+QUARTER_PI, OPEN);     //orange layer
	fill(255, 245, 92);                          
	arc(0, 0, 25, 25, 0, PI+QUARTER_PI, OPEN);     //yellow layer
	fill(160, 240, 125);                           
	arc(0, 0, 20, 20, 0, PI+QUARTER_PI, OPEN);     //green layer
	fill(125, 193, 240);                           
	arc(0, 0, 15, 15, 0, PI+QUARTER_PI, OPEN);     //blue layer
	fill(175, 125, 240);                           
	arc(0, 0, 10, 10, 0, PI+QUARTER_PI, OPEN);     //purple layer
	pop();
}

function cloud() {
	noStroke();
	fill(255);
	ellipse(0, 0, 20, 20);
	ellipse(-10, 5, 15, 15);
	ellipse(12, 4, 17, 17);
	ellipse(22, 5, 10, 10);  //white ellipses left to right
}

function dots() {
	noStroke();
	fill(255, 255, 255, 6);
	ellipse(0, 0, 5, 5);   //dots for background
}
Picture of the parrots I saw

Project 5 – Wallpaper

sketch
var f = 10;
var l = 80;
var x = 0;
var y = 0;

function setup(){
	createCanvas(600, 553);
	background(232, 225, 197);
	angleMode(DEGREES);
}

function draw(){
	for(var i = 0; i <= 12; i += 1){
		x = 60*i;
		if(i % 2 == 0){
			y = 35;
		} else {
			y = 0;
		}
		for(; y <= 600; y += 69){
			push();
			translate(x, y);
			vine();
			flower();
			leaf1();
			leaf2();
			pop();
		}
	}
}
function vine(){
	noFill();
	stroke(132, 217, 143);
	strokeWeight(2);
	arc(-l/2, 0, l, 36, 0, 60);
	arc(l/2, 0, l, 35, 180, 240);
}

function leaf1(){
	noStroke();
	fill(153, 219, 190);
	arc(0, 0, l, l, 180, 240, CHORD);
	arc(((-3 * l)/2), 0, l, l, 0, 61, CHORD);
}

function leaf2(){
	angleMode(DEGREES);
	noStroke();
	fill(173, 219, 169);
	arc(0, 0, l, l, 60, 120, CHORD);
	arc(0, 0, l, l, 240, 300, CHORD);

}

function flower(){
	noStroke();

	fill(230, 145, 172);														//petals round
	circle(f, 0, f);
	circle((f/2), ((-f * sqrt(3))/2), f);
	circle((-f/2), ((-f * sqrt(3))/2), f);
	circle(-f, 0, f);
	circle((-f/2), ((f * sqrt(3))/2), f);
	circle((f/2), ((f * sqrt(3))/2), f);

	triangle(0, 0, f, 0, (f/2), ((-f * sqrt(3))/2));							//petals fill
	triangle(0, 0, f, 0, (f/2), ((f * sqrt(3))/2));
	triangle(0, 0, (f/2), ((f * sqrt(3))/2), (-f/2), ((f * sqrt(3))/2));
	triangle(0, 0, (-f/2), ((f * sqrt(3))/2), -f, 0);
	triangle(0, 0, -f, 0, (-f/2), ((-f * sqrt(3))/2));
	triangle(0, 0, (-f/2), ((-f * sqrt(3))/2), (f/2), ((-f * sqrt(3))/2));

	fill(247, 219, 0);															//pollen
	circle(0, 0, f);
}

I based the draw code off of the hexagon assignment since most of the initial wallpaper designs I had sketched had either hexagonal or octagonal bases. Although I had wanted to do a different(but similar!) wallpaper design, trying to get certain shapes to rotate and land in the correct placement stumped me. I fully intend on trying to fulfill my original design at a later date, but I’m happy with what I’ve done for now. Images of my notes from this project below.

PROJECT-05 (wallpaper)

sketch
// SEAN CHEN
// 15-104 A

function setup() {
    smooth();
    createCanvas(600, 1000);
    background(255,194,130);
}

function poka(scale) { // background pokadots
    for (var i = 0; i < scale/2; i++){ // array columns
        noFill();
        var w =  width / scale;
        var h = height / scale;
        push();
        translate(i*(2*w), 0);
        for (var j = 0; j < scale+1; j++){ // drawing a column
            push();
            var r = random(0.4, 0.6); // giving the ellipse rand sizes
            translate (0, j*h); // vert column of random ellipse
            ellipse (w/2, h/2, r*w, r*h);
            translate (w, h/2-h) // shifted vert column of rand ellipse
            ellipse (w/2, h/2, r*w, r*h);
            pop();
        }
        pop();
    }
}


function leaf() { // drawing a little leaf (mint color)
    stroke(88,216,169);
    strokeWeight(5);
    line(-10, 0, 10, 0);
    line(-5, -5*sqrt(3)/2, 5, 5*sqrt(3)/2);
    line(-5, 5*sqrt(3)/2, 5, -5*sqrt(3)/2);
}

// drawing a small branch from a certain x,y
// (same as stem func)
function miniStem(x, y) { 
    noStroke();
    fill(94,59,24)
    for (var i = 0; i < 25; i++) {
        rectMode(CENTER);
        square(x, y+i, 5);
        if (i == 20) { // right before the end of the branch
            push();
            translate(x, y+i); // move leaf to that coordinate
            leaf(); // draw leaf
            pop();
        }
        x += random(-5, 5);
    }
}

function stem(maxH) {
    noStroke();
    fill(94,59,24)
    var x = 50 // center pt for each tile
    for (var i = 0; i < maxH; i++) {
        if (i < maxH-25) { // before getting to last 25 "pixels"
            rectMode(CENTER); // square using center
            square(x, i, 5); // drawing sqaure at x, i which is shifting down
            x += random(-3, 3); // aggregate the branches left and right
        } else {
            square(x, i, 5); // drawing squre
            var diff = x-50; // difference from center
            x += -1*(diff/15); // shifting x back to center for seamless
        }
        var y = i; // for ministem
        if (i%50 == 0) { // every 50 "pixels" downward add a small branch
            miniStem(x, y);
        }
    }
}

function draw() {
    poka(50); // add pokadot bg
    for (var i = -2; i < 9; i++) { // tiling of the branches
        push();
        translate (100*i, 0);
        for (var j = -2; j < 9; j++) {
            push();
            translate (0, 200*j);
            stem(200);
            pop();
        }
        pop();
    }
    noLoop();
}

Project-05

sketch
//Shaun Murray, Section B

var x = 100
var y = 100

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

function draw() {
    background(0, 200, 255);

    //cloud set 1
    for (x = -40; x <= width - 95; x += 190) {
    	for (y = -35; y <= height - 100; y += 75){
    		cloud(x, y);
    	}

        noLoop();
    }
	
	//cloud set 2
	for (x = 50; x <= width - 95; x += 190) {
    	for (y = 8; y <= height - 100; y += 75){
    		cloud(x, y);
    	}

    	noLoop();
    }
    

}

function cloud(x, y) {
	push();
    translate(x, y);

    //cloud 
	noStroke();

	fill(255);
	ellipse(95, 83, 43, 43);
	fill(245);
	ellipse(97, 85, 40, 40);

	fill(255);
	ellipse(118, 88, 30, 30);
	fill(245);
	ellipse(120, 90, 27, 27);

	fill(255);
    ellipse(80, 91, 25, 23);
    fill(245);
    ellipse(83, 94, 23, 20);

	fill(255);
	ellipse(100, 100, 80, 10);
	fill(245);
    ellipse(105, 101, 75, 8);

    pop();
}

When I heard wallpaper, I thought of Andy’s room.

Project-05

sketch
//dmclaugh, Diana McLaughlin, Section A

var s = 60;
var x = 90;
var y;

function setup() {
    createCanvas(600, 600);
    background(52, 225, 235); //light blue
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //little background rectangles
	for(var y1 = 2; y1 <= height; y1 += 5) {
		for(var x1 = 2; x1 <= width; x1 += 5) {
		noStroke();
		fill(0, 0, 255);
        rect(x1, y1, 2, 2);
		}
	}
    //pattern
	for (y = 40; y <= height; y += 90){
		for (x = 30; x <= width; x += 90)
		pattern(x, y);
	}
    
}

function pattern(x, y){
	push();
	rectMode(CENTER);
	translate(x, y);
    stroke(255);
    strokeWeight(4);
    fill(random(0, 256), random(0, 256), random(0, 256));
    rect(0, 0, s, s); //background rectangle
    rotate(radians(45));
    rect(0, 0, s, s); //rotated rectangle
    fill(255);
    ellipse(0, 0, 5, 5); //white dots
    ellipse(0, 8, 5, 5);
    ellipse(0, -8, 5, 5);
    ellipse(8, 0, 5, 5);
    ellipse(-8, 0, 5, 5);
    pop();

    noLoop();
}

I made this wallpaper based off of something you might see on Animal Crossing patterns. I played around with which colors to use for the rectangles’ fill, and ended up selecting random colors because I liked how bright and colorful it was and thought it worked best with what I was looking for. I tried doing more subtle shades of blue and purple, but it seemed too dull for what I was looking for.

Project 5 – Wallpaper

For this project, I was feeling the spooky, Halloween theme so I decided to make some pumpkins. 🎃

sketchDownload
var s = 20;

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

function draw() {
    background(255, 174, 0);
    for (var row = 1; row < 15; row += 2){
        for (var col = 1; col < 20; col += 3){
            blackCircle(row * 40, col * 40);

        }
    }

    for (var row = 1; row < 8; row += 2){
        for (var col = 1; col < 8; col += 2){
            pumpkin(row * 70, col * 70);

        }
    }
}

//pumpkin
function pumpkin(x, y){
    push();
    translate(x,y);
    noStroke();
    fill(54, 102, 51);
    rect(10, -30, 15, 20);
    fill(255, 85, 0);
    ellipse(20, 20, 100, 80);
    fill(0);
    triangle(0, 10, 5, 0, 10, 10);
    triangle(30, 10, 35, 0, 40, 10);
    arc(20, 20, 70, 60, 0, PI);
    fill(255, 85, 0);
    rect(20, 20, 10, 10);
    pop();
}


//blackcircle
function blackCircle(x, y){
    push();
    translate(x, y);
    noStroke();
    fill(237, 230, 9);
    circle(0, 0, 30);
    fill(0);
    circle(0, 0, 10);
    pop();
}

Project 5: Wallpaper

For the wallpaper assignment I drew a pattern of corgi faces and dog treat bones. I was inspired by my puppy who would not let me sit down and do this homework assignment. I was not successful and sketching the faces myself so I used some images linked below as references.

sketch

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  noLoop();
}

function draw() {
    background(230, 188, 191);
    strokeWeight(0);
    
    //columns of 3 corgi faces
    for(x=50; x<300; x+=100){
        for(y=50; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 100);
        pop();
      }
    }
  
    //columns of 2 corgi faces
    for(x=100; x<300; x+=100) {
      for(y=100; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 70);
        pop();
      }
    }
  
    //columns of 2 dog bones
    for(x=50; x<300; x+=100) {
        for(y=100; y<300; y+=100) {
          push();
          translate(x,y);
          dogBone(x, y, 20);
          pop();
        }
    }
  
    //columns of 3 dog bones
    for(x=100; x<300; x+=100) {
        for(y=50; y<300; y+=100) {
          push();
          translate(x, y);
          dogBone(x, y, 20);
          pop();
        }
    }
}

function dogBone(x, y, size) {
    strokeWeight(0);
    fill(255);
    rect(x, y, size, size/2);
    circle(x-size/2, y+5, size/2);
    circle(x-size/2, y-5, size/2);
    circle(x+size/2, y+5, size/2);
    circle(x+size/2, y-5, size/2);
}


function corgiFace(x, y, size) {
    fill(245, 191, 120);
    //draws head shape
    ellipse(x, y, size, size+10);
    ellipse(x,y+10, size, size-10);
    //left and right ear, respectively
    triangle(x-size/2, y, x-size*4/7, y-size*5/7, x-size/7, y-size*3/7);
    triangle(x+size/2, y, x + size*4/7, y-size*5/7, x+size/7, y-size*3/7);

    fill(255);
    //inside of ear
    triangle(x-size/2, y - size*2/7, x-size/2, y-size*4.5/7, x-size*2/7, y-size*3/7);
    triangle(x+size/2, y - size*2/7, x+size/2, y-size*4.5/7, x+size*2/7, y-3*size/7);
    //face markings
    ellipse(x,y, size/7, size*3/7);
    ellipse(x, y + size*2/7, size*4/7, size*3/7);

    fill(0);
    //eyes
    circle(x - size*2/7, y, size/7);
    circle(x+size*2/7, y, size/7);
    //nose
    ellipse(x, y + size*15/70, size*2/7, size/7);
    //mouth
    arc(x, y+size*25/70, size/7, size/14, 2*PI, PI);
}

Image I referenced for creating the corgi face