Author: TaterT

Project 6 – Abstract Clock

sketch
var angle = 0;

function setup() {
    createCanvas(480, 410);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0, 5, 50);
    push();
    frameRate(1);
    translate(240, 480);
    rotate(radians(6) * second());
    earth();
    pop();
    scale(0.3);
    translate(0, 300);
    for (var m = 0; m < hour(); m ++) {
        translate(60, 0);
        star();
    }
}

function earth() {
    //earth
    translate(-240, -480);
    fill(188, 255, 255);
    noStroke();
    circle(240, 480, 300);
    //summer tree
    noStroke();
    fill(95, 58, 0);
    rect(230, 280, 20, 50);
    fill(71, 191, 12);
    circle(250, 240, 30);
    circle(233, 285, 30);
    fill(23, 139, 0);
    circle(255, 265, 40);
    circle(222, 249, 40);
    fill(164, 202, 156);
    circle(250, 290, 20);
    fill(140, 223, 123);
    circle(220, 270, 30);
    fill(37, 98, 25);
    circle(240, 260, 30);
    //fall tree
    fill(95, 58, 0);
    rect(390, 470, 50, 20);
    fill(255, 166, 13);
    circle(450, 460, 40);
    circle(440, 500, 20);
    circle(470, 490, 30);
    fill(255, 230, 160);
    circle(430, 480, 30);
    fill(246, 236, 64);
    circle(470, 470, 30);
    fill(201, 79, 60);
    circle(455, 500, 20);
    fill(255, 102, 0);
    circle(450, 480, 30);
    //winter tree
    fill(95, 58, 0);
    rect(230, 630, 20, 50);
    fill(255);
    circle(225, 673, 30);
    circle(250, 685, 40);
    circle(210, 690, 30);
    circle(260, 710, 30);
    circle(230, 710, 50);
    //spring flower
    fill(35, 169, 8);
    rect(40, 475, 50, 10);
    circle(75, 475, 10);
    circle(75, 485, 10);
    fill(204, 153, 255);
    circle(15, 480, 30);
    circle(30, 460, 30);
    circle(30, 500, 30);
    circle(50, 468, 30);
    circle(50, 493, 30);
    fill(245, 255, 149);
    circle(35, 480, 25);
}

function star() {
    fill(240, 255, 135);
    frameRate(10);
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex (x[i] + random(-3, 3), y[i] + random(-3, 3));
    }
    endShape(CLOSE);
}

My inspiration for this clock is earth! A full rotation will occur every minute, and a star will appear every hour!

LO 6 – Randomness

A Year From Monday & Empty Words & Roaring Silence by John Cage

Titled A Year From Monday, Empty Words, and Roaring Silence, these books comprise of collections of lectures and writings by John Cage. In an attempt to resonate with John Cage’s musical compositions while portraying a “sense of progression which culminates in the diagonally cut slip case”, Zhuoshi Xie designed three different, yet visually correlated book covers.

Initially presented by deep, cool colors on the books’ spines that is revealed to incorporate a flood of bright, saturated red on the books’ covers, Xie expresses how randomization does not always have to be a surprise or even “a smack in the face”.

Designed by Zhuoshi Xie

Randomization can be a gradual progression, and sometimes, it can be the more subtle, unexpected touches that are most effective. In this case, Xie’s goal of reflecting a kind of unexpected randomness that alludes to John Cage’s work is successfully achieved through the red color composed from small, random individual red letters that creates an almost eerie effect.

Project 5 – Wallpaper

The famous Coca-Cola bottle and its mascot, the polar bear, were my inspiration for this wallpaper. I first digitally sketched a Coca-Cola bottle to use as a template, as shown at the bottom, and then, I added some polar bears as decoration.

sketch
/* Michelle Kim
 * michell4
 * Section B
 */

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(255, 244, 196);
    //cola
    for(var x = 75; x < width; x += 200) {
        for(var y = 50; y < height; y += 220) {
            push();
            translate(x, y);
            cola();
            pop();
        }
    }
    //polar bear
    for(var a = -40; a < width; a += 200) {
        for(var b = 20; b < height; b += 220) {
            push();
            translate(a, b);
            bear();
            pop();
        }
    }
}

function cola() {
    push();
    scale(0.5);
    //bottle
    fill(193, 252, 255);
    noStroke();
    rect(0, 0, 40, 70);
    quad(40, 65, 0, 65, -12, 95, 52, 95);
    ellipse(20, 130, 75, 125);
    quad(-13, 160, 53, 160, 40, 190, 0, 190);
    quad(45, 190, -5, 190, -18, 225, 58, 225);
    arc(20, 280, 95, 200, radians(170), radians(10), CHORD);
    noFill();
    stroke(223, 248, 255);
    strokeWeight(12);
    arc(-7, 58, 25, 50, 0, radians(60));
    arc(47, 58, 25, 50, radians(120), radians(180));
    arc(-15, 185, 23, 75, radians(283), radians(80));
    arc(55, 185, 23, 75, radians(100), radians(256));
    arc(20, 287, 82, 15, 0, radians(180));
    //soda
    fill(68, 32, 10);
    noStroke();
    arc(20, 90, 40, 200, radians(340), radians(200), CHORD);
    arc(11, 125, 40, 100, radians(80), radians(255));
    arc(29, 125, 40, 100, radians(285), radians(100));
    rect(0, 165, 40, 50);
    arc(20, 278, 75, 178, radians(170), radians(10), CHORD);
    arc(20, 284, 74, 21, 0, radians(180));
    noFill();
    stroke(68, 32, 10);
    strokeWeight(12);
    arc(-7, 183, 23, 80, radians(290), radians(80));
    arc(47, 183, 23, 80, radians(100), radians(250));
    //cap
    fill(170, 0, 0);
    noStroke();
    rect(0, 0, 40, 16);
    circle(1, 8, 15);
    circle(39, 8, 15);
    //label
    rect(-15, 110, 70, 40);
    noFill();
    stroke(170, 0, 0);
    strokeWeight(5);
    arc(-11, 130, 8, 55, radians(100), radians(260));
    arc(51, 130, 8, 55, radians(280), radians(80));
    //bubbles
    fill(200);
    noStroke();
    circle(23, 95, 10);
    circle(33, 100, 5);
    circle(37, 91, 7);
    circle(10, 160, 5);
    circle(25, 168, 8);
    circle(12, 180, 13);
    circle(27, 183, 5);
    circle(0, 270, 5);
    circle(-7, 280, 10);
    circle(40, 260, 15);
    circle(25, 270, 7);
    circle(45, 275, 5);
    pop();
}

function bear() {
    push();
    //polar bear ears
    fill(255);
    noStroke();
    circle(5, -12, 20);
    circle(45, -12, 20);
    fill(220);
    circle(5, -12, 10);
    circle(45, -12, 10);
    //polar bear body
    fill(255);
    rect(0, 0, 50, 70);
    arc(25, 0, 50, 40, radians(180), 0);
    circle(-5, 45, 15);
    circle(45, 46, 50);
    circle(70, 45, 15);
    noFill();
    stroke(255);
    strokeWeight(5);
    arc(60, 10, 25, 35, radians(110), radians(190));
    line(3, 0, 1, 40);
    fill(255);
    arc(52, 45, 46, 50, radians(0), radians(120));
    arc(5, 45, 30, 50, radians(60), radians(175));
    ellipse(28, 65, 25, 10);
    //polar bear outlines
    fill(220);
    noStroke();
    circle(63, 47, 4);
    circle(70, 47, 4);
    circle(72, 53, 4);
    circle(62, 58, 12);
    noFill();
    stroke(220);
    strokeWeight(2);
    arc(-7, 46, 10, 50, radians(300), radians(80));
    arc(1, 65, 10, 15, radians(130), radians(190));
    arc(13, 46, 10, 50, radians(300), radians(80));
    arc(21, 65, 10, 15, radians(130), radians(190));
    arc(38, 46, 10, 50, radians(300), radians(80));
    arc(46, 65, 10, 15, radians(130), radians(190));
    arc(67, 52, 30, 30,radians(205), radians(272));
    //polar bear face
    fill(220);
    noStroke();
    circle(25, 10, 18);
    fill(0);
    circle(13, 0, 6);
    circle(37, 0, 6);
    ellipse(25, 7, 7, 5);
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(23, 10, 4, 8, 0, radians(130));
    arc(27, 10, 4, 8, radians(50), radians(180));
    pop();
}

LO 5 – 3D Computer Graphics

“So Long, Farewell” by Ferdinand Vazquez

“So Long, Farewell” is a 3-dimensional graphic piece by Ferdinand Vazquez, Lighting Generalist at Digital Domain.

Described as a “still life rendering using Maya and Mental Ray”, this project depicts a realistic bird’s-eye view of assumably a dining table and a variety of different accessories. By the multiple sketches that the artist presents at the bottom of the project, Vazquez shows the process that he followed and the applications that he used to create such piece. These applications include Autodesk Maya (Maya), a 3-dimensional computer animation software with powerful modeling, rendering, simulation, texturing, and tools, as well as Mental Ray, a production-quality ray tracing application for 3-dimensional rendering.

As portrayed in the piece, Vazquez’s artistic abilities are completely evident, from the appropriate shading and lighting to the intricate details of every aspect of the picture. All of these qualities contribute to the graphic piece’s overall success in achieving realism and imitation of a real-life perspective.

Project 4 – String Art

sketch
var carWidth = 20;
var carHeight = 10;
var carA = 0;
var carB = 0;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(146, 234, 255);
    //left cloud
    fill(235);
    noStroke();
    circle(0, 50, 50);
    circle(40, 50, 70);
    circle(80, 70, 40);
    circle(90, 40, 50);
    //right cloud
    circle(250, 100, 50);
    circle(250, 60, 60);
    circle(300, 80, 100);
    circle(340, 50, 80);
    circle(360, 90, 90);
    //sun
    fill(255, 213, 0);
    circle(200, 300, 200);
    //black car
    fill(0);
    if (carA > width) {
        carA = -carWidth
    }
    carA = carA + 1;
    rect(carA, 240, carWidth, carHeight);
    //green car
    fill(0, 255, 0);

    stroke(100, 0, 0);
    strokeWeight(1);
    push();
    //left bridge lines
    translate(-30, -50);
    for (var i = 0; i <= 120; i += 10) {
        line(0, i + 180, i + 80, 300);
    }
    //middle bridge lines
    translate(100, 0);
    stroke(50, 0, 0);
    for (var i = 0; i <= 210; i += 15) {
        line(300, i + 90, 210 - i, 300);
    }
    //bottom of bridge
    translate(-70, 0);
    for (var i = 0; i <= 12; i += 1.5) {
        line(0, i + 301, 400, i + 301);
        fill(180, 0, 0);
        rect(0, i + 301, 400, 2);
    }
    pop();
    noFill();
    //left top bridge structure
    stroke(190, 0, 0);
    strokeWeight(5);
    rect(-10, 130, 15, 25);
    rect(-10, 160, 15, 25);
    rect(-10, 190, 15, 25);
    rect(-10, 220, 15, 29);
    //left bottom bridge structure
    noStroke();
    fill(150, 0, 0);
    rect(-7, 265, 15, 50);
    //right bridge structure circles
    noFill();
    stroke(190, 0, 0);
    strokeWeight(1);
    circle(340, 35, 7);
    circle(375, 35, 7);
    //right bridge structure
    stroke(180, 0, 0);
    strokeWeight(10);
    rect(340, 41, 35, 40);
    rect(340, 86, 35, 45);
    rect(340, 136, 35, 55);
    rect(340, 186, 35, 60);
    //right bottom bridge structure
    stroke(150, 0, 0);
    rect(340, 270, 35, 50);
    line(340, 270, 375, 305);
    line(375, 270, 340, 305);
    push();
    //right bridge lines
    translate(336, -140);
    stroke(150, 0, 0);
    strokeWeight(1);
    for (var i = 0; i <= 210; i += 15) {
        line(0, i + 180, i + 180, 390);
    }
    pop();
}

My depiction of the Golden Gate Bridge in San Fransisco!

LO 4 – Sound Art

White Box preview image from Purform (Vimeo)

Created by Purform in 2010, White Box is described as an audiovisual performance piece in a cycle that begain in 2003 with Black Box.

It works to generate audiovisual compositions in real time, and the cycle “metaphorically transposes, into sound and images, concepts from systems theory.”

One of the most inspiring aspects of this project is its ability to accommodate such a wide variety of sounds to project a dramatic representation through black, white and grey boxes. This cycle captures audios and visually conveys in a way that is simple for it to make sense to all types of audiences but in a way that is complex for it to completely mesmerize. By doing so, White Box ensures an unforgettable experience for spectators.

Purform – White Box, Audiovisual Performance, 2010

Project 3 – Dynamic Drawing

Assemble the astronaut to see a funky-looking space! Careful though, one wrong move and everything will float away.

sketch
/*
 * Michelle Kim
 * michell4
 * Section B
 */
 
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    stroke(120);
    strokeWeight(1);
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 600), 0);
    var sizeX = x * 350 / 400;
    var sizeY = y * 350 / 400;
    //purple planet
    fill(188, 123, 238);
    ellipse(10 + x * 300 / 600, 225, sizeX / 4);
    //purple planet's orange stripes
    fill(253, 106, 68);
    rect(x * 290 / 600, 200, sizeX / 9, sizeY / 30);
    rect(x * 270 / 600, 225, sizeX / 9, sizeY / 30);
    rect(x * 290 / 600, 250, sizeX / 9, sizeY / 30);
    //yellow planet and rings
    noStroke();
    fill(255, 209, 20);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 5);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 2, sizeY / 7);
    //yellow planet's squares
    stroke(120);
    strokeWeight(1);
    fill(92, 106, 228);
    square(x * 130 / 600, y * 330 / 600, sizeX / 40);
    square(x * 130 / 600, y * 240 / 600, sizeX / 65);
    square(x * 180 / 600, y * 340 / 600, sizeX / 45);
    square(x * 160 / 600, y * 260 / 600, sizeX / 20);
    //blue planet
    fill(123, 230, 238);
    ellipse(400 - x * 300 / 600, 300 + y * 300 / 600, sizeY * 1.2);
    //blue planet's green dots
    fill(105, 158, 109);
    ellipse(x * 150 / 600, 270 + y * 300 / 600, sizeY / 3);
    ellipse(x * 290 / 600, 250 + y * 300 / 600, sizeY / 5);
    ellipse(x * 290 / 600, 310 + y * 300 / 600, sizeY / 15);
    //astronaut
    stroke(0);
    strokeWeight(3);
    fill(255);
    //astronaut's head
    ellipse(655 -  x * 200 / 600, 20 + y * 300 / 600, sizeX / 3);
    arc(475, 125, 45, 40, radians(190), radians(250));
    arc(471, 140, 45, 40, radians(190), radians(200));
    //astronaut's left hand
    ellipse(265 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's right hand
    ellipse(415 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's left foot
    ellipse(310 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's right foot
    ellipse(370 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's body
    rect(270 + x * 200 / 600, 70 + y * 300 / 600, sizeX / 3, sizeY / 2);
    ellipse(630 -  x * 200 / 600, 100 + y * 300 / 600, sizeX / 20);
    ellipse(630 -  x * 200 / 600, 130 + y * 300 / 600, sizeX / 20);
}

LO 3 – Computational Fabrication

The Mediated Matter Group from the MIT Media Lab presents a multimaterial
voxel-printing method that enables the physical visualization of data sets
commonly associated with scientific imaging.

White matter tractography data physicalization of the human brain, visualizing bundles of axons, which connect different regions of the brain. 
Photo: The Mediated Matter Group


Modern approaches still predominantly rely on 2D displays of 3D data sets. This
particular project converts data sets into dithered material deposition
descriptions, through modifications to rasterization processes. By contributing
exemplary 3D printed data sets across countless scales, disciplines, and
problem domains, this group’s approach bridges the gap between digital
information representation and physical material composition. Specifically,
scientific visualizations will definitely become more advanced and efficient
with this project as a foundation for future revisions and improvements.

Project 2 – Variable Faces

Click on the hamster and see its mood evolve as it eats and chews!

sketch
/*
 * Michelle Kim
 * Section B
 */

var faceWidth = 170;
var faceHeight = 150;
var leftCheekWidth = 85;
var leftCheekHeight = 70;
var rightCheekWidth = 85;
var rightCheekHeight = 70;
var eyeWidth = 15;
var eyeHeight = 20;
var noseWidth = 40;
var noseHeight = 25;
var leftEarWidth = 40;
var leftEarHeight = 50;
var rightEarWidth = 40;
var rightEarHeight = 50;
var bodyWidth = 240;
var bodyHeight = 200;
var footWidth = 50;
var footHeight = 30;
var leftMouthStop = 1.57;
var rightMouthStart = 1.57;

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    var canvasCenter = width / 2;
    var footX = bodyWidth * 0.3;
    var footY = bodyHeight * 0.45;
    var bodyCenterY = height * 0.65;
    var faceY = bodyCenterY - (bodyHeight * 0.8);
    var earX = faceWidth * 0.25;
    var earY = faceY - (faceHeight * 0.45);
    var cheekY = faceY + (faceHeight * 0.25);
    var eyeX = faceWidth * 0.2;
    var eyeY = faceHeight * 0.1;
    var blushX = leftCheekWidth * 0.45;
    var handX = bodyWidth * 0.1;
    var mouthX = noseWidth * 0.25;
    var mouthY = faceY + (noseHeight * 0.8);
    var noseY = faceY + eyeY - (noseHeight * 0.2);
    var leftBlushX = leftCheekWidth * 0.3;
    var leftBlushY = leftCheekHeight * 0.2;
    var rightBlushX = rightCheekWidth * 0.3;
    var rightBlushY = rightCheekHeight * 0.2;

    background(204, 238, 245);
    noStroke();
    fill(218, 205, 141);
    //left foot
    ellipse(canvasCenter - footX, bodyCenterY + footY, footWidth, footHeight);
    //right foot
    ellipse(canvasCenter + footX, bodyCenterY + footY, footWidth, footHeight);

    fill(246, 231, 153);
    //yellow body
    ellipse(canvasCenter, bodyCenterY, bodyWidth, bodyHeight);
    //left yellow ear
    ellipse(canvasCenter - earX, earY, leftEarWidth, leftEarHeight);
    //right yellow ear
    ellipse(canvasCenter + earX, earY, rightEarWidth, rightEarHeight);

    fill(161, 154, 118);
    //left brown ear
    ellipse(canvasCenter - earX, earY, leftEarWidth / 2, leftEarHeight / 2);
    //right brown ear
    ellipse(canvasCenter + earX, earY, rightEarWidth / 2, rightEarHeight / 2);

    fill(246, 231, 153);
    //yellow face
    ellipse(canvasCenter, faceY, faceWidth, faceHeight);

    fill(242, 234, 183);
    //white body
    ellipse(canvasCenter, bodyCenterY, bodyWidth * 0.7, bodyHeight);

    fill(245, 239, 213);
    //left cheek
    ellipse(canvasCenter - earX, cheekY, leftCheekWidth, leftCheekHeight);
    //right cheek
    ellipse(canvasCenter + earX, cheekY, rightCheekWidth, leftCheekHeight);
    //snout
    ellipse(canvasCenter, cheekY, faceWidth * 0.35, faceHeight * 0.45);

    fill(81, 80, 72);
    //left eye
    ellipse(canvasCenter - eyeX, faceY - eyeY, eyeWidth, eyeHeight);
    //right eye
    ellipse(canvasCenter + eyeX, faceY - eyeY, eyeWidth, eyeHeight);

    noFill();
    stroke(100);
    strokeWeight(2);
    //left mouth
    arc(canvasCenter - mouthX, mouthY, 20, 40, 0, leftMouthStop);
    //right mouth
    arc(canvasCenter + mouthX, mouthY, 20, 40, rightMouthStart, 3.14);

    fill(218, 205, 141);
    stroke(210, 198, 138);
    //left hand
    arc(canvasCenter - handX, bodyCenterY, 20, 60, 0, 3.49);
    //right hand
    arc(canvasCenter + handX, bodyCenterY, 20, 60, 5.93, 3.14);

    noStroke();
    fill(141, 136, 102);
    //brown nose
    ellipse(canvasCenter, faceY + eyeY, noseWidth, noseHeight);

    fill(225, 223, 208);
    //white nose
    ellipse(canvasCenter - mouthX, noseY, mouthX, noseHeight * 0.25);

    fill(235, 192, 216);
    //left blush
    ellipse(canvasCenter - blushX, faceY + eyeY, leftBlushX, leftBlushY);
    //right blush
    ellipse(canvasCenter + blushX, faceY + eyeY, rightBlushX, rightBlushY);
}

function mousePressed() {
    leftCheekWidth = random (85, 100);
    leftCheekHeight = random (60, 110);
    rightCheekWidth = random (85, 100);
    rightCheekHeight = random (60, 110);
    eyeWidth = random (10, 20);
    eyeHeight = random (15, 25);
    leftEarHeight = random (25, 50);
    rightEarHeight = random (25, 50);
    bodyWidth = random (230, 280);
    leftMouthStop = random (1.5, 2);
    rightMouthStart = random (1, 1.5);
}

LO 2 – Generative Art

One generative art project that I find immensely inspirational is City Icon, designed and coded by Marcin Ignac at Variable (2012).

City Icon by Martin Ignac featured at Sustainable Cities exhibition by Siemens in the Crystal building in London.

A generative city simulation, City Icon shows the complex interactions of a city’s intersecting systems, including traffic jams, water streams, nature enclaves, emergency states, and energy sources. As a person who has always been exposed to New York City, one of the most popular cities in the world, I was even more attracted to this project because it shows a side to a city that we are unable to see.

We take advantage of the outcomes of all of these city systems, yet we do not appreciate the process to these outcomes. Ignac’s design of this simulation allows for audiences of all types to easily experience the dynamic workings of a city as well as grasp a sense of balanced amidst chaos.