Category: Project-05-Wallpaper

jamieh-project-05-wallpaper

I first started with picking the colour palette for the background triangles, then took inspiration from cherry blossom trees and its changes over time with blue representing winter and pink representing summer.

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 5
*/

var SIZE = 50;
var c1x = 0; 	//top L (TL) corner X
var c1y = 0;	//top L (TL) corner Y
var c2x = 50;	//top R (TR) corner X
var c2y = 0;	//top R (TR) corner Y
var c3x = 0;	//bottom L (BL) corner X
var c3y = 50;	//bottom L (BL) corner Y
var c4x = 50;	//bottom R (BR) corner X
var c4y = 50;	//bottom R (BR) corner Y
var ratio = 0.5;
var ratio2 = 2/3;
var snow = 5;
var petal = 6;

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

function draw() {
	
	for(var h = 0; h < width/SIZE; h++){
		for(var v = 0; v < height/SIZE; v++){
			r = map(h, 0, width/SIZE, 155, 255);
  			b = map(v, 0, height/SIZE, 155, 255);

  			fill(r, b, b);
  			strokeWeight(0.5);
  			if(h < 4){									//Left half
	  			if(v%2 == 0){							//odd rows
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
							 c2x+h*SIZE, c2y+v*SIZE,
							 c3x+h*SIZE, c3y+v*SIZE);	
					stroke(255);
					triangle(c2x+h*SIZE, c2y+v*SIZE,	//Right angle @ corner 4 (BR)
							 c3x+h*SIZE, c3y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);
					push();
					//branches
					stroke(0);
					strokeWeight(0.5);
					line(c4x+h*SIZE, c4y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c2x*ratio*ratio+h*SIZE, c2y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					//snow
					noStroke();
					fill(255);
					ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow, snow);
					ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow, snow);
					
					//snow pile
					bezier(c3x+h*SIZE, c3y+v*SIZE,
						   c1x+c2x*ratio2*ratio+h*SIZE, c4y-ratio*ratio*ratio+v*SIZE,
						   c1x+c2x*ratio*ratio+h*SIZE, c4y-c4y*ratio*ratio2+v*SIZE,
						   c4x+h*SIZE, c4y+v*SIZE);
					pop();	

				} else {
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 2 (TR)
							 c2x+h*SIZE, c2y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);	
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
							 c3x+h*SIZE, c3y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);

					push();
					//branches
					stroke(0);
					strokeWeight(0.5);
					line(c4x*ratio*ratio+h*SIZE, c4y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c2x+h*SIZE, c2y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

					//snow
					noStroke();
					fill(255);
					ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow, snow);
					ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					pop();
				}		


			} else {										//Right half
				if(v%2 != 0){								//odd rows						
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
								 c2x+h*SIZE, c2y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);	
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 4 (BR)
								 c3x+h*SIZE, c3y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);

						push();
						//branches
						stroke(0);
						strokeWeight(1);
						line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c3x+(c4x-c4x*ratio*ratio)+h*SIZE, c4y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

						//flower (EVEN)
						noStroke();
						fill(255, 102, 140);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
						//white centre
						fill(255);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);

						pop();

					} else {
						stroke(255);
						triangle(c3x+h*SIZE, c3y+v*SIZE,	//Right angle @ corner 2 (TR)
								 c2x+h*SIZE, c2y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);	
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
								 c3x+h*SIZE, c3y+v*SIZE,
								 c2x+h*SIZE, c2y+v*SIZE);

						push();
						//branches
						stroke(0);
						strokeWeight(1);						
						line(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c3x+h*SIZE, c3y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE)

					//flower
						noStroke();
						fill(255, 102, 140);
						//centre flower (ODD)
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
						//on line flower
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal, petal/ratio);
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal/ratio, petal);
						//edge line flower
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal, petal/ratio);
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal/ratio, petal);
						//white centre
						fill(255);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal*ratio, petal*ratio);
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal*ratio, petal*ratio);
						pop();
					}		
				}
			}
	}
}

One of my challenges was trying keeping track of my variables, especially for the x and y coordinates of the corners that help me generate each triangle/square. I also had difficulty trying to shorten the code, which I know I can create my own function and call it, but I couldn’t figure out how to make sure it wouldn’t confuse my corner variables.

Project 5 – Wallpaper

sketch

function setup() {
    createCanvas(480, 440);
    background(169,201,203);

    //First level of diamond
    var y0 = 0;
    var quaSize = sqrt(1.5)*width/8
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x0 = width/8;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (117,180,208);
            strokeWeight (3);
            noFill();    
            quad (x0, y0, x0-width/8, y0+quaSize, x0, y0+quaSize*2, x0+width/8, y0+quaSize);    
            x0 += width/4;
        }
        y0 += quaSize*2;  
    }

    //Secondary diamond
    var y1 = quaSize/3;
    var quaSize1 = quaSize/3*2;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x1 = 0;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (208,208,117);
            strokeWeight (5);
            noFill();    
            quad (x1, y1, x1-width/12, y1+quaSize1, x1, y1+quaSize1*2, x1+width/12, y1+quaSize1);    
            x1 += width/4;
        }
        y1 += quaSize*2;  
    }
    
    //Fourth level diamond
    var quaSize4 = quaSize/3*2;
    var y4 = 0 - quaSize4;
    for (var quaCol=0; quaCol<6; quaCol++) {
        var x4 = width/8;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (124,186,112);
            strokeWeight (3);
            quad (x4, y4, x4-width/12, y4+quaSize4, x4, y4+quaSize4*2, x4+width/12, y4+quaSize4);
            x4 += width/6 + width/12;
        }
        y4 += quaSize4*3;
    }

    //Thirdary diamond
    var quaSize2 = quaSize/3;
    var y2 = quaSize2*2;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x2 = width/12 + width/24;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (230,230,75);
            strokeWeight (3);
            quad (x2, y2, x2-width/24, y2+quaSize2, x2, y2+quaSize2*2, x2+width/24, y2+quaSize2);
            x2 += width/4;
        }
        y2 += quaSize*2;
    }
    var y3 = 0 - quaSize/3;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x3 = 0;
        for (var quaRow=0; quaRow<5; quaRow++) {
            strokeWeight (4);
            quad (x3, y3, x3-width/24, y3+quaSize2, x3, y3+quaSize2*2, x3+width/24, y3+quaSize2);
            x3 += width/4;
        }
        y3 += quaSize*2;
    }

    

    //Decorated dots
    //vertical ones
    var sizeC = width/64;
    var yC = quaSize - sizeC*2;
    for (var cCol=0; cCol<8; cCol++) {
        var xC = 0;
        for (var cRow=0; cRow<6; cRow++) {
        noStroke();
        fill (124,186,112);
        ellipse (xC, yC, sizeC);
        xC += width/4;
        }
        if (cCol % 2 == 0) {
            yC += sizeC*4;
        } else {
            yC += quaSize*2 - sizeC*4;
        }
    }

    //horizontal ones
    var yC1 = quaSize;
    for (var cCol=0; cCol<8; cCol++) {
        var xC1 = sizeC*2;
        for (var cRow=0; cRow<8; cRow++) {
            ellipse (xC1, yC1, sizeC);
            if (cRow % 2 == 0) {
                xC1 += width/4 - sizeC*4;
            } else {
                xC1 += sizeC*4;
            }
        }
        yC1 += quaSize*2;   
    }
    

    noLoop();
}

function draw() {
}

This wallpaper that I design has a vintage feel. I used yellow green and blue as the swatch. The geometries that I used are circles and diamonds, which are simple but timeless.

akluk-Project5-Section-A-Wallpaper

sketch
My art is inspired by a logo that i quite like and it was fun recreating it as a wallpaper. It was a challenge to create complex and organic/natural pattern using simply a double for loop and little hard coding for each one specific cell. Creating a if statement that was able to create a pattern with the colors was also interesting to think about.

//Alvin Luk
//Section A
//akluk@andrew.cmu.edu
//Assignment-05-B

var total; //variable that controls the number of circles at current row
var w = 90;
var sx = w/2;
var sy = w/2;

function setup() {
    createCanvas(450, 450);
    background(color(119,221,170));

    for (var y = 0; y < height/w; y++) {
        for (var x = 0; x < width/w; x++) {

            //determines color of the heart
            if ((y*5+x)%2 == 0){
                fill(color(255,20,20));
            }
            else if (x%2 == 1){
                fill(color(255,105,180));
            }
            else {
                fill(color(255,215,0));
            }
            noStroke();

            //draws heart outline
            ellipse(sx+x*w-10, sy+y*w-10,20,20);
            ellipse(sx+x*w+10, sy+y*w-10,20,20);
            triangle(sx+x*w-20,sy+y*w-7,sx+x*w+20,sy+y*w-7,sx+x*w,sy+y*w+18)

            //draws eye whites
            fill(255);
            ellipse(sx+x*w-9, sy+y*w-7,10,6);
            ellipse(sx+x*w+9, sy+y*w-7,10,6);

            //draws pupils
            fill(0);
            ellipse(sx+x*w-9, sy+y*w-7,5,6);
            ellipse(sx+x*w+9, sy+y*w-7,5,6);
        }
    }


    //draws line grid
    for (var i = 0; i < 4 ; i++){
        stroke(0);
        strokeWeight(2);
        line(w*(i+1)-3,0,w*(i+1)-3,height);
        line(w*(i+1)+3,0,w*(i+1)+3,height);
        line(0,w*(i+1)-3,width,w*(i+1)-3);
        line(0,w*(i+1)+3,width,w*(i+1)+3);
    }

    //draws purple loops around intersection
    for (var j = 0; j < 4 ; j++){
        for (var k = 0; k < 4; k++){
            noFill();
            stroke(106,90,205);
            strokeWeight(4);
            ellipse(w*(j+1),w*(k+1),20,20);
        }   
    }
    noLoop();
}


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

NatalieKS-Project-05

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-05

var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 480);
    background(102, 159, 166);
}

function draw() {

    for (var y = -460; y < height - 35; y += 140) {
        for (var x = -50; x < width - 50; x += 130) {
            leaf(x, y);
            push();
            fill(191, 158, 57);
            triangle(x + 5, y + 55, x + 18, y + 40, x + 30, y + 55);
            triangle(x + 5, y + 55, x + 18, y + 70, x + 30, y + 55);
            noFill();
            stroke(191, 158, 57);
            strokeWeight(2);
            triangle(x, y + 55, x + 18, y + 35, x + 35, y + 55);
            triangle(x, y + 55, x + 18, y + 75, x + 35, y + 55);
            pop();
        }
    }
    noLoop();

}

function leaf(x, y) {
    stroke(47, 87, 53);
    strokeWeight(1);
    fill(65, 121, 73);
// top leaf 1 - right
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 35, y + 403);
    curveVertex(x + 45, y + 408);
    curveVertex(x + 50, y + 420);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
//top leaf 1 - left
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 23, y + 406);
    curveVertex(x + 23, y + 409);
    curveVertex(x + 26, y + 420);
    curveVertex(x + 30, y + 425);
    curveVertex(x + 35, y + 428);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
// top leaf 2 - right
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 55, y + 391 - 8);
    curveVertex(x + 65, y + 396 - 8);
    curveVertex(x + 70, y + 408 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
//top leaf 2 - left
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 43, y + 394 - 8);
    curveVertex(x + 43, y + 397 - 8);
    curveVertex(x + 46, y + 408 - 8);
    curveVertex(x + 49, y + 413 - 8);
    curveVertex(x + 55, y + 416 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
// top leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 61 + 9, y + 391 - 29);
    curveVertex(x + 71 + 9, y + 396 - 29);
    curveVertex(x + 76 + 9, y + 408 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
//top leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 49 + 9, y + 394 - 29);
    curveVertex(x + 49 + 9, y + 397 - 29);
    curveVertex(x + 52 + 9, y + 408 - 29);
    curveVertex(x + 55 + 9, y + 413 - 29);
    curveVertex(x + 61 + 9, y + 416 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
// top leaf 4 - right
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 61 + 24, y + 391 - 52);
    curveVertex(x + 71 + 24, y + 396 - 52);
    curveVertex(x + 76 + 24, y + 408 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
//top leaf 4 - left
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 49 + 24, y + 394 - 52);
    curveVertex(x + 49 + 24, y + 397 - 52);
    curveVertex(x + 52 + 24, y + 408 - 52);
    curveVertex(x + 55 + 24, y + 413 - 52);
    curveVertex(x + 61 + 24, y + 416 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
// bottom leaf 1 - right
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 61 + 49, y + 391 - 25);
    curveVertex(x + 71 + 49, y + 396 - 25);
    curveVertex(x + 76 + 49, y + 408 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
//bottom leaf 1 - left
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 49 + 49, y + 394 - 25);
    curveVertex(x + 49 + 49, y + 397 - 25);
    curveVertex(x + 52 + 49, y + 408 - 25);
    curveVertex(x + 55 + 49, y + 413 - 25);
    curveVertex(x + 62 + 49, y + 416 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
// bottom leaf 2 - right
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 61 + 33, y + 391 - 1);
    curveVertex(x + 71 + 33, y + 396 - 1);
    curveVertex(x + 76 + 33, y + 408 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
//bottom leaf 2 - left
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 49 + 33, y + 394 - 1);
    curveVertex(x + 49 + 33, y + 397 - 1);
    curveVertex(x + 52 + 33, y + 408 - 1);
    curveVertex(x + 55 + 33, y + 413 - 1);
    curveVertex(x + 62 + 33, y + 416 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
// bottom leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 61 + 15, y + 391 + 18);
    curveVertex(x + 71 + 15, y + 396 + 18);
    curveVertex(x + 76 + 15, y + 408 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
//bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 49 + 15, y + 394 + 18);
    curveVertex(x + 49 + 15, y + 397 + 18);
    curveVertex(x + 52 + 15, y + 408 + 18);
    curveVertex(x + 55 + 15, y + 413 + 18);
    curveVertex(x + 62 + 15, y + 416 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
// bottom leaf 4 - right
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 61 - 2, y + 391 + 35);
    curveVertex(x + 71 - 2, y + 396 + 35);
    curveVertex(x + 76 - 2, y + 408 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    //bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 49 - 2, y + 394 + 35);
    curveVertex(x + 49 - 2, y + 397 + 35);
    curveVertex(x + 52 - 2, y + 408 + 35);
    curveVertex(x + 55 - 2, y + 413 + 35);
    curveVertex(x + 62 - 2, y + 416 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    fill(73, 135, 82);
    stroke(191, 158, 57);
    strokeWeight(1);
//center line for leaf
    push();
    noFill();
    stroke(47, 87, 53);
    strokeWeight(3);
    beginShape();
    curveVertex(x + 30, y + 310);
    curveVertex(x + 30, y + 435);
    curveVertex(x + 100, y + 360);
    curveVertex(x + 50, y + 360)
    endShape();
    pop();
}

I really wanted to do something with plant leaves and gold, and started at first to sketch out what I wanted. That ended up changing quite a lot, as I couldn’t for the life of me figure out how to write a loop that would loop the leaf shape rather than having to figure out the coordinates for each one individually. I asked multiple people for help, including a TA and some students in other CS courses, but none of us could really make it work. I wish I could’ve figured that out and implemented it for this project, because it would’ve saved a lot of time. Otherwise, figuring out how to loop the whole plant was relatively easy, since we had learned a version of how to do so in class.

The original ideas for my wallpaper. I wanted to do some sort of fern, and did a rough sketch of what that might look like.

 

 

Trying to figure out coordinates for the leaves. Figuring out the first leaf took most of my time, as I was pretty new to using curveVertex().

 

A friend (from another CS course) tried to help me figure out how to write a loop for the leaves by drawing it out on paper. In the end, we couldn’t figure it out.

amui1-Project-05-Wallpaper

amui1-p5

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-05


var x = 50;
var y = 50;


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

function draw() {
    background(187,0,0)
    stroke(234,247,206);
    strokeWeight(1);
    //flower design
    for (xPosition = 40; xPosition < width - 20; xPosition += 100) {
      //don't make lines through middle
      if (xPosition <= 150 || xPosition > 300) {
        line(xPosition,0,xPosition,height);
        var y = 20;
        //loops for height of canvas - 100 arbitrary number
        for (i = 0; i < 100; i++) {
          //checks if odd or even tick
          if (i%2==0) {
            fill(234,247,206);
            //flower shape
            ellipse(xPosition-10,y-10,5,5);
            arc(xPosition-10,y-10,5,15,PI,0);
            arc(xPosition-10,y-10,15,5,HALF_PI,3*HALF_PI);
            //flower stem
            line(xPosition,y,xPosition-10,y-10);
            y+= 30;
          } else {
            //flower stem
            line(xPosition,y-15,xPosition+10,y-25);
            //flower shape
            ellipse(xPosition+10,y-25,5,5);
            arc(xPosition+10,y-25,5,15,PI,0);
            arc(xPosition+10,y-25,15,5,3*HALF_PI,HALF_PI);
          }

        }
      }
    }

    //middle line

    line(width/2,0,width/2,height/2-75);
    line(width/2,height/2+75,width/2,height);
    //middle beads design
    //top half
    ellipse(width/2,50,10,10);
    ellipse(width/2,60,7,7);
    ellipse(width/2,67,5,5);
    //bottom half
    ellipse(width/2,height-67,5,5);
    ellipse(width/2,height-60,7,7);
    ellipse(width/2,height-50,10,10);


    //chinese oriental symbol
    noFill();
    stroke(218,0,0);
    strokeWeight(5);
    ellipse(width/2,height/2,125,125);
    ellipse(width/2,height/2,50,50);
    ellipse(width/2,height/2,20,20)


    //inside of middle symbol
    //rotate 8 times
    for (var i = 0; i <8; i++) {
      push();
      //move to center of canvas
      translate(width/2,height/2);
      //rotate 8 times
      rotate(TWO_PI * i/8);
      strokeWeight(2);
      //design
      line(30,28,35,33);
      line(35,33,40,28);
      line(40,28,30,18);
      line(30,18,20,30);
      line(20,30,35,42);
      line(35,42,55,15);
      line(55,15,35,12);
      line(35,12,33,15);
      line(33,15,44,23);
      pop();
    }

    noLoop();
}

Again, I really enjoyed this project and how challenging it was. Using loops is extremely efficient, however, I found it hard to conceptualize. For my project this week, I wanted to connect it with my culture. I am satisfied with my final product. However, originally, I wanted to draw a dragon. But, it was too hard to figure out curves, quadratic curves, bezier curves, etc. In the future, I’d like to expand upon that and how I can utilize loops to make it easier to draw. I started with sketching and as you can see see from my attached pictures, my wallpaper changed many times throughout the iterations.

Above is my original sketch.

Above is what I used to figure out and conceptualize how to do the for loops with the middle oriental symbol.

ctv-Project-05-Wallpaper

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-05

//canvas size
var cWid = 470;
var cHgt = 470;

//blockForm size
var wid = 50;
var hgt = 70;

//counter
var i = 0;

//some traits of circles and lines
var dia = wid;
var wght = 1;

//points shapes interact with
var xZero = 0;
var xOne = wid*.25;
var xTwo = wid*.5;
var xThree = wid*.75;
var xFour = wid;
var x = [xZero, xOne, xTwo, xThree, xFour];

var yZero = 0;
var yOne = hgt*.25;
var yTwo = hgt*.5;
var yThree = hgt*.75;
var yFour = hgt;
var y = [yZero, yOne, yTwo, yThree, yFour];


function setup() {
    createCanvas(cWid, cHgt);
    
    //splits canvas into cells for each pattern block
    //x-axis
    for(xOff=0; xOff<=cWid/wid; xOff++){
        
        //y-axis
        for(yOff=0; yOff<=cHgt/hgt*2; yOff++){
            
            //calls helper function bg(), sends coordinates
            draw(xOff, yOff);
        }
    }
}


function draw(xOff, yOff){

    ellipseMode(CENTER);
    stroke(200);
    strokeWeight(1);
    
    
    //
    for(i=0; i<xOff; i++) {
        for(j=0; j<yOff; j++){
            
            
    //creates an offset variable for the shapes        
    var xOffset =  i * xOne;
    var yOffset = j * yFour;
            
    strokeWeight(wght);
    
    //rightDownLines
    line(xOne + xOffset, yZero + yOffset, xFour + xOffset, yFour + yOffset);

    
    //leftDownLines
    line(xThree + xOffset, yZero + yOffset, xZero + xOffset, yFour + yOffset);

    //verticalLines
    line(xZero + xOffset*2, yZero + yOffset, xZero + xOffset*2, yFour + yOffset);

    
    //horizontalLines
    line(xZero + xOffset*4, yZero + yOffset/2, xFour + xOffset*4, yZero + yOffset/2);

    
    //ellipses
    noFill();
    ellipseMode(CENTER);
    ellipse(xZero + xOffset*4, yOne + yOffset+8, dia, dia);        
        }
    }
}

This project is based around the Modernist movement (minus color). I am interested in proportions of shape and axis of movement within a static structure. This grid is loosely based on a project I am starting to work on for designing a typeface. Type has four major components: horizontal strokes, vertical strokes, diagonal strokes, and curves. This grid is a dissociation of those elements.

Project 5, odh

odhP5

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 5

var Right = 0; //Declares the variable for how the series move horizontally 
var Down = 0;  //Declares the variable for how the series move vertically

function setup() {
    createCanvas(479, 479);
    background(150, 120, 200);
}
 
function draw() {
        translate(239, 239); //Moves the array of the series to be centes on the corner
        translate(-480, Down);
        translate(Right, 0);
        for (var y = 0; y < 500; y += 60) {     //Sets up the series of 
            for (var x = 0; x < 500; x += 60) { //intersecting lines
                strokeWeight(2);
                stroke(200, 255, 255);
                line(x, x, y + 80, y - 80);     //Creates the Series of intersecting lines
            };
        };
    Right = Right + 100;
    Down = Down - 100;
}

I chose to play with the criss-cross idea that often shows up on wallpapers. I am a fan of complex but organized patterns so I gave the lines a steroid injection while still keeping them in an array.

dnoh-sectionD-project5-wallpaper

sketch

function setup() {
  createCanvas(480, 480);
  background(220);
}

function draw() {
  for (x = 0; x <= 480;x += 120) {
    for (y = 0; y <= 480; y += 120) {
    //branches thicc
      stroke(105,72,31);
      strokeWeight(2);
      line(x+35,y+0,x+35,y+17);
      line(x+35,y+17,x+58,y+16);
      line(x+58,y+16,x+58,y+75);
      line(x+58,y+75,x+35,y+75);
      line(x+35,y+75,x+35,y+98);
      line(x+35,y+98,x+25,y+98);
      line(x+25,y+98,x+25,y+112);
      line(x+25,y+112,x+35,y+112);
      line(x+35,y+112,x+35,y+120);
      line(x+97,y+0,x+97,y+10);
      line(x+96,y+10,x+83,y+10);
      line(x+83,y+10,x+83,y+28);
      line(x+83,y+28,x+58,y+28);
      line(x+58,y+59,x+84,y+59);
      line(x+84,y+59,x+84,y+96);
      line(x+84,y+96,x+97,y+96);
      line(x+97,y+96,x+97,y+120);
    //branches thin left
      strokeWeight(1);
      line(x+0,y+68,x+13,y+68);
      line(x+13,y+68,x+13,y+78);
      line(x+13,y+78,x+27,y+78);
      line(x+27,y+78,x+27,y+67);
      line(x+27,y+67,x+31,y+67);
      line(x+31,y+67,x+31,y+54);
      line(x+31,y+54,x+58,y+54);
    //branches thin right
      line(x+97,y+10,x+107,y+10);
      line(x+107,y+10,x+107,y+60);
      line(x+107,y+60,x+100,y+60);
      line(x+100,y+60,x+100,y+67);
      line(x+100,y+67,x+120,y+67);
    //leaf top
      stroke(26,175,75);
      strokeWeight(2);
      line(x+7,y+0,x+5,y+2);
      line(x+5,y+2,x+21,y+1);
      line(x+21,y+1,x+22,y+0);
    //leaf 2nd to top
      line(x+35,y+16,x+37,y+26);
      line(x+37,y+26,x+26,y+37);
      line(x+26,y+37,x+25,y+22);
      line(x+25,y+22,x+35,y+16);
    //leaf 3rd to top
      line(x+83,y+28,x+83,y+35);
      line(x+83,y+35,x+101,y+42);
      line(x+101,y+42,x+95,y+28);
      line(x+95,y+28,x+83,y+28);
    //leaf 4th to top
      line(x+84,y+86,x+95,y+77);
      line(x+95,y+77,x+111,y+73);
      line(x+111,y+73,x+101,y+87);
      line(x+101,y+87,x+84,y+86);
    //leaf bottom
      line(x+7,y+120,x+19,y+109);
      line(x+19,y+109,x+25,y+112);
      line(x+25,y+112,x+22,y+120);
    //rose
      stroke(237,71,51);
      line(x+54,y+90,x+40,y+102);
      line(x+40,y+102,x+35,y+112);
      line(x+35,y+112,x+45,y+115);
      line(x+45,y+115,x+58,y+113);
      line(x+58,y+113,x+57,y+97);

      line(x+50,y+94,x+48,y+102);
      line(x+48,y+102,x+51,y+108);
      line(x+51,y+108,x+58,y+113);
      line(x+35,y+112,x+48,y+102);

      noStroke();
      fill(237,71,51);
      triangle(x+53,y+96,x+51,y+102,x+53,y+102);
      triangle(x+51,y+102,x+55,y+101,x+54,y+107);
    }
  }
}

I started with an idea to have geometric natural figures. I started with various sketches, but decided to go with the one posted above. All the branches connect to each other to create a cohesive wallpaper. The sketch was remade in illustrator so I could find the exact pixels/locations of the lines. All in all, this was a fairly tedious project because I had to simply create lines for everything, thus having to check the pixels for everything.

Project-05-Wallpaper-sjahania

sketch

function setup() {
    createCanvas(400, 400);
    background(100,180,180);

    var lineX = 20; // x coordinate of lines
    var arrowX = 15; // y coordinates of arrows and dots
    var arrowY = 20; // y coordinates of arrows and dots

    //outermost loop has the first set of alternating x values
    for (x1 = 0; x1 <= 400; x1 += 40) { 

    	//next loop has the second set of alternating x values
    	for (x2 = 20; x2 <= 400; x2 += 40){

    		//third loop has the y values that increase each iteration
    		for (y = 0; y <= 400; y += 15) {

    			//arrows(leaves)
    			//if statement skips every 4th arrow
    			if (y % 60 != 0) {

    				//make them green
    				stroke(0,120,0);
    				strokeWeight(1);

    				//makes left side of each arrow on the x1 lines
    				line(arrowX + x1, arrowY + y - 5, lineX + x1, arrowY +  y);

    				//makes right side of each arrow on the x1 lines
    				line(lineX + x1, arrowY + y, arrowX + x1 + 10, arrowY + y - 5);

    				//makes left side of each arrow on the x2 lines
    				line(arrowX + x2, arrowY + y - 5 + 30, lineX + x2, arrowY +  y + 30);

    				//makes right side of each arrow on the x2 lines
    				line(lineX + x2, arrowY + y + 30, arrowX + x2 + 10, arrowY + y - 5 + 30);      	
    			} 

    			//dots (flowers)
    			//if statement puts them at the top of each set of arrows
    			if (y % 60 == 0) {

    				//random colors
    				fill(random(0,255), 73, 113);

    				//random sizes
    				strokeWeight(random(5,10));

    				point(lineX + x1, y + 30);
    				point(lineX + x2, y);
    			}	

    			//lines (stems)
    			//make them green
    			stroke(0,120,0);
    			strokeWeight(1);

    			//x1 lines
    			line(lineX + x1, 0, lineX + x1, height);

    			//x2 lines
    			line(lineX + x2, 0, lineX + x2, height);
    		}
    	}
    }
    noLoop();
}

function draw() {
}

I had a lot of trouble with this because I liked a lot of different designs I found online, but could not picture how to put them in p5.js. In the end, I combined two designs I liked to make a relatively simple pattern that looks kind of like flowers.


This was my sketch. It was simple but still something I could challenge myself by trying to code.


I used this as inspiration for the flower “dots”. The image was titled “Dandelion,” so I thought about just using circle shapes for my flowers.


I used this as inspiration for the leaves. I actually started with the arrow design, and then decided they looked like leaves and added to them.

cchau1 – Project05 – Wallpaper

sketch


var w = 60; //adjusts the spacing between seeds
var h = 60; //adjusts vertical distance between seeds
var spaceY = 30; //y-circle offset
var spaceX = 30; //x-circle offset
var rad; //radius of circle component of "seed"
var wid; //width of rectangle component of "seed"
var x = 1;
var y = 1;
var columns;
var spacing = 10; //for the white lined grid-feature

function setup() {
    createCanvas(480, 480);
    background(255,174,185);

    for (var x = 0; x < height; x++) {
      strokeWeight(1.5)
      stroke(255);
      noFill();
      rect(x*spacing,x*spacing,width-50,height-150);
    } //this creates the white lines on the pink watermelon flesh
  //wanted to maintain the "square grid" feature in the corners of the
  //watermelon flesh so I subtracted from the canvas dimensions

    noStroke(); //colors of the rind
    fill(141,213,149);
    rect(0,height-100,width,height);
    fill(56,167,69);
    rect(0,height-60,width,height);
    fill(49,141,60);
    rect(0,height-40, width, height);


    var rowChange = 7;
    for (var row = 0; row < 6; row++) {
      if(row%2==0) {
        rad = 10;
        w = 420/7;
        spaceX = 60;
        wid = 5;
        columns = 7;
      } else{
        rad = 24;
        w = 60;
        spaceX = 30;
        columns = 8;
        wid = 12;
      }

//loop draw the "seeds" and depending on the row #, will alternate
      for (var col = 0; col < columns; col++){
        var py = spaceY + row * h;
        var px = spaceX + col * w;
        fill(52,54,52);
        rect(px,py,wid,wid);
        console.log(px, py);
        ellipse(px, py,rad);
      } //the combination of a square on top of an ellipse creates
        //the shape of a "seed"

    }

    noLoop();
}

function draw() {
}

I decided to go for a design that would be more like an entire motif rather than small objects. I had other ideas to do things such as leaves or flowers but after having Founder’s Day for CMU constantly surrounding me, I chose to go for something more quirky: a watermelon. I had some struggle creating the perfect seed “shape” but got a little more creative by overlaying the square on top of the ellipse (using math). I didn’t want to add too much detail since I was going for a more minimalist approach: seeds, rind, and for added “texture”, a loop of rectangles that also crossed to create an eye-catching “grid” design in the corners of the flesh (if you look closely at watermelon, you will see these little white veins).

honeydew version

cantaloupe