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

LO-05: 3D GRAPHICS

junelee — Sun, 04 Oct 2020 23:41:57 +0000

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

junelee — Sun, 04 Oct 2020 23:29:57 +0000

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 04- STRING ART

junelee — Sun, 27 Sep 2020 03:27:41 +0000

JUNE STRING ART

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

var incx1;
var incy1;
var incx2;
var incy2;
var linebw;
var offsetx;
var offsety;

function setup() {
    createCanvas(300,400);
    background(0);
}

function draw() {


//WHITE
//first- lines from 0,0
	// line(0,0,300,150);
	// line(75,0,300,300);

	strokeWeight(0.5);
	stroke(255);
	//increments for line
	linebw=30;

	incx1=(75-0)/linebw;
	incy1=0;
	incx2=0;
	incy2=(300-150)/linebw;

	//bound for starting line (box)
	var x1=0;
	var x2=300;
	var y1=0;
	var y2=150;

	//lines bw
	for (var n=0; n<=linebw; n+=1) {
		line(x1,y1,x2,y2);
		x1+=incx1;
		y1+=incy1;
		x2+=incx2;
		y2+=incy2;

	}
	noLoop();

//second- circles
	noFill();
	strokeWeight(0.7);
	stroke(255);
	//points
	var x1=125;
	var y1=200;
	linebw=30;

	//circle draw
	for (var diam=3; diam<=200; diam*=1.07) {
		circle(x1,y1,diam);
	}
	noLoop();

//third- background
	// line(100,400,300,150);
	// line(55,500,75,0);

	strokeWeight(0.5);
	stroke(255);

	//increments for line
	linebw=20;

	incx1=(300-75)/linebw;
	incy1=(150-0)/linebw;
	incx2=(100-55)/linebw;
	incy2=0;

	//bound for starting line (box)
	var x1=75
	var x2=55;
	var y1=-170;
	var y2=500;

	//lines bw
	for (var n=0; n<=linebw; n+=1) {
		line(x1,y1,x2,y2);
		x1+=incx1;
		y1+=incy1;
		x2+=incx2;
		y2+=incy2;
	}
	noLoop();


//BLUE
	translate(14,0)
		strokeWeight(0.5);
		stroke(0,0,255);
		//increments for line
		linebw=30;

		incx1=(75-0)/linebw;
		incy1=0;
		incx2=0;
		incy2=(300-150)/linebw;

		//bound for starting line (box)
		var x1=0;
		var x2=300;
		var y1=0;
		var y2=150;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;

		}
		noLoop();

	//second- circles
		noFill();
		strokeWeight(0.7);
		stroke(0,0,255);
		//points
		var x1=125;
		var y1=200;
		linebw=30;

		//circle draw
		for (var diam=3; diam<=200; diam*=1.07) {
			circle(x1,y1,diam);
		}
		noLoop();

	//third- background
		// line(100,400,300,150);
		// line(55,500,75,0);

		strokeWeight(0.5);
		stroke(0,0,255);

		//increments for line
		linebw=20;

		incx1=(300-75)/linebw;
		incy1=(150-0)/linebw;
		incx2=(100-55)/linebw;
		incy2=0;

		//bound for starting line (box)
		var x1=75
		var x2=55;
		var y1=-170;
		var y2=500;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;
		}
		noLoop();



//RED
	translate(20,0)
		strokeWeight(0.5);
		stroke(255,0,0);
		//increments for line
		linebw=30;

		incx1=(75-0)/linebw;
		incy1=0;
		incx2=0;
		incy2=(300-150)/linebw;

		//bound for starting line (box)
		var x1=0;
		var x2=300;
		var y1=0;
		var y2=150;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;

		}
		noLoop();

	//second- circles
		noFill();
		strokeWeight(0.7);
		stroke(255,0,0);
		//points
		var x1=125;
		var y1=200;
		linebw=30;

		//circle draw
		for (var diam=3; diam<=200; diam*=1.07) {
			circle(x1,y1,diam);
		}
		noLoop();

	//third- background
		// line(100,400,300,150);
		// line(55,500,75,0);

		strokeWeight(0.5);
		stroke(255,0,0);

		//increments for line
		linebw=20;

		incx1=(300-75)/linebw;
		incy1=(150-0)/linebw;
		incx2=(100-55)/linebw;
		incy2=0;

		//bound for starting line (box)
		var x1=75
		var x2=55;
		var y1=-170;
		var y2=500;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;
		}
		noLoop();

}

I chose to portray string art that interacts with each other and creates new shapes through intersections. I chose the colors for a “trippy” color palette.

LO-04 GENERATIVE MUSIC

junelee — Sun, 27 Sep 2020 03:22:18 +0000

Music in today’s environment can be digitally manipulated to create certain sounds. Computational systems and digital generation of music has allowed sound to transform into anything the artist intends for it to be and can create new ways of human expression. An artist I admire in this field of music is Billie Eilish and Finneas. These artists are able to interact and communicate with other artists who may be able to mix or distort sounds according to notes.
In Bad Guy by Billie and Finneas O’Connell, the mix session contains 68 tracks, 49 of which are audio tracks. The mix template and stems are loaded into Pro Tools where the mix is produced. The remaining tracks are drums, percussion, bass, and synth tracks. The aux tracks in the background are also run For the vocals in the song, they are grouped together and are then put through Waves PuigChild 670 plug-in which compresses all vocals. The vocals are smoothed out and are dynamicized and then put through another plug-in called Waves De-Esser to add more variety and color to the track. Through these digital means of transforming sound data to a certain style, Billie and Finneas are able to provide new ways of human expression and are testing limits of what music is and can be.

Billie & Finneas O’Connell

FINNEAS Explains How He Builds Songs For Billie Eilish | Critical Breakthroughs
Pitchfork
https://www.youtube.com/watch?v=FsSkRjgjFvU&t=290s

Billie Eilish and Finneas Break Down Her Hit Song ‘Bad Guy’
Rolling Stone
https://www.youtube.com/watch?v=kpx2-EMfdbg

LO-03 PHYSICAL GENERATIVE ART FORMS

junelee — Mon, 21 Sep 2020 01:38:37 +0000

The role of computational design on furniture design has been developing and advancing the limits of furniture. QERMEZi’s Futuristic Furniture expresses realistic versions of futuristic furniture through elements of futurism aesthetics. Designers investigate elements relating to outer space, linearity, biomimicry, organic forms, asymmetrical low gravity forms, etc. These collaborated with functional purposes are explored through dynamic experimentation of form, surface, and material.

QERMEZi uses Rhinoceros for their design software. Rhino allows intricate modeling of organic shapes and Grasshopper aids in the computational and parametric formations of geometrical shapes. Using this 3D software, QERMEZi is able to visualize complex structures and explore parametric design to produce furniture that challenges aesthetic, functionality, technology, and purpose.

The final form of QERMEZi’s furniture designs is conceptualized and manufactured through profound research in ergonomics, material science, computational science, aesthetics, geological studies, and social sciences. By allowing furniture design to reflect various contexts, QERMEZi is able to produce a product which abstracts these collective experiences.

SANAM CHAIR- QERMEZi.L.L.C

Furnish Futuristic Furnitures

PROJECT 03- DYNAMIC DRAWING

junelee — Mon, 21 Sep 2020 01:26:10 +0000

JUNELEE_P03

//JUNE LEE
//SECTION C

var offset=20;
var diam=0;

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

function draw() {

//background change
    if (mouseX>(width/2)) {
    	background(245,245,142);
    } else {
    	background(240,220,106);
    }

// purple LIGHT increasing size USING
	noStroke();
	fill(215,209,240);
	diam=mouseY;
	ellipse(600/2,height/2,diam,diam);


//circle slant line mouse Y
	fill(148,132,215);
	noStroke();

	ellipse(0,mouseY-40,30,30);
	ellipse(0+(offset*2),mouseY-35,30,30);
	ellipse(0+(offset*4),mouseY-30,30,30);
	ellipse(0+(offset*6),mouseY-25,30,30);
	ellipse(0+(offset*8),mouseY-20,30,30);
	ellipse(0+(offset*10),mouseY-15,30,30);
	ellipse(0+(offset*12),mouseY-10,30);
	ellipse(0+(offset*14),mouseY-5,30,30);
	ellipse(0+(offset*16),mouseY,30,30);
	ellipse(0+(offset*18),mouseY+5,30,30);
	ellipse(0+(offset*20),mouseY+10,30,30);
	ellipse(0+(offset*22),mouseY+15,30,30);
	ellipse(0+(offset*24),mouseY+20,30,30);
	ellipse(0+(offset*26),mouseY+25,30,30);
	ellipse(0+(offset*28),mouseY+30,30,30);
	ellipse(0+(offset*30),mouseY+35,30,30);	

//rect line mouse X
	noStroke();
	fill(111,88,209);

	rect(0,mouseX+40,20,30);
	rect(0+(offset*2),mouseX+35,20,30);
	rect(0+(offset*4),mouseX+30,20,30);
	rect(0+(offset*6),mouseX+25,20,30);
	rect(0+(offset*8),mouseX+20,20,30);
	rect(0+(offset*10),mouseX+15,20,30);
	rect(0+(offset*12),mouseX+10,20,30);
	rect(0+(offset*14),mouseX+5,20,30);
	rect(0+(offset*16),mouseX,20,30);
	rect(0+(offset*18),mouseX-5,20,30);
	rect(0+(offset*20),mouseX-10,20,30);
	rect(0+(offset*22),mouseX-15,20,30);
	rect(0+(offset*24),mouseX-20,20,30);
	rect(0+(offset*26),mouseX-25,20,30);
	rect(0+(offset*28),mouseX-30,20,30);
	rect(0+(offset*30),mouseX-35,20,30);
	rect(0+(offset*32),mouseX-40,20,30);

//text fixed
	translate(0,0);
	textAlign(CENTER);
    fill(0);
	noStroke();
    textSize(10);
    text("JUNE LEE / SECTION C",width/2,10);

//text curve
	translate(100,150);
    rotate(radians(mouseX/7));
	fill(0);
	noStroke();
    textSize(20);
    text("JUNE LEE / SECTION C",200,20);

}

I wanted to make all aspects relate to the mouse position. I explored size, position (x and y), color, and position (rotation) through this drawing.

PROJECT 01- SELF PORTRAIT

junelee — Sun, 13 Sep 2020 00:21:50 +0000

JUNE_MYFACE

function setup() {
    createCanvas(500, 400);
    background(100);
 }


function draw() {

//hair
	fill(0);
	quad(155,155,140,350,350,370,330,155,);

//face
	noStroke();
	fill(215,203,124);
	quad(155,150,330,160,300,300,180,290);
	triangle(180,289,300,299,250,330);

//ears
	fill(185,174,99);
	quad(145,200,165,195,170,230,150,230);
	quad(320,190,313,220,330,225,340,195);

//glasses
	stroke(5);
    fill(100,112,145);
	arc(200,200,50,60,0,PI+QUARTER_PI,CHORD);
	arc(270,200,50,60,0,PI,CHORD);
	line(220,205,250,210);
	line(150,210,180,200);
	line(285,210,330,200);

//nose
	noStroke();
	fill(207,190,75);
	triangle(230,220,220,250,245,255);
	fill(187,171,66);
	ellipse(225,245,5,3);
	ellipse(240,250,5,3);

//lips
	fill(145,101,120);
	triangle(200,280,230,270,250,285);
	triangle(230,285,280,280,260,265);
	fill(129,93,109);
	triangle(200,280,280,280,240,295);

//bucket hat
	fill(65,68,173);
	quad(155,170,180,100,300,100,330,170);
	quad(120,170,360,170,340,150,140,150);

//label
	fill(215,203,124);
	noStroke();
    textSize(10);
    text("JUNE LEE / SECTION C",360,25);
}

I found it challenging to work with a new coding language, however this allowed me to think about analog methods such as painting to organize my code.

PROJECT 02- VARIABLE FACE

junelee — Sun, 13 Sep 2020 00:03:29 +0000

JUNE_VARIABLEFACE

var face=1;
var backColor=1;
var glasses=1;
var mouth=1;


function setup() {
    createCanvas(400,400);
    background(100);
 }


function draw() {

//background
	if (backColor==1) {
		background(136,160,150);
	} else if (backColor==2) {
		background(53,61,47);
	} else {
		background(32,42,37);
	}


//face
	rectMode(CENTER);
	var facex=(width/2);
	var facey=(height/2);
	if (face==1) {
		noStroke();
		fill(255);
		rect(facex,facey,width/3,height/2.5);
	} else if (face==2) {
		noStroke();
		ellipse(facex,facey,width/3,height/2);
	} else {
		noStroke();
		rect(facex,facey,width/3.5,height/2.2,40);
	}

//glasses
	print(glasses);
	if (glasses==1) {
		stroke(5);
		strokeWeight(0);
   	 	fill(0);
		ellipse(facex-25,facey-30,30,30);
		ellipse(facex+25,facey-30,30,30);
		strokeWeight(2.5);
		stroke(0);
		line(facex-25,facey-30,facex+25,facey-30);
	} else if (glasses==2) {
		fill(0);
		stroke(0);
		strokeWeight(3);
		rect(facex-25,facey-30,30,25,10);
		rect(facex+25,facey-30,30,25,10);
		line(facex-25,facey-30,facex+25,facey-30);
	} else {
		stroke(0);
		strokeWeight(10);
		point(facex-25,facey-30);
		point(facex+25,facey-30);
	}

//nostrils
	stroke(0);
	strokeWeight(2+(1*face));
	point(facex-5,facey+10);
	point(facex+5,facey+10);

//mouth
	fill(129,93,109);
	noStroke();
	if (mouth==1) {
		rect(facex,facey+40,15,30,5);
	} else if (mouth==2) {
		ellipse(facex,facey+40,30,15);
	} else {
		ellipse(facex,facey+40,30,30);
	}

//hair strand
	noFill();
	stroke(100);
	strokeWeight(5);
	curve(facex,facey-70,facex,facey-70,facex+50,facey-(100-(5*glasses)),facex+50,facey-(120+(20*glasses)));

//label
	fill(255);
	noStroke();
    textSize(6);
    textAlign(CENTER);
    text("JUNE LEE / SECTION C",width/2,25);
}

function mousePressed() {
	face=(int(random(1,4)));
	backColor=(int(random(1,4)));
	glasses=(int(random(1,4)));
	mouth=(int(random(1,4)));
}

I enjoyed doing this project as I was able to explore different functions with the mousePressed() function on p5.js. By defining some variables, I was able to type code in relation to other measurements existing on the canvas.

LO2- GENERATIVE ART

junelee — Sat, 12 Sep 2020 23:57:00 +0000

Guto Requena- Samba Stool 2014

https://gutorequena.com/samba-stool

Generative design helps designers in going through a big number of possible combinations in a short amount of time. By allowing computers to run possibilities that are of parametric design and accuracy, the architect is able to devote the remaining time to design more thoroughly. This also creates multiple solutions for the same project that the architect might have been unable to think of or foresee.

I admire furniture design, in general. However, the Samba Stool allows music to become a mix of design with music. By analyzing classic samba songs through vocals, vass, treble, rhythm, etc, frequency curves were generated. Requena organizes these curves into an organic and smooth surface on a digital file.

Guto Requena’s generative design is then sculpted on a CNC machine to create a marble stool. Digital simulations and geometric manipulation allowed a variety of possibilities of shapes and designs in this process and has allowed a cultural and aesthetic manifestation of design.

LO1- MY INSPIRATION

junelee — Tue, 08 Sep 2020 17:51:00 +0000

As someone who had not watched Disney or Pixar movies during my childhood, I was immediately immersed by the Toy Story Series when my friends forced me to watch them in college. By watching Toy Story 1,2,3 back-to-back, I could see an enormous change in the quality and development of the characters and rendering.
Production companies Pixar and Walt Disney Pictures have produced multiple successful films and animations. During this time, production quality and rendering have improved exponentially. Technological improvements in lighting and motions effects have allowed the resulting films to produce more realistic people, toys, and overall graphics.

Pixar created a new software called RenderMan to handle more footage while also working on smoothness for more fully formed characters. Toys were conceived to be more realistic toys in shots using toy hands and feet.

A program called Simulation was also developed to develop fur graphics in Monsters Inc.. Each distinct particle of fur was simulated with acceleration, velocity, and force, using physics for design. This same technological foundation was then used in Monsters University, Ratatouille, Finding Nemo, etc.

Watching Toy Story 4 when it came out this summer with my friend, I was very impressed by the development in graphics and rendering, The refining of the materiality of fur for Duck and Bunny, doll effect of Bo Peep, as well as the realness of Forky as a plastic fork upgraded Toy Story 4 into a masterpiece in animation.

The future of animation only progresses with the advances made in both technology and creative design. The animation Onward has become a success in graphic works and computational design. Pixar and Disney’s future has a long way ahead as long as new software development improves production quality.