Category: SectionA

Danny-Face

I tried to imitate a character called “Bao” from a short film with a lot of curve vertexes, and other elements. I also added an interactive feature to add to the cuteness.

Danny-Face


let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;



function setup() {
  createCanvas(400, 400);
  background(227, 114, 124);
}

function draw(){
	fill(177, 204, 234)
	strokeWeight(0)
	ellipse(200, 410, 460, 300)
	//body
	fill(248, 235, 230);
	strokeWeight(0);
	beginShape();
	curveVertex(200, 200);	//top
	curveVertex(200, 200);
	curveVertex(175, 230);
	curveVertex(150, 270); 	//left handle
	curveVertex(125, 280);
	curveVertex(120, 285);
	curveVertex(135, 300);
	curveVertex(160, 288);
	curveVertex(200, 290);	//lowest point
	curveVertex(240, 288);
	curveVertex(265, 300);
	curveVertex(280, 285);
	curveVertex(275, 280);
	curveVertex(250, 270);	//right handle
	curveVertex(225, 230);
	curveVertex(200, 200);
	curveVertex(200, 200);
	endShape();
	//face
	fill(248, 235, 230);
	strokeWeight(0);
	beginShape();
	curveVertex(200, 100);
	curveVertex(200, 100);
	curveVertex(180, 135);
	curveVertex(125, 170);
	curveVertex(120, 200);
	curveVertex(200, 220); //low tip
	curveVertex(280, 200);
	curveVertex(275, 170);
	curveVertex(220, 135);
	curveVertex(200, 100);
	curveVertex(200, 100);
	endShape();
	//left eye
	fill(40)
	circle(170, 175, 20)
	//left eye shine
	fill(248, 222, 126);
	strokeWeight(0);
	beginShape();
	curveVertex(180,175); //right point
	curveVertex(180,175);
	curveVertex(173,178);
	curveVertex(170,185); // lowest point
	curveVertex(167,178);
	curveVertex(160,175);
	curveVertex(167,172);
	curveVertex(170,165);
	curveVertex(173,172);
	curveVertex(180, 175);
	curveVertex(180, 175); //top point
	endShape();
	//right eye
	fill(40)
	circle(230, 175, 20)
	//right eye shine
	fill(248, 222, 126);
	strokeWeight(0);
	beginShape();
	curveVertex(240,175); //right point
	curveVertex(240,175);
	curveVertex(233,178);
	curveVertex(230,185); // lowest point
	curveVertex(227,178);
	curveVertex(220,175);
	curveVertex(227,172);
	curveVertex(230,165);
	curveVertex(233,172);
	curveVertex(240, 175);
	curveVertex(240, 175); //top point
	endShape();
	//mouth
	fill(248, 235, 230);
	strokeWeight(1);
	circle(192.5, 200, 15);
	fill(248, 235, 230);
	strokeWeight(1);
	circle(207.5, 200, 15);
	//coverup
	fill(248, 235, 230);
	strokeWeight(0);
	rect(170, 190, 60, 10);

	//blush
	fill(247, 134, 144)
	strokeWeight(0)
	circle(140, 190, 24)
	fill(247, 134, 144)
	strokeWeight(0)
	circle(260, 190, 24)

	//left arm
	fill(248, 235, 230);
	stroke(140)
	strokeWeight(1);
	beginShape();
	curveVertex(value1x, value1y);
	curveVertex(value1x, value1y);
	curveVertex(value2x, value2y);
	curveVertex(value3x, value3y);
	curveVertex(value3x, value3y);
	endShape();
	//right arm	fill(248, 235, 230);
	stroke(140)
	strokeWeight(1);
	beginShape();
	curveVertex(207, 250);
	curveVertex(207, 250);
	curveVertex(210, 265);
	curveVertex(213, 250);
	curveVertex(213, 250);
	endShape();
}

function mouseClicked() {
  if (value2y === 265) {
    value2y = 230;
  } else {
    value2y = 265;
  }
}

Steven Fei-Project01- Face

sketch

function setup() {
    createCanvas(600, 600);
    background(147,201,149);
   
}

function draw() {
    
    //body
    fill(120,29,29);
    strokeWeight(1);
    rect(110,445,420,400,95,80);
    strokeWeight(1)
    fill(225,183,129);
    triangle(230,450,330,700,430,450);
    strokeWeight(0);
    fill(242,206,160);
    triangle(240,450,330,650,415,450);
    
    fill(255);
    arc(200,550,40,40,0.5*PI,PI+0.5*PI,CHORD);
    fill(0);
    arc(200,550,40,40,PI+0.5*PI,0.5*PI,CHORD);
    fill(255);
    arc(200,540,20,20,PI+0.5*PI,0.5*PI,CHORD);
    fill(0);
    arc(200,560,20,20,0.5*PI,PI+0.5*PI,CHORD);
    fill(255);
    ellipse(200,560,5,5);
    fill(0);
    ellipse(200,540,5,5);
    
    //ear
    strokeWeight(0);
    fill(255,220,169);
    ellipse(130,294,50,60);
    ellipse(505,294,50,60);
    //noStroke();
    //face
    strokeWeight(1);
    stroke(0);
    fill(255,222,171);
    ellipse(322,280,340,453);
    
    //nose
    noFill();
    strokeWeight(1);
    stroke(34,34,34);
    line(320,240,350,333);
    
    stroke(0);
    line(350,333,330,345);
    strokeWeight(1.5);
    stroke(0);
    line(330,345,315,348);
    
    //mouth
    arc(327,380,80,20,0-0.1*PI,PI,OPEN);
    
    //eyes
    stroke(0.5);
    fill(255);
    arc(242,230,100,40,PI,TWO_PI,OPEN);
    stroke(1);
    noFill();
    arc(242,230,100,40,0,QUARTER_PI,OPEN);
    noStroke();
    fill(255,222,171);
    ellipse(242,230,95,35);
    fill(0);
    ellipse(260,230,16,16);
    
    noStroke();
    fill(255);
    arc(390,230,100,40,PI,TWO_PI,OPEN);
    stroke(1);
    noFill();
    arc(390,230,100,40,PI,PI-QUARTER_PI,OPEN);
    noStroke();
    fill(255,222,171);
    ellipse(390,230,95,35);
    fill(0);
    ellipse(360,230,16,16);
    
    //hair
    fill(0);
    quad(137,157,127,260,150,297,170,200);
    
    //hat
    strokeWeight(1);
    fill(71,74,90);
    arc(290,140,350,250,PI-0.19*PI,TWO_PI,PIE);
    strokeWeight(9);
    stroke(7,15,55);
    fill(255,222,171);
    arc(360,160,200,120,PI,TWO_PI,OPEN);
    
    //eyebrow
    stroke(0)
    strokeWeight(8);
    line(215,180,306,175);
    line(345,179,430,175);
    
    
    
    
    
}

Emily Stark- Looking Outwards 01

Think about an interactive and/or computational project (from anywhere, by anyone except yourself) that you knew about before starting this course, and which you find inspirational. In a blog post of about 100-200 words,

Please discuss the project. What do you admire about it, and why do you admire these aspects of it?

  • How many people were involved in making it, and how did they organize themselves to achieve it? (Any idea how long it took her/him/them to create it?
  • To the best of your knowledge, did creating this project require the development of custom software/scripts, or did the authors create the project using “off-the-shelf” (commercial) software?
  • What prior works might the project’s creators have been inspired by?
  • To what opportunities or futures does the project point, if any?
  • Provide a link (if possible) to the work, and a full author and title reference.
  • Embed an image and a YouTube/Vimeo video of the project. All images and videos should include a caption, e.g .”Computer-generated image titled X by Artist Y”, or “Video documentary on the process used by Artist Z.” As always, cite sources. You may find WordPress support for adding captions to embedded content, or you can simply type text below the image.
  • Label your blog post with the Category, LookingOutwards-01. (You can find these Categories already made for you in the “Categories” section of the WordPress editor.)
  • Also label your blog post with your section, e.g. SectionA.

I have very limited experience with interactive art, but one project that stands out to me was by one of my fellow students. The project was an interactive piece in the play “A/B Machines” put on by the School of Drama last fall. Giada Sun was the media designer with Sean Leo as the assistant media designer on the play and made an interactive photo booth for the audience. In addition to that, cameras were used the entire show for the actors to interact with, which were then projected onto the set. I believe Giada used Millumin to program the projections. This show, sadly, had the short run time of one week.