SectionB – Page 19 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-05-Wallpaper

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.

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()
}

LookingOutwards-05

The project is called “Ghost Mantis” by Dmytro Teslenko. Immediately I was drawn to this work due to the attention to detail. I couldn’t believe that it was computer-generated because it looked like an actual praying mantis was being observed under a microscope. I specifically admired the little textured bumps and tiny hairs on the body of the praying mantis. I think it is interesting because it shows just how much zoomed-in attention the artist put into the work. Dmytro Teslenko used 3D rendering to create the image, but did not specify exactly what program helped generate the work. He said that his process to create the work consisted of modelling, sculpting, and then texturing. Based on Dmytro Teslenko’s previous works, it is obvious how his artistic sensibilities were manifested in the final form. His previous works consist of detailed renderings of animals, insects, etc. He tends to focus closely on the face and eyes of the organism he makes works of, and his “Ghost Mantis” piece follows suit.

https://www.artstation.com/artwork/b2rYv

This is “Ghost Mantis” by Dmytro Teslenko.

This is how some of Teslenko’s previous works. Based on these previous works, I could see how Teslenko manifested some of his artistic interests in animals and other organisms into the work that I discussed in this blog.

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.

Looking Outwards 05: 3D Computer Graphics

Mike Winkelmann, otherwise known as Beeple, is a 3D artist who has created videos and images everyday nonstop for the past few years. All his renders are eye captivating and realistic in detail. There is also a wide variety of designs he does, some political, some gruesome, and some tame. He has done collaborations with major brands such as LV. He uses a combination of different programs to fuel his work. He works in both 2D and 3D, but the way each image or model is generated is through 2D calculations of meshes. By deciding how detailed, smooth, or consistent his models will be, the properties of each mesh have to be specific. Beeple also chooses specific angles or frames when rendering his work which shows an intention behind how he wants to depict certain aspects or highlight specific objects. In modeling programs, meshes and curves and the base foundation of a surface of an object. By using that to his advantage, he is able to manipulate, shadow, scale, and proportions to have models work in his favor. In addition, there is the artistic idea of having a foreground, midground, and background.

LO 5 – 3D Computer Graphics

“So Long, Farewell” by Ferdinand Vazquez

“So Long, Farewell” is a 3-dimensional graphic piece by Ferdinand Vazquez, Lighting Generalist at Digital Domain.

Described as a “still life rendering using Maya and Mental Ray”, this project depicts a realistic bird’s-eye view of assumably a dining table and a variety of different accessories. By the multiple sketches that the artist presents at the bottom of the project, Vazquez shows the process that he followed and the applications that he used to create such piece. These applications include Autodesk Maya (Maya), a 3-dimensional computer animation software with powerful modeling, rendering, simulation, texturing, and tools, as well as Mental Ray, a production-quality ray tracing application for 3-dimensional rendering.

As portrayed in the piece, Vazquez’s artistic abilities are completely evident, from the appropriate shading and lighting to the intricate details of every aspect of the picture. All of these qualities contribute to the graphic piece’s overall success in achieving realism and imitation of a real-life perspective.

Project 5-Wallpaper

I was inspired by the floral wallpapers that were in the archive and I decided to go with something similar to that. I went with a daisy theme and added vines, leaves, and dots in the background to add a consistent pattern.

wallpaper Download

var x=50;
var y=50;
var angle=0;

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

function draw() {
    background(153, 205, 171);
    noStroke();
    //dot background
    for (var i=0; i<=600; i+=25){
        for (var n=0; n<=600; n+=25){
            fill(192, 213, 199);
            circle(i, n, 7);
        }
    }
    //vines
    for (var x=0; x<=600; x+=150){
        push();
        translate(x, 0);
        vines();
        pop();
    }
    //leaves
    for (var x=0; x<=600; x+=300){
        for (var y=0; y<=1500; y+=150){
            push();
            translate(x, y);
            leaves();
            angle+=180;
            pop();
        }
    }
    for (var x=150; x<=600; x+=300){
        for (var y=-50; y<=1500; y+=150){
            push();
            translate(x, y);
            leaves();
            angle+=180;
            pop();
        }
    }
    //daisies
    for (var x=50; x<=750; x+=300){
        for (var y=50; y<=1500; y+=150){
            push();
            daisy(x, y);
            pop();
        }
    }
    for (var x=200; x<=600; x+=300){
        for (var y=0; y<=1500; y+=150){
            push();
            daisy(x, y);
            pop();
        }
    }
    noLoop();
}

function daisy(x, y) {
    push();
    translate(x, y);
    scale(0.9);
    for (var angle=0; angle<360; angle+=15){ //petals
        stroke(210);
        strokeWeight(0.75);
        fill(241, 248, 243,);
        bezier(0, 0, 100, 10, 50, 90, 0, 0);
        rotate(radians(angle));
    }
    fill(233, 232, 51);
    circle(0, 0, 15); //center
}

function vines() {
    stroke(25, 84, 46);
    strokeWeight(12);
    noFill();
    for(var y=0; y<height; y=y+1){
        point(60-25*sin(radians(1.5*y)), y);
    }
}

function leaves() {
    push();
    scale(0.5);
    translate(100, 125);
    rotate(radians(angle+110));
    stroke(25, 84, 46, 150);
    strokeWeight(0.75);
    fill(149, 214, 33);
    bezier(1,0,-47,-80,-47,-120,0,-175);
    bezier(0,-175,47,-120,47,-80,-1,0);
    line(1, 0, 0, -175);
    pop();
}

During this project I offset the daisies to add some interest. I also had to work with bezier curves, which was difficult because I haven’t done that before. I used bezier curves with the petals and leaves. I initially wanted to use ellipses, but I saw someone make a flower in p5.js online using bezier curves, but with pointed tips. I realized that you can have the two anchor points in the same place and make a better looking flower petal.

I used the pointed tips method with two bezier curves next to each other to make the leaves and then played with the sizes of everything using scale(); until I was happy.

Looking Outwards 05: 3D Computer Graphics

I decided to look at “Portrait of Hope” by Leticia Gillett. I admire it because the skin looks so realistic yet stylized at the same time. It can be hard to portray mature skin because there are more details to worry about but Gillett did a great job. I don’t know a lot about the algorithms that generated and/or rendered the work but she works at Walt Disney animation and mentions LookDev. Gillett’s piece resembles a lot of the animation styles you see in modern Disney movies, and it is meant to be a portrait of her personal hero Jane Goodall. You can tell that she really admires the person she’s portraying with the soft light and dignified appearance of the person.

Looking Outwards – 05 – 3D Computer Graphics

Jennifer Steinkamp creates digital animations to explore the ideas of space, perception, and motion. Her piece called “Womb” was featured at Talley Dunn Gallery in August 23, 2019.

“Womb” – Talley Dunn Gallery – August 23, 2019

“Womb” joins art, design, and spatial experience into one. Viewers can walk up to an interactive wall of fruit. The fruits follow the movement of the people and continues to move on its own even after people stop moving. I admire how eccentric and lively the piece is. The vibrant colors, coupled with movement and wind sound effects, results in a transformative experience. Steinkamp uses 3D modeling software and Photoshop in order to generate “Womb”. She uses careful calibration to the dimensions of the physical space. All of her work is centered around femininity. Her artistic sensibilities manifest in “Womb” because the piece is all about taking up space. Similar to a womb that takes up space within the body in order to generate life, her artpiece generates transformation, movement, and life as well.

Project-05 Wallpaper

wallpaper

//Rishi Karthikeyan 
//rkarthik
//section B 
//HW 5 Project Floral Wallpaper  

var y = 0;
var x = 0;

function setup() {
    createCanvas(600, 600); 
    background(16, 18, 43);
    text("", 10, 15);

    rectMode(CENTER);

}

function draw() {
	background(16, 18, 43);
	
	push(); 

	translate(60,60);
	for (y = 0; y < 500; y += 120) {
		for (x = 0; x < 500; x +=120) {
			drawPattern(y);
			drawFlower(x, y);
		}
	}

	pop();
}

function drawPattern(y) {
	
	//lighter blue pattern outline 
	noFill();
	fill(16, 18, 43);
	strokeWeight(5);
	stroke(65, 68, 144);
	
	circle(x+26, y, 30);
	circle(x-26, y, 30);
	circle(x, y-26, 30);
	circle(x, y+26, 30);
	rect(x, y, 52, 52);
	circle(x+50, y, 18);
	circle(x-50, y, 18);
	circle(x, y+50, 18);
	circle(x, y-50, 18);

	//dark blue boxes 
	stroke(16, 18, 43);
	strokeWeight(5);
	rect(x, y, 20, 52);
	rect(x, y, 52, 20);

	//white ellipses for background
	fill(255);
	noStroke();

	//ellipses top left 
	circle(x-50, y-50, 9);
	circle(x-25, y-35, 7);
	circle(x-18, y-42, 7);
	circle(x-30, y-45, 9);
	circle(x-40, y-48, 6);
	circle(x-32, y-53, 6);
	circle(x-48, y-34, 6);
	circle(x-52, y-41, 6);
	circle(x-36, y-24, 10);
	ellipse(x-38, y-38, 8, 10);
	ellipse(x-50, y-20, 8, 14);
	ellipse(x-20, y-52, 12, 8);

	//ellipses top right 
	circle(x+50, y-50, 9);
	circle(x+25, y-35, 7);
	circle(x+18, y-42, 7);
	circle(x+30, y-45, 9);
	circle(x+40, y-48, 6);
	circle(x+32, y-53, 6);
	circle(x+48, y-34, 6);
	circle(x+52, y-41, 6);
	circle(x+36, y-24, 10);
	ellipse(x+38, y-38, 8, 10);
	ellipse(x+50, y-20, 8, 14);
	ellipse(x+20, y-52, 12, 8);

	//ellipses bottom left 
	circle(x-50, y+50, 9);
	circle(x-25, y+35, 7);
	circle(x-18, y+42, 7);
	circle(x-30, y+45, 9);
	circle(x-40, y+48, 6);
	circle(x-32, y+53, 6);
	circle(x-48, y+34, 6);
	circle(x-52, y+41, 6);
	circle(x-36, y+24, 10);
	ellipse(x-38, y+38, 8, 10);
	ellipse(x-50, y+20, 8, 14);
	ellipse(x-20, y+52, 12, 8);

	//ellipses bottom right 
	circle(x+50, y+50, 9);
	circle(x+25, y+35, 7);
	circle(x+18, y+42, 7);
	circle(x+30, y+45, 9);
	circle(x+40, y+48, 6);
	circle(x+32, y+53, 6);
	circle(x+48, y+34, 6);
	circle(x+52, y+41, 6);
	circle(x+36, y+24, 10);
	ellipse(x+38, y+38, 8, 10);
	ellipse(x+50, y+20, 8, 14);
	ellipse(x+20, y+52, 12, 8);

}

function drawFlower(x, y) {
	
	//green leaves
	fill(108, 117, 86);
	noStroke();
	ellipse(x, y+10, 10, 30);
	ellipse(x, y-10, 10, 30);
	ellipse(x+10, y, 30, 10);
	ellipse(x-10, y, 30, 10);
	
	//pink flowers 	
	fill(204, 153, 153);
	ellipse(x, y+10, 15, 20);
	ellipse(x, y-10, 15, 20);
	ellipse(x+10, y, 20, 15);
	ellipse(x-10, y, 20, 15);
	
	//blue center 
	fill(65, 68, 144);
	circle(x, y, 10);

}

For this project I was inspired by the style of kitchen tiles; I love the way the designs on these create so many different points of visual interest. I wanted to create my own version of it with a darker color scheme. This project was really fun and helped me better understand how to use loops.