Category: Section E

juyeonk – project02 – face

sketch

var eyeSize = 20;
var upperfaceWidth = 180;
var lowerfaceWidth = 160;
var faceHeight = 240;
var eyelength = 25;
var eyewidth = 25
var earheight = 50;
var noseheight = 70;
var nostrilsize = 15;
var hornheight = 90;
var faceR = 0;
var faceG = 0;
var faceB = 0;




function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(96, 158, 81);
    
    var lefteyeposition = width/2 - upperfaceWidth*0.25;
    var righteyeposition = width/2 + upperfaceWidth*0.25;
    var eyeposition = height/2 - faceHeight*0.25;
    
    //face of the horse
    noStroke();
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    quad(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth /2, height/2 - faceHeight/2, width/2 + lowerfaceWidth/4, height/2 + faceHeight/2, width/2 - lowerfaceWidth/4, height/2 + faceHeight/2);
    
   
    //left ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 - upperfaceWidth/2, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight);
    
    //left inner ear
    fill(0);
    triangle(width/2 - upperfaceWidth/2 + 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.25 * upperfaceWidth - 5, height/2 - faceHeight/2, width/2 - upperfaceWidth/2 + 0.125 * upperfaceWidth, earheight * 1.25);
    
    //right ear
    fill(109 + faceR, 83 + faceG, 43 + faceB);
    triangle(width/2 + upperfaceWidth/2, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, 50);
    
    //right inner ear
    fill(0);
    triangle(width/2 + upperfaceWidth/2 - 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.25 * upperfaceWidth + 5, height/2 - faceHeight/2, width/2 + upperfaceWidth/2 - 0.125 * upperfaceWidth, earheight * 1.25);
    
    //left eye
    fill(0);
    ellipse(lefteyeposition, eyeposition, eyewidth, eyelength);
    
    //right eye
    fill(0);
    ellipse(righteyeposition, eyeposition, eyewidth, eyelength);
    
    //nose
    fill(56, 45, 27);
    ellipse(width/2, height/2 + faceHeight/2, lowerfaceWidth * 0.7, noseheight);
    
    //left nostril
    fill(0);
    ellipse(width/2 - 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    //right nostril
    fill(0);
    ellipse(width/2 + 0.1 * lowerfaceWidth, height/2 + faceHeight/2, nostrilsize, nostrilsize * 1.3);
    
    
    //unicorn
    //unicorn's horn
    fill(255);
    triangle(width/2, height/2 - faceHeight/2 - hornheight, width/2 - 0.1 * upperfaceWidth, height/2 - faceHeight/2, width/2 + 0.1 * upperfaceWidth, height/2 - faceHeight/2);
    
    

    
    
}
 

function mousePressed() {
    hornheight = random(0, 100);
    upperfaceWidth = random(180, 220);
    lowerfaceWidth = random(140, 240);
    faceHeight = random(220, 260);
    nostrilsize = random(15, 20);
    eyewidth = random(20, 50);
    eyelength = random(20, 30);
    faceR = random(0, 40);
    faceG = random(0, 40);
    faceB = random(0, 40);
}

I tried to program it so that the species of the horse would change when you click on it.
At first I tried to input three types of horses: a regular one, a unicorn, and a pegasus to make the horn pop up if the horse is a unicorn and make the wings pop up if the horse is a pegasus. But I had some trouble incorporating conditionals with the mouthpressed function, so I had to be satisfied with the changes in color of the horse’s skin and the and the sizes of its features. I made the range for the value of the hornheight 0-100 so that the horse would sometimes look like it doesn’t have a horn, but I hope I could make that happen by using conditionals.

adev—Project 03—Variable—Face

adev_Project_02

var skinR = 201;
var skinG = 143;
var skinB = 101;

var rectX = 350;
var rectY = 200;
var rectWidth = 150;
var rectHeight = 230;

var mouthW = 50;
var mouthH = 50;

var eyeW = 40;
var eyeH = 20;

var pt = 18;

var personas = ["JOE likes raw vegetables and long walks on the beach", "JOEY like iced green tea and planning weddings", "JOESEPH likes tofu turkey and Nathan Lane movies", "JOLENE likes peanut butter cups and Tibetan arts and crafts", "JOANNE likes lavendar hand cream and red neon lights", "JOESEPHINE likes spicy oats and museum gift shops", "JOAN likes candied pineapple and matcha espresso fusions", "JOEL likes caramel custard and hot wheels", "JOHANNES likes exposed red brick walls and blue turtlenecks"];

var index = 0;
 
function setup() {
 createCanvas (640,480);    
 background(255,233,10);
}

function draw() {
    
    background(255,233,10); 
    
    //body
    fill(skinR, skinG, skinB);
  stroke (220,120,40);
    strokeWeight(10);
    rect(rectX, rectY, rectWidth, rectHeight);
    
    //mouth
     fill (255,0,0); 
    noStroke();
  arc(rectX + 40, rectY+50, 
  mouthW + 10, mouthH +40, 0, 2*HALF_PI);
    
    //teeth
     fill (240); 
  arc(rectX + 40, rectY+50, 
  mouthW + 10, mouthH - 20, 0, 2*HALF_PI);
    
    //eye1
    fill(255);
    noStroke();
    ellipse(rectX+30, rectY+20, eyeW, eyeH);
    fill(0);
    noStroke();
    ellipse(rectX+30, rectY+20, eyeH, 15);
    
    //eye2 
    fill(255);
    noStroke();
    ellipse(rectX+90, rectY+20, eyeW, eyeH);
    fill(0);
    noStroke();
    ellipse(rectX+90, rectY+20, eyeH, 15);
    
    //personas
  fill(50);
  textFont("Georgia");
  textSize(pt);
   
  text(personas[index], 100,  100);
    
}
    
    
function mousePressed (){
    //changing skin colour
    skinR = random(200,80);
    skinG = random (90,90);
    skinB = random (101,40);
    
    //changing body proportions
    rectX = random(150,450);
    rectY = random(150,300);
    rectWidth = random (150,200);
    rectHeight = random (150, 400);
    
    //changing eye proportions
    eyeW = random (30,70);
    eyeH = random (20,30);
    
    //changing mouth proportions
    mouthH = random (10,200);
    mouthW = random (10,200);
    
    //persona generator 
    index = index + 1;
    if (index == personas.length) {
    index = 0;
  }
    
  }

I wanted to have fun with the Project and so I decided to make characters out of my different faces. I like how each face has a fun, kind of weird but unique personality. I thought they all looked like “Joes” so I made them all pretty similar. I started off wanting to do really complicated things that I had to simplify but it was a good opportunity to play with p5.js, experiment and learn about arrays.

gyueunp – Looking Outwards 02

 

Bubble Chamber (2003) is a generative painting system created by Jared Tarbell for an exhibition in the Processing gallery. The system’s imaginary particles are created by collisions that contain 216 random calculations and over 1 billion pixels of information that are unique to each one. Just as impressive as the broad range of possible outcomes are the visual elements of the final products. The randomness of the scattered patterns create fascinating visuals that are simply absorbing. The limited usage of colors contrasts with the detailed patterns, creating an excellent balance. Even with only four possible types of particles, the overlapping designs are almost stomach-turning. However, I would love to see more variations, as some final products in the series resemble one another.

More:

Jared Tarbell’s website

Isabelle Vincent Project-02

sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earWidth = 10;
var earHeight = 10;
var FacecolorPt1 = 100;
var FacecolorPt2 = 100;
var FacecolorPt3 = 100;
var StrokecolorPt1 = 0;
var StrokecolorPt2 = 0;
var StrokecolorPt3 = 0;
var thic = 1;
var y1 = 220;
var y2 = 260;
function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(51, 153, 102);
    //body
    fill(0);
    stroke(0);
    triangle(320 - faceWidth/2 - 40 , 480 , 320 , 240 , 320 + faceWidth/2 + 40,480);
    //face elliplse
    fill(FacecolorPt1, FacecolorPt2, FacecolorPt3);
    stroke(StrokecolorPt1, StrokecolorPt2, StrokecolorPt3);
    ellipseMode(CENTER);
    ellipse(320, 240, faceWidth,  faceHeight);
    //eye ellilpse
    fill(0);
    var eyeLeftX = width / 2 - faceWidth * 0.25;
    var eyeRightX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLeftX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRightX, height / 2, eyeSize, eyeSize);
    //nose
    stroke(0);
    strokeWeight(thic);
    line(320,y1,320,y2);
    //hat
    triangle(320 - faceWidth/2 , 240 - faceHeight/2, 320, 0, 320 + faceWidth/2, 240 - faceHeight/2);
    rectMode(CORNERS);
    rect(320 - faceWidth/2 - 30, 240 - faceHeight/2 - 20, 320 + faceWidth/2 + 30, 240 - faceHeight/2 + 20);
    //Cauldron
    stroke(0);
    strokeWeight(5);
    fill(0);
    ellipseMode(CORNER);
    ellipse(10,430,50,50);
    rectMode(CORNER);
    rect(5,425,60,20);
    //Cursor Egg
    fill(255);
    strokeWeight(3);
    stroke(255);
    ellipse(mouseX,mouseY,20,30);
}

function mousePressed() {
    faceWidth = random(50, 400);
    faceHeight = random(100, 340);
    eyeSize = random(10, 30);
    earHeight = random(10,25);
    FacecolorPt1 = random(10,255);
    FacecolorPt2 = random(10,255);
    FacecolorPt3 = random(10,255);
    StrokecolorPt1 = random(0,255);
    StrokecolorPt2 = random(0,255);
    StrokecolorPt3 = random(0,255);
    thic = random(1,10);
    y1 = random(240 - eyeSize, 240 - eyeSize);
    y2 = random(y1 + 5,y1 + 30);
}

I used the given template as my basis; I changed some of the original framework and built on top of it. After randomizing the skin color I decided to make the faces into witches because most of the randomized skin colors look non-human and similar to a cartoon witch.

gyueunp – Project-02: Variable Faces

variable face

// GyuEun Park
// 15-104 E
// gyueunp@andrew.cmu.edu
// Project-02

var eyeSize = 14;
var blushTransp = 0;
var colorR = 112;
var colorG = 104;
var colorB = 104;
var eyebrowTransp = 0;

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

function draw() {
	background(colorR,colorG,colorB);

	// ears
	fill(0);
	noStroke();
	ellipse(175,125,20,30);
	ellipse(305,125,20,30);

	// head and neck
	fill(252,252,248);
	ellipse(width/2,320,280,440);
	
	// face
	fill(240,234,227);
	ellipse(width/2,230,170,200);

	// eyes
	fill(70);
	ellipse(200,230,eyeSize,eyeSize);
	ellipse(280,230,eyeSize,eyeSize);

	//blush
	fill(246,179,167,blushTransp);
	ellipse(190,245,15,6);
	ellipse(290,245,15,6);

	// nose
	stroke(100);
	strokeWeight(2);
	line(235,255,240,260);
	line(245,255,240,260);

	//philtrum
	stroke(100);
	strokeWeight(2);
	line(width/2,260,width/2,275);

	//eyebrows
	stroke(100,eyebrowTransp)
	line(200,215,210,218);
	line(280,215,270,218);

	fill(178,191,199);
	noStroke(0);
	ellipse(230,282,4,4);

	fill(255);
	noStroke(0);
	ellipse(229,281.4,1.5,1.5);
}

function mousePressed() {
	// when the user clicks, these variables are reassigned to random values within specified ranges.
	eyeSize = random(10,20);
	blushTransp = random(0,100);
	colorR = random(100,112);
	colorG = random(100,104);
	colorB = random(100,104);
	eyebrowTransp = random(0,100);
}

I made a face of my new stuffed alpaca. Although the random changes were interesting, I wanted to avoid drastic alterations. Therefore, I focused on creating subtle color and transparency changes in the background and its facial features.

sunmink-LookingOutwards-02

Turbulence by Dr.Woohoo is a collection of paintings drawn with robot arm using the algorithm of Perlin Noise effect. Perlin Noise effect is usually used for generating randomness in films when creating water effects in sceneries, however, Woohoo used it to instruct the robot to repeatedly draw a hexagon shape. With this algorithm, Dr.Woohoo created a delicate and organic art piece.

Dr.Woohoo as an artist combines various fields of his interest such as 3d printing and robotics to create interesting artwork that is delicate and organic. Although he used water color for the Turbulence, he is known for incorporating mediums in various methods to create his art piece. He not only pushes himself to integrate different fields but also desires to break through the traditional idea of art and introduces innovative styles to produce art. This for me is inspirational because he proves that art is not something that has an outline. For him, using the same medium does not mean the same. Depending on how he uses the medium it can turn into shoes with a wonderful pattern or a beautiful painting.

ljkim – project 02

sketch

/*Lois Kim
Section A
ljkim@andrew.cmu.edu
Project-02*/

var helmetWidth = 323;
var helmetHeight = 323;
var shieldWidth = 275;
var shieldHeight = 275;
var shieldOHeight = 275;
var shieldOWidth = 275;
var faceWidth =  178;
var faceHeight = 183;

//stars in sky
var star = {
  x: 100,
  y: 50
}

//color of stars
var col = {
  r: 255,
  g: 255,
  b: 255
}

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

function draw() {
  //background color
  background("#495C7C");
  
  //random stars in background
  star.x = random(0,width);
  star.y = random(0,height);
  fill(col.r, col.g, col.b);
  noStroke();
  ellipse(star.x, star.y, 1, 1);
  
  //helmet
  fill("#B3B3B3");
  noStroke();
  ellipse(320, 240, helmetWidth, helmetHeight);
  
  //shield
  fill("#666666");
  noStroke();
  ellipse(320, 240, shieldWidth, shieldHeight);
  
  //shield outline
  stroke("#1A1A1A");
  strokeWeight(3);
  noFill();
  ellipse(310, 250,shieldOHeight, shieldOWidth);
  
  //antenna stick
  fill("#B3B3B3");
  noStroke();
  rect(297, 29, 7, 70);
  
  //antenna circle
  fill("#9E0421");
  noStroke();
  ellipse(300,25,25,25);
  
  //face
  fill("#EAD8A9");
  noStroke();
  ellipse(320, 250, faceWidth, faceHeight);
  
  //left eye
  fill("#333333");
  noStroke();
  ellipse(365,250,12,12);
  //right eye
  fill("#333333");
  noStroke();
  ellipse(275,250,12,12);
  
  //mouth
  fill("#B2542F");
  beginShape();
  curveVertex(292, 303);
  curveVertex(310, 311);
  curveVertex(326, 280);
  curveVertex(349, 314);
  curveVertex(356, 308);
  endShape();
  
}

function mousePressed() {
  helmetWidth = random (200, 400);
  helmetHeight = random (310, 400);
  shieldWidth = random (300, 290);
  shieldHeight = random (350, 240);
  shieldOHeight = random (200, 430);
  shieldOWidth = random (290, 300);
  faceWidth = random (150, 200);
  faceHeight = random (100, 200);
}

I wanted to do an astronaut as my project this week. I attempted to add a stars generator in the background (as seen in my code) – however it would not allow my random generator for the face to start fresh. It would over draw what was existing before. Although I had fixed that issue – the star generator had disappeared. This is what it looked like with the stars:

Before I begin any project I always start in adobe illustrator and this always helps visualize projects.

dayoungl – LookingOutwards02

Kyuha Shim’s Formation (2016) commissioned by Alliance Graphique Internationale (AGI).

I found this project on his portfolio website. Q is currently here at School of Design teaching communication design. Q is famous for creating his projects using the concept of data visualization. There isn’t a lot of description about this project other than “Commissioned by Alliance Graphique Internationale (AGI) for the Special Project Exhibition during AGI conference in Seoul 2016. A generative system that presents a critical view of responsive systems through multitudinous transitions and scaling of graphic forms.” What I found interesting about this work was that it transformed simple elliptical shapes into something more interesting by randomizing proportion and colour. I was also amazed by despite how random the colours are, no one colour seems unfitting.

jwchou-LookingOutwards-2

This post features the work of an artist/designer right here at CMU! His name is Kyuha Shim, or “Q” for short. He teaches communication design in the School of Design.

Q has done multiple projects based on generative typography. He used custom software to patterns and forms to create and present traditional letterforms/type in interesting and unique ways.

His work on generative type: http://generativetypography.com

Typography is very delicate. It depends on a set of somewhat-flexible rules that govern letterforms, thickness of strokes, and how close characters should be to each other. I assume that in order for Q’s type to look like type, the algorithms he used included many rules and boundaries to ensure that the generated type still contained many of the important characteristics of standard type.

Q’s artistic sensibilities are reflected in the different typefaces, colors, textures, and patterns he used. As an extension, the sensibilities of type designer who might’ve designed a typeface he used also influenced the piece.

This project inspires me because it is still incredibly dynamic and beautiful, even though typography has a reputation for having a lot of intricate rules! If I were to change something, I would’ve loved to see some generative type in a bigger scale. A lot of his projects focus on a word or a short phrase. What would a paragraph look like if it was pushed through his algorithm?

 

jwchou-Project-02-VariableFace

sketch 2

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project 2

var eyeSize = 20;
var pupilX = 268;
var pupilY = 124;
var pupilSize = 6.5;
var armRotation = 0;
var MouthWidth = 50;
var MouthHeight = 30;
var RightEyeY = 120;
var mouth = 1;
var mouthExpressions = [1,2];


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

function draw() {
	//background will change color based on mouseX coordinates
	background(172, 230, 226); // blue
    if(mouseX < (width/3)){
      background(226, 225, 163); // yellow
    }
    if(mouseX > (2/3)*width){
      background(244,189,100); //orange
    }

	noStroke();

	//right eye
	fill(0);
	ellipse(349, RightEyeY, eyeSize, 1.5*eyeSize);

	//head
	fill(43, 132, 212);
	beginShape();
	curveVertex(228, 169);
	curveVertex(228, 169);
	curveVertex(267, 85);
	curveVertex(330, 41);
	curveVertex(355, 78);
	curveVertex(350, 146);

	//torso
	curveVertex(347, 178);

	//legs
	curveVertex(358, 261);
	curveVertex(359, 311);
	curveVertex(367, 369);
	curveVertex(387, 409);
	curveVertex(404, 417);
	curveVertex(417, 437);
	curveVertex(386, 440);
	curveVertex(352, 435);
	curveVertex(343, 422);
	curveVertex(315, 365);

	//pelvis
	curveVertex(296, 337);

	//left leg
	curveVertex(286, 358);
	curveVertex(276, 396);
	curveVertex(273, 402);
	curveVertex(282, 416);
	curveVertex(289, 432);
	curveVertex(272, 438);
	curveVertex(246, 436);
	curveVertex(234, 429);
	curveVertex(236, 378);
	curveVertex(238, 340);
	curveVertex(238, 298);
	curveVertex(238, 298);
	curveVertex(229, 230);
	curveVertex(229, 230);
	endShape();

   
    //left eye
    fill(255)
    ellipse(267, 130, eyeSize, 1.5*eyeSize)
    fill(0);
    ellipse(264, 130, eyeSize, 1.5*eyeSize);
    fill(255);
    ellipse(pupilX, pupilY, pupilSize, pupilSize);


     //white body
    fill(255);
    rotate(0*PI);
    beginShape();
    curveVertex(300, 307);
    curveVertex(265, 232);
    curveVertex(265, 192);
    curveVertex(277, 143);
    curveVertex(292, 104);
    curveVertex(309, 72);
    curveVertex(334, 55);
    curveVertex(338, 57);
    curveVertex(344, 87);
    curveVertex(344, 113);
    curveVertex(342, 149);
    curveVertex(340, 177);
    curveVertex(337, 201);
    curveVertex(340, 227);
    curveVertex(327, 264);
    curveVertex(312, 293);
    endShape();

    //mouth
    fill(0);

    //frown
    if(mouth == 1){
      arc(309, 155, MouthWidth, MouthHeight, PI, 2*PI);
    }
    //smile
    if(mouth == 2){
    	arc(309, 135, MouthWidth, MouthHeight, 0, PI);
    }

    //left arm
    fill(43, 132, 212);
    rotate(armRotation*PI);
    beginShape();
    curveVertex(258, 251);
    curveVertex(251, 280);
    curveVertex(232, 270);
    curveVertex(218, 240);
    curveVertex(201, 218);
    curveVertex(182, 180);
    curveVertex(162, 138);
    curveVertex(152, 120);
    curveVertex(151, 112);
    curveVertex(156, 107);
    curveVertex(162, 106);
    curveVertex(152, 120);
    curveVertex(151, 112);
    curveVertex(156, 107);
    curveVertex(162, 106);
    curveVertex(172, 114);
    curveVertex(183, 126);
    curveVertex(204, 144);
    curveVertex(226, 166);
    curveVertex(256, 196);
    curveVertex(260, 224);
    endShape();

    //right arm
    beginShape();
    curveVertex(340, 118);
    curveVertex(342, 205);
    curveVertex(345, 224);
    curveVertex(345, 256);
    curveVertex(347, 267);
    curveVertex(360, 243);
    curveVertex(366, 234);
    curveVertex(376, 220);
    curveVertex(388, 206);
    curveVertex(398, 191);
    curveVertex(410, 176);
    curveVertex(417, 167);
    curveVertex(430, 145);
    curveVertex(446, 118);
    curveVertex(453, 102);
    curveVertex(447, 96);
    curveVertex(439, 100);
    curveVertex(424, 108);
    curveVertex(409, 122);
    curveVertex(390, 134);
    curveVertex(370, 153);
    curveVertex(340, 188);
    endShape();
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    pupilX = random(258, 271);
    pupilY = random(122, 138);
    pupilSize = random(6.5, 15);
    armRotation = random(-0.01, 0);
    MouthWidth = random(15, 50);
    MouthHeight = random(15,40);
    RightEyeY = random(105,135);
    mouth = random(mouthExpressions); //mouth will change from frown to smile

}

For this project, a friend gave me the suggestion that I should recreate left shark, who was took over the internet after Katy Perry’s 2015 Super Bowl Halftime Show.

To plot all the distinct points, I opened an image file in Adobe Illustrator and used the “info” window to find the pixel coordinate for the various different shapes.

Most everything was pretty straightforward, but I did have a hard time getting the arms (fins) to move and the color of the background to change.  In fact, I couldn’t figure out how to make the colors change on click, so I made it change based on mouse movement. I got the fins to rotate, but I need to learn how to change the point of rotation from the origin to another point.