Month: September 2017

sketch

//Rachel Park
//Section B @ 10:30 AM
//rsp1@andrew.cmu.edu
//Project-02-VariableFace


function setup() {
    createCanvas(480,640);

}
    //variables for the face
    var eyesize = 20; //a
    var facewidth = 155; //b
    var faceheight = 125; //c
    var earwidth = 30;
    var earheight = 60;
    var antwidth = 20;
    var armswidth = 20;
    var armsheight = 20;
    var armheight = 20;
    var handsheight = 440;
    var handswidth = 155/3;
    var bodywidth = d/2-20;
    var d = 480; //bodysize
    var e = 180; //medium gray fill color
    var f = 138; //dark gray fill color

function draw() {
    background(212,249,246);

    //robot face
    var faceX = width/2
    var faceY = height/3

    rectMode(CENTER);
    noStroke();
    fill(e);
    rect(faceX,faceY,facewidth,faceheight,10);

    fill(220);
    rect(faceX,faceY,facewidth-20,faceheight/2,10);

    //ear things
    var earX = width/3
    var earY = height/3

    noStroke();
    fill(f);
    rect(earX-10,earY,earwidth,earheight,5);

    noStroke();
    fill(f);
    rect(width/2+90,earY,earwidth,earheight,5);

    //antennae
    var antY = height/6

    noStroke();
    fill(f);
    rect(width/2,antY+20,antwidth/2,antwidth*2+10,10);

    noStroke();
    fill(255,41,41);
    ellipse(width/2,antY-10,antwidth,antwidth,10);

    //eyes
    var eyeLX = width/2-38.75;
    var eyeRX = width/2+38.75;
    var eyeY = height/3

    noStroke();
    fill(255);
    ellipse(eyeLX,eyeY,eyesize*2,eyesize*2);
    ellipse(eyeRX,eyeY,eyesize*2,eyesize*2);

    fill(203,35,35);
    ellipse(eyeLX,eyeY,eyesize+10,eyesize+10);
    ellipse(eyeRX,eyeY,eyesize+10,eyesize+10);

    //arms joints
    var armsY = height/2
    fill(f);
    ellipse(width/4,armsY,armswidth,armsheight);
    ellipse(width-120,armsY,armswidth,armsheight);

    //legs & feet
    var legsX = width/2
    var legsY = height-125-35
    var legsYX = height-125+35

    fill(f);
    rect(legsX+60,legsY,40,100);
    rect(legsX-60,legsY,40,100);

    fill(203,35,35);
    rect(legsX+60,legsYX,80,40);
    rect(legsX-60,legsYX,80,40);

    //body
    var bodyX = width/2
    var bodyY = height/2+40
    var bodywidth = d/2-20
    var bodyheight = d/3

    noStroke();
    fill(e);
    rect(bodyX,bodyY,bodywidth,bodyheight,10);

    //arms down

    fill(180);
    rect(width/5+5,armheight+340,21,125,5);
    rect(width-100,armheight+340,21,125,5);

    //hands down
    fill(203,35,35);
    arc(width/4-20,armheight+420,155/3,155/3,3*PI/4,PI/4,PIE);
    arc(width/2+155-15,armheight+420,155/3,155/3,3*PI/4,PI/4,PIE);
}

function mousePressed(){
  armheight = random([10,30]);
  armswidth = random([20,30]);
  eyesize = random(10,20);
  facewidth = random(155,160);
  faceheight = random(125,150);
  earwidth = random(30,55);
  earheight = random(25,60);
  antwidth = random(20,30);
  bodywidth = random([220,210]);
}

For my project, I wanted to make a visual of a small robot because I honestly that it was fun to change up of the possible movements of the figure along with the various facial feature sizes. I had an okay time creating the graphics within the code, but eventually got stuck on the actual functions that were used to make the arms and facial features vary in sizes and locations on the canvas. Overall, I thought that this was a very interesting project and thought that it was a good way to continue to practice the skills that we have learned thus far.

 

 

 

 

 

 

 

 

 

My process included a lot of trial and error. Initially, I wanted the arms of the robot to translate upwards, making it look like it was waving its arms like a “hurrah!”, but eventually I came up with a code with slight changes to the image itself, making the robot look like it’s shrugging instead.

sketch

//Ean Grady
//Section B
//egrady@andrew.cmu.edu
//project-02

var mouth = 25;
var nose = 250;
var eyes = 25;
var eyes2 = 25;
var faceHeight = 150;
var faceWidth = 400;
var x = 0
var y = 0
var z = 0
var x2 = 0
var y2 = 0
var z2 = 0

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background (120, 200, 400);

    //hair
    fill (x, y, z)
    triangle(250, 190, 225, 190, 220, 120)
    triangle(250, 192, 275, 190, 260, 100)
    triangle(275, 190, 300, 190, 300, 120)

    //face
    fill (255, 255, 255)
    stroke (0, 0, 0)
    ellipse (300, 225, faceWidth, faceHeight)

    //eyes
    fill (255, 255, 255)
    stroke (0, 0, 0)
    ellipse (170, 220, eyes*4, eyes*2)
    ellipse (420, 220, eyes*4, eyes*2)
    fill (x2, y, z)
    ellipse (170, 220, eyes2, eyes)
    ellipse (420, 220, eyes2, eyes)

    //nose
    line (nose, 180, 330, 240)
    line (nose, 220, 330, 240)

    //mouth 
    fill (0, 0, 0)
    ellipse (300, 260, 50, mouth)
}

function mousePressed() {
    faceWidth = random(350, 450);
    faceHeight = random(100, 200);
    eyes = random(20, 30);
    nose = random(240, 260);
    mouth = random(10, 40);
    eyes2 = random(20, 70);
    x = random (0, 255);
    y = random (0, 255);
    z = random (0, 255);
}

I found that with this project I had a much easier time setting everything up, and I feel as though I’m finally starting to get the hang of things. I still had a hard time attempting to make the face look more visually pleasing/aesthetic, but I am not mad with the results. Hopefully in future projects I will be able to produce a piece that is both functional (i.e. fulfills the requirements) and visually pleasing.

The design for the face came from a drawing I used to do a lot as a kid whenever I had a sketchbook. It’s pretty simplistic, but I thought that it could fit the goals of the project.

sketch-124.js

  var eyeSize = 10;
  var faceWidth = 350;
  var faceHeight = 370;
  var red = 255;
  var green = 255;
  var blue = 255;

  function setup() {
      createCanvas(640, 480);
  }

  function draw() {
      background(red, green, blue);
      noStroke();
      smooth();
      //watermelon skin
      fill("green");
      arc(320, 240, faceWidth,  faceHeight, 0, PI, CHORD);
      //watermelon fruit inside
      fill("red");
      arc(320, 240, faceWidth-20, faceHeight-30, 0, PI, CHORD);
      //watermelon smiley mouth
      fill("orange");
      arc(320, 270, eyeSize, eyeSize, 0, PI, CHORD);
      //eyesizes&color
      var eyeLX = 640 / 2 - 20;
      var eyeRX = 640 / 2 + 20;
      fill("black");
      ellipse(eyeLX, 320-50, eyeSize, eyeSize);
      ellipse(eyeRX, 320-50, eyeSize, eyeSize);
  }

  function mousePressed() {
      faceWidth = random(100, 400);
      faceHeight = random(100, 350);
      eyeLX = random(250, 300);
      eyeRX = random(340, 370);
      eyeSize = random (10, 25);
      red = random (0, 255);
      green = random (0, 255);
      blue = random(0, 255);
  }

I really hoped to be able to change the color of the background while trying to make my slice of watermelon character. I made the character with arcs and ellipses.

bhyun1-project02.js

//brandonhyun
// 15-104 Section B
//bhyun1@andrew.cmu.edu
//project-02

var eyeSize = 50;
var noseSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var eyebrowslength = 180;


function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {
//ears
  strokeWeight(5);
  //left Ear
  fill(219,153,52);
  ellipse(width/2.7 ,height/4.8 ,50,50);
  //RightEar
  fill(219,153,52);
  ellipse(width/2.7 + 170 , height/4.8 ,50,50);


//Shape of a face
  stroke(0);
  fill(219,153,52);
  ellipse(width/2,height/2,faceWidth,faceHeight);

  var eyeLX = width / 2 - faceWidth * 0.2;
  var eyeRX = width / 2 + faceWidth * 0.2;

//eye
  fill(0);
  ellipse(eyeLX,height/2.3,eyeSize/3,eyeSize/3);
  ellipse(eyeRX,height/2.3,eyeSize/3,eyeSize/3);
//eyebrows
fill(0);
strokeWeight(5);
strokeCap(ROUND);
line(eyeLX-30,eyebrowslength, eyeLX+30,eyebrowslength);
line(eyeRX-30,eyebrowslength, eyeRX+30,eyebrowslength);

//nose
fill(0);
ellipse(width/2,height/2 + 10,noseSize/3,noseSize/3);
fill(255);
noStroke();
ellipse(width/2 - 10,height/2 + 20,noseSize/2,noseSize/2);
fill(255);
noStroke();
ellipse(width/2 + 10,height/2 + 20,noseSize/2,noseSize/2);
}


function mousePressed() {

  eyebrowslength = random (100,200);
  eyeSize = random(10, 100);
  noseSize = random(10,50);

}

I was interested with the Character named Ryan from Kakao Talk, which is a messaging platform in South Korea. Everyone is obsessed with this character and this character became one of the icons for the Kakao co.

When I was working I wanted to recreate the character by myself by using codes and I also wanted to have some movements when the user is clicking.

Components that moves when there is a click are the eyebrows, eyes, and the nose. By having this movement it seems like Ryan is expressing different emotions.