## 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

``````//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

``````//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

``````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

``````//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

``````//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. wallpaper_draft

## jooheek-Project05-Wallpaper

``````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

``````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

``````// 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

``````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.