Category: Project-05-Wallpaper

Project 5 – Wallpaper

for this project, I wanted to create something that was a little more abstract and randomized (almost like a texture or textile generator) rather than a single image or motif tiled repeatedly.

(refreshing should change the pattern)

iyip_wallpaper
//Iris Yip
//15104 Section D

var density, shapes, c, cindex, newc,
    colors = ["#1aa6b7", "#ff414d", "#f56a79", "#ff9a76", "#d9ecf2"]; 

var setvariations = [],
    setsize = [],
    setquad = [],
    setxoffset = [],
    setyoffset = [],
    setcolor1 = [],
    setcolor2 = [];


function setup() {
    createCanvas(600,600);
    angleMode(DEGREES);

};

function draw() {

    setvariations = [],
        setsize = [],
        setquad = [],
        setxoffset = [],
        setyoffset = [],
        setcolor1 = [],
        setcolor2 = [];

    background(255, 100);
    // set pattern repeat density
    density = int(random(2, 8));
    shapes = int(random(5, 10));


    for (let i = 0; i < shapes; i++) {

        setvariations.push(int(random(1, 6)));
        setxoffset.push(random(0, width / density));
        setyoffset.push(random(0, width / density));
        setsize.push(i * 0.2 + 1);
        setquad.push(int(random(1, 8)));

        colors = ["#1aa6b7", "#ff414d", "#f56a79", "#ff9a76", "#d9ecf2"];
        c = random(colors);
        setcolor1.push(color(c));
        cindex = colors.indexOf(c);
        colors.splice(cindex, 1);
        setcolor2.push(color(random(colors)));
    }

    for (let i = -1; i <= density * 2 + 1; i++) {
        for (let j = -1; j <= density * (width/height) * 2 + 1; j++) {
            let factor = width / density,
                x = i * factor,
                y = j * factor;

            for (let n = 0; n < shapes; n++) {
                shape(factor, x + setxoffset[n], y + setyoffset[n], setvariations[n], setsize[n], setquad[n], setcolor1[n], setcolor2[n]);
            }
        }
    }

    frameRate(0);
}

function shape(factor, x, y, variation, size, quad, color1, color2) {

    for (var i = factor; i > 0; i--) {

        let fillcolor = lerpColor(color(color1), color(color2), i / factor);
        noStroke();
        fill(fillcolor);

        push();
        translate(x, y)
        rotate(quad * 45);

        if (variation == 1) {
            arc(0, 0, i / size, i / size, 0, size * 45);
        };

        if (variation == 2) {
            triangle(0, 0, i / size, 0, 0, i / size);
        };

        if (variation == 3) {
            square(0, 0, i / size, i / (size * 5), i / (size * 5), i / (size * 5), i / (size * 5));
        }

        if (variation == 4) {
            ellipse(0, 0, i / size, i / size);
        }

        if (variation == 5) {
            rect(0, 0, i / size, i / size / 2);
        }


        pop();

    };
}

Project – 05 – Wallpaper

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

function draw() {
	background(255,203,134);
//	background(0,24,91);

	// Repeat Confetti 
	for (var x = 20; x < width; x += 80){
		for (var y = 20; y < height; y += 185){
		push(); 
		translate(x,y); 
		confetti(x,y); 
		pop(); 
		}
	}	

	// Repeat Pumpkin 
	for (var x = 0; x < width - 100; x += 200){
		for (var y = 0; y < height - 100; y += 200){
		push(); 
		translate(x,y); 
		pumpkin(x,y); 
		pop(); 
		}
	}

	// Repeat Ghost 
	for (var x = 0; x < width - 200; x += 200){
		for (var y = 0; y < height - 200; y += 200){
		push(); 
		translate(x,y); 
		ghost(x,y); 
		pop(); 
		}
	}

}

 function pumpkin(a,b){
	// Pumpkin Stem 
	noStroke(); 
	fill(48,26,0); 
	triangle(95,25,105,25,100,60); 

	// Shadow Under Pumpkin
	fill(239,177,115); 
	ellipse(100,145,130,35); 
	// Pumpkin
	fill(243,132,4); 
	ellipse(66.5,100,50,100); 
	ellipse(100,100,55,100); 
	ellipse(133,100,50,100); 
	// Eyes 
	fill(0); 
	ellipse(73,90,12); 
	ellipse(126,90,12);  
	// Mouth 
	fill(0); 
	ellipse(100,120,20,30); 
	fill(243,132,4);
	ellipse(100,110,20,15);
	fill(243,132,4);
	rect(95,110,8,10);
	// Nose 
	fill(0);
	triangle(93,105,100,92,107,105);
}

function confetti(a,b){
	noStroke(); 
	// Yellow Circles 
	fill(255,251,203); 
	ellipse(0,0,25); 
} 

function ghost(a,b){
	fill(255,255,255)
	noStroke(); 
	// Body 
	ellipse(200,210,65,90); 
	ellipse(200,235,23,45); 
	ellipse(180,235,23,45); 
	ellipse(220,235,23,45);
	// Eyes  
	fill(0); 
	ellipse(185,205,5); 
	ellipse(215,205,5); 
	// Mouth 
	ellipse(200,210,7,4); 
	// Cheeks 
	fill(255,193,221); 
	ellipse(183,210,7,4); 
	ellipse(217,210,7,4); 
}

I was inspired by the fall season and Halloween festivities for this project.

Project 05 – Wallpaper

I really wanted to try to imitate some feeling of classical old wallpapers. I made sure to include the fleur-de-lis, as well as some of the colors and shapes from an old soccer team’s crest. I also wanted to capture some depth in the wallpaper, so there are some overlapping parts to begin to invoke that feeling.

sketchDownload
var x = 0
var y = 0

function setup() {
    createCanvas(600, 600);
    background(0,56,120);
}

function draw() {
  //because the overlapping is happing on the right hand side and bottom,
  //the loop is set up to overlap on the left hand side and top of the
  //previous groups
translate(600,600)
  for (let i = 0; i <= 7; i += 1) {
    push();
    for (let f = 0; f <= 7; f += 1) {
      groups();
      translate(-160,0);
    }
    pop();
    translate(0,-200);
  }
  noLoop();
}

function groups() {
  //assembling each of the functions in the proper order
  baseshape();
  patterning();
  sideshapes();
  fleur();
}

function baseshape() {
    //Background Diamond
      push();
        strokeWeight(4);
        stroke(253,204,80);
        fill(225,33,40);
          quad(0,-100,80,0,0,100,-80,0);
      pop();
}

function patterning() {
  //this creates the pattern of white specks within each large red diamond
  var g = 0;
    for (let i = 0; i <= 6; i += 1) {
        gunner(-60+g,0);
        g += 20
    }
  g -= 140;
    for (let i = 0; i <= 4; i += 1) {
        gunner(-40+g,-20);
        gunner(-40+g,20);
        g += 20
    }
  g -= 100;
    for (let i = 0; i <= 2; i += 1) {
        gunner(-20+g,-40);
        gunner(-20+g,40);
        gunner(-20+g,-60);
        gunner(-20+g,60);
        g += 20;
    }
  noLoop();
}

function gunner(x,y) {
  //creating the individal white dotted groups
push();
  noStroke();
  fill(255);
    circle(x-4,y,4);
    circle(x+4,y,4);
    circle(x,y-2,4);
    triangle(x,y+1,x+3,y+6,x-3,y+6);
pop();
}

function sideshapes() {
    //Horizontal Diamond
      push();
        strokeWeight(4);
        stroke(0,158,78);
        fill(225,33,40);
          quad(0,60,30,100,0,140,-30,100);
      pop();
    //Side Diamond
      push();
        strokeWeight(4);
        stroke(0,158,78);
        fill(225,33,40);
          quad(30,0,80,-70,130,0,80,70);
      pop();
}

function fleur() {
  //the fleur de lis coordinates
      push();
      translate(80,0);
        strokeWeight(1.5);
        stroke(255);
        fill(253,204,80);
          beginShape();
              curveVertex (0,-60);
              curveVertex (0,-60);
              curveVertex (15,-43);
              curveVertex (22,-25)
              curveVertex (10,5);
              curveVertex (8,25);
              curveVertex (25,60);
              curveVertex (25,60);
              curveVertex (15,60);
              curveVertex (10,50);
              curveVertex (10,50);
              curveVertex (0,60);
              curveVertex (0,60);
          endShape();
          beginShape();
              curveVertex (0,-60);
              curveVertex (0,-60);
              curveVertex (-15,-43);
              curveVertex (-22,-25)
              curveVertex (-10,5);
              curveVertex (-8,25);
              curveVertex (-25,60);
              curveVertex (-25,60);
              curveVertex (-15,60);
              curveVertex (-10,50);
              curveVertex (-10,50);
              curveVertex (0,60);
              curveVertex (0,60);
          endShape();
          beginShape();
              curveVertex (40,20);
              curveVertex (40,20);
              curveVertex (35,27);
              curveVertex (32,28);
              curveVertex (28,25);
              curveVertex (23,10);
              curveVertex (30,-8)
              curveVertex (40,-15);
              curveVertex (44,-11);
              curveVertex (50,-18);
              curveVertex (46,-24);
              curveVertex (40,-26);
              curveVertex (30,-22);
              curveVertex (20,-10);
              curveVertex (14,10);
              curveVertex (24,30);
              curveVertex (35,35);
              curveVertex (45,32);
              curveVertex (45,27);
              curveVertex (40,20);
              curveVertex (40,20);
          endShape();
          beginShape();
              curveVertex (-40,20);
              curveVertex (-40,20);
              curveVertex (-35,27);
              curveVertex (-32,28);
              curveVertex (-28,25);
              curveVertex (-23,10);
              curveVertex (-30,-8)
              curveVertex (-40,-15);
              curveVertex (-44,-11);
              curveVertex (-50,-18);
              curveVertex (-46,-24);
              curveVertex (-40,-26);
              curveVertex (-30,-22);
              curveVertex (-20,-10);
              curveVertex (-14,10);
              curveVertex (-24,30);
              curveVertex (-35,35);
              curveVertex (-45,32);
              curveVertex (-45,27);
              curveVertex (-40,20);
              curveVertex (-40,20);
          endShape();
          ellipse(0,15,70,15);
    pop();
}
The crest used, specifically for the colors and white specks in the background
Quick sketch from before I began.

Project-05-Wallpaper

sketch

function setup() {
    createCanvas(600, 600);
    background(0);
}

function draw() {
  push();// background
    stroke(100);
    for (var x = 0; x <= 600; x+=50){
      line(x,0,x,600)
    }
  pop();

  push(); // 1,2 domino
    for (var x = 50; x <= 520; x+=200){
      for(var y = 50; y <= 520; y+=200)
      domino(x,y);
    }
  pop();
  // 3,5 domino
    for (var x = 150; x <= 520; x+=200){
      for(var y = 150; y <= 520; y+=200)
      domino2(x,y);
    }
function domino(x,y){
    push();
      noStroke()
      translate(x,y);
      fill(255)
        quad(0,10,20,40,80,20,60,-10) // white face
      fill(200)
        quad(0,10,0,20,20,50,20,40) // light grey face
      fill(100)
        quad(20,40,20,50,80,30,80,20) // dark grey face
      stroke(0)
      strokeWeight(3)
        line(50,30,30,0) // middle line
        fill(0)
          circle(25,20,5) // left dot
          circle(45,3,5) // right dots
          circle(65,15,5)
    pop();
  } //1,2 domino
function domino2(x,y){
    push();
      noStroke()
      translate(x,y);
      fill(255)
        quad(0,10,20,40,80,20,60,-10) // white face
      fill(200)
        quad(0,10,0,20,20,50,20,40) // light grey face
      fill(100)
        quad(20,40,20,50,80,30,80,20) // dark grey face
      stroke(0)
      strokeWeight(3)
        line(50,30,30,0) // middle line
        fill(0)
          circle(25,20,5)//left dots
          circle(13,13,5)
          circle(37,27,5)
          circle(55,10,5)//right dots
          circle(44,3,5)
          circle(67,17,5)
          circle(55,22,5)
          circle(57,-2,5)
    pop();
    } // 3,5 domino
    noLoop();
}

I was looking into how wallpapers were a consistent pattern of repeating actions and reactions. Dominos are an immediate thought when asked about chain reactions so I created dominos in an isometric view with 2 different dominos. Each row and column alternate to create a 3D marking effect. The end product is a noir themed domino wallpaper.

Floral Wallpaper

sketch-wallpaper-sanikaDownload

For my wallpaper assignment, I created a floral wallpaper pattern, using geometric shapes.

https://editor.p5js.org/ssahasra/sketches/9Td-E7s4z

function setup() {
// Create the canvas
createCanvas(1200, 1200);
background(244,235,217);
}
function draw() {
background(244,235,217);
for (var y = 50; y < height; y += 200) {
for (var x = (y/2)-y; x < width; x += 180) {
flower(x+(width/10),y);
}}}
function flower(x,y) {
push();
translate(x,y);
noStroke();
fill(201,157,163);
ellipse(0,0,20,20);
for (let i = 0; i < 20; i ++) {
fill(72,61,63,70);
rect(0, 30, 70, 30);
fill(201,157,163);
ellipse(70, 70, 10, 10);
fill(72,61,63,70);
ellipse(15, 15, 10, 10);
rotate(PI/5);
}
pop();

href=”https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/10/sketch-wallpaper-sanika.js”>sketch-wallpaper-sanikaDownload

Project-05: Hexagrams

The creation of optical illusions has always intrigued me. Hexagrams have always been a favorite geometric pattern of my and most importantly, the ability to create depth by underlaying and overlaying different portions. This ended up being more difficult than I had hoped as with p5js, drawings always layer based upon where in the function each element is created. For this reason, I had to separate one side of the hexagram into two pieces to actually create the illusion I wanted which resulted in a lot of calculations and math.

sketchDownload
//side length of the hexagon that a hexagram is based upon
var s = 50
function setup() {
    createCanvas(3.5*3*s, 12*s*sqrt(3)/2);
    background(150);
    noLoop();
}

function draw() {
    //translates the center of the canvas to the center of the first hexagram
    translate(3/2*s, 2*s*sqrt(3)/2);
    //loop creates the gradient effect of the background
    for (var i = 0; i<width/10; i++) {
        for (var j = 0; j<height/10; j++) {
            push();
            //translates to start at the top left corner of the canvas
            translate(-3/2*s, -2*s*sqrt(3)/2);
            //varies the color based on the variables of the loop
            fill(255/height*j*10+50, 255/height*j,255/height*j*10+50, 255);
            noStroke();
            //draws squares based upon the variables of the loop
            rect(i*10, j*10, 10, 10);
            pop();
        }
    }
    //loops creates the repeating pattern of hexagrams
    for(var i = 0; i<width/(3*s); i++) {
        for (var j = 0; j<height/(4*s*sqrt(3)/2); j++) {
            push();
            //translates based upon variables to draw the grid of hexagrams
            translate(150*i, 4*s*sqrt(3)/2*j);
            //rotates the hexagrams to create the hourglass patterns
            rotate(radians(60*i));
            rotate(radians(60*j));
            //draws the hexagram
            opticHexagram();
            pop();
        }
    }
}

//I acknowledge code that is unused should be deleted, however the following
//block comment is necessary to show the math done to create the visual.
//Each function is a building block to the final opticHexagram
/*function hexagon() {
    line(-s/2, -s*sqrt(3)/2, s/2, -s*sqrt(3)/2)
    line(s/2, -s*sqrt(3)/2, s, 0)
    line(s, 0, s/2, s*sqrt(3)/2)
    line(s/2, s*sqrt(3)/2, -s/2, s*sqrt(3)/2)
    line(-s/2, s*sqrt(3)/2, -s, 0)
    line(-s, 0, -s/2, -s*sqrt(3)/2)
}

function spikes() {
    triangle(-s/2, -s*sqrt(3)/2, s/2, -s*sqrt(3)/2, 0, -2*s*sqrt(3)/2);
    triangle(s/2, -s*sqrt(3)/2, s, 0, 3/2 * s, -s*sqrt(3)/2);
    triangle(s, 0, s/2, s*sqrt(3)/2, 3/2 * s, s*sqrt(3)/2);
    triangle(s/2, s*sqrt(3)/2, -s/2, s*sqrt(3)/2, 0, 2*s*sqrt(3)/2);
    triangle(-s/2, s*sqrt(3)/2, -s, 0, -3/2 * s, s*sqrt(3)/2);
    triangle(-s, 0, -s/2, -s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2);
}

function hexagram() {
    noFill();
    triangle(0, -2*s*sqrt(3)/2, 3/2 * s, s*sqrt(3)/2, -3/2 * s, s*sqrt(3)/2);
    triangle(3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2)
    line(0, -2*s*sqrt(3)/2, 3/2 *s, s*sqrt(3)/2);
    line(3/2 * s, s*sqrt(3)/2, -3/2 * s, s*sqrt(3)/2);
    line(-3/2 * s, s*sqrt(3)/2, 0, -2*s*sqrt(3)/2);
    line(3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2);
    line(0, 2*s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2);
    line(-3/2 * s, -s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2);
}
*/

//creates a hexagram with interlacing sides to create an optical illusion
function opticHexagram() {
  push();
  noStroke();
  //half of the white side of the lighter triangle
  //this needed to be broken into two pieces in order for the optical illusion
  //to work
  fill(255);
  quad(0, 2*s*sqrt(3)/2,0, .8*2*s*sqrt(3)/2, .8*-3/4 * s, .8*s*sqrt(3)/4,
      -3/4*s, s*sqrt(3)/4);
  //black side of the dark triangle
  fill(0);
  quad(.8*-3/2*s, .8*s*sqrt(3)/2 , -3/2*s, s*sqrt(3)/2, 3/2*s, s*sqrt(3)/2,
      .8*3/2*s, .8*s*sqrt(3)/2)
  //medium side of the lighter triangle
  fill(255-50);
  quad(.8*3/2 * s, .8*-s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2,0,
      .8*2*s*sqrt(3)/2)
  //medium side of the darker triangle
  fill(0+50);
  quad(0, -2*s*sqrt(3)/2, 0, .8*-2*s*sqrt(3)/2,.8*3/2*s, .8*s*sqrt(3)/2 ,
      3/2*s, s*sqrt(3)/2);
  //darkest side of the lighter triangle
  fill(255-100);
  quad(-3/2 * s, -s*sqrt(3)/2, .8*-3/2 * s, .8*-s*sqrt(3)/2,.8*3/2 * s,
      .8*-s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2);
  //lightest side of the darker triangle
  fill(0+100);
  quad(0, -2*s*sqrt(3)/2, 0, .8*-2*s*sqrt(3)/2,.8*-3/2*s, .8*s*sqrt(3)/2 ,
      -3/2*s, s*sqrt(3)/2);
  //other half of the white side of the lighter triangle
  //completes the illusion
  fill(255);
  quad(.8*-3/2 * s, .8*-s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2, -3/4 * s,
      s*sqrt(3)/4, .8*-3/4*s, .8*s*sqrt(3)/4)
  pop();

}

Project 5: Wallpaper

For this project, I took inspiration from a bag I got visiting Guatemala. I wear it often, and the pattern reminds me of the friends I made while I was there. I first designed the shapes using an HTML image map generator and then used for loops to repeat and inlay the patterns. I had to use a lot of trial and error and transformation to get the rows to interact the way I wanted them to, but overall I am really happy with how the design turned out.

My purse from Guatemala which inspired my wallpaper design
Jessa’s Wallpaper
function setup() {
    createCanvas(600, 600);
    background(76, 171, 223);	//set background color to light blue
    
}

function draw() {
	noStroke();
	fill(255, 200, 102);		//set fill color to yellow
	rect(0,460,width,50);	//draw yellow rectangle, to go under row of yellow blobs 
	
	fill(255, 53, 73);		//set fill color to red
	rect(0,272,width,50);	//draw red rectangle, to go under row of red blobs

	fill(231, 102, 67);		//set fill color to orange
	rect(0,90,width,50);	//draw orange rectangle, to go under row of orange blobs
	
	translate(-275,0);		//move origin to the left, this ensures all blobs will start on the left of the canvas since they were initially drawn in the center from the reference coordinates
	push();	//1
	push();	//2
	push();	//3
	push();	//4
	push();	//5
	push();	//6
	push();	//7

	//draw row of orange blobs
	//'Right' moves the original blob to the right to be redrawn within the loop
	translate(-210, -186);	//move canvas origin to the left and up, because this row will go partially off canvas
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		noFill();
		strokeWeight(25);
		stroke(231, 102, 67);	//color orange
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15));
		noStroke();
		fill(231, 102, 67);
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();

	}
	//draw the row of white swirls over top of the orange blob row
	//'Right' moves the original swirl to the right to be redrawn within the loop
	pop();	//1
	translate(-520, -175);	//translate canvas origin such that the row of swirls will be on top of the orange blob row, left and up

	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(255);	//color white
		strokeWeight(2);
		fill(255);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223)
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142)
		endShape();
		noFill();
		strokeWeight(31);
		stroke(255);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));		
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}

	//'Right' moves the original blob to the right to be redrawn within the loop
	//draw the row of red blobs
	pop();	//2
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		noFill();
		strokeWeight(25);
		stroke(255, 53, 73);
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15));
		noStroke();
		fill(255, 53, 73);	//color red
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();	
	}
	//'Right' moves the original swirl to the right to be redrawn within the loop
	//draw the row of black swirls on top of the red blob row
	pop();	//3
	translate(-315, 10);
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(12,6,30);
		strokeWeight(2);
		fill(12,6,30);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223)
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142);
		endShape();
		noFill();
		strokeWeight(31);
		stroke(12,6,30);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));		
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}
	//'Right' moves the original blob to the right to be redrawn within the loop
	//draw the row of yellow blobs
	pop();	//4
	translate(-100, 187);	//move the canvas origin to the left and down to this row will be below the red/black row
	
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);		
		noFill();
		strokeWeight(25);
		stroke(255, 200, 102);
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15))
		noStroke();
		fill(255, 200, 102);		
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();

	}
	//'Right' moves the original swirl to the right to be redrawn within the loop
	//draw row of pink swirls
	pop();	//5
	translate(-412, 195);	//move the canvas origin left and down to lay the pink swirl row over top the yellow blob row

	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(233, 166, 197);
		strokeWeight(2);
		fill(233, 166, 197);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223);
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142);
		endShape();
		noFill();
		strokeWeight(31);
		stroke(233, 166, 197);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));		
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}
	//'Right' moves the original blob to the right to be redrawn within the loop
	//draw row of green blobs
	pop();	//6
	translate(-50, 370);
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		noFill();
		strokeWeight(25);
		stroke(79, 132, 108);
		arc(165,245,78, 78, TWO_PI, HALF_PI);
		arc(318,245,78, 78, QUARTER_PI, PI-radians(15));
		noStroke();
		fill(79, 132, 108);
		
		circle(161,183,85);
		circle(190,118,58);
		beginShape();
		vertex(122,165);
		vertex(164,105);
		vertex(219,115);
		vertex(201,199);
		endShape();
		beginShape();
		vertex(198,193);
		vertex(188,272);
		vertex(305,272);
		vertex(215,104);
		endShape();	
	}
	//'Right' moves the original swirl to the right to be redrawn within the loop
	//draw row of blue swirls over top of the green blob row
	pop();	//7	
	translate(-365, 370);	//move canvas origin left and down so the swirls are drawn on top of the previous blob row
	for (var Right = 154; Right < width; Right += .01) {
		translate(Right, 0);
		stroke(37, 61, 173);
		strokeWeight(2);
		fill(37, 61, 173);
		circle(359,141,43);
		noStroke();
		beginShape();
		vertex(370,133);
		vertex(512,396);
		vertex(491,407);
		vertex(351,142);
		endShape();
		beginShape();
		vertex(398,204);
		vertex(361,267);
		vertex(435,266);
		endShape();
		beginShape();
		vertex(309,170);
		vertex(383,170);
		vertex(340,129);
		endShape();
		noLoop();
		beginShape();
		vertex(431,287);
		vertex(513,288);
		vertex(468,355);
		endShape();
		noLoop();
		beginShape();
		vertex(397,187);
		vertex(307,326);
		vertex(329,362);
		vertex(415,223)
		endShape();
		beginShape();
		vertex(379,131);
		vertex(463,288);
		vertex(441,290);
		vertex(357,142)
		endShape();
		noFill();
		strokeWeight(31);
		stroke(37, 61, 173);
		arc(355,187,70, 52, PI, TWO_PI-radians(60));
		arc(527, 375, 55,80, radians(20), radians(130));
		strokeWeight(21);
		arc(508,345,50, 110, radians(100), radians(242));
		arc(362,204,52, 75, radians(-90), radians(45));
		arc(402, 293, 75, 68, radians(-162), radians(-25));
		strokeWeight(20);
		line(465,310,519,397);
		arc(545,307, 95, 217, radians(95), radians(187));
		strokeWeight(22);
		arc(475, 260, 75, 68, radians(15), radians(160));
	}

noLoop()
}

Project 05 – Wallpaper

For my wallpaper project, I chose to draw a pattern of a hummingbird and a little brown bird. I also included some small flowers as accent designs in between the birds. I had the most difficulty trying to figure out the start and end angles of all the semicircles for the birds’ bodies and wings.

Maggie – Wallpaper
//Maggie Ma
//Section D
var birdWidth = 148; //spacing columns
var birdHeight = 111; //spacing rows

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

function draw() {
	background(246,247,197);

	//first column
	for(var y=-50; y<=height-50; y+=1.25*birdHeight) {
		for(var x=-50; x<=width-50; x+=1.25*birdWidth){
			hummingbird(x,y);
		}
	}

	//second column
	for(var y=25; y<=height; y+=1.25* birdHeight) {
		for(var x=30;x<=width-50;x+=1.25* birdWidth) {
			brownbird(x,y);
		}
	}
}

function hummingbird(x,y) {
	push();
	translate(x,y);
	noStroke();
	//beak
	fill(0);
	triangle(99,56, 99,58, 132,56);
	//tail
	fill(125,173,141);
	quad(24,103,26,106,50,90,45,87);
	//body
	fill(125,173,141);
	arc(65,64,69,67, radians(320),radians(130),CHORD);
	fill(246,247,197);
	rect(72.112,31.473,33.75,25.133);
	//light wing back
	fill(167,195,172);
	arc(64,52, 29,31,radians(270),radians(90));
	//head
	fill(125,173,141);
	ellipse(87,58,23,23);
	//wing light
	fill(167,195,172);
	arc(57,72, 44,46,radians(320),radians(130),CHORD);
	//wing dark
	fill(125,173,141);
	arc(59,70,42,41,radians(320),radians(130),CHORD);
	arc(52,60,29,31,radians(25),radians(205), CHORD);
	//eye
	fill(0);
	stroke(255);
	circle(93,58,2.5);
	//decor
	noStroke();
	fill(255,183,0);
	circle(71,0,6);
	circle(71,4,6);
	circle(76,0,6);
	circle(76,4,6);
	pop();
}

function brownbird(x,y) {
	push();
	translate(x,y);
	noStroke();
	//tail
	fill(210,118,53);
	quad(35,80,51,71,53,75,37,84);
	//beak
	fill(0);
	triangle(104,39,104,42,114,41);
	//feet
	fill(114,74,26);
	rect(79,79,2.3,8.5);
	rect(85,75,2.3,13);
	//body
	fill(220,230,229);
	arc(71,46,71,68,radians(320),radians(130),CHORD);
	fill(246,247,197);
	rect(75.783,11,39.484,29.403);
	//head
	fill(114,74,26);
	arc(91,45,31,34,PI,0,CHORD);
	//wing dark
	triangle(46,70,64,52,77,70);
	circle(77,57,26);
	//wing light
	fill(210,118,53);
	triangle(47,65,71,65,62,51);
	ellipse(72,55,22,19);
	fill(246,247,197);
	quad(31,72,31.196,33.844,76,43,46,72);
	//eye light
	fill(210,118,53);
	ellipse(100,40,7,5.85);
	//eye black
	fill(0);
	ellipse(102,40,2.94);
	//decor
	noStroke();
	fill(62,118,99);
	circle(74,0,6);
	circle(74,4,6);
	circle(79,0,6);
	circle(79,4,6);
	pop();
}

My original bird drawings in Illustrator:

Project-05-Wallpaper of Koalas

I personally have a preference for pastel colors because I think when you use patterns/repeating patterns, it is visually “easier on the eyes.” I wanted to use a light green background, and it inspired me to make a project about nature and animals. I wanted to challenge myself in terms of producing the image that would get repeated, so I chose a koala. I made the tree trunk pretty long because I wanted the overall wallpaper to appear as if there were koalas sitting on every branch up and down the tree. It was challenging to layer shapes to create the koala itself because its legs were in a specific position which forced me to use a lot of curveVertex in order to get the shape just right.

sketch
//Annie Kim
//andrewID:anniekim@andrew.cmu.edu
//anniekim-05-Project
//SectionB

function setup() {
    createCanvas(525, 500);
    background(204, 242, 207); //light green background
    noLoop();
}

function draw() {
	background(204, 242, 207); //light green background
    noStroke();
    //for loop to repeat the koalas everywhere
    for (var x = 0; x < width; x += 88.3) {
    	for (var y = 0; y < height; y += 96) {
    		push();
    		translate(x, y);
    		drawKoala();
    		pop();
    	}
    }

} //function draw end

function drawKoala() {
	//branch that koala is sitting on 
    fill(80, 55, 41); //brown color
    stroke(80, 55, 41);
    beginShape();
    curveVertex(.6, 83);
    curveVertex(.6, 83);
    curveVertex(25, 84);
    curveVertex(60, 85); //right endpoint of branch
    curveVertex(65, 88);
    curveVertex(58, 88);
    curveVertex(23, 94);
    curveVertex(.6, 96);
    curveVertex(.6, 96);
    endShape();

    fill(137, 189, 161); //leaf on branch
    stroke(67, 109, 91); //green color
    beginShape();
    curveVertex(65, 88);
    curveVertex(65, 88);
    curveVertex(71, 89);
    curveVertex(73, 90);
    curveVertex(77, 96);
    curveVertex(73, 95);
    curveVertex(71, 94);
    curveVertex(69, 93);
    curveVertex(68, 92);
    curveVertex(67, 91);
    curveVertex(65, 88);
    curveVertex(65, 88);
    endShape();

    stroke(57, 99, 71); //lines on leaf, dark green color
    line(65, 88, 77, 96); 
    line(68, 92, 67, 90);
    line(67, 90, 71, 89);
    line(70, 91, 73, 91);
    line(70, 91, 72, 94.5);
    line(72, 92, 75, 93);

    fill(74, 49, 31); //vertical base of tree on left
    stroke(74, 49, 31);
    rect(1, 0, 10, 90); //left side of function
    rect(85, 0, 5, 95); //right side of function

    stroke(44, 19, 11); //lines of tree base
    line(3, 2, 3, 15);
    line(7, 4, 7, 31);
    line(1.5, 38, 1.5, 68);
    line(0, 75, 0, 115);


    //koala base body
    fill(138);
    stroke(0);
    circle(6, 80, 10); //tail
    fill(138);
    stroke(0);
    beginShape(); //connecting body points
    curveVertex(20, 47);
    curveVertex(20, 47);
    curveVertex(18, 48);
    curveVertex(15, 50);
    curveVertex(10, 53);
    curveVertex(14, 56);
    curveVertex(12, 59);
    curveVertex(9, 63);
    curveVertex(7, 68);
    curveVertex(5.5, 72);
    curveVertex(5.3, 77);
    curveVertex(5.4, 81);
    curveVertex(5.8, 83);
    curveVertex(6.2, 85);
    curveVertex(6.5, 86);
    curveVertex(6.5, 86);

    curveVertex(10, 89);
    curveVertex(14, 90);
    curveVertex(17, 90);
    curveVertex(20, 89);

    curveVertex(24, 90);
    curveVertex(27, 89);

    curveVertex(31, 90);
    curveVertex(33, 90);

    curveVertex(36, 89);
    curveVertex(38, 90);
    curveVertex(40, 90);
    curveVertex(43, 89);

    curveVertex(43, 86);

    curveVertex(41, 83);
    curveVertex(43, 70);
    curveVertex(43, 60);
    curveVertex(43, 48);
    curveVertex(43, 48);
    endShape();

    noFill(); //hind leg outline
    beginShape();
    curveVertex(13, 75);
    curveVertex(13, 75);
    curveVertex(17, 74);
    curveVertex(21, 76);
    curveVertex(22, 79);
    curveVertex(22, 82);
    curveVertex(21, 84);
    curveVertex(25, 86);
    curveVertex(25, 87);
    curveVertex(26, 89);
    curveVertex(26, 89);
    endShape();

    beginShape(); //part of the right front leg outline
    curveVertex(22, 75);
    curveVertex(22, 75);
    curveVertex(23, 79);
    curveVertex(25, 83);
    curveVertex(26, 85);
    curveVertex(26, 87);
    curveVertex(26, 87);
    endShape();

    beginShape(); //line separating front two legs
    curveVertex(31, 70);
    curveVertex(31, 70);
    curveVertex(33, 78);
    curveVertex(33, 81);
    curveVertex(33, 83);
    curveVertex(33, 85);
    curveVertex(35, 87);
    curveVertex(36, 89);
    curveVertex(36, 89);
    endShape();

    //light grey stomach patch of fur
    fill(210);
    noStroke();
    triangle(30, 65, 33, 76, 43, 60);
    stroke(0);
    beginShape();
    curveVertex(33, 75);
    curveVertex(33, 75);
    curveVertex(35, 74);
    curveVertex(37, 72);
    curveVertex(39, 75);
    curveVertex(40, 71);
    curveVertex(42, 74);
    curveVertex(42, 70);
    curveVertex(45, 70);
    curveVertex(42, 66);
    curveVertex(44, 67);
    curveVertex(43, 60);
    curveVertex(43, 60);
    endShape();

	// koala base head black outline
	stroke(0);
	strokeWeight(1);
	ellipse(28, 51, 40, 26);
	ellipse(28, 45, 41, 36);
	circle(10, 36, 19);
	circle(48, 36, 19);
	noStroke();
	// koala base head no outline
	fill(140);
	ellipse(28, 51, 39, 25);
	ellipse(28, 45, 40, 35);
	circle(10, 36, 18); //left ear
	circle(48, 36, 18); //right ear

    //hair patch at top of forehead
    stroke(0);
    strokeWeight(0.5);
    beginShape();
    curveVertex(23, 37);
    curveVertex(23, 37);
    curveVertex(24, 33);
    curveVertex(26, 36);
    curveVertex(28, 31);
    curveVertex(30, 36);
    curveVertex(32, 33);
    curveVertex(33, 37);
    curveVertex(33, 37);
    endShape();


	//koala face parts below

	//light color patch under nose and mouth
	noStroke();
    fill(210);
	ellipse(28, 56, 10, 12);
	//light color part of ears
	circle(10, 37, 10);
	circle(48, 37, 10);
	//covering part of the ears to make arc shape
	fill(140);
	circle(15, 40, 11);
	circle(43, 40, 11);

	//nose
	fill(30);
	ellipse(28, 54, 9, 9.5);
	
	stroke(30);
    strokeWeight(1);
	arc(28, 59, 6, 3, 0, PI, CHORD);

	//eyes
	fill(0);
	circle(20, 47, 4);
	circle(36, 47, 4);

	fill(255); // white shine of eyes
	noStroke();
	circle(20.5, 46, 1.5);
	circle(36.5, 46, 1.5);

	//leaf in mouth
	//stem
	stroke(43, 76, 45);
	noFill();
	arc(34, 61, 30, 5, PI, 0, OPEN);

	//petals of flower
	fill(239, 217, 221);
	stroke(255, 180, 190);
	circle(48, 56, 8);
	circle(45, 60, 8);
	circle(48, 63, 8);
	circle(53, 61, 8);
	circle(52, 57, 8);
    fill(255); //white center part of flower
    circle(49, 59, 7);
}
This was my thought process/drafting process before I started translating it into code.

Project-05 Wallpaper

For this project I did several sketches before I started to draft the design & code it. I was particularly inspired by the idea of the rising sun & linear sunbeams radiating from it.

I thought the contrast between the more organic circle and the rigorous linework created an interesting composition.

The final draft before I went into to digital process. A simple tiling method turns the design into a undulating diamond grid.

-Robert

sketch
//Robert Rice
//Section C
//rdrice@andrew.cmu.edu
//Assignment-05-A


size = 100   //the side length of each hexagon

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

function draw() {
    background(38, 0, 77);

    for(let w = 0; w <= width/(size*0.75); w = w+1) {
        for(let v = 0; v <= height/(size); v = v+1) {
            tile(w*0.375*size, v*0.5*size, size);
            print(w, v);
        }
    }
    noLoop();
}

function tile(x, y, s) {
    push();
    
    translate(x, y);
    stroke(204, 170, 0);
    strokeWeight(1);

    line(x + 0.375*s, y + 0.5*s, x, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.188*s, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.563*s, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.750*s, y);

    line(x + 0.375*s, y + 0.5*s, x, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.188*s, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.563*s, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.750*s, y + s);

    strokeWeight(1);
    stroke(255);
    line(x, y + 0.575*s, x + 0.75*s, y + 0.575*s);

    noStroke();
    fill(255, 77, 77);
    circle(x + 0.375*s, y + 0.5*s, 0.4*s);

    strokeWeight(1);
    stroke(255);
    line(x, y + 0.625*s, x + 0.75*s, y + 0.625*s);
    
    pop();
}