Project-05-Wallpaper – Page 2 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

haewanp – Project 05 – WallPaper

var x = 0;
var y = 0;

function setup() {
    createCanvas(480, 480);
    noStroke();
    rectMode(CENTER);
}

function draw() {
    background(240, 64, 66); //red background
    noLoop();
    pattern();
}

function pattern() {
    
    //blue circles
    for (x = 0; x <= width; x += 120) {
        for (y = 0; y <= height; y += 120) {
            fill(22, 68, 130);//blue
            ellipse(x - 60, y, 150, 150);
        }
    }
    
    //flower shape and green bar
    var i = 0;
    for (y = 30; y <= height + 30; y += 60) {
        i = i + 1;
        for (x = 60; x <= width + 60; x += 120) {
            if (i % 2 == 1) {
                
                //green bar
                fill(120, 200, 210);
                rect(x - 60, y - 30, 15, 50);
                
                //flower
                
                //yellow rectangle 
                fill(241, 235, 82);
                rect(x, y + 30, 70, 70);
                //white rectangle at the center of flower
                fill(255);
                rect(x, y + 30, 30, 30);
                //yellow petal of flower
                fill(241, 235, 82);
                arc(x + 17, y + 12, 50, 50, PI + QUARTER_PI, QUARTER_PI); //upper right
                arc(x - 17, y + 48, 50, 50, QUARTER_PI, PI + QUARTER_PI); //lower left
                arc(x + 17, y + 48, 50, 50, TWO_PI - QUARTER_PI, HALF_PI + QUARTER_PI); //lower right
                arc(x - 17, y + 12, 50, 50, HALF_PI + QUARTER_PI, TWO_PI - QUARTER_PI); //upper left
                //red circle at the center of flower
                fill(240, 64, 66); //red
                ellipse(x, y + 30, 20, 20);
                
            }   
        }     
    }
    
}

It is not too difficult and complex to code p5.js in this project. But, it is necessary to consider and organize compositions and color of graphic elements. It would be nicer and more interesting if this project is not confined in a static condition.

hannajan-05-Wallpaper

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 05

var space1=10; 
var space2=40; 
var space3=30; 
var area=80; 
var area2=5
var px; 
var py; 

function setup () {
	createCanvas(400, 400); 
	background(255, 201, 227);
	noStroke(); 
	}

function draw() {
for (var y=0; y<5; y++) {
		for (var x=0; x<5; x++) {
		
		//plate shadows
		px=space1+x*area;
		py=space1+y*area; 
		fill(102, 20, 79); 
		rect(px, py, space3*2+7, space3*2+7); 
		
		//plates  
		fill(255, 128, 159); 
		rect(px, py, space3*2, space3*2); 
		
		//egg white circle 1
		px=space3+x*space2*2;
		py=space3+y*space2*2; 
		fill(255); 
		ellipse(px, py, space3, space3); 
		
		//egg white circle 2
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(255); 
		ellipse(px, py, space2+3, space2+3); 
		
		//egg white circle 3
		px=space3+3+x*area;
		py=space3+3+y*area; 
		fill(255); 
		ellipse(px, py, space3+2, space3+2); 
		
		//yolk shadows 
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(203, 141, 15); 
		ellipse(px, py, 3+area2*4, 3+area2*4); 
		
		//yolk
		px=space2+3+x*area;
		py=space2+3+y*area; 
		fill(255, 181, 75); 
		ellipse(px, py, area2*4, area2*4); 
		
		//yolk shine 
		px=space2+x*area;
		py=space2+y*area; 
		fill(255); 
		ellipse(px, py, area2, area2); 
		
		}
	}
}

For this project, I wanted to make patterns with one of my favorite foods: eggs. I first sketched out a basic grid design I wanted to use as plates for the eggs (as seen in the image above). I was also inspired by the theme for this week’s Looking Outwards and wanted to give a 2-D image a more 3-D look. I did this using some simple shadows to also add a 3-D element and am quite happy with the repeated pattern overall.

Jonathan Perez Project 5

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Assignment-01
function setup() {
    createCanvas(480, 480);
    pixelDensity(3.0);
}

function draw() {
    background(51, 116, 173); //pale blue
    drawGrid(); //diagonal grid of black and white lines
    for(x = 120; x < width + 240; x += 240) { //spacing to fit within gridwork givin
        for(y = 0; y < height + 120; y += 120) {
        push();
            if((y+120)%240 == 0 ) {
                translate(-120, 0); //acounts for the alternating horizontal positions among rows
            }
        drawTile(x, y); // draws image in tile with givin x, y coordinates as center
        rectMode(CENTER);
        noStroke();
        rect(x-120, y, 20, 20); //black blocks between tiles
        pop();
        }
    }
    noLoop();
    
    
}

function drawGrid() {
    for(x = 0; x < width + 480; x+= 120) { //lines spaced 120 pixels apart horizontally
        if(x%240 == 0 || x == 0) {
            stroke(0); //black lines every other line
            } else {
            stroke(220); //whitish grey lines otherwise
            }
        line(x, 0, x-480, height); //positive 45 degree slope lines
        line(x-480, 0, x, height); //negative 45 degree slope lines
    }
}

function drawTile(x, y) {
    push();
    translate(x, y); //move center of tile
    fill(255);
    stroke(0);
    strokeWeight(1);
    for(j = 0; j < 4; j++){ //rotates long diamonds 90 degrees 4 times
        push();
        rotate(j*PI/2);
        fill(230);
        quad(-100, 0, -50, -12, 15, 0, -50, 12); //long horizontal diamond shape
        stroke(0);
        strokeWeight(1);
        line(-70, 0, -40, 0); //line detail on horizontal diamond
        pop();
    }


    strokeWeight(1.5);
    rectMode(CENTER);
    fill(179, 91, 141); //darker lilac purple
    rect(0, 0, 65, 65); //underlying square
    fill(175, 162, 208); // light lilac
    for(i = 0; i < 4; i++) {
        push();
        rotate(i*PI/2);
        translate(-25, 0);
        quad(-25, 0, 0, -20, 20, 0, 0, 20); //lefthand diamond
        pop();
    }
    // push();
    // translate(-25, 0);
    // quad(-25, 0, 0, -20, 20, 0, 0, 20); //lefthand diamond
    // pop();
    // push();
    // translate(25, 0);
    // quad(-20, 0, 0, -20, 25, 0, 0, 20); //righthand diamond
    // pop();
    // push();
    // translate(0, 25);
    // quad(-20, 0, 0, -20, 20, 0, 0, 25); //lower central diamond
    // pop();
    // push();
    // translate(0, -25);
    // quad(-20, 0, 0, -25, 20, 0, 0, 20); // upper central diamond
    // pop();
    fill(255, 220, 80); //pollen yellow
    quad(-25, 0, 0, -25, 25, 0, 0, 25); //central diamond
    pop();
    
}

The original inspiration for this paper was the old victorian floral wallpaper style… I tried to work in an organic subject and organic style with distinctly computer generated graphics (using geometric, sharp lines).

My first sketches were playing with overlapping diamond shapes, and feeling out what could be feasible to accomplish with my code.

As I started trying to implement these sketches and concepts into practice, I had to cut out some details I originally wanted to be a part of the wallpaper. The canvas I was working with was a 480×480 block, not a wall, and quickly became cluttered. So, my artistic direction for the project quickly adapted to a simpler aesthetic.

To be honest, the bulk of the work in this project for me was deciding what details to keep, and what to get rid of… I think I was moderately successful. I think this is a project I will return to, and see if I can keep it from being cluttered, but still improve the aesthetics of it. Currently, I think the color scheme and horizontal vs. diagonal lines are what carry the appeal of this wallpaper.

SaveSaveSaveSave

twrabetz-05-wallpaper

sketch

function setup() 
{
    createCanvas(480,480);
    background(50);
 
    var col;
    var size;

    for( var i = 0; i < 4; i++ )
    {
        for( var j = 0; j < 4; j++ )
        {
            col = color( random(25,75), random(25,75), random(25,75) );
            size = random( 18, 28 );
            drawSpiral( 55 + i * (width - 130) / 3, 70 + j * (height - 130) / 3,
                        0, size, col );
        }
    }

    noLoop();
}

function drawSpiral( xPos, yPos, angle, size, col )
{
    if( size < 7.5 ) return;

    push();
    translate( xPos, yPos );
    rotate( radians(angle - 90) );
    fill( col );
    rect( size * 4 / 3, 0, size, size );
    pop();
    drawSpiral( xPos, yPos, angle + 30, size * 0.935, 
                color( red(col) + 7.5, green(col) + 7.5, blue(col) + 7.5 ) );
}

The prompt asked for “a balance of geometric and organic forms” aka a clear request for shrimps made out of squares.
Note that the shrimps do not merely scale in size, but also have curly tails based on their size as should be expected of any quality shrimps.

heeseoc-Project05-Wallpaper

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-05

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

function draw() {
	grid();
	grid2();
	grid3();
	grid4();
}

function grid() {
	background(243,242,224);
	angleMode(DEGREES);
	rotate(45);

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			
			strokeWeight(7.5);
			stroke(250,176,91);
			fill(235,1,0);
			rect(x-15,y-15,150,150); //red rect w/ yellow str//
		}
	}
}

function grid2() {

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(81,56,49);
			fill(235,176,14);
			rect(x+90,y+250,100,100); //yellow rect w/ brown str//

			stroke(47,215,127);
			fill(95,115,0);
			rect(x+100,y+260,80,80); //olive rect w/ neon green str//

			stroke(229,129,7);
			fill(234,7,14);
			rect(x+110,y+270,60,60);

			stroke(47,215,127); //green flower petals//
			fill(95,115,0);
			ellipse(x+125,y+285,25,25);
			ellipse(x+125,y+315,25,25);
			ellipse(x+155,y+315,25,25);
			ellipse(x+155,y+285,25,25);

			strokeWeight(2); //red flower petals//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+126,y+300,20,20);
			ellipse(x+155,y+300,20,20);
			ellipse(x+140.5,y+314.5,20,20);
			ellipse(x+140.5,y+285.5,20,20); 

			stroke(81,56,49); //yellow center//
			fill(255,192,1);
			ellipse(x+140.5,y+300,20,20); 
		}
	}
}

function grid3() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			strokeWeight(5);
			stroke(255,100,8);
			fill(0,0,153);
			rect(x,y,120,120); //blue rect w/ orange str//

		}
	}
}

function grid4() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(0,0,153);
			fill(240,175,23);
			ellipse(x+60,y+220,100,100); //yellow cirlces within blue rect//

			stroke(68,220,135);
			fill(255,119,1);
			ellipse(x+60,y+220,80,80); //orange circles with neon green stroke//

			strokeWeight(2.5); //red petals within the orange circle//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+40,y+220,40,20);
			ellipse(x+80,y+220,40,20);
			ellipse(x+60,y+200,20,40);
			ellipse(x+60,y+240,20,40);

			strokeWeight(1.5); //green petals within the orange circle//
			stroke(243,242,224); 
			fill(95,115,0);
			ellipse(x+45,y+205,20,20);
			ellipse(x+45,y+235,20,20);
			ellipse(x+75,y+235,20,20);
			ellipse(x+75,y+205,20,20);

			strokeWeight(2.5); //orange center//
			stroke(255,195,112);
			fill(255,119,1);
			ellipse(x+60,y+220,35,35);
		}
	}
}

I was inspired by the traditional pattern of Korea. I simplified the pattern so that I would be able to execute it with coding, and adhered to the color scheme in the reference shown below. It has a lot of repetition and symmetrical shapes, which I thought was interesting to show through computation. Also, how these traditional patterns are meant to be crafted and drawn by hand but could also be digitally generated was another point of interest. I had to split my pattern into parts because it did not let me layer some shapes on top of other shapes even though I carefully controlled the order of my lines of codes.

Nayeon-Project05-WallPaper

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-05 (WallPaper)

function setup() {
    createCanvas(451, 600);
    background(255);
    noStroke();
}

function draw() {
  //background pattern
    for (var x = 0; x < width + 50; x += 50) {
      for (var y = 0; y < height + 50; y += 50) {
        fill(230, 130, 90, 100);
        ellipse(x, y, 100, 100);
      }
    }
  //white lines
    var x = 0;
    var y = 0;
    var len = height;
    var spacing = 50;

    for (var x = 25; x < width; x += spacing) {
  //white lines_thick line
      strokeWeight(8);
      stroke(255, 200);
      line(x, y, x, y + len);
  //white lines_thin lines
      strokeWeight(2);
      stroke(255, 180);
      line(x + 8, y, x + 8, y + len);
      line(x + 42, y, x + 42, y + len);
    }
  //flowers
    push();
    var px = 0;
    var py = 0;
    for (var px = 0; px < width; px += spacing) {
      for (var py = 0; py < height + 50; py += 50) {
      flower(px, py);
    pop();
    }
  }
    noLoop();
}
  //flower draw function
  function flower(px, py) {
    push();
    translate(px, py);
    noStroke();
    for (var i = 0; i < 6; i ++) {
      fill(250, 80, 60);
      ellipse(0, 0, 6, 15);
      rotate(PI/4)
      fill(255);
      ellipse(0, 0, 3, 3);
    }
  }

I got inspired by this wallpaper. It reminds me of grandparents house.

From this image, I tried to make something similar, but using loop function and shapes. It was fun to manipulate some var and loops to create different images. Changing small position creates whole other images.

jooheek-Project05-Wallpaper

sketch

function setup() {
    createCanvas(450, 450);
    ellipseMode(CENTER);
    angleMode(DEGREES);
}

function draw() {
	background(255, 227, 238);

	noStroke();

	//orange position variables
	var orangeX = 0;
	var orangeY = 50;

	//start of loops for oranges
	for (orangeY = 0; orangeY < 500; orangeY += 115) {
		for (orangeX = 0; orangeX < 500; orangeX += 115) {

			//shadow of oranges
			fill(191, 128, 153);
			ellipse(orangeX + 5, orangeY + 5, 70, 70);

			//if-else that makes orange slices at every even increment
			//and whole oranges at every odd increment
			if ((orangeX+1)%2 == 0) {

				//outer orange peel circle
				fill(249, 201, 65);
				ellipse(orangeX, orangeY, 70, 70);

				//inner lighter orange peel circle
				fill(249, 234, 175);
				ellipse(orangeX, orangeY, 60, 60);

				//inner orange slice sections
				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 7, 72);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 79, 144);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 151, 216);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 223, 288);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 295, 360);

			} else {

				//whole orange peel
				fill(249, 201, 65);
				ellipse(orangeX, orangeY, 70, 70);

				//orange shine circles
				fill(249, 225, 130);
				ellipse(orangeX + 23, orangeY - 10, 10, 10);

				fill(249, 225, 130);
				ellipse(orangeX + 15, orangeY - 20, 5, 5);

				//orange leaf
				fill(99, 187, 83);
				ellipse(orangeX - 10, orangeY - 35, 15, 8);
			}
		}
	}

//cherry variable positions set to be in middle of each orange increment
	var cherryX = 57;
	var cherryY = 57;

	//start of for loops for cherries
	//same increment but starts at the middle of orange increment
	for (cherryY = 57; cherryY < 500; cherryY += 115) {
		for (cherryX = 57; cherryX < 500; cherryX += 115) {
			//stem shadows
			stroke(211, 148, 173);
			strokeWeight(3);
			noFill();
			//right stem shadow
			arc(cherryX + 18, cherryY + 8, 60, 60, 180, 250);
			//left stem shadow
			arc(cherryX + 38, cherryY - 22, 70, 70, 123, 170);

			//stems
			//right stem
			stroke(99, 187, 83);
			arc(cherryX + 15, cherryY + 5, 60, 60, 180, 250);
			//left stem
			arc(cherryX + 35, cherryY - 25, 70, 70, 123, 170);

			//leaf shadow
			noStroke();
			fill(211, 148, 173);
			ellipse(cherryX + 13, cherryY - 18, 20, 10);
			//leaf
			fill(99, 187, 83);
			ellipse(cherryX + 10, cherryY - 21, 20, 10);

			//cherries
			//right cherry shadow
			fill(211, 148, 173);
			ellipse(cherryX + 18, cherryY + 18, 20, 20);
			//left cherry shadow
			fill(211, 148, 173);
			ellipse(cherryX -12, cherryY + 18, 20, 20);
			//right cherry
			fill(239, 58, 71);
			ellipse(cherryX + 15, cherryY + 15, 20, 20);
			//left cherry
			fill(239, 58, 71);
			ellipse(cherryX - 15, cherryY + 15, 20, 20);
			//left cherry shine
			fill(249, 125, 135);
			ellipse(cherryX + 18, cherryY + 10, 5, 5);
			//right cherry shine
			fill(249, 125, 135);
			ellipse(cherryX - 12, cherryY + 10, 5, 5);
		}
	}

}

I started by looking at inspiration from the Internet and found cute fruit wallpapers that I really liked, so I decided to do some kind of wallpaper with oranges. But, I realized that just oranges seemed too bland and wanted to add some other fruit that would compliment it, so I chose the cherry. I also wanted to have some kind of element alternate, so I made the whole orange and sliced orange alternate.

Sheenu-Project-05-Background

sketch

function setup() {
    createCanvas(480, 480);
    background("#F9CDAD");
}

function draw() {
	for(var x=0; x<=8; x++){
		for(var y=0; y<=8; y++){
		fill(255);
		noStroke();
		//GUIDE
		//rect(x*60,y*60,60,60);
		//GREEN Lines
		stroke("#83AF9B")
		strokeWeight(8);
		line(x*60,68+y*60,68+x*60,y*60);
		stroke("#C8C8A9")
		strokeWeight(4);
		line(x*60,68+y*60,68+x*60,y*60);
		//RED Lines
		
		stroke("#FE4365")
		strokeWeight(15);
		line(-8+x*60,-8+y*60,68+x*60,68+y*60);
		stroke("#FC9D9A")
		strokeWeight(8);
		line(-14+x*60,-14+y*60,74+x*60,74+y*60);
		


	}
	}
}

I really aimed to make this background look visually pleasing color-wise. I found a palette online I really liked and used it to color this striped background. I think it looks really nice and looks like a background for a bakery or a candy. I would totally wear a texture like this around school. I made the canvas 480×480 and divided it by 8 giving me 60, meaning that 64 60×60 squares will fill the whole entire canvas. I started with a draft rectangle and worked on the texture from there.

jwchou-project05-wallpaper

sketch 285

// Jackie Chou
// Section E
// jwchou@andrew.cmu.edu
// Project-05-Wallpaper

function setup() {
    createCanvas(480, 480);
    //background(161, 209, 255);
    background(164, 225, 219);

    var move;
    var r;
    var g;
    var b;
    var num;

    var cloudX = random(0, width); //random location of cloud 1
    var cloudY = random(0, height);

    var cloudX1 = random(0, width); //random location of cloud 2
    var cloudY1 = random(0, height);

    var cloudX2 = random(0, width); //random location of cloud 3
    var cloudY2 = random(0, height);

    var cloudX3 = random(0, width); //random location of cloud 4
    var cloudY3 = random(0, height);

    var cloudX4 = random(0, width); //random location of cloud 5
    var cloudY4 = random(0, height);

    var cloudX5 = random(0, width); //random location of cloud 6
    var cloudY5 = random(0, height);

    //cloud 1
    noStroke();
    fill(255, 255, 255, 80);
    ellipse(cloudX, cloudY, 70, 50);
    ellipse(cloudX + 15, cloudY - 10, 60, 40);
    ellipse(cloudX + 30, cloudY + 15, 40, 30);
    ellipse(cloudX + 35, cloudY, 50, 30)

    //cloud 2
    ellipse(cloudX1, cloudY1, 100, 70);
    ellipse(cloudX1 + 15, cloudY1 - 10, 70, 50);
    ellipse(cloudX1 + 30, cloudY1 + 15, 80, 50);
    ellipse(cloudX1 + 35, cloudY1, 50, 30)
 
    //cloud 3
    ellipse(cloudX2, cloudY2, 70, 50);
    ellipse(cloudX2 + 15, cloudY2 - 10, 50, 30);
    ellipse(cloudX2 + 30, cloudY2 + 15, 30, 10);
    ellipse(cloudX2 + 35, cloudY2, 40, 20)

    for(var y = 0; y < 6; y++) {
        if (y % 2 == 0) { //is row is even
            move = 45; //offset by 35
            r = 222; //pink
            g = 147;
            b = 142;
            num = 4; //have four planes

        } else {
            move = 0; //if row is odd, offset by zero
            r = 202; //purple
            g = 151;
            b = 222;
            num = 5; //have five plaes
        }
       
        for(var x = 0; x < num; x++) {
            xPos = x * 90 + move + 25; // x Position + offset
            yPos = y * 75 + 20; // y Position

            noStroke();
            fill(190);
            ellipse(xPos + 40, yPos + 40, 70, 11); //wings
            ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
            fill(108, 190, 225);
            ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
            ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
            ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
            fill(0);
            ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
            ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
            fill(190);
            ellipse(xPos + 40, yPos + 15, 5, 17); //tail
            fill(0);
            beginShape(); //cockpit
            vertex(xPos + 35, yPos + 50);
            vertex(xPos + 40, yPos + 57);
            vertex(xPos + 45, yPos + 50);
            vertex(xPos + 45, yPos + 45);
            vertex(xPos + 40, yPos + 50);
            vertex(xPos + 35, yPos + 45);
            vertex(xPos + 35,yPos +  50);
            endShape();

    }

    //cloud 4
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(cloudX3, cloudY3, 70, 50);
    ellipse(cloudX3 + 15, cloudY3 - 10, 60, 40);
    ellipse(cloudX3 + 30, cloudY3 + 15, 40, 30);
    ellipse(cloudX3 + 35, cloudY3, 50, 30)

    //cloud 5
    ellipse(cloudX4, cloudY4, 100, 70);
    ellipse(cloudX4 + 15, cloudY4 - 10, 70, 50);
    ellipse(cloudX4 + 30, cloudY4 + 15, 80, 50);
    ellipse(cloudX4 + 35, cloudY4, 50, 30)
 
    //cloud 6
    ellipse(cloudX5, cloudY5, 70, 50);
    ellipse(cloudX5 + 15, cloudY5 - 10, 50, 30);
    ellipse(cloudX5 + 30, cloudY5 + 15, 30, 10);
    ellipse(cloudX5 + 35, cloudY5, 40, 20)

}
}

For this project, I was inspired by a sweater I used to own that had a bunch of planes on it. I wanted to create something in the same vein, and I also wanted to incorporate a few random elements, which became a few clouds in the pattern that have random coordinates.

myoungsh-project05-wallpaper

sketch

function setup() {
    createCanvas(400, 400);
    background(0);
    var tile = 50; //each tile is 50x50
    for (var y = 0; y < 8; y++) { //8 columns
        for (var x = 0; x < 8; x++) { //and 8 rows
            var py = 25 + y * tile; //move px and py into the grid spots
            var px = 25 + x * tile;
              noStroke();
              fill(256); //draw white parts
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10); 
                //only once
              push();
              translate(-25, 0); //but copy and translate them 
              quad(px, py - 25, px, py - 10, 
                px + 12.5, py, px + 12.5, py - 15);
              quad(px + 12.5, py, px + 12.5, 
                py + 15, px + 25, py + 25, px + 25, py + 10);
              pop();
              if (x % 2 == 0) { //if its an even column
                fill(256, 256, 0); //draw in yellow
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, py - 10, 
                  px + 12.5, py, px, py + 10); 
                //similarly expressing triangles 
                //and copying+translating them all over the place
              } else { //if odd row do the saem in pink
                fill(256, 0, 256);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                push();
                translate(25, 0);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                push();
                scale(1, -1);
                translate(0, -400);
                triangle(px - 25, py - 25, px, 
                  py - 25, px - 12.5, py - 15);
                pop();
                pop();
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                push();
                scale(-1, 1);
                translate(-400, 0);
                triangle(px - 25, py - 10, 
                  px - 12.5, py, px - 25, py + 10);
                pop();
                quad(px - 12.5, py, px, 
                  py - 10, px + 12.5, py, px, py + 10);
              }
        }
    }
    noLoop();
}

I started this project making small edits to the dot code from assignment b, making the tiles all line up and fit into the smaller canvas without a border. Then I started imagining what could be drawn over and over in the small boxes I created. Luckily my friend was looking at patterns on her computer and this seemed like the perfect challenge. I used a sketch I made, finding way to replete the pattern and used that to play each triangle and quadrangle within the variable defined plane of a single tile.