Project Description & Instructions Below!!

finalproject

// Name: Rachel Park
// Andrew ID: rjpark
// 15-104 Section C

var i;
var currentkey = 'c';
var choreography = [];

var contemporary = [];
var groovy = [];
var footwork = [];
var isolation = [];
var pretty = [];
var swaggySassy = [];
var tutting = [];
var wavesWacking = [];

function preload() {
    // database of dance moves
    // loading the videos
    contemporary = ['C1.MOV', 'C2.MOV', 'C3.MOV', 'C4.MOV', 'C5.MOV',
        'C6.MOV', 'C7.MOV', 'C8.MOV', 'C9.MOV', 'C10.MOV', 'C11.MOV', 'C12.MOV',
        'C13.MOV', 'C14.MOV', 'C15.MOV', 'C16.MOV', 'C17.MOV', 'C18.MOV',
        'C19.MOV', 'C20.MOV', 'C21.MOV', 'C22.MOV', 'C23.MOV', 'C24.MOV',
        'C25.MOV', 'C26.MOV', 'C27.MOV', 'C28.MOV', 'C29.MOV', 'C30.MOV',
        'C31.MOV', 'C32.MOV', 'C33.MOV', 'C34.MOV', 'C35.MOV', 'C36.MOV',
        'C37.MOV', 'C38.MOV',];

    for (var j = 0; j < contemporary.length; j ++) {
        contemporary[j] = './Moves/C/' + contemporary[j];
    }

    groovy = ['G1.MOV', 'G2.MOV', 'G3.MOV', 'G4.MOV', 'G5.MOV', 'G6.MOV',
        'G7.MOV', 'G8.MOV', 'G9.MOV', 'G10.MOV', 'G11.MOV', 'G12.MOV',
        'G13.MOV', 'G14.MOV'];

    for (var j = 0; j < groovy.length; j ++) {
        groovy[j] = './Moves/G/' + groovy[j];
    }

    footwork = ['F1.MOV', 'F2.MOV', 'F3.MOV', 'F4.MOV', 'F5.MOV', 'F6.MOV',
        'F7.MOV', 'F8.MOV', 'F9.MOV', 'F10.MOV', 'F11.MOV', 'F12.MOV',
        'F13.MOV', 'F14.MOV', 'F15.MOV', 'F16.MOV', 'F17.MOV', 'F18.MOV',
        'F19.MOV', 'F20.MOV', 'F21.MOV'];

    for (var j = 0; j < footwork.length; j ++) {
        footwork[j] = './Moves/F/' + footwork[j];
    }

    isolation = ['I1.MOV', 'I2.MOV', 'I3.MOV','I4.MOV', 'I5.MOV', 'I6.MOV',
        'I7.MOV', 'I8.MOV', 'I9.MOV', 'I10.MOV', 'I11.MOV', 'I12.MOV',
        'I13.MOV', 'I14.MOV', 'I15.MOV', 'I16.MOV', 'I17.MOV', 'I18.MOV',
        'I19.MOV', 'I20.MOV', 'I21.MOV', 'I22.MOV', 'I23.MOV', 'I24.MOV',
        'I25.MOV', 'I26.MOV', 'I27.MOV', 'I28.MOV', 'I29.MOV', 'I30.MOV',
        'I31.MOV', 'I32.MOV', 'I33.MOV', 'I34.MOV', 'I35.MOV'];

    for (var j = 0; j < isolation.length; j ++) {
        isolation[j] = './Moves/I/' + isolation[j];
    }

    pretty = ['P1.MOV', 'P2.MOV', 'P3.MOV', 'P4.MOV', 'P5.MOV', 'P6.MOV',
        'P7.MOV', 'P8.MOV', 'P9.MOV', 'P10.MOV', 'P11.MOV', 'P12.MOV',
        'P13.MOV', 'P14.MOV', 'P15.MOV', 'P16.MOV', 'P17.MOV', 'P18.MOV',
        'P19.MOV', 'P20.MOV', 'P21.MOV', 'P22.MOV', 'P23.MOV', 'P24.MOV',
        'P25.MOV', 'P26.MOV', 'P27.MOV', 'P28.MOV', 'P29.MOV'];

    for (var j = 0; j < pretty.length; j ++) {
        pretty[j] = './Moves/P/' + pretty[j];
    }

    swaggySassy = ['S1.MOV', 'S2.MOV', 'S3.MOV', 'S4.MOV', 'S5.MOV', 'S6.MOV',
        'S7.MOV', 'S8.MOV', 'S9.MOV', 'S10.MOV', 'S11.MOV','S12.MOV', 'S13.MOV',
        'S14.MOV', 'S15.MOV', 'S16.MOV', 'S17.MOV', 'S18.MOV', 'S19.MOV',
        'S20.MOV', 'S21.MOV', 'S22.MOV', 'S23.MOV', 'S24.MOV', 'S25.MOV',
        'S26.MOV', 'S27.MOV', 'S28.MOV', 'S29.MOV', 'S30.MOV', 'S31.MOV',
        'S32.MOV'];

    for (var j = 0; j < swaggySassy.length; j ++) {
        swaggySassy[j] = './Moves/S/' + swaggySassy[j];
    }

    tutting = ['T1.MOV', 'T2.MOV', 'T3.MOV', 'T4.MOV', 'T5.MOV', 'T6.MOV',
        'T7.MOV', 'T8.MOV', 'T9.MOV', 'T10.MOV', 'T11.MOV', 'T12.MOV',
        'T13.MOV', 'T14.MOV', 'T15.MOV', 'T16.MOV', 'T17.MOV', 'T18.MOV',
        'T19.MOV', 'T20.MOV', 'T21.MOV', 'T22.MOV', 'T23.MOV', 'T24.MOV',
        'T25.MOV', 'T26.MOV', 'T27.MOV', 'T28.MOV', 'T29.MOV', 'T30.MOV',
        'T31.MOV', 'T32.MOV', 'T33.MOV', 'T34.MOV', 'T35.MOV', 'T36.MOV',
        'T37.MOV', 'T38.MOV'];

    for (var j = 0; j < tutting.length; j ++) {
        tutting[j] = './Moves/T/' + tutting[j];
    }

    wavesWacking = ['W1.MOV', 'W2.MOV', 'W3.MOV', 'W4.MOV', 'W5.MOV', 'W6.MOV',
        'W7.MOV', 'W8.MOV', 'W9.MOV', 'W10.MOV', 'W11.MOV', 'W12.MOV',
        'W13.MOV'];

    for (var j = 0; j < wavesWacking.length; j ++) {
        wavesWacking[j] = './Moves/W/' + wavesWacking[j];
    }
}

function setup() {
    createCanvas(700, 355);
    background(0);
    fill(255);
    noStroke();
    rect(600, 0, 100, 355);
}

function draw() {
    // title
    fill("pink");
    stroke(0);
    strokeWeight(3);
    textAlign(CENTER);
    textSize(30);
    text("Make Your Own Choreography!!", 300, 45);

    // box for reference
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(85, 170, 120, 140);

    // text in reference box
    fill(0);
    noStroke();
    textAlign(CENTER);
    textSize(12);
    text("c = contemporary", 85, 117);
    text("f = footwork", 85, 133);
    text("g = groovy", 85, 149);
    text("i = isolation", 85, 165);
    text("p = pretty/feminine", 85, 181);
    text("s = swaggy/sassy", 85, 197);
    text("t = tutting", 85, 213);
    text("w = wavy/wacking", 85, 229);
    fill(255);
    stroke(0);
    strokeWeight(1);
    text("Letter Key Chart", 85, 90);

    // box for which letter key is pressed
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(205, 127, 55, 55);

    // display the letter key that's pressed
    fill(0);
    noStroke();
    textAlign(CENTER);
    textSize(40);
    text(currentkey, 205, 140);
    fill(255);
    stroke(0);
    strokeWeight(1);
    textSize(12);
    text("Last Key Pressed", 205, 90);

    // box for play button
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(205, 213, 55, 55);

    // display the play sign
    fill(0);
    noStroke();
    triangle(195, 200, 195, 230, 220, 215);
    fill(255);
    stroke(0);
    strokeWeight(1);
    textSize(12);
    text("Play Button", 205, 175);

    // box for instructions
    fill(255);
    stroke("pink");
    strokeWeight(3);
    rectMode(CENTER);
    rect(400, 170, 260, 140);

    // text in instructions box
    fill(0);
    noStroke();
    textAlign(LEFT);
    textSize(10);
    text("1. Look at the letter key chart & choose a letter to press", 
        280, 115);
    text("2. Press the letter key (displayed in the box to the right)", 
        280, 134);
    text("3. Keep pressing desired letter keys", 280, 153);
    text("4. When finished pressing letter keys, click the play", 280, 172);
    text("button to watch your choreography", 280, 191);
    text("5. Repeat steps 1-4 to keep adding to choreography", 280, 210);
    text("6. Refresh page to start over", 280, 229)
    fill(255);
    stroke(0);
    strokeWeight(1);
    textAlign(CENTER);
    textSize(12);
    text("Instructions", 400, 90);

    // side note & credit/shoutout to dancers
    fill(255);
    stroke(0);
    strokeWeight(1);
    textAlign(LEFT);
    textSize(10);
    text("** The objective of this project is to help you create a sequence" + 
        "of dance moves (choreography) that can be adjusted", 30, 280);
    text("and modified to match a song you choose when actually" +
        "choreographing.", 30, 295);
    text("** Also, shoutout to the featured dancers (by letter key chart);" +
        "Léann Bahi, Elizabeth Kuo, Jackie Jiang, Chris Shon,", 30, 320);
    text("Maggie Lyu, Emily Wu, Newton Xie, and Yuyan Sun.", 30, 335);
}

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

function keyTyped() {
    document.getElementById("danceVideo").muted = true;

    // assigning pressed keys to a dance move video
    // playing that dance move video
    // adding each dance move video into a new array called choreography
    if (key === 'c') {
        currentkey = key;
        i = getRandomInt(0, contemporary.length);
        choreography.push(contemporary[i]);
        document.getElementById("video").src = str(contemporary[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'g') {
        currentkey = key;
        i = getRandomInt(0, groovy.length);
        choreography.push(groovy[i]);
        document.getElementById("video").src = str(groovy[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'f') {
        currentkey = key;
        i = getRandomInt(0, footwork.length);
        choreography.push(footwork[i]);
        document.getElementById("video").src = str(footwork[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'i') {
        currentkey = key;
        i = getRandomInt(0, isolation.length);
        choreography.push(isolation[i]);
        document.getElementById("video").src = str(isolation[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }
    if (key === 'p') {
        currentkey = key;
        i = getRandomInt(0, pretty.length);
        choreography.push(pretty[i]);
        document.getElementById("video").src = str(pretty[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 's') {
        currentkey = key;
        i = getRandomInt(0, swaggySassy.length);
        choreography.push(swaggySassy[i]);
        document.getElementById("video").src = str(swaggySassy[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 't') {
        currentkey = key;
        i = getRandomInt(0, tutting.length);
        choreography.push(tutting[i]);
        document.getElementById("video").src = str(tutting[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }

    if (key === 'w') {
        currentkey = key;
        i = getRandomInt(0, wavesWacking.length);
        choreography.push(wavesWacking[i]);
        document.getElementById("video").src = str(wavesWacking[i]);
        document.getElementById("danceVideo").load();
        document.getElementById("danceVideo").play();
    }
}

function mouseClicked() {
    // plays through all videos in choreography array
    var nextVideos = function(i) {
       document.getElementById('video').src = choreography[i];

       var videoElement = document.getElementById('danceVideo');
       videoElement.load();
       videoElement.play();

       // checks to see if there are videos left to play (i < array length)
       // checks to see if current video has ended to play next video in array
       if (i < choreography.length) {
            videoElement.onended = function() {
                nextVideos(i + 1);
            }
        }
    }

    // clicking the play button will play back entire choreography
    if (mouseX > 205 - (55 / 2) & mouseX < 205 + (55 / 2)) {
        if (mouseY > 213 - (55 / 2) && mouseY < 213 + (55 / 2)) {
            nextVideos(0);
        }
    }
}

Statement

As stated in my final project proposal, I wanted to create something that was going to be personally interesting to me. So, I decided to create a visual and interactive computer keyboard dance generator. The objective of my project was to allow the user to compile a bunch of dance moves that are generated based off of the letter key that they pressed. This would help the user create their own choreography that can be adjusted and modified to fit a song they choose when they actually choreograph.

In order to create this, I had to collect a database of dance moves. So, I recorded various dancers on campus dancing in a specific dance style, and, from this, I gathered videos of 220 unique dance moves. Once I collected my videos, I loaded them into code and assigned specific dancers/dance style to different arrays. Next, I essentially paired certain letter keys to arrays so that, when the user presses a letter key, a random dance video (dance move) from the paired array would play. In addition, as the user presses a letter key, the corresponding dance videos are added to a “choreography” array which contains the entire choreography that the user makes and can be played by pressing the play button at the end.

My greatest struggle with this project was getting all the videos in the “choreography” array to play in succession. I had to do a lot of outside research to figure out how to see if one video has ended in the array for another one to start. I used document.getElementById().src, load, play, and onended to make this happen.

Below is a screenshot of what the project looks like as well as instructions on how to install and run it.

Screenshots

** can’t show the interactiveness of the project through screenshots; click the link below and follow instructions to use it!

Instructions

1. Press the link below (you will only get access with CMU Andrew email).
2. Download the file (it is safe to download & it will take a while).
3. Open the folder Final Project.
4. Open the index.html file.
5. Read the instructions on the web page to play!

Choreography Generator Download Link

For my final project, I wanted to create something that is personally interesting to me. So, I’ve decided to create a visual and interactive computer keyboard dance generator. The objective of my project is to allow the user to see a dance move that’s generated based off of the key they pressed. As you can see below, if the user presses the “f” key, he or she will see dance moves surrounding footwork.

For now, I plan on creating one move per key for many keys. From there, I will try to create multiple moves per key so that when the user presses the key, the moves are randomized. This will allow for more diverse dance moves to be generated.

freestyleturtle

var star;
var x;

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

function draw() {
    background(0);

    mouseX = constrain(mouseX, 0, width);
    mouseY = constrain(mouseY, 0, height);

    star = makeTurtle(mouseX, mouseY);
    star.setColor("yellow");
    star.setWeight(1);

    x = map(mouseX, 0, width, 0, 10000);

	for (var i = 0; i < 300; i++) { // draw multiple
		for (var j = 0; j < 5; j ++) { // draw star
			star.penDown();
			star.forward(20);
			star.right(144);
		}
		star.penUp();
		star.face(x * i / 300); // draw in a line
		star.forward(i); // create spaces between stars
	}
}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project, I wanted to create a composition surrounding the movement of my mouse. I wanted to create a shooting star that moves towards your mouse, which is similar to what you see in the first picture below. From there, I wanted to make it seem like the shooting star was falling into a hole once it arrives to the mouse’s location, which is what you see in the second picture. Lastly, I wanted to create multiple shooting stars falling into a hole.

In order to create this illusion, I had to focus on creating spirals using turtle graphics. When you move the mouse across the width of the canvas, you see that the stars form a spiral around the mouse’s location. Although you don’t see the first star move towards the mouse’s location like a shooting star, when you take screenshots like the ones below, it creates the illusion of the concept/idea that I wanted to create.

Body on Screen by Claudia Hart

The woman I’ve decided to focus on is Claudia Hart and her project, Body on Screen. Claudia Hart has worked on both contemporary art and 3D animation and has taught both of those for a really long time. She’s taken classes at New York University’s Center for Advanced Digital Applications to learn Maya 3D animation software and she’s attended the School of the Art Institute of Chicago. She states that her main focus as a female artist in a high-end technology industry, is to, “subvert earlier dichotomies of woman and nature pitted against a civilized, “scientific” and masculine world of technology”. And you can clearly see that in her project, Body on Screen.

Hart was inspired by Trisha Brown, a American postmodern dancer who challenged the dance tradition that focused on formalistic beauty of the body and stylized move. Brown emphasized pedestrian movements and de-highlighted the “feminine” features of a dancer’s body. Similar to Brown, Hart portrays women in a simple way by drawing their bodies with sagging breast, rocky hairs, frozen-looking body, and characterless face, which accentuates their physical agility in regards to the choreography rather than their erotic quality. By doing this, she desexualizes women and presents them at face value. Furthermore, she allows people to understand womens’ representation issues, whether or not they’re specific to the digital practice. And as a female, this is something that I think is important to present to the world and that is why I admire her project.

Claudia Hart

generativelandscape

var jellyfish = [];

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of jellyfish
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(height);
        jellyfish[i] = makeJellyfish(rx, ry);
    }

    frameRate(30);
}

function draw() {
    background("lightblue"); 
    
    updateJellyfish();
    removeJellyfish();
    addNewJellyfish(); 
}

function updateJellyfish(){
    // Update the jellyfish's positions, and display them
    for (var i = 0; i < jellyfish.length; i++){
        jellyfish[i].move();
        jellyfish[i].display();
    }
}

function removeJellyfish(){
    var jellyfishToKeep = [];
    for (var i = 0; i < jellyfish.length; i++){
        if (jellyfish[i].y + jellyfish[i].size > 0) {
            jellyfishToKeep.push(jellyfish[i]);
        }
    }
    jellyfish = jellyfishToKeep; // surviving jellyfish
}

// HOW TO ADD SMOOTHLY!!!
function addNewJellyfish() {
    var newJellyfishLikelihood = 0.015; 
    if (random(0, 1) < newJellyfishLikelihood) {
        jellyfish.push(makeJellyfish(random(width), height));
    }
}

// update position of jellyfish every frame
function jellyfishMove() {
    this.y += this.speed;
}

// draw jellyfish
function jellyfishDisplay() {
    fill(this.rr, this.rg, this.rb); 
    noStroke();
    arc(this.x, this.y, this.size, this.size, PI, 2 * PI, CHORD);
    push();
    translate(this.x, this.y);
    noFill();
    stroke(255);
    strokeWeight(2);
    bezier(0, 0, -20, 40, 20, 30, 0, 70);
    bezier(-10, 0, -30, 40, 10, 30, -10, 70);
    bezier(-20, 0, -40, 40, 0, 30, -20, 70);
    bezier(10, 0, -10, 40, 30, 30, 10, 70);
    bezier(20, 0, 0, 40, 40, 30, 20, 70);
    pop();
}

function makeJellyfish(startingX, startingY) {
    var jf = {x: startingX,
    			y: startingY,
    			rr: random(0, 200),
    			rg: random(0, 100),
    			rb: random(0, 255),
                size: random(50, 100),
                speed: -1.0,
                move: jellyfishMove,
                display: jellyfishDisplay}
    return jf;
}

When I read about this project, the first “landscape” I thought of was sea animals passing by in a submarine or in an aquarium. As a result, I wanted to create something to imitate the perspective of someone traveling under water, like being in a submarine. I chose to draw jellyfish and to view them from a bird’s eye view (imagine being in a submarine with glass on the floor/bottom). In addition, I chose to randomize the size and colors of the jellyfish. Here are a few sketches of how I decided on perspective/shape.

3D Printed Flexible Shoes

My peer’s looking outwards was about 3D printing, specifically 3D printing flexible shoes. My peer stated that he thinks it’s interesting how practical 3D printing has become and how it could help create other useful every day life things in the future. I agree with my peer in that it is amazing how 3D printing has turned into a process for the creation of even the simplest, most practical objects. In addition, it could possibly replace other methods of creating useful products we use in our daily lives and be more efficient/save raw material utilization.

But, even though it seems like 3D printing’s becoming more popular and being used more often, I wonder if it’s worth to use it to create practical daily life objects. When I watched the video about the shoes (link below), I saw that the shoes weren’t exactly fulfilling its purpose properly. They seemed to be made of material that’s either too hard or too flexible, making them too rigid/uncomfortable or not sturdy enough. It made me think about whether it’s worth it to use 3D printing for a product this practical, when it can’t do its job as well as the shoes we have now. The only time I think 3D printing practical objects might really be useful for is when we’re trying to create products of minimal productivity for people who can’t afford the best version of that object, similar to one laptop per child. As a result, I think it really depends on efficiency of 3D printing practical objects, the audience its targeted at, and how much better the 3D printed object is from the current one.

Peer’s Looking Outward

3D Printed Shoes Link

computationalportrait

var image;

function preload() {
	// directly loading image through website (no URL variable)
    image = loadImage("https://scontent.fagc2-1.fna.fbcdn.net/v/t31.0-8/c87.61.576.576/p720x720/27788553_1801115783266418_6212879640355992453_o.jpg?_nc_cat=110&_nc_ht=scontent.fagc2-1.fna&oh=cc9c38dd3d5a14dcb13a012cd0973bd2&oe=5C7EA0C1");
}

function setup() {
    createCanvas(480, 480);
    background(0);

    image.loadPixels();
    // makes the pixels load faster
    frameRate(500000000000000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var color = image.get(ix, iy);

    noStroke();
    fill(color);
    // pixels are smaller to make the portrait more detailed
    rect(px, py, 3, 3);
}

At first, I had trouble finding a photo that would fit well into the 480 by 480 canvas so I had to look through multiple photos on different websites to find a photo that would be the perfect size. However, once I found that photo, it was easy to make a computational portrait out of it. I used 3 by 3 rectangles as my surface treatment. Because I made my rectangles so small, I had to increase frame rate to 500 trillion for the portrait to be drawn faster. The final result is below!!

I’m using one of my late days.

Representation of Differential Growth for FloraForm

Jesse Louis Rosenberg is an artist and programmer who uses a combination of technology, art, and science when creating his nature inspired, computer simulation designs. He studied mathematics at MIT and has previously worked as a consultant for Gehry Technologies. He is now working in his own design studio called Nervous System in Somerville, Massachusetts, which he co-founded with Jessica Rosenkrantz back in 2007. His work consists of understanding scientific knowledge of nature and applying that to design that’s interactive and open. One of his works is the FloraForm, which is the latest generative design that is inspired by biomechanics of growing leaves and flowers. I admire the work because of its beauty and intricacy but I admire his thinking and designing process even more because he studies the science behind his inspiration. He focuses on the growing process of flowers and how that affects the shape and form. He also compares his findings (shapes and forms) to that of other things like jellyfish and sea slugs. He tries to fully understand every possible shape and form that can arise from flowers so that he can create a design that’s not only beautiful but also representative of its inspiration. In the video, you can see how Jesse and Jessica explain their work more in depth. They both explain their work using pictures and sketches which takes the audience through every step of their process. Every step also has an important purpose. In other words, they might’ve sketched or studied something to understand the shape/form or science or intricacy/beauty behind their inspiration and understanding each of these are important for the overall design of their final work. This has taught me that it’s important to have physical evidence or visuals throughout your thinking process. Not only does it help the audience understand your work in the end, but it also helps you analyze everything that you need to thoroughly, without missing any key information.

Video

Nervous System

About Nervous System

FloraForm

Chris Harrison’s Bible Cross-References Visualization Project

The computational information visualization project I chose was Chris Harrison’s Bible Cross-References. Chris worked with a Lutheran pastor to create a visualization of biblical data regarding textual cross references. At first, they wanted to create an interactive visualization that people could zoom in on and learn from but then they realized that a lot of other projects/programs existed for that purpose. As a result, their focus was just on the creative, beautiful visualization of the data. They wanted to capture the complexity of the data and honor the immensity of the textual cross references in the Bible. So, they came up with the visualization above. The colors represent the distance between two chapters from the cross reference and it creates a beautiful rainbow-like figure. There are so many different colored lines, 63,779 to be exact, that shows exactly what Chris wanted to show through this information visualization which was the complexity and immensity of the biblical data. I really admire this project because when I think of design, I focus on making effectiveness or efficiency and not just beauty. This project however really emphasizes the beauty of the data and focuses on a very simple yet important goal. It shows me that design can just be an aesthetic that I can admire and enjoy for visual pleasure.

Chris Harrison: Bible Cross-References

rjpark_curves

var nPoints = 300;
var angle = 0;

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

function draw() {
    background(175, 110, 235); // resets background every time draw is called so only one curve shows

    push();
    translate(mouseX, mouseY); // center of curve follows mouse
    rotate(radians(angle)); // rotates on center of curve
    drawEightCurve(); // draws curve
    pop();

    angle = angle + 3.5; // speed of rotation
}

// http://mathworld.wolfram.com/ConicalSpiral.html    
function drawEightCurve() {
    var x;
    var y;
    var r;
    
    var a = constrain(mouseX, width / 6, width / 2.2);
    
    fill(60, 20, 35);
    stroke(160, 15, 90);
    strokeWeight(5);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r = - a * cos(3 * t);
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

I first went to the Mathworld curves site and found the trifolium curve. It reminded me of a fidget spinner and so I got inspired to create one using this curve. As a result, I created a function (drawTrifolium()) that would draw the trifolium curve and, to do this, I used the polar equation from the site. Within the function, I made the “a” variable dependent on my mouseX movement. This changes the size of the fidget spinner as mouseX decreases or increases. Then, within the draw() function, I called drawTrifolium() and translated it so that the center of the fidget spinner would be wherever my mouse (mouseX and mouseY) is. Below are two pictures of the minimum and maximum size of the fidget spinner.