Author: jasmine4@andrew.cmu.edu

Jasmine Lee – Project 02 – Variable Face

bear

//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-02 (Variable Faces)

var wind = 10;
var windv = 10;
var r = 210;
var g = 134;
var b = 50;
var bodyx = 250;
var bodyy= 300;
var underbelly = 60;
var earx = 100;
var eary = 100;
var headx = 220;
var heady = 220;
var eyesize = 5;
var browtilt = 10;

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

function draw() {
    background (189, 238, 255);

    //cloud-left
    noStroke();
    fill(255, 255, 255);
    ellipse(140 + wind, 230 + windv, 230, 60);
    ellipse(60 + wind, 210 + windv, 45, 40);
    ellipse(100 + wind, 210 + windv, 60, 80);
    ellipse(150 + wind, 210 + windv, 80, 95);
    ellipse(190 + wind, 210 + windv, 60, 65);
    ellipse(230 + wind, 210 + windv, 30, 20);
    ellipse(75 + wind, 247 + windv, 70, 30);
    ellipse(150 + wind, 253 + windv, 100, 32);
    ellipse(215 + wind, 245 + windv, 50, 23);

    //cloud-right
    noStroke();
    fill(255, 255, 255);
    ellipse(540 - wind, 230 - windv, 230, 60);
    ellipse(460 - wind, 210 - windv, 45, 40);
    ellipse(500 - wind, 210 - windv, 60, 80);
    ellipse(550 - wind, 210 - windv, 80, 95);
    ellipse(590 - wind, 210 - windv, 60, 65);
    ellipse(630 - wind, 210 - windv, 30, 20);
    ellipse(475 - wind, 247 - windv, 70, 30);
    ellipse(550 - wind, 253 - windv, 100, 32);
    ellipse(615 - wind, 245 - windv, 50, 23);

    //body
    noStroke();
    fill(r, g, b);
    ellipse(320, 470, bodyx, bodyy);

    //bodywhite
    noStroke();
    fill(255, 255, 255);
    ellipse(320, 470, bodyx - underbelly, bodyy - underbelly);

    //ears
    noStroke();
    fill(r, g, b);
    ellipse(220, 200, earx, eary);
    ellipse(420, 200, earx, eary);

    //earwhites
    noStroke();
    fill(255, 255, 255);
    ellipse(215, 215, earx / 2, eary / 2);
    ellipse(435, 215, earx / 2, eary / 2);

    //head
    noStroke();
    fill(r, g, b);
    ellipse(320, 270, headx, heady);

    //eyes
    noStroke();
    fill(0);
    ellipse(250, 280, 35 + eyesize, 35 - eyesize);
    ellipse(390, 280, 35 + eyesize, 35 - eyesize);
    
    //eyeshine
    noStroke();
    fill(255, 255, 255);
    ellipse(260, 270, 15, 15);
    ellipse(400, 270, 15, 15);
    ellipse(265, 280, 5, 5);
    ellipse(405, 280, 5, 5);

    //nose
    noStroke()
    fill(255, 209, 216);
    ellipse(320, 300, 30, 5);

    //mouth
    stroke(1);
    fill(0);
    line(310, 340, 330, 330);
    line(330, 340, 310, 330);

    //eyebrows
    stroke(1);
    fill(0);
    line(230, 245, 280, 245 + browtilt);
    line(410, 245, 360, 245 + browtilt);
}

function mousePressed() {
    wind = random(10, 100);
    windv = random(10, 100);
    r = random(210, 180);
    g = random(134, 150);
    b = random(33, 112);
    bodyx = random(250, 300);
    bodyy = random(330, 350);
    underbelly = random(80, 120);
    earx = random(120, 140);
    eary = random(100, 120);
    headx = random(235, 270);
    heady = random(220, 250);
    eyesize = random(1, 5);
    browtilt = random(-15, 15);
}

For this assignment, I had fun creating a teddy bear. I think they’re very cute as stuffed animals and wanted to recreate one whose expressions could change from angry to sad.

Jasmine Lee – Looking Outwards – 02

The project I admire is Silk created by Yuri Vishnevsky in 2012 (with music and sounds by Mat Jarvis). It is an interactive introduction to generative art, in that it allows users of the website to create their own images. The website uses the user’s mouse coordinates to create lines, which is then dictated by the program’s algorithm to manifest in a fractal-like manner. I’ve often used this website to relax in the past, as it is therapeutic to see the colorful lines of light dance across the page.

An image I created using only “black” in Silk, with the rotational symmetry set to “6”.

From what I can understand, the code takes the mouse’s coordinates and then uses them to generate lines from one point to the next. Then, that line is being duplicated and angled in a way that we get “silk” threads coming off of each main line. This produces a tangled effect similar to that of a silk web. The creator’s artistic sensibilities definitely come off in their algorithm, as there were specific choices that were made to create the weave-like effect of dancing light. This website would have given off a very different feeling if the creator had chosen to just use simple straight lines. Furthermore, the addition of rotational symmetry in the algorithm allows users to experience surprising effects as they move their mouse across the screen. Shapes that seem like stars, webs, hexagons, and flowers are prone to appearing as users explore. 

Another image created using Silk, this time with different colors being used.

Jasmine Lee – Project 01 – Face

selfportrait

//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-01-Face

function setup () {
	createCanvas(600, 600);
    background (180, 150, 210);
    angleMode(DEGREES);


    //reflection
    strokeWeight(0);
    fill(190, 250, 255);
    quad(420, 90, 410, 280, 330, 275, 345, 85);
    quad(420+95, 90+6, 410+95, 280+6, 330+95, 
    	 275+6, 345+95, 85+6);
    quad(420-12, 90+210, 410-12, 280+210, 330-12, 
    	 275+210, 345-12, 85+210);
    quad(420-12+95, 90+210+6, 410-12+95, 280+210+6, 
    	 330-12+95, 275+210+6, 345-12+95, 85+210+6);


    //hair-leftback
    strokeWeight(0);
    fill(50, 40, 35);
    triangle(170, 275, 178, 480, 120, 470);

    //hair-rightback
    strokeWeight(0);
    fill(50, 40, 35);
    triangle(330, 275, 368, 470, 290, 480);

    //body
    strokeWeight(0);
    fill(255, 198, 0);
    rect(143, 400, 200, 300, 50);

    //arm-lines
    strokeWeight(1.5);
    stroke(222, 190, 136);
    line(175, 475, 155, 600);
    line(310, 475, 330, 600);

    //neck
    strokeWeight(0);
    fill(253, 231, 187)
    ellipse(247, 425, 80, 55);

    //neck-shadow
    strokeWeight(0);
    fill(222, 190, 136)
    ellipse(247, 425, 80, 45);

    //head
    strokeWeight(0);
 	fill(253, 231, 187);
    rect(160, 240, 172, 190, 77);

    //lefteye
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(200, 350, 41, 30);

    //righteye
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(290, 350, 41, 30);

    //leftpupil
    strokeWeight(0);
    fill(0,0,0);
    ellipse(200, 350, 25, 28);

    //rightpupil
    strokeWeight(0);
    fill(0,0,0);
    ellipse(290, 350, 25, 28);

     //leftpupilshine
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(205, 339, 5, 5);

    //rightpupilshine
    strokeWeight(0);
    fill(255, 255, 255);
    ellipse(295, 339, 5, 5);

    //leftblush
    strokeWeight(0);
    fill(250, 180, 160);
    ellipse(185, 380, 30, 30);

    //rightblush
    strokeWeight(0);
    fill(250, 180, 160);
    ellipse(305, 380, 30, 30);

    //noseshadow
    strokeWeight(0);
    fill(222, 190, 136);
    triangle(235, 370, 245, 375, 255, 370);

    //lips
    strokeWeight(0);
    fill(255, 170, 150);
    ellipse(245, 394, 30, 10);

    //mouth-line
    strokeWeight(1);
    stroke(150, 140, 100);
    noFill();
    arc(245, 389, 40, 12, 14, 167);

    //hair
    strokeWeight(4);
    stroke(50, 40, 35);
    fill(50, 40, 35);
    arc(247, 305, 180, 175, 180, 360);

    //hair-left
    strokeWeight(4);
    stroke(50, 40, 35);
    noFill();
    arc(44, 335, 300, 330, 340, 30);
    strokeWeight(25);
    stroke(50, 40, 35);
    noFill();
    line(167, 300, 167, 490);

    //hair-right
    strokeWeight(20);
    stroke(50, 40, 35);
    noFill();
    line(329, 300, 326, 490);

    //hair-bangs
    strokeWeight(0);
    fill(50, 40, 35);
    arc(157, 285, 150, 100, 360, 90);
    arc(335, 285, 230, 100, 90, 180);

    //hair-barrette
    strokeWeight(0);
    fill(105, 255, 255);
    rect(155, 333, 25, 5);

    //eyebrows
    strokeWeight(3.5);
    stroke(0);
    noFill();
    arc(200, 360, 70, 70, 220, 295);
    arc(290, 360, 70, 70, 240, 315);
}

Doing this portrait was an interesting process. Since it was drawn using the computer, the process was a bit tedious because of the lack of direct translation from hand to “paper.” It was also a little tricky figuring out the coordinates for some of the shapes I wanted to draw, as well as the angles of the curves. I decided to try out a more cartoon-like style that is suitable with flat shapes and colors.

Jasmine Lee – Looking Outwards – 01

The interactive piece that I’m choosing to talk about is an exhibit I came across in the Boston Institute of Contemporary Art. The Visitors by Ragnar Kjartansson is a 64-minute music piece that uses synced video projection to create an immersive visual and audio experience for visitors.

A female performer playing the violin recorded for The Visitors piece.

Set up in a dark room behind curtains, visitors are drawn in by a chorus of instruments. Stepping in, they face nine different video projections placed on different areas of the wall. There are different performers in each projection and as music stops coming from one video, it begins in another video. The experience is especially interesting because of the way the performers seem to leave their respective videos and walk into the space of another performer. The performances together create a chorus that can only be experienced in the room of the exhibit itself.

A third-party recorded video of the exhibit by Ragnar Kjartansson at the Boston ICA museum.

This work is profound because it explores the potential of video as a medium to create more immersive experiences for visitors in a way that a single video cannot. It experiments with how 2D visuals can transform into a 3D experience by encouraging the movement of the viewer. The artist, Kjartansson, often uses repetition combined with music to explore the potential qualities of sound. Born to an actress and a director, Kjartansson was very influenced by both historical art and performance. He collaborated with other musical performers in a historical upstate New York house to create this piece.