Month: October 2020

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

LO 5: 3D Rendered Art

Art Piece: Glasses, pitcher, ashtray and dice
Artist: Oyonale
Year: 2006

The piece depicts a rather typical scene for painting. Similarly to conventional art, the point of the scene is to show realistic elements such as shadows, reflections, and depth. I most admire how the artist used a generally practiced technique from conventional art and converted it into 3D computational art. The artist stated he utilized Ray Tracing as the primary technique to create the visual. Ray Tracing has become a much more utilized tool in 3D graphics as it creates the most realistic renderings possible. Currently, the technology is beginning to become more prevalent in the world of video games to create the most realistic graphics. The reason it has taken so long for the widespread use of this technology is because it is rather demanding on computers. Before now, typical computers simply did not have the computational power to run more than a simple image. Amazingly, this image was created nearly 15 years ago, showing the artist’s innovative nature as this was not a widely popular technique. The artist’s sensibilities are obvious as he creates a realistic image that can be seen in all sorts of paintings, but rather he converted it to a computational format. Artists like Oyonale are the ones who have paved the way to CGI and other 3D rendered art that we see in our daily lives.

Glasses, pitcher, ashtray and dice

http://www.oyonale.com/modeles.php?lang=en&page=40

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:

LO 5 – 3D Computer Graphics

https://zigorsamaniego.net/

Amigos Project

Zigor Samaniego

The artist I chose to examine for this week’s Looking Outwards is Zigor Samaniego, specifically the Amigos Project series. I was first drawn to the absolutely adorable monsters and how “real” they looked, especially the texture—some are fuzzy, some are porous, and some have a shiny gleam as if made of glossy plastic. Samaniego also creates short animations and films of these monsters, and has amassed a large Instagram following for his vibrant and fun characters. My favorite monster is the little red ball wrapped in a jelly coating. I’m really fascinated by how 3D renderers create textures, shadows, and highlights in software such as Cinema 4D to make objects seem as if they exist in the real world.

My favorite monster—it reminds me of a little jelly donut.

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.

LO 5 – 3D Computer Graphics

Brazilian 3D artists Fabricio Moraes and Guilherme Formenti teamed up to create a whimsical scene called “Slug Race”. The inspiration came from a walk in the woods and the sights to see in a damp forest. Fabricio had wanted to try a technique called photogrammetry, so on his walk, he scanned a lot of trees, rocks, and ground to create a realistic representation of what he saw. Agisoft PhotoScan was used for the collection of assets for the process of photogrammetry, 3ds max and Zbrush were used for modeling and lighting, V-Ray was for rendering, and Nuke was for compositing (Moraes typically uses Photoshop for compositing). I particularly enjoy how these artists created such a whimsical scene that is closely based on reality. The process of photogrammetry is also very intriguing as it is a technique that I would also like to try.

LO-05 Computer Graphics

For this week’s looking outwards, I thought I would highlight one of my favorite topics in the world of computation – non-euclidean geometry. The youtuber Code Parade makes videos showcasing their work developing rendering engines that display non-euclidean space.

These videos showcase the ability of computer graphics to show us other, possible worlds. Hyperbolica in particular shows us hyperbolic & hypobolic space: worlds where space is literally curved. Worlds where space is literally more or less dense, producing otherworldly visuals that confound the human mind. Triangles with three right angles. Seeing the back of your own head. These projects bring advanced geometry to life in a visual, visceral way.

I really admire the project because it does something that would be nigh-impossible without computation. It is difficult enough to grasp rendering flat space by hand, but curved space would be totally out of reach. These rendering engines are built from the ground up to simulate curved space & impossibly interconnected geometries.
-Robert