Category: SectionC

Project-05-Wallpaper

WPHC
//Hayoon Choi
//hayoonc
//section C

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

function draw() {
    background(232, 241, 255);
    //vertical lines
    for (var x = 0; x < width - 10; x += 35){
        stroke(255);
        strokeWeight(5);
        line(x, 0, x, height);
    }
    //drawing dogs
    for (var x = 100; x < width; x += 200){
    	for (var y = 70; y < height; y += 145){
    		dog(x, y, 0.75);
    	}
    }
    //drawing reflected dogs (2nd and 4th columns)
    for (var x = 200; x < width - 190; x += 200){
    	for (var y = 140; y < height - 140; y += 145){
    		dog(x, y, 0.7, -1);
    	}
    }
}

function dog(x, y, s1 = 1, s2 = 1){
	push();
	fill(216, 154, 80);
	translate(x, y);
	scale(s1);
	scale(s2, 1); //reflecting dog
	//ears
    strokeWeight(5);
	stroke(216, 154, 80)
	strokeJoin(ROUND);
	triangle(18, -35, 19, -19, 4, -23);
	triangle(-12, -39, -5, -24, -20, -22);
	stroke(200);
	fill(200);
	triangle(15, -30, 19, -19, 4, -23);
	triangle(-12, -33, -5, -24, -20, -22);
	//fur
	stroke(216, 154, 80)
	strokeWeight(1);
	fill(216, 154, 80);
	beginShape();
	curveVertex(27, -2);
    curveVertex(27, -2);
	curveVertex(42, 5);
	curveVertex(37, 5);
	curveVertex(44,12);
	curveVertex(32, 12);
	curveVertex(29, 6);
	endShape();
	beginShape();
	curveVertex(44, 34);
    curveVertex(44, 34);
	curveVertex(47, 44);
	curveVertex(42, 42);
	curveVertex(42, 56);
	curveVertex(37, 52);
    curveVertex(37, 52);
	endShape();
	//body
	noStroke();
	ellipse(0, 0, 64, 59);
	ellipse(11, 31, 68, 72);
	ellipse(-1, 49, 80, 44);
	//legs
	ellipse(-11, 69, 12, 24);
	ellipse(-38, 59, 12, 24);
	//mouth
	strokeWeight(0.5);
	stroke(0);
	fill(200);
	arc(-10, 6, 15, 5, QUARTER_PI, PI + QUARTER_PI, OPEN)
	arc(-10, 0, 25, 10, QUARTER_PI, PI + QUARTER_PI, OPEN)
	//eyes
	fill(255);
	ellipse(3, -7, 10, 5)
	ellipse(-20, -7, 10, 5)
	fill(0);
	ellipse(3.5, -7, 7, 4)
	ellipse(-19.5, -7, 7, 4)
	//nose
	ellipse(-17, 0, 5, 3);
	pop();
}

I wanted draw my dog and show the face she makes whenever I call her name. She tries very hard to ignore me and looks at the other direction.

LO-3D Computer Graphics

Peter Kolus is a senior 3D artist and a CG generalist. Kolus has taken lead projects for leading companies such as Disney, Tiger Beer, and Mercedes Benz. For one of his projects, he collaborated with Leo Calliard and Gosia Sluszkiewicz to create a series of artworks called “Heroes of Stones.” I was intrigued by it because it shows such detailed and realistic stone sculptures of heroes and villains from comic books. It was really interesting to see vivid expressions captured on each character’s face, even though they were supposedly just sculptures. In addition, each individual artwork carries so much detail on all aspects, such as lighting and texture. He successfully turned his interest in comics to a realistic artwork in a compelling setting. Kolus was responsible for shading, rendering, and composition. It’s possible that he may have used programs like 3ds Max, photoshop, and nuke to generate different textures and shades. 

LO-05: 3D GRAPHICS

Rhinoceros 3D is a 3D computer graphics and CAD (computed aided design) software that was developed by Robert McNeel & Associates. Rhino utilizes four different viewports that assists in modeling in different window formats to allow 2D analyses to be made. Rendering and animation is a frequent use of Rhino as the enhancements and plug-ins make it very helpful.
Creators are not much limited in what they would like to accomplish within Rhino3D as third-party plug-ins and add-ons allow for different types of rendering and animation as the final product. While Rhino is quite frequently used in the context of architectural modeling, there are other means of use for architecture in industries such as industrial design, automotive design, produce design, as well as graphic design and multimedia. Because Rhinoceros allows for geometries to be mathematically precise based on the NURBS mathematical model, it helps for precise representation of curves and freeform surfaces in computer graphics.

https://www.rhino3d.com/gallery/5.2

PROJECT 05- WALLPAPER

sketch
//junelee
//section c
//15-104
//junelee@andrew.cmu.edu
//project-05



function setup() {
    createCanvas(350,500);
    background(0,51,0);
}

function dangoo(x,y) {

	push();
	translate(x,y);

	strokeWeight(0.3);

	fill(102,0,204); //purple
	circle(35,31.5,10); //4
	fill(255);
	circle(35,31.5,6);

	fill(255); //stripe-white
	circle(45,31.5,10); //14

	fill(0,51,204); //blue
	circle(55,31.5,10); //2
	fill(255);
	circle(55,31.5,6);

	fill(255); //stripe-white
	circle(65,31.5,10); //10
	circle(75,31.5,10); //9
	circle(40,40,10); //13

	fill(128,0,0); //red
	circle(50,40,10); //7
	fill(255);
	circle(50,40,6);

	fill(0,102,0); //green
	circle(60,40,10); //6
	fill(255);
	circle(60,40,6);

	fill(255); //stripe-white
	circle(70,40,10); //11

	fill(255,102,0); //orange
	circle(45,48.5,10); //5
	fill(255);
	circle(45,48.5,6);

	fill(0); //black
	circle(55,48.5,10); //8
	fill(255);
	circle(55,48.5,6);


	fill(200,0,0); //red
	circle(65,48.5,10); //3
	fill(255);
	circle(65,48.5,6);
	
	fill(255);
	circle(50,57,10); //15
	circle(60,57,10); //12

	fill(255,204,0); //yellow
	circle(55,65.5,10); //1
	fill(255);
	circle(55,65.5,6);


	textSize(5);
	fill(0);
	text('4',33.5,33);
	text('14',42,33);
	text('2',53.5,33);
	text('10',62,33);
	text('9',73,33);

	text('13',37,42);
	text('7',48.5,42);
	text('6',58.5,42);
	text('11',67.5,42);

	text('5',43.5,50.5);
	text('8',53.5,50.5);
	text('3',63.5,50.5);

	text('15',47,59);
	text('12',57,59);

	text('1',53.5,67.5);

	pop();
	}

function draw() {

	for (var x=1; x<5; x+=1) {
		for (var y=1; y<7; y+=1) {
			dangoo(75*x-65,75*y-55);
		}
	}

}

For the wallpaper, I wanted to make the setup of the billiard balls that are still in their placement. I then repeated this on the x and y axis by defining function dangoo().

Project-05-Wallpaper

sketch
function setup() {
    createCanvas(400, 400);
    noStroke();
}
 
function draw() {
    background(0);
    scales();
    noLoop(); 
        for (var y = 10; y < height + 50; y += 50) {
          for (var x = 10; x < width + 50; x += 50) {
            fill(255);
          ellipse(x,y,15);
          }
}
}
function scales() {
      var red=100;
      for (var y = 10; y < height + 50; y += 50) {
          var blue=100;
          for (var x = 10; x < width + 50; x += 50) {
            fill(red, 0, blue);
            blue += 30
            // fill(255);
            ellipse(x,y,80);//outer rim
            // fill(176,163,248);//orange color
            ellipse(x,y,80);//inner circle
            fill(161,243,247);//tan color
            ellipse(x,y,60);//inner core
            strokeWeight(3);
            line(x,y,400,400);
        }
        red +=50;
    }
}

For this week, I wanted to create a fish scale pattern with a gradient.

Project 5: Wallpaper

sketchDownload
var s = 100
var x = 50
var y = 50
function setup() {
    createCanvas(600, 600);
    background(60, 0, 33); //mauve 4, background color
    strokeWeight(0);
    rectMode(CENTER);
}

function draw() {
	for (let r = 0; r <=5; r += 1) {
		for (let c = 0; c <= 5; c += 1) {
			tile(); //tile pattern
			y += 100;
			//s += 100;
		}
		y = 50;
		tile();
		x += 100;
	}
}

function tile() {
	push();
	translate(x, y);

	//random dots
	fill(235, 181, 211);
	circle(random(-50, 0), random(-50, 0), random(2,7));
	circle(random(0, 50), random(0, 50), random(2,7));
	fill(193, 99, 151);
	circle(random(-50, 0), random(0, 50), random(2,7));
	circle(random(0, 50), random(-50, 0), random(2,7));
	fill(120, 26, 78);
	circle(random(-50, 0), random(-50, 0), random(2,7));
	circle(random(0, 50), random(0, 50), random(2,7));

	//lines
	fill(120, 26, 78); // mauve 3
	push();
	rotate(radians(45));
	rect(0, 0, s/2 + 10, s/2 + 10);
	pop();
	push();
	fill(60, 0, 33); //mauve 4
	rotate(radians(45));
	rect(0, 0, s/2, s/2);
	pop();

	//circles
	fill(120, 26, 78); // mauve 3
	circle(-25, -25, 30);
	circle(25, -25, 30);
	circle(25, 25, 30);
	circle(-25, 25, 30);

	fill(60, 0, 33); //mauve 4
	circle(-25, -25, 20);
	circle(25, -25, 20);
	circle(25, 25, 20);
	circle(-25, 25, 20);

	//flower
	fill(193, 99, 151); //mauve 2
	push();
	for(let x=0; x < 8; x += 1) {
		ellipse(10, 10, s/2, 10);
		rotate(radians(45));
	}
	pop();

	//inner flower
	push();
	fill(235, 181, 222); //mauve 1
	for(let x=0; x < 8; x += 1) {
		ellipse(5, 2, s/2, 10);
		rotate(radians(45));
	}
	pop();

	//flower center
	fill(193, 99, 151); //mauve 2
	circle(0, 0, 15);

	pop();

}

I drew inspiration from my sketch. However, I decided to add more flower patterns in my code than the flower petals in my original sketch.

Rough draft for pattern.

Looking Outwards 05

Omar Aqil - Picasso
Seated Women, Omar Aqil

One 3D computer graphics artist I find interesting is Omar Aqil, who creates 3D abstract portraits inspired by Picasso’s work. My favorite work that he created is his “Figurative Portraits” collection, which is inspired by Picasso’s artwork. He uses different 3D textures and forms inspired by Salvador Dali’s work to emulate facial expressions. I find it really cool how he can make the shadows and forms look so realistic. For example, some objects in his pieces are shiny and can reflect other objects in the piece. The way Agil uses light in his work is really interesting because it reflects and absorbs in different textures and surfaces.

Figurative Portraits, Omar Aqil

Project-05-Wallpaper

sketch
var s=10;
var col=0;
var row=0;
function setup() {
    createCanvas(600, 600);
    background(217,215,217);
}

function draw() {
	var gap=3*s;
	var xStart=gap+3;
	//background grid
	for(var y=0; y<=600;y+=gap){
       

		for(var x=xStart;x<=600;x+=2*s*sqrt(3)){
			
			
			fill(221,211,201);
			pattern1(x,y);
			col+=1;
			//if(col%5==0&row%7==0){
				//print(x.toString()+","+y.toString());
			//}
			if(col%3==0&row%9==0){
				print(x.toString()+","+y.toString());
			}

		}
		
		if(row%2==1){
        	xStart+=s*sqrt(3);
        	
        	row+=1;

        }

        else{
        	
        	xStart-=s*sqrt(3);
        	row+=1;
        }
        
	}
	//red flower
    fill(202,65,36);
	pattern1(344.7691453623978,30);
	pattern1(517.9742261192855,0);
	pattern1(67.64101615137754,420);
	pattern1(188.88457268119896,210);
	pattern1(67.64101615137754,420);
	pattern1(414.05117766515286,540);
	pattern1(587.2562584220407,120);
	pattern1(362.0896534380866,270);
	//blue triangle
    fill(26,25,58);
    pattern2(310.1281292110203,480);
    pattern2(517.9742261192855,60);
    pattern2(84.96152422706632,270);
    pattern2(292.80762113533154,90);
    pattern2(517.9742261192855,510);

	noLoop();
	
}

function pattern2(x,y){
    push();
    stroke(239,237,231);
    strokeWeight(1);
    translate(x,y);
    var u=s*sqrt(3);
    triangle(0,0,u,2*u-4,0,2*s);
    triangle(0,2*s,u,2*u-4,-u,2*u-4);
    triangle(0,0,0,2*s,-u,2*u-4);
    pop();
}
function pattern1(x,y){
    push();
    stroke(239,237,231);
    strokeWeight(1);
    translate(x,y);
    //define unit
    var u=s*sqrt(3);

    triangle(0,0,-2*u,0,-u,-s);
    triangle(0,0,-u,-s,-u,-2*u+4);
    triangle(0,0,-u,-2*u+4,0,-2*s);
    triangle(0,0,0,-2*s,u,-2*u+4);
    triangle(0,0,u,-2*u+4,u,-s);
    triangle(0,0,u,-s,2*u,0);
    triangle(0,0,2*u,0,u,s);
    triangle(0,0,u,s,u,2*u-4);
    triangle(0,0,u,2*u-4,0,2*s);
    triangle(0,0,0,2*s,-u,2*u-4);
    triangle(0,0,-u,2*u-4,-u,s);
    triangle(0,0,-u,s,-2*u,0);
  
   pop();

}

I was inspired by traditional Japanese style “和風(わふう)” patterns. Below are some screenshots of my process in illustrator:

compositions
geometry of individual shape

LookingOutwards-05

The project I want to discuss is a piece of public media art, “WAVE”, created by a Korean design company called d’strict. “WAVE” is an anamorphic illusion of water surging in a giant glass jar revealed on a magnificent DOOH of COEX K-POP SQUARE, the largest & high-definition outdoor advertising screen in S.Korea at 80.1m (w) x 20.1M (h).

video

Needless to say, the astonishing visual effect attracts me. I admire how modern technology and art as well as the natural and artificial are perfectly integrated to maximize people’s sensual experience. Yes, besides visuals, “WAVE” also provides acoustic effect to enhance the realistic impression of the art.

“WAVE”


I know that fluids are probably the hardest thing to simulate in 3D rendering software because its movements are complex and hard to predict. I suppose the creators simulated water flow using 3ds Max Fluids and the Motion Field space warp. The algorithm might have helped them to customize the dimension of video according to the size and geometry of the LED screen to create an anamorphic illusion.

The creators’ artistic sensibilities are manifest through the creative concept of manipulating sight to create a realiztic 3D effect on 2D media.

Project 5: Wallpaper

For the wallpaper assignment I drew a pattern of corgi faces and dog treat bones. I was inspired by my puppy who would not let me sit down and do this homework assignment. I was not successful and sketching the faces myself so I used some images linked below as references.

sketch

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  noLoop();
}

function draw() {
    background(230, 188, 191);
    strokeWeight(0);
    
    //columns of 3 corgi faces
    for(x=50; x<300; x+=100){
        for(y=50; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 100);
        pop();
      }
    }
  
    //columns of 2 corgi faces
    for(x=100; x<300; x+=100) {
      for(y=100; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 70);
        pop();
      }
    }
  
    //columns of 2 dog bones
    for(x=50; x<300; x+=100) {
        for(y=100; y<300; y+=100) {
          push();
          translate(x,y);
          dogBone(x, y, 20);
          pop();
        }
    }
  
    //columns of 3 dog bones
    for(x=100; x<300; x+=100) {
        for(y=50; y<300; y+=100) {
          push();
          translate(x, y);
          dogBone(x, y, 20);
          pop();
        }
    }
}

function dogBone(x, y, size) {
    strokeWeight(0);
    fill(255);
    rect(x, y, size, size/2);
    circle(x-size/2, y+5, size/2);
    circle(x-size/2, y-5, size/2);
    circle(x+size/2, y+5, size/2);
    circle(x+size/2, y-5, size/2);
}


function corgiFace(x, y, size) {
    fill(245, 191, 120);
    //draws head shape
    ellipse(x, y, size, size+10);
    ellipse(x,y+10, size, size-10);
    //left and right ear, respectively
    triangle(x-size/2, y, x-size*4/7, y-size*5/7, x-size/7, y-size*3/7);
    triangle(x+size/2, y, x + size*4/7, y-size*5/7, x+size/7, y-size*3/7);

    fill(255);
    //inside of ear
    triangle(x-size/2, y - size*2/7, x-size/2, y-size*4.5/7, x-size*2/7, y-size*3/7);
    triangle(x+size/2, y - size*2/7, x+size/2, y-size*4.5/7, x+size*2/7, y-3*size/7);
    //face markings
    ellipse(x,y, size/7, size*3/7);
    ellipse(x, y + size*2/7, size*4/7, size*3/7);

    fill(0);
    //eyes
    circle(x - size*2/7, y, size/7);
    circle(x+size*2/7, y, size/7);
    //nose
    ellipse(x, y + size*15/70, size*2/7, size/7);
    //mouth
    arc(x, y+size*25/70, size/7, size/14, 2*PI, PI);
}

Image I referenced for creating the corgi face