Month: September 2019

Minjae Jeong-Project 02-Variable Face

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-02-Variable-Face

var backgroundR = 181;
var backgroundG = 100;
var backgroundB = 227;
var faceR = 116;
var faceG = 209;
var faceB = 157;
var faceW = 300;
var faceH = 250;
var eyeW = 100;
var eyeH = 130;
var pupilW = 50;
var pupilH = 50;
var mouthW = 200;
var mouthH = 120;

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

function draw() {
    background(backgroundR/2, backgroundG/2, backgroundB/2);
    noStroke();
    //face
    fill(faceR,faceB,faceB);
    ellipse(240, 300, faceW,  faceH);
    //eyes & pupils
    fill(255, 224, 224);
    ellipse(120 ,280, eyeW/2 + 30, eyeH/2);
    ellipse(320, 280, eyeW/2 + 30, eyeH/2);
    fill(0);
    ellipse(120, 280, pupilW, pupilH);
    ellipse(320, 280, pupilW, pupilH);
    //mouth
    fill(255);
    arc(240, 340, mouthW, mouthH, 0, PI);

}

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.
    backgroundR = random(150, 200);
    backgroundG = random(50, 150);
    backgroundB = random(180, 255);
    faceR = random(100, 140);
    faceG = random(200, 240);
    faceB = random(170, 190);
    faceW = random(300, 400);
    faceH = random(225, 275);
    eyeW = random(60, 100);
    eyeH = random(80, 120);
    pupilW = random(20, 50);
    pupilH = random(20, 50);
    mouthW = random(160,200);
    mouthH = random(70, 150);
}

Happy weekend

Assignment – 02 – Visual Harmonies


sketch


function setup() {
    createCanvas(600, 300);
    background(200, 150, 100);
    noStroke(0);
    var one = 50;
    var two = 2 * one;
    var three = 3 * one;
    var four = 4 * one;
    fill(250);
    ellipse(200 - (one / 2), 50 + (one / 2), one, one);
    fill(0);
    rect(200, 50 + one, one, three);
    fill(100);
    rect( 200, 50, three, one);
    fill(250);
    ellipse(200 + two, 50 + (2.5 * one), two, three);
    fill(200);
    rect( 200 + three, 50, two, two);
    fill(50);
    rect( 200 + three, 50 + two, two, two);
    fill(250);
    triangle( 200 + four + one, 50, 200 + four + one, 50 + four, 200 + two + four, 50 + two);
}

Sarah Choi – Looking Outwards – 02

I chose Karl Sims’ Flow, a 2018 interactive exhibit showcased at the MIT Stata Center in Cambridge, Massachusetts. The project used “various fluid flow, particle systems, and image processing simulations” which reacted to the audience’s movements incorporated with special effects in order to let the viewers feel as if they are simulated into the environment the art is trying to portray. I love the color and visual effects used in this exhibit because it brings out inspirations from different forms of nature, showcasing the aspect of fluid flow of gravitational, light, and liquid effects. I assume that the algorithm that generated the work is a mixture of patterns and randomization. The natural motions of nature such as the circular direction of gravity or ripples from waves all follow a consistent pattern; while the dispersion of colors getting mixed follow a more random algorithm. However, Karl Sims depicted his artistic creation through the interaction of his audience. Through this exhibit, he allowed his viewers to appreciate natural patterns of everyday life which aren’t necessarily seen through the naked eye. 

http://www.karlsims.com/flow.html

Flow by Karl Sims

MIT Stata Center 2018

Project – 02 – Variable Face

sketch


function setup () {
  createCanvas(600, 600);
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
}
function draw() {
  background(255 - r, 255 - g, 255 - b);
  fill(r, g, b);
  noStroke(0);
  ellipse(300, 300, headW, headH);
  ellipse(cheekLX, cheekY, headW / 2, headH / 2);
  ellipse(cheekRX, cheekY, headW / 2, headH / 2);

  fill(240);
  ellipse(eyeLX, eyeY, headW / 5, headH / 5);
  ellipse(eyeRX, eyeY, headW / 5, headH / 5);
  fill(230 - r, 230 - b, 230 - g);
  ellipse(eyeLX + (headW / 40), eyeY + (headH / 40), 30, 30);
  ellipse(eyeRX - (headW / 40), eyeY + (headH / 40), 30, 30);
  fill(r - 100, g - 100, b - 100);
  bezier(cheekLX, cheekY, cheekLX + headW / 4, cheekY + headH / 4, cheekRX - headW / 4, cheekY + headH / 4, cheekRX, cheekY);

  fill(r - 30, g - 30, b - 30);
  ellipse(300, 300, noseW, noseH);
  ellipse(300 - (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
  ellipse(300 + (noseW / 2), 300 + (noseH / 6), noseH / 3, noseH / 3);
}

function mousePressed() {
  headW = random(250, 450);
  headH = random(300, 450);
  noseH = random(60, 150);
  noseW = random(50, 110);
  r = random(40, 255);
  g = random(40, 255);
  b = random(40, 255);
  eyeLX = 300 - (headW / 6);
  eyeRX = 300 + (headW / 6);
  eyeY = 300 - (headH / 5);
  cheekLX = 300 - (headW / 4);
  cheekRX = 300 + (headW / 4);
  cheekY = 300 + (headW / 5);
}

Sarah Choi Project-02-Variable-Face

project-02-variable-face

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Assignment-02-A

var noseSize = 20;
var nostrilHeight = 180;
var nostrilWidth = 120;
var eyes = 20

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

function draw() {
    background(250, 157, 157);

    //nose
    stroke(253, 212, 212);
    ellipse(width / 2, height / 2, nostrilHeight,  nostrilWidth);
    stroke(255);
    var nostrilL = width / 2 - nostrilHeight * 0.25;
    var nostrilR = width / 2 + nostrilHeight * 0.25;
    ellipse(nostrilL, height / 2, noseSize, noseSize);
    ellipse(nostrilR, height / 2, noseSize, noseSize);

    //eyes
    noFill();
    strokeWeight(5);
    var eyesL = width / 2 - nostrilHeight * 0.3;
    var eyesR = width / 2 + nostrilHeight * 0.3;
    arc(eyesL, height / 3, noseSize * 1.1, noseSize * 2, PI, TWO_PI);
    arc(eyesR, height / 3, noseSize * 1.1, noseSize * 2, PI, TWO_PI);
    
    //legs
    var legsL = width / 3.5;
    var legsR = width /1.5;
    arc(legsL, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    arc(legsR, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    var legsLB = width / 3
    var legsRB = width / 1.4
    arc(legsLB, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);
    arc(legsRB, height / 1.2, noseSize + 10, noseSize + 20, 0, PI, OPEN);

    //tail
    bezier(125, 200, 130, 160, 180, 180, 110, 190);
    bezier(125, 200, 125, 220, 190, 170, 150, 190);
    bezier(150, 190, 110, 220, 160, 220, 160, 210);
}

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.
    nostrilHeight = random(100, 200);
    nostrilWidth = random(75, 150);
    noseSize = random(5, 30);
    eyesL = random(10, 30);
    eyesR = random(10, 30);
    legsL = random(10, 30);
    legsR = random(10, 40);
}

I played around from the template, and I started getting more ideas. I wanted to create an animal and the first thing I thought of was a pig. This is an outline of prominent features of pigs I wanted to portray.

Looking Outwards – 02

One piece of generative art that has always amazed me is the game by Mossmouth studios titled Spelunky. Initially a browser game, it was defined by its dungeon structure program, which built a large 4 by 4 for room for each level, building a cohesive and constantly different game as you play through its 16+ levels. The game itself is an excellent work of programming and code design, but its most impressive feature is how the game knows how it creates a path within its trap filled, maze like dungeon algorithm to create a fun, non confusing experience for the player that allows them to explore and move forward in their own way. The code is variable enough to create a new experience each time you play, but not too confusing where the player feels lost. The algorithm plays such a huge role in the experience, but it is overshadowed by the unique visuals and immersive music.

https://store.steampowered.com/app/239350/Spelunky/

William Su – Project 02 – Variable Face

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-02
//data-width="640" data-height="480"

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var diam = 170;
var smileDiam = 0.2;
var endAng = 0.5;
var startAng = 0.1;
var fillnum = 100;
var weightnum = 1;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	stroke(0);
    strokeWeight(weightnum);
    background(180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    arc(width / 2, height / 2, smileDiam * diam, smileDiam * diam, startAng * PI, endAng * PI);
}
 
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.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    startAng = random(0.05, 0.3);
    endAng = random(0.4, 0.8);
    smileDiam = random(0.2, .4);
    fillnum1 = random (50, 200);
    fillnum2 = random (100, 250);
    fillnum3 = random (10, 150);
    fill(fillnum1, fillnum2, fillnum3);
    weightnum = random(1,5);
}

In this project, I utilized the template given and added 3 extra areas of variability. The first one is different smiles, the second is the color of the face, the third is the stroke width.

Cathy Dong – Looking Outwards – 02

This ongoing project is called “Quantum Fluctuations: Experiments in Flux,” and created by Markos Kay. Markos Kay is a visual artist, creative director, illustrator, and lecturer in London. The artwork is made by enlarging and observing the quantum world. Kay “measures the spoils of a proton collision and compares the findings with data collected from supercomputer simulations.” Quantum simulations become the paint brush which helps visualize the proton collision, a process that cannot be seen with bare eyes. The art pieces are chaotic, ambiguous, and exciting.

With visual particle simulations, Kay records and documents the beauty by selecting moments with his own instinct. In this case, it is hard to say who is the real artist, Kay or the quantum.

source: http://www.mrkism.com/quantum.html

YouieCho-Project-02-Variable-Face

sketch

/*Youie Cho
  Section E
  minyounc@andrew.cmu.edu
  Project-02-Variable-Face*/

var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 150;
var cloudW = 40;
var cloudH = 60;
var cloudWs = 30;
var cloudHs = 40;
//eye color
var r = 100;
var g = 100;
var b = 100;
//background color
var rB = 73;
var gB = 129;
var bB = 242;


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

function draw() {
    background(250, 140, 155);
    fill(rB, gB, bB);
    rect(30, 25, 570, 380);

    //body
    noStroke();
    fill(224, 194, 121);
    beginShape();
    curveVertex(100, 600);
    curveVertex(180, 600);
    curveVertex(220, 360);
    curveVertex(400, 330);
    curveVertex(480, 600);
    curveVertex(400, 600);
    endShape();

    //ears
    fill(224, 194, 121);
    ellipse(260, 200, faceWidth / 4 - 10, faceHeight / 2);
    ellipse(380, 200, faceWidth / 4 + 10, faceHeight / 2 + 10);

    //face
    fill(242, 216, 155);
    ellipse(width / 2, 270, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3;
    var eyeRX = width / 2 + faceWidth * 0.3;

    //eye
    fill(r, g, b);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    noFill();

    //nose
    fill(171, 129, 26);
    triangle(285, 260, 315, 260, 300, 283);

    //mouth
    noFill();
    strokeWeight(3);
    stroke(84, 50, 9);
    bezier(280, 283, 285, 287, 290, 287, 300, 283);
    bezier(300, 283, 310, 287, 315, 287, 320, 283);

    //cloud
    fill(225)
    noStroke();
    ellipse(160, 100, cloudWs, cloudHs);
    ellipse(180, 100, cloudW, cloudH);
    ellipse(200, 100, cloudW, cloudH);
    ellipse(220, 100, cloudW, cloudH);
    ellipse(240, 100, cloudWs, cloudHs);

    //cheeks
    fill(255, 189, 158);
    ellipse(235, 273, faceWidth / 5, faceHeight / 6);
    ellipse(380, 273, faceWidth / 4, faceHeight / 6);

}

function mousePressed() {
    faceWidth = random(180, 220);
    faceHeight = random(150, 200);
    eyeSize = random(10, 20);
    cloudW = random(40, 50);
    cloudH = random(50, 70);
    cloudWs = random(20, 40);
    cloudHs = random(30, 40);
    r = random(26, 99);
    g = random(34, 102);
    b = random(4, 201);
    rB = random(73, 209);
    gB = random(129, 224);
    bB = random(242, 255);
}

It was fun to try changing colors and shapes, and I think it was especially meaningful to learn to make these changes within various relationships. It also made me make a connection to the generative art I looked at Looking Outwards.

Sarah Choi Project-01-Face

Project-01-Face

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-01-Face

function setup() {
  createCanvas(600, 600);
  background(38, 53, 186);
}
  
function draw() {
  //face
  fill(255, 240, 209);
  ellipse(300,290,300,400);

  //eyebrows
  noFill();
  strokeWeight(8);
  stroke(31,28,14);
  arc(225, 237, 120, 10, PI, TWO_PI);
  arc(385, 237, 120, 10, PI, TWO_PI);

  //eyes
  fill(255);
  strokeWeight(1);
  arc(250, 277, 60, 60, PI, TWO_PI);
  arc(360, 277, 60, 60, PI, TWO_PI);
  arc(250, 280, 60, 60, PI, TWO_PI);
  arc(360, 280, 60, 60, PI, TWO_PI);
  strokeWeight(0);
  line(220, 280, 280, 270);
  line(330, 280, 390, 270);
  strokeWeight(1);
  fill(0);
  circle(250, 266, 28, 28);
  circle(360, 266, 28, 28);
  fill(38, 34, 14);
  circle(250, 266, 25, 25);
  circle(360, 266, 25, 25);
  fill(0);
  circle(250, 266, 10, 10);
  circle(360, 266, 10, 10);
  stroke(255);
  line(254, 258, 256, 260);
  line(364, 258, 366, 260);

  //nose
  noFill();
  stroke(0);
  arc(308, 348, 60, 60, PI, PI + QUARTER_PI);
  arc(308, 348, 60, 60, TWO_PI-QUARTER_PI, TWO_PI);
  line(300, 348, 297, 351);
  line(318, 348, 320, 351);

  //mouth
  arc(315, 375, 80, 80, QUARTER_PI, PI-HALF_PI);
  line(280,415,315,415)

  //hair
  fill(31,28,14);
  quad(300, 80, 120, 230, 120, 420, 120, 450);
  quad(320, 80, 480, 230, 470, 420, 470, 450);
  arc(200, 355, 200, 470, HALF_PI, PI+ HALF_PI,CHORD);
  arc(400, 355, 200, 470, PI+ HALF_PI, HALF_PI,CHORD);

  //hat
  fill(177, 151, 216);
  strokeWeight(0);
  rect(190, 50, 220, 70);
  ellipse(300, 150, 440, 100);
  ellipse(300, 50, 220, 50);
  noFill();
  strokeWeight(5);
  stroke(164, 137, 204);
  arc(300, 72, 160, 20, TWO_PI, PI);
  arc(193, 144, 180, 70, HALF_PI, PI);
  arc(345, 124, 140, 40, TWO_PI, PI - HALF_PI);
  stroke();
  line(180, 50, 200, 150);
  line(420, 50, 400, 150);
}

First, I approached this project as a way to play around with different types of shapes with a little bit more quality for design. I was able to overlap shapes and especially put in more detail in objects and facial characters such as the hat and eyes to make it more realistic.