Category: Project-05-Wallpaper

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.

Reference

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.

sketchfile>

//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);
}

notebook sketch

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

sketchDownload
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

sketch

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

sketch

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

wallpaper karan

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.