Category: Project-05-Wallpaper

jknip-Project-05-wallpaper

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(400, 400);
    background(255,254,208);
    var tw = 80; //horizontal spacing between circles
    var th = 40; //vertical spacing between circles
    var oy = 0; //y position of circles
    var ox = 0; //x position of circles
    var circlesize = 20;

//for odd rows
    for (var y = 0; y < 6; y++) { //create 6 rows
        for (var x = 0; x < 6; x++) { //create 6 circles in each row
            var py = oy + y * th * 2; //y position = position + row  * vertical spacing distance
            var px = ox + x * tw; //adjust x spacing to accomodate 2*space + one circle
           
    //shadow behind avocado
            fill(138,86,47);
            noStroke();
            ellipse(px+2, py, circlesize, circlesize*1.2);
            ellipse(px+2, py+11, circlesize*1.3, circlesize*1.8);

    //avocado       
            fill(186,217,64);
            noStroke();
            ellipse(px, py, circlesize, circlesize*1.2); // top half of avocado
            ellipse(px, py+11, circlesize*1.3, circlesize*1.8); //bottom half of avocado
            
    //pit
            fill(138,86,47);
            ellipse(px-1, py+13, circlesize/2, circlesize/1.7);
        }
    }


//for even rows
    for (var y = 0; y < 5; y++) { //create 5 rows
        for (var x = 0; x < 6; x++) { //create 6 circles in each row
            var py = oy + y * th * 2 + circlesize*2;
            var px = ox + x * tw + circlesize*2; //adjust x spacing to accomodate 2*space + one circle
    
    //shadow behind avocado
            fill(138,86,47);
            noStroke();
            ellipse(px+2, py, circlesize, circlesize*1.2);
            ellipse(px+2, py+11, circlesize*1.3, circlesize*1.8);
        
    //avocado  
            fill(186,217,64);
            noStroke();
            ellipse(px, py, circlesize, circlesize*1.2); // top half of avocado
            ellipse(px, py+11, circlesize*1.3, circlesize*1.8); // bottom half of avocado
           
    //pit
            fill(138,86,47);
            ellipse(px-1, py+13, circlesize/2, circlesize/1.7); //avocado pit
        }
    }
    noLoop();
}


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

Inspired by a friend’s graphic design work, I wanted to create a simple avocado wallpaper that mimics the fun in her work. I was also inspired by the hexagonal pattern from the previous assignment.

 

yoonyouk-project05-wallpaper

sketch

function setup() {
    createCanvas(480, 480);
    background(255, 213, 238);

    for(var x = 0; x < 500; x+=100){
        for(var y = 0; y < 500; y+=100){
            cacti(x,y);

        }
    }

}



function draw() {
    cacti();

}


function cacti(x,y) {
    noStroke();
    fill(255, 185, 71);
    ellipse(x+50, y-20, 20, 20);

    //clouds
    noStroke();
    fill(131, 175, 226);
    ellipse(x+20, y-10, 15, 15);
    ellipse(x+30, y-5, 20, 20);
    ellipse(x+45, y-10, 26, 26);
    ellipse(x+60, y-10, 15, 15);

   //cacti
   stroke(99, 212, 136);
    strokeWeight(15);
    line(x, y-10, x, y+60);
    line(x-20, y-10, x-20, y+10);
    line(x-20, y+10, x-10, y+10);
    line(x+10, y+30, x+25, y+30);
    line(x+25, y+30, x+25, y);

    //needles
    stroke(255, 185, 71);
    strokeWeight(4);
    line(x-3, y, x-3, y+10);
    line(x-1, y+20, x-1, y+40);

    //sun
    /*noStroke();
    fill(255, 185, 71);
    ellipse(100, 30, 20, 20);

    //clouds
    noStroke();
    fill(131, 175, 226);
    ellipse(70, 40, 15, 15);
    ellipse(80, 45, 20, 20);
    ellipse(95, 40, 26, 26);
    ellipse(110, 40, 15, 15);

   //cacti
   stroke(99, 212, 136);
    strokeWeight(15);
    line(50, 40, 50, 110);
    line(30, 40, 30, 60);
    line(30, 60, 40, 60);
    line(60, 80, 75, 80);
    line(75, 80, 75, 50);

    //needles
    stroke(255, 185, 71);
    strokeWeight(4);
    line(47, 50, 47, 60);
    line(49, 70, 49, 90);*/
}

I initially started out by creating a tile of the cacti in the desert scene with the cloud and the sun. By making this tile its own function, I was then able to make it repeat using for loops. It was very interesting to make a drawing its own function in order to repeat it throughout the canvas.

aerubin-Project-05-Wallpaper

I was inspired by the popular palm leaf design as I wanted to choose a design with a balance between organic and geometric forms. In my design, the geometric repeating layered square pattern in the background is contrasted with the randomly placed leaves in the foreground.

My Inspiration:

I first began by drawing creating a function that draws the squares to then rotate the pattern so they create a diamond-shaped configuration for the basis of my background design. The leaves add interest to the geometric pattern that would otherwise be basic and uninteresting without a random organic design in the foreground. The two different types of leaves compose the foreground design and they are placed in aesthetically pleasing random positions. Overall, I could see a wall or a shirt featuring this design for a casual look.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-05-Wallpaper

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

function draw() {
    //Background Square Pattern
    push();
    rotate(radians(45));
    translate(-150,-300);
    for(var i = 0; i < 10; i++) {
        for(var r = 0; r < 1000; r +=130) {
            squares((i*130), r); 
        }
    }
    pop();

    //Fan Leaves Design
    push();
    for(var m = 10; m < 20; m++) {
        rotate(radians(m*3));
        fanleaves(m+40, m-50);
    }
    pop()

    //Fan Leaves Design (Upper Left)
    push();
    for(var u = 0; u < 2; u++) {
        fanleaves(u-100, u-160);
    }
    pop();

    //Wide Leaves (Upper Right & Lower Left)
    push();
    for(var v = 0; v < 20; v+=2) {
        rotate(45);
        wideleaves(v+100,v+200);
    }
    pop();

    //Wide Leaves (Upper Left)
    push();
    rotate(20);
    for(var e = 0; e < 40; e+=10) {
        wideleaves(e-100, e-190);
    }
    pop();

    //Wide Leaves (Lower Right)
    push();
    rotate(radians(-30));
    for(var h = 0; h < 1; h++) {
        wideleaves(h-180, h+370);
    }
    pop();

    //Wide Leaves (Lower Middle)
    push();
    rotate(radians(15));
    for(var k = 0; k < 90; k+=80) {
        wideleaves(k, k+100);
    }
    pop();

} 
function squares(p,q) {
    fill(0);
    noStroke();
    rectMode(CENTER);
    //p = x cordinate
    //q = y cordinate
    rect(-55+p, 35+q, 150, 150);
    fill(244, 218, 215);
    rect(-55+p, 35+q, 120, 120);
    fill(0);
    rect(-55+p, 35+q, 90, 90);
    fill(244, 218, 215);
    rect(-55+p, 35+q, 60, 60);
    fill(0);
    rect(-55+p, 35+q, 30, 30); 
}

function fanleaves(f,l) {
    translate(f+200, l+300);
    fill(86, 165, 78);
    stroke(38, 84, 32);
    for(var t = 10; t < 28; t++) {
        rotate(radians(t*.5));
        triangle(0, 0, 100, 70, 90, 70);
    }
}

function wideleaves(w,o) {
    translate(w, o);
    noFill();
    strokeWeight(4);
    stroke(41, 96, 51);
    line(300, 320, 300, 100);
    strokeWeight(2);
    for(var a = 0; a < 77; a+=2.7) {
        line(300, 300-a, 270-(a*.4), 280-a);
    }
    for(var b = 0; b < 155; b+=2.7) {
        line(300, 223-b, 239+(b*.4), 203-b);
    }
    for(var c = 0; c < 77; c+=2.7) {
        line(300, 300-c, 330+(c*.4), 280-c);
    }
    for(var d = 0; d < 155; d+=2.7) {
        line(300, 223-d, 361-(d*.4), 203-d);
    }
}

ikrsek-SectionC-Project-05-Wallpaper

sketch

//Isadora Krsek 
//Section C
//IKrsek@andrew.cmu.edu
//Project 05: Wallpaper Pattern
//"Snowflakes"


function setup() {
    createCanvas(500,500)
    background(102,137,144)
}
  
  
function draw() {
    noStroke();
    push();
    scale(0.5,0.5)
    translate(450,-580);
    rotate(radians(45));
    snowflakeType2();
    pop();
    snowflakeType1();
    
    noLoop();
}

function snowflakeType1(){
    for (var row=0; row<=width*8; row=row+200) {
	  for (var col=0; col <=height*8; col=col+200) { 
    push();
    scale(0.25,0.25);
    translate(765,-1660)
    rotate(radians(45));
  //hexagon base of pattern 
    noFill();
    stroke(135,187,162,140);
    beginShape();
    strokeWeight(1);
    vertex(38+row,25+col);
    vertex(63+row,25+col);
    vertex(75+row,48+col);
    vertex(63+row,70+col);
    vertex(38+row,70+col);
    vertex(25+row,48+col);
    endShape(CLOSE);
  //circle inception
    noFill();
    strokeWeight(2);
    stroke(135,187,162,140);
    ellipse(50+row,48+col,16,16);
    fill(135,187,162);
    noStroke();
    ellipse(50+row,48+col,4,4);
  //triangles surrounding hexagon
    noStroke;
    fill(201,228,202,140);
    triangle(48+row,25+col,51+row,13+col,54+row,25+col);//top triangle
    triangle(68+row,35+col,82+row,32+col,71+row,40+col);//right  top triangle
    triangle(67.35+row,62+col,82+row,66+col,70+row,56+col);//bottom right triangle
    triangle(48+row,70+col,51+row,83+col,54+row,70+col);//bottom triangle
    triangle(20+row,68+col,34+row,62+col,30+row,56+col);//bottom left triange
    triangle(20+row,32+col,33+row,34+col,30+row,40+col);//top left triangle
  //diamonds
    fill(54,73,88,140);
    noStroke();
    ellipse(42+row,33+col,3,3);//left top dot
    ellipse(58+row,33+col,3,3);//right top dot
    ellipse(66+row,48+col,3,3);//right middle dot
    ellipse(58+row,62+col,3,3);//right bottom dot
    ellipse(42+row,62+col,3,3);//left bottom dot
    ellipse(34+row,48+col,3,3);//left middle dot
  //lines around hexagon
    noFill();
    stroke(255,140);
    strokeWeight(2);
    strokeJoin(BEVEL);
    //top left
    beginShape();
    vertex(30+row,26+col);
    vertex(34+row,20+col);
    vertex(40+row,20+col);
    endShape();
    
    //middle right
     beginShape();
     vertex(78+row,40+col);
     vertex(82+row,48+col);
     vertex(78+row,56+col);
     endShape();
    
    //top right
    beginShape();
    vertex(60+row,20+col);
    vertex(67+row,20+col);
    vertex(70+row,26+col);
    endShape();
    
    //middle left
    beginShape();
    vertex(22+row,40+col);
    vertex(17+row,48+col);
    vertex(22+row,56+col);
    endShape();
    
    //bottom left
    beginShape();
    vertex(29+row,70+col);
    vertex(34+row,78+col);
    vertex(40+row,78+col);
    endShape();
    
    //bottom right
    beginShape();
    vertex(60+row,78+col);
    vertex(67+row,78+col);
    vertex(72+row,70+col);
    endShape();
  //lines above triangles
    stroke(75,101,121,140);
    strokeWeight(1);
    beginShape();
    vertex(42+row,33+col);
    vertex(10+row,27+col);
    vertex(34+row,48+col);
    endShape();
    
    beginShape();
    vertex(58+row,33+col);
    vertex(92+row,28+col);
    vertex(66+row,48+col);
    endShape();
    
    beginShape();
    vertex(58.5+row,62+col);
    vertex(51+row,94+col);
    vertex(42+row,62+col);
    endShape();
    
    pop();
    
  }
  }
}


function snowflakeType2(){
  for (var row=0; row<=width*3; row=row+100) {
	  for (var col=0; col <=height*4; col=col+100) { 
  //hexagon base of pattern 
    noFill();
    stroke(255,80);
    beginShape();
    strokeWeight(1);
    vertex(38+row,25+col);
    vertex(63+row,25+col);
    vertex(75+row,48+col);
    vertex(63+row,70+col);
    vertex(38+row,70+col);
    vertex(25+row,48+col);
    endShape(CLOSE);
  //circle inception
    noFill();
    strokeWeight(2);
    stroke(255,80);
    ellipse(50+row,48+col,16,16);
    fill(250,80);
    noStroke();
    ellipse(50+row,48+col,4,4);
  //triangles surrounding hexagon
    noStroke;
    fill(255,80);
    triangle(48+row,25+col,51+row,13+col,54+row,25+col);//top triangle
    triangle(68+row,35+col,82+row,32+col,71+row,40+col);//right  top triangle
    triangle(67.35+row,62+col,82+row,66+col,70+row,56+col);//bottom right triangle
    triangle(48+row,70+col,51+row,83+col,54+row,70+col);//bottom triangle
    triangle(20+row,68+col,34+row,62+col,30+row,56+col);//bottom left triange
    triangle(20+row,32+col,33+row,34+col,30+row,40+col);//top left triangle
  //diamonds
    fill(255,80);
    noStroke();
    ellipse(42+row,33+col,3,3);//left top dot
    ellipse(58+row,33+col,3,3);//right top dot
    ellipse(66+row,48+col,3,3);//right middle dot
    ellipse(58+row,62+col,3,3);//right bottom dot
    ellipse(42+row,62+col,3,3);//left bottom dot
    ellipse(34+row,48+col,3,3);//left middle dot
  //lines around hexagon
    noFill();
    stroke(255,80);
    strokeWeight(2);
    strokeJoin(BEVEL);
    //top left
    beginShape();
    vertex(30+row,26+col);
    vertex(34+row,20+col);
    vertex(40+row,20+col);
    endShape();
    
    //middle right
     beginShape();
     vertex(78+row,40+col);
     vertex(82+row,48+col);
     vertex(78+row,56+col);
     endShape();
    
    //top right
    beginShape();
    vertex(60+row,20+col);
    vertex(67+row,20+col);
    vertex(70+row,26+col);
    endShape();
    
    //middle left
    beginShape();
    vertex(22+row,40+col);
    vertex(17+row,48+col);
    vertex(22+row,56+col);
    endShape();
    
    //bottom left
    beginShape();
    vertex(29+row,70+col);
    vertex(34+row,78+col);
    vertex(40+row,78+col);
    endShape();
    
    //bottom right
    beginShape();
    vertex(60+row,78+col);
    vertex(67+row,78+col);
    vertex(72+row,70+col);
    endShape();
  //lines above triangles
    stroke(255,100);
    strokeWeight(1);
    beginShape();
    vertex(42+row,33+col);
    vertex(10+row,27+col);
    vertex(34+row,48+col);
    endShape();
    
    beginShape();
    vertex(58+row,33+col);
    vertex(92+row,28+col);
    vertex(66+row,48+col);
    endShape();
    
    beginShape();
    vertex(58.5+row,62+col);
    vertex(51+row,94+col);
    vertex(42+row,62+col);
    endShape();
  }
   }
}

Brandonhyun- Project-05-WallPaper

sketch

//Brandon Hyun
//15-104 Section B
//bhyun1@andrew.cmu.edu
//Project 05

function setup() {
    createCanvas(460, 460);
    background(100,200,300); // blue background
    noLoop();
}

function draw() {

//Red Circle
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(255,0,0);
      noStroke();
      ellipse (row,col,50,50);
    }
  }
//white Circle#1
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(209,234,254);
      ellipse (row+11,col+11,21,21);
    }
  }
  //Blue Circle #1
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(72,98,163);
      ellipse (row+10,col-10,21,21);
    }
  }
//white circle #2
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(72,98,163);
      ellipse (row-10,col+10,21,21);
    }
  }
//blue circle#2
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(209,234,254);
      noStroke();
      ellipse (row-11,col-11,21,21);
    }
  }
}

For this project, I wanted to create something that is simple but interesting. I necessarily did not have a set design that I wanted to pursue but I wanted to play around with the shapes in p5 js. and create an interesting composition.  I used only circles in my patterns but interestingly, the combinations of circles created a star shape.

I also wanted to color code my shapes so I used color combinations that would match well with the blue background. My reference came from this image from google.

gyueunp – Project-05: Wallpaper

Wallpaper

//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-05-A

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

function draw() {
    background(114, 0, 0);
    for (var x = 0; x <= width; x = x + 50){
      for (var y = 0; y <= height; y = y + 50){

//white hightlight 
        push();
        stroke(247, 230, 230, 110);
        strokeWeight(1.5);
        fill(247, 230, 230);
        arc(x+1, y+1, 15, 10, 0, PI-120, CHORD);
        pop();

//shadow below seed
        push();
        stroke(0);
        strokeWeight(1);
        fill(0);
        arc(x, y, 15, 10, 0, PI-20, CHORD);
        pop();

//seed
        push();
        noStroke();
        fill(209, 200, 123);
        arc(x-3, y-3, 20, 15, 0, PI-20, CHORD);
        pop();

//shadow on seed
        push();
        noStroke();
        fill(181, 173, 106);
        arc(x-2, y-0.5, 16, 10, 0, PI-20, CHORD);
        pop();

//circle highlights from left to right
        noStroke();
        fill(247, 230, 230);
        ellipse(x-8, y+6, 1, 1);

        stroke(247, 230, 230, 110);
        strokeWeight(1.5);
        fill(247, 230, 230);
        ellipse(x-5, y+8, 2.5, 1);

        stroke(247, 230, 230, 110);
        strokeWeight(1.5);
        fill(247, 230, 230);
        ellipse(x-1, y+9, 1, 1);

        noStroke();
        fill(247, 230, 230);
        ellipse(x+2.5, y+8.7, 1, 1);
    }
  }
}

Although I made a repeating pattern by following the project guideline, my wallpaper resembles the naturally occurring pattern of strawberry achenes. While maintaining the characteristics of the fruit, I used multiple geometric shapes to add small details, such as subtle highlights and shadows. For future projects, I would love to experiment with creating not only repeating patterns, but also textures and dimensions that further enhance the quality of my work.

Project-05-Chickoff

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(600, 400);
    noStroke();
}
 
function draw() {
    background(136, 179, 130);
    drawGrid();
    noLoop(); 
}
function drawGrid() {
  for (var y = 0; y < height + 50; y += 100) {
        for (var x = 0; x < width + 100; x += 100) {
            fill(y*5/8, x*.9/2, x*1/3, 220);
            //body
            ellipse(x, y, 100, 200);
        }
    }
     for (var y = 0; y < height + 50; y += 100) {
        for (var x = 0; x < width + 10; x += 100) {
            fill(y, 100, 100);
            //mouth
            ellipse(x, y+50, 20, 10);
        }
    }
      for (var y = 0; y < height + 50; y += 100) {
        for (var x = 0; x < width + 2; x += 100) {
            fill(80, 70, 75);
            //left eye
            ellipse(x-15, y+13, 10, 10, 100);
            //left mole
            fill(0);
            ellipse(x-23, y+18, 1.5, 1.5, 100);
            //right eye
            fill(75);
            ellipse(x+20, y+30, 10, 10, 100);
            //right mole
            fill(0);
            ellipse(x+25, y+40, 1.5, 1.5, 90);
        }
    }

    noLoop();
}

When I started this project, I knew I wanted to make some kind of creature and have it duplicated in a way that made it look like they were in a crowd. I started by doing a quick sketch of these faces and then went from there, trying to make it a fun project. 🙂

daphnel-Project 05-Wallpaper

bg

//Daphne Lee
//15-104::1 (9:30am) Section D
//daphnel@andrew.cmu.edu
//Project-05-Background

var spaceX = 60; //controlled distances of circles
var spaceY = 60;//controlled distances of circles
var circleSize=90;
var cirX = 35;
var cirY = 35;

function setup() {
    createCanvas(480, 480);
    background(250, 230, 230);
    var trans = randomGaussian(25,100);
    var widthMore= 50
    var heightMore = 100;

    for (var y = 0; y < 9; y++) {
        for (var x = 0; x < 9; x++) {
            var cy = cirY + y * spaceY;
            var cx = cirX + x * spaceX;
            fill(255, 230, 179, trans);
            stroke(255);
            strokeWeight(5);
            //circles;
            ellipse(cx-circleSize/2, cy-circleSize/2, circleSize, circleSize);
        }
    }
    //added to width and height to make lines stretch more across canvas;
    for(var x = 0; x <= width+widthMore; x+=30){
      for(var y = 0; y <= height+heightMore; y+=50){
      strokeWeight(0.5);
      stroke(255);
      //different increments make the criss cross patterns for the lines;
      var xIncrement = 50;
      var yIncrement1= 20;
      var yIncrement2= 50;
      //line pattern in background;
      line(x-xIncrement,y-yIncrement1,x + xIncrement, y-yIncrement2);
      line(x+xIncrement, y+yIncrement2, x- xIncrement, y+yIncrement1);
    }
  } noLoop();
}

I started off wanting a circle based design. I tried to understand the idea of using loops in more depth so I combined the circles and lines to create a more aesthetic look. At the beginning, my main focus was just to get circles aligned side by side by each other throughout the entire canvas. After experimenting with the function, I realized that having them overlap looked pretty good. The way the loop of lines turned out was coincidental and I liked the way they turned out. I wanted to make the circle designs the main focus so I increased the stroke intensity for the circles and decreased it for the lines. Overall, I think this project was relatively more simple and I think it would be a cute design for a summer dress or skirt!

cduong-assignment05-wallpaper

sketch

function setup() {
    createCanvas(475, 450);
    background(244, 174, 163);

    noLoop();
}

function draw() {

   //White Vertical Lines
   for (var lx = 10; lx <= 470; lx += 45) {
     stroke(255)
     strokeWeight(3);
     line(lx, 0, lx, 480);
  }
  //White Vertical Lines

  //White Circles (Odd Horizontal Lines)
  for(var ssx = 0; ssx < 480; ssx += 90){
    for(var ssy = 0; ssy < 550; ssy += 180){
  stroke(255);
  strokeWeight(2);
  fill(244, 174, 163);
  ellipse(ssx+55, ssy+40, 50, 50);
  }
}
  //White Circles (Odd Horizontal Lines)

  //White Circles (Even Horizontal Lines)
  for(var ssx = 0; ssx < 480; ssx += 90){
    for(var ssy = 0; ssy < 550; ssy += 180){
      stroke(255);
      strokeWeight(2);
      fill(244, 174, 163);
      ellipse(ssx+10, ssy+130, 50, 50);
    }
}
  //White Circles (Even Horizontal Lines)

  //Onion Character (Odd Horizontal Lines)
  for(var onionx = 0; onionx < 450; onionx += 180){
    for(var oniony = 0; oniony <550; oniony += 180){
      fill(255);
      noStroke();
      ellipse(onionx+55, oniony+50, 30, 30);

    for(var leafx = 0; leafx < 540; leafx += 180){
      for(var leafy = 0; leafy < 540; leafy += 180){
        fill(170, 235, 176);
        ellipse(leafx+65, leafy+35, 20, 10);
        ellipse(leafx+45, leafy+35, 20, 10);
        }
      }
    }
  }
  //Onion Character (Odd Horizontal Lines)

  //Lone Sprout (Odd Horizontal Lines)
  for(var sproutx = 0; sproutx < 540; sproutx += 90){
    for(var sprouty = 0; sprouty < 360; sprouty += 180){
  fill(170, 235, 176);
  ellipse(sproutx, sprouty+105, 20, 10);
  ellipse(sproutx+20, sprouty+105, 20, 10);
  }
}
  //Lone Sprout (Odd Horizontal Lines)


}

I wanted to incorporate something I’ve been using in my past assignments, which is this white circle with a sprout coming out of the top of its head because I really enjoy drawing that character. I also wanted to make a repetitive pattern in the background so I was playing around with different patterns for a while until I realized that maybe I should keep it consistent with the circluar head of the character and make a background with circles and lines.

ablackbu-Project-05-Wallpaper

sketch

function setup() {
    createCanvas(400, 348);
    background(188,221,217);
    strokeWeight(0);
    var tw = 66.67; //space bettween cirbles horizontally (60)
    var th = 58; //Space between circles vertically (60 * 0.87)
    var row = 7; //number of circles in each row

    fill(234,94,83);

    //make a hexagonal grid 
    for (var y = 0; y < 7; y++) {
        for (var x = 0; x < row; x++) {
            var py = y * th;
            var px = x * tw;
            
            if(y % 2 != 0){ //for even rows
                row=6; //only make 6
                px=px+33.335; //offset row
            }else{
                row=7;
            }

            ellipse(px, py, 50, 70); // make ellipse for body
            ellipse(px+33.335,py,40,20); //make ellipse for arms
            ellipse(px,py-40,20,20); //make ellipse for head

        }
    }
    
    
    //blue circles
    fill(188,221,217);
    ellipse(width/2,height/2,150,150);
    
    ellipse(width/4,height/4,80,80);
    ellipse(width/8,height/8,40,40);
    ellipse(0,0,20,20);
    
    ellipse(3*width/4,3*height/4,80,80);
    ellipse(7*width/8,7*height/8,40,40);
    ellipse(0,height,20,20);

    ellipse(3*width/4,height/4,80,80);
    ellipse(7*width/8,height/8,40,40);
    ellipse(width,0,20,20);

    ellipse(width/4,3*height/4,80,80);
    ellipse(width/8,7*height/8,40,40);
    ellipse(width,height,20,20);

    noLoop();
}

wallpaper patterned

This project especially go the creative energy flowing. I used 2 for loops to make a hexagonal grid that I then filled with multiple shapes to create an interesting geometric pattern.

I found these colors a little bit by chance and I think they really work well together. I could really see this tiled onto a bathroom wall.