Project Week 1 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE https://courses.ideate.cmu.edu/15-104/f2016 Professor Roger B. Dannenberg • Fall 2016 • Introduction to Computing for Creative Practice Sat, 12 Sep 2020 00:19:45 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.31 zhuoyinl- self portrait https://courses.ideate.cmu.edu/15-104/f2016/2016/09/12/zhuoyinl-self-portrait/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/12/zhuoyinl-self-portrait/#respond Mon, 12 Sep 2016 01:55:42 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=2558 Continue reading "zhuoyinl- self portrait"]]>

sketch

//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//project1

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

function draw() {

    fill(86, 63,2);
    noStroke();
    arc(200, 200, 200, 275, PI, 0, CHORD);
    arc(100, 200, 100, 150, 0, PI, CHORD);
    arc(300, 200, 100, 150, 0, PI, CHORD);

    fill(220)
    noStroke();
    arc(75, 200, 50, 50, 0, PI, CHORD);
    arc(325, 200, 50, 50, 0,PI, CHORD);

    fill(227, 202, 175);
    noStroke();
    ellipse(200, 200, 150, 190);

    noFill();
    strokeWeight(10);
    stroke(78, 51, 22);
    curve(135, 180, 155, 155, 175, 155, 195, 180);
    curve(200, 180, 220, 155, 240, 155, 260, 180);

    strokeWeight(5);
    line(145, 170, 180, 180);
    line(180, 180, 145, 190);
    line(215, 180, 250, 170);
    line(215, 180, 250, 190);

    fill(83,70,249);
    noStroke();
    triangle(197, 190, 180, 220, 215, 220);


    fill(255,144,144);
    noStroke();
    arc(197, 235, 60, 70, 0, PI, CHORD);

    fill(235, 233, 233); 
    noStroke();
    rect(185, 235, 10, 10);
    rect(200, 235, 10, 10);
















}

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/12/zhuoyinl-self-portrait/feed/ 0
TamiTedesco-Project-01-Face https://courses.ideate.cmu.edu/15-104/f2016/2016/09/10/tamitedesco-project-01-face/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/10/tamitedesco-project-01-face/#respond Sat, 10 Sep 2016 00:35:01 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=2324 Continue reading "TamiTedesco-Project-01-Face"]]>

Eyyy so this is my self-portrait:

tami-self-portrait.js

function setup() {
    createCanvas(500, 500);
    background('#B7DAF4');

}

function draw() {

//head
	fill('#FFDFC8');
	noStroke();
	ellipse(250, 200, 180, 200);

//ears
	fill('#FFDFC8');
	noStroke();
	ellipse(165, 230, 40, 50);

	fill('#FFDFC8');
	noStroke();
	ellipse(335, 230, 40, 50);

//hair
	fill('#8a1B00')
	triangle(160, 170, 160, 210, 225, 170);
	triangle(225, 170, 342, 170, 342, 210);

//hat
	fill('#000a5F');
	rect(120, 150, 220, 20);

	fill('#000a5f');
	noStroke();
	arc(250, 170, 184, 170, PI, 0, CHORD);

//face
	//L
	fill(51);
	ellipse(210, 210, 10, 25);
	//R
	fill(51);
	ellipse(290, 210, 10, 25);
	//mouth
	fill('#FF556E');
	triangle(230, 240, 250, 270, 270, 240);

//body
	fill('#FFDFC8');
	rect(235, 295, 30, 20);

	//shirt
	fill('#000000');
	rect(195, 315, 110, 300);
	//sleeves
		//L
		triangle(175, 330, 195, 315, 195, 330);
		rect(175, 330, 20, 65);
		//R
		triangle(305, 330, 305, 315, 325, 330);
		rect(305, 330, 20, 65);
	//arms
	fill('#FFDFC8');
	rect(178, 395, 18, 105);
	rect(303, 395, 18, 105);

}

I decided to make the design as simple as possible to mitigate any weirdness I’d have to deal with, though I didn’t do an actual sketch beforehand. I kind of just made a mental image and then eyeballed where all the shapes should go. I’ve never coded anything before this class, so for a first try at making something nice I think this came out pretty ok!

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/10/tamitedesco-project-01-face/feed/ 0
xiangqil-Project-01-Face https://courses.ideate.cmu.edu/15-104/f2016/2016/09/04/xiangqil-project-01-face/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/04/xiangqil-project-01-face/#respond Sun, 04 Sep 2016 03:36:48 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1816 Continue reading "xiangqil-Project-01-Face"]]>

sketchThis what I look like before I got the haircut, with signature round face and round eyes. I still found some problems to create suitable round-corner rectangular.

/*Liu Xiangqi Section A xiangqil@andrew.cmu.edu Assignment-01*/
function setup() {
    createCanvas(300, 300);
   
}

function draw() {
  fill(246,229,200);
  noStroke();
  ellipse(150,150,200,200);
  
  fill(246,229,200);
  ellipse(50,150,50,75);
  
  fill(246,229,200);
  ellipse(250,150,50,75);
  
  fill(0,0,0);
  ellipse(100,150,25,25);
  
  fill(0,0,0);
  ellipse(200,150,25,25);
  
  noFill();
  stroke(251,112,64);
  strokeWeight(8);
  curve(100,180,140,200,160,200,200,180);
 
  fill(0,0,0);
  noStroke();
  rect(50,50,200,80,80,80,0,0);
  
  fill(0,0,0);
  ellipse(150,40,50,50);
  
  fill(246,229,200);
  triangle(80,130,150,90,220,130);
  
}

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/04/xiangqil-project-01-face/feed/ 0
Yugyeong Lee Project-01 https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/yugyeong-lee-project-01/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/yugyeong-lee-project-01/#respond Sat, 03 Sep 2016 17:37:14 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1792 Continue reading "Yugyeong Lee Project-01"]]>

sketch

//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project-01

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

function draw() {
	background(255);

	strokeWeight(8);
	stroke(248, 153, 170);
	fill(254, 192, 203);
	ellipse(300, 300, 500, 500);

	//Hair
	fill(128, 24, 80);
	noStroke();
	ellipse(300, 255, 225, 290);
	rect(187.5, 265, 225, 140);

	//Face
	fill(206, 163, 121);
	noStroke();
	ellipse(300, 250, 175, 215);
	ellipse(300, 257, 150, 215);

	//Brows
	fill(90, 55, 42);
	quad(317, 225, 358, 225, 370, 230, 317, 230);
	quad(283, 225, 242, 225, 230, 230, 283, 230);

	//Eyes
	fill(255);
	stroke(0);
	strokeWeight(2);
	arc(340, 255, 35, 18, PI, TWO_PI);
	arc(260, 255, 35, 18, PI, TWO_PI);
	noStroke();
	ellipse(260, 255, 35, 12);
	ellipse(340, 255, 35, 12);
	fill(0);
	ellipse(340, 253, 16, 16);
	ellipse(260, 253, 16, 16);
	fill(255);
	ellipse(340, 253, 3, 3);
	ellipse(260, 253, 3, 3);

	//Glasses
	stroke(0);
	strokeWeight(8);
	noFill();
	rect(315, 240, 60, 40, 5, 2, 5, 13);
	rect(225, 240, 60, 40, 5, 5, 13, 2);
	line(285, 250, 315, 250);
	line(225, 250, 214, 250);
	line(375, 250, 386, 250);

	//Mouth
	stroke(196, 48, 36)
	strokeWeight(3);
	line(300, 330, 325, 320);
	line(300, 330, 275, 320);
	
	//Nose
	stroke(0);
	strokeWeight(3);
	arc(300, 295, 20, 12, TWO_PI, PI);
	
	//Hair
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(-44,43,40,140);
	pop();
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(30,115,140,40);
	pop();
}


In project I, I created a portrait of myself using basic shapes such as ellipse, rectangle, arc, etc. The challenging part of this project was to figure out the coordinate along the way requiring constant editing and refreshing.

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/yugyeong-lee-project-01/feed/ 0
ShanWang-Project-01 https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/shanwang-project-01/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/shanwang-project-01/#respond Sat, 03 Sep 2016 03:59:10 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1753 Continue reading "ShanWang-Project-01"]]>

In this exercise I used different gradients of color to create the division and collage of space and objects.sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-01

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

function draw() {
    strokeWeight(5);
    fill(120);
    line(80,0,80,600);

    strokeWeight(2);
    fill(150);
    line(70,0,70,600);

    strokeWeight(1);
    fill(150);
    line(70,0,70,600);

    noStroke();
    fill(210);
    ellipse(120, 130, 400, 400);

    strokeWeight(5);
    fill(200);
    ellipse(180,300,200,200);

    noStroke();
    fill(170);
    quad(150,100,280,100,320,130,100,130);

    noStroke();
    fill(150);
    arc(215,130,115,115,TWO_PI, PI);

    noStroke();
    fill(130);
    arc(215,130,95,95,TWO_PI, PI);

    noStroke();
    fill(110);
    arc(215,130,65,65,TWO_PI, PI);

    noStroke();
    fill(80);
    quad(350,450,400,450,400,470,350,470);

    noStroke();
    fill(90);
    quad(300,500,400,500,400,510,300,510);

    noStroke();
    fill(30);
    quad(250,475,400,475,400,479,250,479);

    noStroke();
    fill(120);
    quad(370,480,400,480,400,490,370,490);
   
}

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/shanwang-project-01/feed/ 0
Denise Jiang – Self Portrait https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/denise-jiang-self-portrait/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/denise-jiang-self-portrait/#respond Sat, 03 Sep 2016 03:12:21 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1423 Continue reading "Denise Jiang – Self Portrait"]]>

sketch

function setup() {
    createCanvas(600, 600);
    
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {

	background(223,232,240);

	//right face
	fill(240,223,230);
	noStroke();
	rect(288,0,310,286);
	rect(287,385,313,215);
	quad(288,284,600,287,600,336,354,336);
	quad(354,336,600,336,600,536,286,385);



	//brow
	noStroke();
	fill(96,57,19);
	rect(45,169,180,22);
	quad(342,177,349,197,479,150,473,129);
	quad(470,129,479,150,563,152,583,132);


	//right eye
	noStroke();
	fill(54,54,54);
	rect(373,259,171,25);

	//line
	stroke(96,57,19);
	strokeWeight(0.5);
	line(287,0,287,287);
	line(288,287,354,335);
	line(354,335,287,385);
	line(287,385,287,599);
	

	//left eye
	stroke(96,57,19);
	strokeWeight(5);
	noFill();
	ellipse(135,280,161,88);
	
	strokeWeight(1);
	line(69,236,80,249);
	line(105,216,109,239);
	line(158,222,148,238);
	line(205,231,190,249);

	//eyeball
	fill(54,54,54);
	noStroke();
	ellipse(135,280,28,82);

	//mouth
	noFill();
	stroke(54,54,54);
	strokeWeight(10);
	rect(76,418,425,110);
	
	strokeWeight(5);
	line(82,460,494,460);
	line(82,486,494,486);

	fill(242,109,125);
	noStroke();
	rect(81,462,416,23);






}

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/denise-jiang-self-portrait/feed/ 0
Hannah K-Project-01 https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/hannah-k-project-01/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/hannah-k-project-01/#respond Sat, 03 Sep 2016 02:58:36 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1683 Continue reading "Hannah K-Project-01"]]>

sketch-59.js

function setup() {
    createCanvas(400, 400);
    background(255,181,197);

}

function draw() {

    // Top part of hair - Arc
    fill(51,25,0);
    arc(200,125,200,200,PI,TWO_PI);

    // Main part of hair - Rectangle
    fill(51,25,0);
    rect(100,125,200,158);

    // Face - Ellipse
    fill(225,220,178);
    ellipse(200,155,150,185);

    // Nose - Triangle
    fill(225,200,100);
    triangle(190,170,210,170,200,150);

    // Top of body - Triangle
    noStroke();
    fill(0,205,205);
    triangle(150,416,198,282,246,416);

    // Eye 1 - Circle
    fill(0,0,0);
    ellipse(165,125,25,25);

    // Pupil 1 - Circle
    fill(255,255,255);
    ellipse(165,130,8,8);

    // Eye 2 - Circle
    fill(0,0,0);
    ellipse(235,125,25,25);

    // Pupil 2 - Circle
    fill(255,255,255);
    ellipse(235,130,8,8);

    // Mouth - Arc
    fill(255,250,205);
    arc(200,190,80,80,0,PI);

    // Eyebrow 1 - Rectangle
    fill(51,25,0);
    rect(155,100,18,4);

    // Eyebrow 2 - Rectangle
    fill(51,25,0);
    rect(225,100,18,4);

}

As many people have mentioned, one of the most difficult and time consuming parts of this process was figuring out the coordinates. While I did attempt to take notes as I created my portrait, ultimately, I did a lot of guessing and checking. Overall, I enjoyed the process and look forward to becoming better at coding more efficiently. This was one of the first times I’ve ever used code to create something remotely artistic, so this was really exciting!

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/hannah-k-project-01/feed/ 0
Christine Kim – Portrait – 01 https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/christine-kim-portrait-01/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/christine-kim-portrait-01/#respond Sat, 03 Sep 2016 02:54:36 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1691 Continue reading "Christine Kim – Portrait – 01"]]>

sketch

//Christine Kim
//Section A (Tuesdays 9:00)
//haewannk@andrew.cmu.edu
//Project-01


function setup() {
    createCanvas(600,600);
    background(165,205,236);
}

function draw() {
	noStroke();
	fill(255,205,140);
	ellipse(300,300,200,200);
	fill(66,31,21);
	ellipse(270,300,20,20);
	ellipse(330,300,20,20);

	stroke(66,31,21);
	strokeWeight(3);
	line(255,278,280,278);
	line(317,278,342,278);
	line(300,300,300,330);
	stroke(288,31,76)
	line(300,370,337,355);
	line(263,355,300,370);
	stroke(199,123,165);
	line(245,330,260,330);
	line(340,330,355,330);
	noStroke();
	push();
	translate(347,240);
	rotate(40);
	fill(142,32,21)
	ellipse(0,0,50,128);
	pop();
	push();
	translate(255,240);
	rotate(70);
	fill(142,32,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(203,320);
	rotate(60);
	fill(142,32,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(208,400);
	rotate(50);
	fill(142,32,21);
	ellipse(0,0,65,170);
	pop();
	push();
	translate(395,315);
	rotate(116);
	fill(142,31,21);
	ellipse(0,0,50,128);
	pop();
	push();
	translate(377,400);
	rotate(123);
	fill(142,32,21);
	ellipse(0,0,65,170);
	pop();


}

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/christine-kim-portrait-01/feed/ 0
Owen Fox Project-01 https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/owen-fox-project-01/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/owen-fox-project-01/#respond Sat, 03 Sep 2016 02:51:26 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1672 Continue reading "Owen Fox Project-01"]]>

click to generate new face

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

function draw() {
      noStroke();
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,50,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,250,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(50,450,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(250,450,100,100);
      fill(r = random(0,255), g = random (0,255), b = random (0,255));
      rect(450,450,100,100);
      noLoop();
}
function mousePressed() {
  loop();
}

function mouseReleased() {
  noLoop();
}

this is more abstract than I want it to be, but it took me like 5 hours to figure out how to do this. I was trying to use variables, but I couldn’t get them to work, so I made this instead.

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/owen-fox-project-01/feed/ 0
Alison Hoffman Project-01 https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/alison-hoffman-project-01/ https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/alison-hoffman-project-01/#respond Sat, 03 Sep 2016 02:06:51 +0000 https://courses.ideate.cmu.edu/15-104/f2016/?p=1634 Continue reading "Alison Hoffman Project-01"]]>

sketch

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project-01



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

function draw() {
	noStroke();
	//background hair
	fill(202,179,62);
	ellipse(width/2,height/2+100,400,630);
	//face base
	fill(255,218,185);//neck
	rect(width/2 - 80, height/2 +100,160,340);
	fill(75,75,75);
	ellipse(width/2,height/2+10,290,375); //shadow
	fill(255,218,185);//face
	ellipse(width/2,height/2,300,380);
	//shoulders 
	fill(255,218,185);
	ellipse(width/2,height/2+306,434,180);
	//shirt
	fill(153,0,0);
	rect(168,588,257,40);
	stroke(153,0,0);
	strokeWeight(18);
	strokeCap(SQUARE);
	line(168,532,168,600);	//left strap
	line(430,532,430,600);
	//face
	//eyes
	fill(0);
	noStroke();
	ellipse(width/2 - 55,height/2 - 25,44,26);
	ellipse(width/2 + 55,height/2 - 25,44,26);
	fill(255);
	noStroke();
	ellipse(width/2 - 55,height/2 -20,40,28);//left
	ellipse(width/2 + 55,height/2 -20,40,28);//right
	fill(0,140,180);//iris
	ellipse(width/2 - 55,height/2 -18,20);//left
	ellipse(width/2 + 55,height/2 -18,20);//right
	fill(0);//pupils
	ellipse(width/2 - 55,height/2 -18,12);//left
	ellipse(width/2 + 55,height/2 -18,12);//right
	//nose
	stroke(223,184,150);
	strokeWeight(4);
	line(width/2,height/2 - 2,width/2 + 9,height/2 +66);
	line(width/2 - 14,height/2 + 66,width/2 + 11,height/2 +66);
	//mouth
	fill(219,111,111);
	noStroke();
	triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+24,height/2+106);
	triangle(width/2+8,height/2+120,width/2+20,height/2+120,width/2+40,height/2+90);
	fill(239,133,133);
	triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+20,height/2+122);
    triangle(width/2+16,height/2+122,width/2+22,height/2+122,width/2+40,height/2+90);
    //bangs
    fill(202,179,62);
    ellipse(width/2,height/2 -156,200,70);
    triangle(width/2 -174,height/2-10,width/2+25,height/2-122,width/2-30,height/2-155);
    triangle(width/2 -174,height/2-10,width/2-110,height/2-150,width/2-20,height/2-155);
    triangle(width/2 +174,height/2-25,width/2+25,height/2-122,width/2+110,height/2-161);

    noLoop();
}

]]>
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/03/alison-hoffman-project-01/feed/ 0