## Project 5: Wallpaper

wpf-wallpaper
``````var size = 40; //variable that determines the size of the indvidiual flowers
var ypos = size;
var xpos = size;
var oDist = size * 1.4 //distance between two origins for the rings
var storedY; //variable to store previous ypos

function setup() {
createCanvas(600, 600);
background(231,227,210);
}

function draw() {
for(ypos = size; ypos <= height; ypos +=(2*size)+oDist) { //loop that increases the ypos and repeats the x loops

for(var xpos = size; xpos <= width + size; xpos += 2*size){ //loop to draw the line of flowers
storedY = ypos; //stores ypos
fill(0);
push();
translate(xpos,ypos);
flower(0,0);
pop();
}
ypos += oDist + (7*size/24);

for(var xpos = oDist/2; xpos <= width + size; xpos += oDist){ //loop to draw the line of rings
push();
fill(230,192,71);
translate(xpos,ypos);
criss(0,0);
pop();
}
ypos = storedY; //sets ypos back to what it was when the loop began so the loop iteration works properly and fills the screen
}
noLoop();
}

function criss(x,y){ //function that draws the ring shaps by drawing rotated flowers
push();
rotate(radians(45));
flower(x,y);
pop();
}

function flower(a,b){ //function that draws the flower by drawing a petal and then rotating 90 degrees and repeating
petal(a,b);
push();
rotate(radians(90));
petal(a,b);
pop();
push();
rotate(radians(180));
petal(a,b);
pop();
push();
rotate(radians(270));
petal(a,b);
pop();
}

function petal(x,y) { //function that draws an idvidual petal composed of two triangles and a square
noStroke();
var side = size/(1+sqrt(3)); //variable that determins the length of the side of the square and equilateral triangle
var triHigh = side*(sqrt(3)/2); //variable that determins the height of the triangle based on the length of the side
triangle(x,y,x-(side/2),y+triHigh,x+(side/2),y+triHigh);
square(x-(side/2),y+triHigh,side);
triangle(x,y+size,x-(side/2),y+size-triHigh,x+(side/2),y+size-triHigh);
}``````

I loved this project. I had a really great time breaking down the steps of drawing into individual functions to make the process easier. Additionally, it was very satisfying to get the loops working properly because I had to iterate on that a few times. The patterns would either be too far apart or on top of one another.

## Project 5, Modern Wallpaper

At first I was thinking of making a really old type of Renaissance wallpaper design with line flowers, but then I came across a few photos of modern wall paper designs and liked them much better. I decided to model my work after this photo specifically because I liked the simple pattern with the colors.

I mapped it out in my notebook in order to keep track of which blocks I had already made. As I made one color block and looped it correctly, I would color it in in my notepad. I also made a shape and color code to keep my code easier for myself to read.

``````//Georgia Miller
//Section D
//ghmiller@andrew.cmu.edu
//Project-05-A
function setup() {
createCanvas(600, 600);
background(220);
}

function draw() {
for(let row = 1; row <= 10; row += 3){
for(let col = 1; col <= 10; col += 3){
blockArcRYB((50 * col)- 50, (50 * row)- 50);
}
}
for(let row = 1; row <= 10; row += 3){
for(let col = 2; col <= 11; col += 3){
blockArcTCR((50 * col)- 50, (50 * row)- 50);
}
}
for(let row = 1; row <= 10; row += 3){
for(let col = 3; col <= 12; col += 3){
blockArcBBY(( 50 * col)- 50,( 50 * row)- 50);
}
}
for(let row = 3; row <= 12; row += 3){
for(let col = 1; col <= 10; col += 3){
blockArcBYW((50 * col)- 50,(50 * row)- 50);
}
}
for(let row = 2; row <= 12; row += 3){
for(let col = 1; col <= 10; col += 3){
blockArcLCB((50 * col)- 50,(50* row)- 50);
}
}
for(let row = 2; row <= 11; row += 3){
for(let col = 2; col <= 11; col += 3){
blockArcLRW((50 * col)- 50,(50 * row)- 50);
}
}
for(let row = 3; row <= 12; row += 3){
for(let col = 2; col <= 11; col += 3){
blockArcTCB((50 * col)- 50,(50 * row)- 50);
}
}
for(let row = 2; row <= 12; row += 3){
for(let col = 3; col <= 12; col += 3){
blockArcTWB((50 * col)- 50,(50 * row)- 50);
}
}
for(let row = 3; row <= 12; row += 3){
for(let col = 3; col <= 12; col += 3){
blockArcLCR((50 * col)-50,(50 * row)- 50);
}
}
}
function blockArcRYB(x,y) { //block with arc on the right side with yellow rect blue arc
strokeWeight(0);
fill(255, 245, 0); //yellow
rect(x, y, 50, 50);
fill(117, 135, 255); //blue
arc(x + 50, y + 25, 50, 50, PI/2,(3 * PI)/2);
}

function blockArcTCR(x,y) { //block with arc on the top with cream rect red arc
strokeWeight(0);
fill(255, 225, 190); //cream
rect(x, y, 50, 50);
fill(255, 177, 126); //red
arc(x + 25, y, 50, 50, 0, PI);
}

function blockArcBBY(x,y) { //block with arc on the bottm with blue rect yellow arc
strokeWeight(0);
fill(117, 135, 255); //blue
rect(x, y, 50, 50);
fill(255, 245, 0); //yellow
arc(x + 25, y + 50, 50, 50, PI, 0);
}
function blockArcBYW(x,y) { //block with arc on the bottm with yellow rect white arc
strokeWeight(0);
fill(255, 245, 0); //yellow
rect(x, y, 50, 50);
fill(255); //white
arc(x + 25, y + 50, 50, 50, PI, 0);
}
function blockArcLCB(x,y) { //block with arc on the left with blue rect cream arc
strokeWeight(0);
fill(117, 135, 255); //blue
rect(x, y, 50, 50);
fill(255, 225, 190); //cream
arc(x, y + 25, 50, 50, (3 * PI)/2, PI/2);
}
function blockArcLRW(x,y) { //block with arc on the left with blue rect cream arc
strokeWeight(0);
fill(255, 177, 126); //red
rect(x, y, 50, 50);
fill(255); //white
arc(x, y + 25, 50, 50, (3 * PI)/2, PI/2);
}
function blockArcTCB(x,y) { //block with arc on the top with cream rect blue arc
strokeWeight(0);
fill(255, 225, 190); //cream
rect(x, y, 50, 50);
fill(117, 135, 255); //blue
arc(x + 25, y, 50, 50, 0, PI);
}
function blockArcTWB(x,y) { //block with arc on the top with white rect blue arc
strokeWeight(0);
fill(255); //white
rect(x, y, 50, 50);
fill(117, 135, 255); //blue
arc(x + 25, y, 50, 50, 0, PI);
}
function blockArcLCR(x,y) { //block with arc on the left with blue rect cream arc
strokeWeight(0);
fill(255, 225, 190); //cream
rect(x, y, 50, 50);
fill(255, 177, 126); //red
arc(x, y + 25, 50, 50, (3 * PI)/2, PI/2);
}
``````

## Project-05

I started with some shapes and it turned into something pretty cool.

Project-05
``````//Luke Mattson
//section A

function setup(){
createCanvas(600, 600);
background(224, 201, 166)
}

function draw() {
//drawing the hexagons
for (x = 40; x < 600; x += 87) {
for (y = 55; y < 600; y+=160) {
hexagon(x,y,30)
hexagon(x,y,40)
}
}
for (x = -5; x < 700; x += 87) {
for (y = -25; y < 700; y+=160) {
hexagon(x,y,30)
hexagon(x,y,40)
}
}

//drawing the triangles in between the hexagons
for (x = -3.5; x < 700; x += 87) {
for (y = 53; y < 700; y+=160) {
trianglePair(x,y)
}
}
for (x = 39; x < 700; x += 87) {
for (y = -27; y < 700; y+=160) {
trianglePair(x,y)
}
}

//drawing pumkins inside the hexagons
for (x = 41; x < 700; x += 87) {
for (y = 57; y < 700; y+=160) {
pumpkin(x,y)
}
}
for (x = -5; x < 700; x += 87) {
for (y = 137; y < 700; y+=160) {
pumpkin(x,y)
}
}
noLoop()
}

function hexagon(x,y,s) {
stroke(210,83,73)
strokeWeight(.5)
noFill()
beginShape()
vertex(x+s,y)
vertex(x+s/2,y+s*sqrt(3)/2)
vertex(x-s/2,y+s*sqrt(3)/2)
vertex(x-s,y)
vertex(x-s/2,y-s*sqrt(3)/2)
vertex(x+s/2,y-s*sqrt(3)/2)
endShape(CLOSE)
}

function trianglePair(x,y) {
fill(210,83,73)
triangle(x,y,x-23,y-40,x+23,y-40)
triangle(x,y+4,x-23,y+44,x+23,y+44)
}

function pumpkin(x,y) {
pHeight = 30
pWidth = 40

//stem
strokeWeight(2)
stroke(0, 150, 0);
line(x, y-pHeight/2, x-pWidth/4, y - pHeight*.75);

//pumpkin
strokeWeight(1);
fill(230, 100, 0);
stroke(120, 60, 0);
ellipse(x,y, pWidth, pHeight);
ellipse(x,y, pWidth*.75, pHeight);
ellipse(x,y, pWidth*.5, pHeight);
ellipse(x,y, pWidth*.25, pHeight);
}``````

## Project 05: Wallpaper

Emilio Bustamante

This wallpaper uses patterns inspired from Muslim culture. My main objective was to try to draw the least amount of lines to create the wallpaper. I noticed that if I rotated and repeated the shape shown below 4 times it would create the pattern I wanted without drawing much lines. After that I just repeated and translated the groups of lines four times. The initial group of lines drawn would be repeated 16 times.

``````function setup() {
createCanvas(400, 400);
}
function draw() {
background(204);
//top left
pattern2(50, 50);
//top right
translate(-50,150)
pattern2(0,0)
//bottom right
translate(-50,-250)
pattern2(0,0)
//bottom left
translate(-50,150)
pattern2(0,0)
}
function pattern2(x,y){
//top left
pattern1(50,50)
//top right
rotate(radians(90));
rectMode(CENTER);
pattern1(0,-100)
//bottom right
rotate(radians(90));
rectMode(CENTER);
pattern1(0,-100)
//bottom left
rotate(radians(90));
rectMode(CENTER);
pattern1(0,-100)
}

function pattern1(x, y) {
translate(x, y);
stroke(0);
strokeWeight(1);
//line 1
line(50,-33.3,26.5,-40);
line(26.5,-40,-4.5,-9);
line(-4.5,-9,-45, -33.3);
line(-45, -33.3,-50,-25);
line(-50,-25, -33.3, 7.5);
line(-33.3, 7.5, 33.3, -7.5);
line(33.3, -7.5,50,26);
line(50,26,45,33.3);
line(45,33.3,4.5,9);
line(4.5,9,-26.5,40);
line(-26.5,40,-50,33.3);
//line 2
line(33.3,-50,40,-26.5);
line(40,-26.5,9,4.5);
line(9,4.5,33.3,45.5);
line(33.3,45.5,26.5,50);
line(26.5,50, -7.5, 33.3);
line(-7.5, 33.3, 7.5, -33.3);
line(7.5, -33.3,-26,-50);
line(-26.5,-50,-33.3,-45.5);
line(-33.3,-45.5,-9,-4.5);
line(-9,-4.5,-40,26.5);
line(-40,26.5,-33.3,50);
//line 3
line(-37.5,-37.5,-36.5,10);
line(-36.5,10,-50,13.3);
line(-50,13.3,-20,20);
line(-20,20,-13.3,50);
line(-13.3,50,-10,36.5);
line(-10,36.5,37.5,37.5);
line(37.5,37.5,36.5,-10);
line(36.5,-10,50,-13.3);
line(50,-13.3,20,-20);
line(20,-20,13.3,-50);
line(13.3,-50,10,-36.5);
line(10,-36.5,-37.5,-37.5);
}``````

## Project 5: Wallpaper

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

function draw() {
stroke(255, 202, 141); //yellow
strokeWeight(0.5); //for diagonal lines

for (var x = 0; x <= 400; x += 50) { //draw diagonal lines
for (var y = 0; y <= 400; y += 50) {
line(x, y+height/8, x+width/8, y); // diagonal lines
line(x, y, x-width/8, y-height/8); // diagonal lines
}
}

strokeWeight(1.5); //for petals
hpetal (0, 50); //initial petal
for (var x = 0; x <= 400; x+=100) { //draw petals
for (var y = 50; y <= 450; y+=100) {
hpetal(x, y);
hpetal(x+50, y+50);
hpetal(x-50, y-50);
}
}
}

function hpetal (x, y) {
//left petal
fill(231, 193, 206); //pink
beginShape();
curveVertex(x, y);
curveVertex(x, y);
curveVertex(x+25, y-10);
curveVertex(x+50, y);
curveVertex(x+25, y+10);
curveVertex(x, y);
curveVertex(x, y);
endShape();

//right petal
fill(170, 201, 206); //pale green
beginShape();
curveVertex(x+50, y);
curveVertex(x+50, y);
curveVertex(x+75, y-10);
curveVertex(x+100, y);
curveVertex(x+75, y+10);
curveVertex(x+50, y);
curveVertex(x+50, y);
endShape();

//top petal
fill(244, 220, 208); //pale pink
beginShape();
curveVertex(x+50, y-50);
curveVertex(x+50, y-50);
curveVertex(x+60, y-25);
curveVertex(x+50, y);
curveVertex(x+40, y-25);
curveVertex(x+50, y-50);
curveVertex(x+50, y-50);
endShape();

//bottom petal
fill(170, 201, 229); //pale blue
beginShape();
curveVertex(x+50, y);
curveVertex(x+50, y);
curveVertex(x+60, y+25);
curveVertex(x+50, y+50);
curveVertex(x+40, y+25);
curveVertex(x+50, y);
curveVertex(x+50, y);
endShape();

}
``````

Through this project, I became more comfortable with using nested loops and understood better how they work. This is my initial sketch:

I wanted to create a wallpaper that involved these symmetrical petals, and so I started by drawing them. Then I explored a little by shifting and overlapping the petals for a more interesting effect. This is the version without the overlaps, which I quite enjoy as well:

My design doesn’t quite remind me of wallpaper, instead, I see it more as a pattern for a silk square scarf. I really enjoyed testing and adding different elements to generate a pattern for this project!

## Project 5: Wallpaper

sketch
``````//Anthony Pan
//Section C

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

function draw() {
var dx = 0;
var dy = 0;
var dx1 = 0;
var dy1 = 0;
background(232, 249, 255); //sky blue background
branches(dx, dy); //call branches function inputing dx and dy to create pattern
cherryBlossom(dx1, dy1); //call cherryBlossom function to create 6 flowers on each branch

noLoop();
}

function branches(dx, dy) {
strokeWeight(3);
stroke(0);

for(var column = 0; column < 10; column += 1) {

for(var row = 0; row < 9; row +=1) {
line(50 + dx, 55 + dy, 55 + dx, 85 + dy); //bottom of main branch
line(35 + dx, 40 + dy, 50 + dx, 55 + dy); //middle of main branch
line(10 + dx, 20 + dy, 35 + dx, 40 + dy); //top of main branch
line(15 + dx, 35 + dy, 35 + dx, 40 + dy); //small branch below top main branch
line(15 + dx, 5 + dy, 25 + dx, 32 + dy); //small branch above top main branch
line(55 + dx, 20 + dy, 45 + dx, 50 + dy); //small branch right of middle main branch
line(60 + dx, 35 + dy, 50 + dx, 40 + dy); //smallest branch right of middle main
dy += 65;
}
dx += 80;
dy = 0;
}

}

function cherryBlossom(dx1, dy1) {
strokeWeight(1);
var color = random(120, 230); //random shade of pink - yellow
var color1 = random(120, 230); //random shade of pink - yellow
var color2 = random(120, 230); //random shade of pink - yellow
var r = 8; //radius of outer petals
var r1 = 4; //radius of center petal

for(var c = 0; c < 10; c += 1) {
for(var row1 = 0; row1 < 9; row1 += 1) {
fill(252, color, 174); //pink fill for flowers random shades of pink
ellipse(15 + dx1, (10 - r1) + dy1, r, r); //top petal
ellipse((15 + r1) + dx1, 10 + dy1, r , r); //right petal
ellipse(15 + dx1, (10 + r1) + dy1 , r, r); //bottom petal
ellipse((15 - r1) + dx1, 10 + dy1, r, r); //left petal

fill(252, 174, 174);
ellipse(15 + dx1, 10 + dy1, r1, r1); //center petal

fill(252, color1, 174);
ellipse(25 + dx1, (25 - r1) + dy1, r, r);
ellipse((25 + r1) + dx1, 25 + dy1, r, r);
ellipse(25 + dx1, (25 + r1) + dy1, r, r);
ellipse((25 - r1) + dx1, 25 + dy1, r, r);

fill(252, 174, 174);
ellipse(25 + dx1, 25 + dy1, r1, r1); //center petal

fill(252, color2, 174);
ellipse(11 + dx1, (35 - r1) + dy1, r, r);
ellipse((11 + r1) + dx1, 35 + dy1, r, r);
ellipse(11 + dx1, (35 + r1) + dy1, r, r);
ellipse((11 - r1) + dx1, 35 + dy1, r, r);

fill(252, 174, 174);
ellipse(11 + dx1, 35 + dy1, r1, r1); //center petal

fill(252, color, 174);
ellipse(40 + dx1, (40 - r1) + dy1, r, r);
ellipse((40 + r1) + dx1, 40 + dy1, r, r);
ellipse(40 + dx1, (40 + r1) + dy1, r, r);
ellipse((40 - r1) + dx1, 40 + dy1, r, r);

fill(252, 174, 174);
ellipse(40 + dx1, 40 + dy1, r1, r1); //center petal

fill(252, color1, 174);
ellipse(55 + dx1, (20 - r1) + dy1, r, r);
ellipse((55 + r1) + dx1, 20 + dy1, r, r);
ellipse(55 + dx1, (20 + r1) + dy1, r, r);
ellipse((55 - r1) + dx1, 20 + dy1, r, r);

fill(252, 174, 174);
ellipse(55 + dx1, 20 + dy1, r1, r1); //center petal

fill(252, color2, 174);
ellipse(60 + dx1, (35 - r1) + dy1, r, r);
ellipse((60 + r1) + dx1, 35 + dy1, r, r);
ellipse(60 + dx1, (35 + r1) + dy1, r, r);
ellipse((60 - r1) + dx1, 35 + dy1, r, r);

fill(252, 174, 174);
ellipse(60 + dx1, 35 + dy1, r1, r1); //center petal

dy1 += 65;

}
dx1 += 80;
dy1 = 0; //reset dy1 when it hits bottom of column
}

}
``````

## Project 05: Wallpaper

sketch
``````var b; //x position for badfruit
var c; //y position for badfruit

function setup() {
createCanvas(600, 600);
background(180, 199, 137);
}

function goodfruit(x,y) {
stroke(241, 240, 217);
bezier(x,y+5,x-35,y-25,x-15,y+45,x,y+25); //leftside
bezier(x,y+5,x+35,y-25,x+15,y+45,x,y+25); //rightside
}

function vine(x) {

//vines
noStroke();
fill(241, 240, 217);
rect(x-12,0,24,600);
triangle(x,505,x,540,x+60,460); //bottomright
triangle(x,480,x,445,x-60,400); //bottomleft
triangle(x,360,x,325,x+60,280); //middleright
triangle(x,300,x,265,x-60,220); //middleleft
triangle(x,180,x,145,x+60,100); //topleft
triangle(x,120,x,85,x-60,40); //topright

//branches
triangle(x+42,480,x+38,545,x+46,545); //bottomright
goodfruit(x+42,535);
triangle(x-42,420,x-38,485,x-46,485); //bottomleft
goodfruit(x-42,475);

triangle(x+42,300,x+38,365,x+46,365); //middleright
goodfruit(x+42,355);
triangle(x-42,240,x-38,305,x-46,305); //middleleft
goodfruit(x-42, 295);

triangle(x+42,120,x+38,185,x+46,185); //topright
goodfruit(x+42,175);
triangle(x-42,60,x-38,125,x-46,125); //topleft
goodfruit(x-42, 115);

}

function badfruit(b,c) {
stroke(96, 93, 42);
fill(96, 93, 42);
triangle(b,c-10,b-2,c+4,b+2,c+4); //stem
bezier(b,c+5,b-35,c-25,b-15,c+45,b,c+25); //leftside
bezier(b,c+5,b+35,c-25,b+15,c+45,b,c+25); //rightside
}

function draw() {

vine(300);
vine(480);
vine(120);

for (var b=35; b<=600; b+=176.5) { //increase from first to fourth row
for(var c=25; c<=600; c+=176.5)  { //count from first to fourth column
badfruit(b,c);
}
}

//bible verse
fill(241, 240, 217);
noStroke();
textSize(12);
textAlign(CENTER);
text("JOHN 15:5",560,590);

}
``````

## Project 05: Wallpaper

``````//Alana Wu
//ID: alanawu
//Project 05: Wallpaper

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

function draw()
{

bigGrid (.25, 0);
bigGrid(.125, 50);
bigGrid(.0625, 75);
noLoop();
}

//blue, dark red, yellow color scheme
/*function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 13, 78, 255, 100, 10); //blue
grid (15, 300, 100, 0, 255, 255, 30); //violet
grid (2, 150, 76, 25, 255, 120, 5); //red
grid(10, 200, 255, 0, 0, 100, 10); //mustard
grid (10, 300, 255, 236, 0, 150, 15); //yellow
pop();
}
}
}*/

//green, blue, yellow, red color scheme
function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 0, 255, 50, 150, 10); //green
grid (15, 300, 255, 0, 0, 255, 30); //red
grid (10, 150, 0, 0, 55, 180, 15); //blue
grid(10, 200, 255, 255, -200, 100, 10); //yellow
grid (10, 300, 180, -100, -100, 150, 15); //dark red
pop();
}
}
}

//pastels color scheme
/*function bigGrid (s, dist)
{
for (var x = 0; x < 4; x ++)
{
for (var y = 0; y < 4; y ++)
{
noStroke();
push();
translate (x*100 + dist, y*100 + dist);
scale (s);
grid (40, 0, 150, 255, 255, 100, 10); //pale blue
grid (30, 300, 150, 150, 255, 255, 30); //lavender
grid (2, 150, 255, 80, 255, 120, 5); //pale pink
grid(10, 200, 255, 200, 200, 100, 10); //pink
grid (10, 300, 250, 250, 190, 150, 15); //pale yellow
pop();
}
}
}*/

function grid (rectW, start, red, green, blue, opacity, dist)
{
for (x = start; x <= width - rectW; x += dist)
{
var count = 0;
fill (red, green, blue, opacity);
rect (x, 0, rectW, height);
rect (0, x, width/2, rectW);
red += 10;
blue += 20;
green += 10;
}

}
``````

To generate ideas for this project, I experimented with building different functions that played with a variety of geometric shapes. I eventually decided to use a function that interwove and layered rectangles in different colors and opacities.

After building the initial function, I played around with a lot of different color schemes and opacities, a few of which are shown below (scroll down past the code). For the future, I think it’d be interesting to try and create optical illusions.

## Project-05-Wallpaper

``````function setup() {
createCanvas(750, 450);
angleMode(DEGREES);
rectMode(CENTER);
}

function draw() {
background(200);
//LOOP OF ENTIRE PATTERN
push();
noStroke();
//fill(202,204,232);
//rect(100,80,150,120);
//fill(171,255,220);
//rect(100,20,150,10);
//rect(100,40,150,40);
pop();

fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
//END OF ONE PATTERN
////////////////////////////////////////////////

push();
translate(150,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(300,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(450,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(-150,0);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(105,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(255,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////

push();
translate(-45,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////

push();
translate(405,80);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(-150,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(0,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(150,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

////////////////////////////////////////////////

push();
translate(300,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN
////////////////////////////////////////////////

push();
translate(450,160);
fill("yellow");
ellipse(80,100,85,60);
triangle(35,55,65,55,50,30);
triangle(45,55,75,55,70,30);
ellipse(55,65,50,50);

fill(255);
ellipse(55,60,20,15);

fill(0);
ellipse(50,50,2,2);
ellipse(60,50,2,2);
ellipse(55,55,5,4);

fill("brown");
rect(50,100,300,10);

fill('yellow');
push()
rotate(-10);
ellipse(60,95,20,40);
pop();
push();
rotate(10);
ellipse(60,95,20,40);
pop();
ellipse(90,125,25,20);
ellipse(115,125,25,20);

fill("pink");
rect(30,80,10,30);

noFill();
stroke(0);
curve(30,100,25,60,15,40,10,100);

fill("red");
ellipse(17,37,10,10);

fill(93,245,133);
rect(90,80,10,30);

fill(114,146,252);
rect(100,75,10,40);

fill(255,18,125);
ellipse(150,40,30,20);
triangle(165,40,175,30,175,50);

fill(31,225,255);
ellipse(120,60,30,20);
triangle(135,60,145,70,145,50);

fill(255,94,0);
ellipse(150,80,30,20);
triangle(165,80,175,90,175,70);
pop();
//END OF ONE PATTERN

}

``````

## Project 5: Wallpaper

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

function draw() {
for(x=75;x<=375;x+=150){ //loop for pink shaded eye pattern
for(y=37.5;y<=412.5;y+=75){
pattern(x,y);
}
}
for(x=0;x<=width;x+=150){ //loop for yellow shaded eye pattern
for(y=0;y<=height;y+=75){
pattern2(x,y);
}
}
noLoop()
}

function pattern(centerX,centerY){ //pattern for pink eye
noStroke()
fill(200,121,174);
quad(centerX-75,centerY,centerX,centerY-37.5,centerX+75,centerY,centerX,centerY+37.5); //rhombus
fill(79,0,145);
arc(centerX,centerY+18.75,75,75,PI+PI/6,2*PI-PI/6,CHORD) //outer eye top half
arc(centerX,centerY-18.75,75,75,PI/6,PI-PI/6,CHORD) //outer eye lower half
fill(189,151,177);
ellipse(centerX,centerY,37.5,37.5);//outer pupil
fill(0);
ellipse(centerX,centerY,18.75,18.75);//inner pupil
}

function pattern2(centerX,centerY){//same code, different colours
noStroke()
fill(254,199,73);
quad(centerX-75,centerY,centerX,centerY-37.5,centerX+75,centerY,centerX,centerY+37.5);
fill(251,254,46);
arc(centerX,centerY+18.75,75,75,PI+PI/6,2*PI-PI/6,CHORD)
arc(centerX,centerY-18.75,75,75,PI/6,PI-PI/6,CHORD)
fill(254,183,116);
ellipse(centerX,centerY,37.5,37.5);
fill(0);
ellipse(centerX,centerY,18.75,18.75);
}``````

This was an interesting project because I liked that I drew eyes. It was a little tricky figure where the arcs should be placed.