rfarn and ziningy1- final project

Audio embedded, please turn up volume. Vimeo recording also included at bottom.

In our final project, we made a music video and explored the relationship between geometric motion and rhythm. We divided the video into four sections of movements, interacting with the rhythm and mood of the music.

Motion section 1: Morphing blob

Motion section 2: Droplets

Motion section 3: Interacting Balls

Motion section 4: Splitting /Pulsing Balls

//stores music
var song;

//intro blob variables
var dx1;
var dy1;
var v0x;
var v0y;
var v1x;
var v1y;
var v2x;
var v2y;
var v3x;
var v3y;
var v4x;
var v4y;
var v5x;
var v5y;
var vcolor = 100;
var vopac = 255;

//circle droplet variables
var diam1 = 30;
var diam2 = 30;
var diam3 = 30;
var diam4 = 30;
var opac = 200;
var drate = 6;

//interacting balls variables
var IBdiam = 30;
var IBxpos1 = 20;
var IBypos1 = 20;
var IBxpos2 = 20;
var IBypos2 = 20;
var IBxpos3 = 20;
var IBypos3 = 20;
var IBxpos4 = 20;
var IBypos4 = 20;
var IBxpos5 = 20;
var IBypos5 = 20;
var triangleOpac = 255;

//red bars variables
var bwidth1 =  15;
var bheight = 15;
var bwidth2 = 15;
var barOpac = 255;
var bspeed = 4;
var rectx1 = 200;
var rectx2 = 230;

//splitting balls variables
var SBypos = -15;
var SBxpos1 = 300;
var SBxpos2 = 300;
var ball3y = 200;
var ball4y = 200;

song.setVolume(0.5);
}

function setup() {
createCanvas(600, 400);
frameRate(10);
song.play();

//set values to intro blob vertexes
v0x = width/2 - 70;
v0y = height/2;
v1x = width/2;
v1y = height/2 - 70;
v2x = width/2 + 70 ;
v2y = height/2 ;
v3x = width/2;
v3y = height/2 + 70;
v4x = width/2 - 70;
v4y = height/2;
v5x = width/2;
v5y = height/2 - 70;
v6x = width/2 + 70;
v6y = height/2;
}

function draw() {
angleMode(DEGREES);
background(150);
noStroke();

fill(vcolor);
vcolor += 2;
drawintroDrop(); //larger intro blob
fill(130, 130, 130, vopac);
push();
scale(0.4);
translate(2 * width/3 + 20, 2 * height/3);
drawintroDrop(); //smaller intro blob
pop();
vopac -= 10;

drawDroplets();
drawInteractballs();
pulsingBalls();
}

function interactingBalls(op, xpos, ypos) { //make interacting ball
fill(132, 190, 160, op);
ellipse(xpos, ypos, 30, 30);
}

function makeDrop(r, g, b, x, y, diam) { //make droplet
fill(r,g,b,opac);
ellipse(x, y, diam, diam);
}

function drawintroDrop(){ //intro blob
angleMode(DEGREES);
beginShape();
curveVertex(v0x, v0y);
v0x -= 2;
v0y += 4;
curveVertex(v1x, v1y);
v1x -= 2;
v1y += 6;
curveVertex(v2x, v2y);
v2x -= 8;
v2y -= 4;
curveVertex(v3x,v3y);
v3x += 2;
v3y -= 4;
curveVertex(v4x,v4y);
v4x += 8;
v4y += 4;
curveVertex(v5x, v5y);
v5x -= 2;
v5y += 6;
curveVertex(v6x, v6y);
v6x -= 2;
v6y += 4;
endShape();
}

function drawDroplets(){ //circle droplets
if(frameCount > 52){ //first droplet
makeDrop(108,163,140,width/4, height/4, diam1);
diam1 += drate;
opac -= 3;
}

if(frameCount > 62){ //second droplet
makeDrop(108,123,140,width/2, height/2 + 60, diam2);
diam2 += drate;
}

if(frameCount > 73){ //third droplet
makeDrop(178,160,140,width - 100, height - 100, diam3);
diam3 += drate;
}

if(frameCount > 88){ //fourth droplet
makeDrop(200,163,140,width - 140, height - 270, diam4);
diam4 += drate;
}

if(frameCount > 120 & frameCount % 3 == 0 ){ //flashing background
fill(252, 252, 240);
rect(0, 0, width, height);
}
}

function drawInteractballs(){ //interacting balls
if(frameCount > 120 & frameCount < 172 ){ //red triangle
fill(210, 65, 65, triangleOpac);
triangle(30, 45, 30, 135, 165,135);
}

//balls movement
if(frameCount > 120){ //ball one
interactingBalls(250, IBxpos1, IBypos1);
IBxpos1 += 6;
IBypos1 += 4;
if(IBxpos1 > 165 + IBdiam/3){
IBxpos1 -= 3;
IBypos1 += 10;
}
if(IBypos1 > 350 - IBdiam/2 || frameCount > 161){
IBxpos1 -= 1;
IBypos1 -= 20;
}
if(frameCount > 185){
IBypos1 += 12;
}
if(frameCount > 211){
IBypos1 -= 12;
}
if(frameCount > 237){
IBypos1 += 18;
}
}

if(frameCount>126.5){ //ball two
interactingBalls(180, IBxpos2, IBypos2);
IBxpos2 += 6;
IBypos2 += 4;
if(IBxpos2 > 165 + IBdiam/3){
IBxpos2 -= 3;
IBypos2 += 10;
}
if(IBypos2 > 350 - IBdiam/2 || frameCount > 167.5){
IBxpos2 -= 1;
IBypos2 -= 20;
}
if(frameCount > 191.5){
IBypos2 += 12;
}
if(frameCount > 217.5){
IBypos2 -= 12;
}
if(frameCount > 244.5){
IBypos2 += 18;
}
}

if(frameCount > 133){ //ball three
interactingBalls(130, IBxpos3, IBypos3);
IBxpos3 += 6;
IBypos3 += 4;
if(IBxpos3 > 165 + IBdiam/3){
IBxpos3 -= 3;
IBypos3 += 10;
triangleOpac -= 17; //triangle opacity decreases when third ball falls
}
if(IBypos3 > 350 - IBdiam/2 || frameCount > 174){
IBxpos3 -= 1;
IBypos3 -= 20;
}
if(frameCount > 198){
IBypos3 += 12;
}
if(frameCount > 224){
IBypos3 -= 12;
}
if(frameCount > 251){
IBypos3 += 18;
}
}

if(frameCount>139.5){ //ball four
interactingBalls(80, IBxpos4, IBypos4);
IBxpos4 += 6;
IBypos4 += 4;
if(IBxpos4 > 165 + IBdiam/3){
IBxpos4 -= 3;
IBypos4 += 10;
}
if(IBypos4 > 350 - IBdiam/2 || frameCount > 180.5){
IBxpos4 -= 1;
IBypos4 -= 20;
}
if(frameCount > 204.5){
IBypos4 += 12;
}
if(frameCount > 230.5){
IBypos4 -= 12;
}
if(frameCount > 257.5){
IBypos4 += 18;
}
}

if(frameCount>146.5){ //ball five
interactingBalls(40, IBxpos5, IBypos5);
IBxpos5 += 6;
IBypos5 += 4;
if(IBxpos5 > 165 + IBdiam/3){
IBxpos5 -= 3;
IBypos5 += 10;
}
if(IBypos5 > 350 - IBdiam/2 || frameCount > 186.5){
IBxpos5 -= 1;
IBypos5 -= 20;
}
if(frameCount > 211){
IBypos5 += 12;
}
if(frameCount > 237){
IBypos5 -= 12;
barOpac -= 7; //red bars opacity decreases on fifth balls second to last bounce
}
if(frameCount > 264){
IBypos5 += 18;
}
}

//red bars
if(frameCount > 159){ //bottom bar
fill(210, 65, 65, barOpac);
rect(rectx1,345,bwidth1,bheight);
bwidth1+= bspeed;
}

if(frameCount > 175){ //top bar
fill(210, 65, 65, barOpac);
rect(rectx2,155,bwidth2,bheight);
bwidth2 += bspeed;
}

if(bwidth1 > 350  || frameCount > 212){ //bars moving right
rectx1 += 7;
rectx2 += 2;
}
}

function pulsingBalls(){ //splitting and pulsing balls
//constraining variables
var SBy1 = constrain(SBypos, -IBdiam/2, height/2);
var SBx1 = constrain(SBxpos1, width/3 - 25, width);
var SBx2 = constrain(SBxpos2, 0, width * (2/3) + 25);

if(frameCount > 287){ //first circle moving
fill(132, 190, 160);
SBypos += 10;
ellipse(SBx1, SBy1, IBdiam, IBdiam);
ellipse(SBx2, SBy1, IBdiam, IBdiam);
if(SBy1 > 160 & SBy1 < 200){ //diam increases
IBdiam += 5;
}
if(SBy1 == 200){ //split to two circles
SBxpos1 -= 5;
SBxpos2 += 5;
if(frameCount>330){ //split to six circles
var SBy2 = constrain(ball3y, height/4, height/2);
var SBy3 = constrain(ball4y, height/2, height * (3/4));
ellipse(SBx1, SBy2, IBdiam, IBdiam);
ellipse(SBx1, SBy3, IBdiam, IBdiam);
ellipse(SBx2, SBy2, IBdiam, IBdiam);
ellipse(SBx2, SBy3, IBdiam, IBdiam);
ball3y -= 10;
ball4y += 10;
if(SBy2 > 130 & SBy2 < 170){ //diam increases
IBdiam += 3;
}
}
}
}

//pulsing balls
if(frameCount > 350 & frameCount % 2 == 0){
IBdiam += 16;
}

if(frameCount > 360 & frameCount % 3 == 0){
IBdiam -= 20;
}
}

LookingOutward-12

For this weeks post, I chose to compare The Creatures of Prometheus and Atlas, two generative videos that pair audio and visual experiences. The Creatures of Prometheus, creates by Simon Russell, is a visualization of Beethoven’s ballet. The animation combines both the audio and visual, directly setting up the graphics to react to the music: pitch and amplitude derive the height and speed of graphics, volume effects color, etc.

Similarly, Atlas is also a generative video that combines audio and visuals. Created by Agoston Nagy, Atlas is an “anti game environment” that produces music in a conversational cognitive space. The video uses a combination of text, sounds and graphics (“tasks”) that are automatically generated and composed and carried out (“solved”) through machine intelligence without the aid of human input. Agoston questions concepts like ad infinitum, presence, human cognition, imagination, etc.

Although both projects have similar products (both are generative videos combining audio and visuals), the concepts driving the projects and ideas behind them are very different. The Creatures of Prometheus takes a very direct approach, programming an animation where the graphics react directly to the sound.

Atlas uses a more cognitive approach, focusing on the generation of an environment and space through audio and visuals.

Atlas

The Creatures of Prometheus

Final-Project-Proposal

For the final project, I will be collaborating with Ethan Ye (ziningy1).  As design students, we are inspired by the motion graphic videos created by the Time, Motion and Communication design class taught by Dan Boyarski. The class focuses on designing and presenting time-based graphics on screen. Although the class uses tools like After Effects or Illustrator, after watching some examples of student work, we found that the graphics could potentially be created through coding as well. We’re interested in exploring the interaction of words, images, sounds, and motion. An example video of student work from the class:

To create the 30 -40 sec video, we intend on using coding techniques from 15-104 like turtle graphics, creating a server and implementing sound and images, objects, etc. We might also create some graphics in Illustrator or Photoshop to storyboard/visualize our project. Our video will use simple geometric shapes and changing scale, color, position to create interesting visuals.

rfarn-lookingOutward-11

For this weeks looking outwards post, I decided to take a look at Bleep Space. Bleep Space is a project created by Andy Wallace and Dan Friel. It’s a toy that lets users to sequence various geometric animations along with sounds, allowing the user to create visual and auditory patterns.

The purpose of the interactive toy is not so much to create perfect tunes, but more to experiment with various sounds and their accompanying graphics. A tabletop installation was also created with many buttons surrounding a screen and is currently touring in different locations in New York. As users press buttons, different images and motion graphics appear on the screen. Originally, the program was written in openFrameWorks. However, the tabletop version had some edits and changes, taking away more complex features and making it more game-like with arcade features such as a timer to clear the screen.

Project-11-Composition

For this project I initially wanted to create a sort of game where a line would drawing in different directions randomly and you could click around the screen to change the direction it travels.

However, the more focused I became on making it like a game interface, the further I felt it strayed from the project. I took a step back and decided to instead create a more abstract piece that random flowed across the screen.

I added multiple lines starting from the same point to fill up the page and create a dynamic image. Then I wanted to play around with colors and changing tones. I made it so that as the line drew down the page, it would automatically darken.

However, as you can see on the right image, the user can also speed up the progression of the darkening by clicking the screen as well to darken the line color.

I also tried thinning the line weight, but for the final i decided to go with a medium line weight between the original and the tested thinner line:

var turtle1; //global turtle variable
var C = 255; //color variable

function setup() {
createCanvas(480, 480);
background(245, 228, 215);
frameRate(20); //sped up frame rate
strokeJoin(ROUND); //round joints
strokeCap(ROUND); //round ends

turtle1 = makeTurtle(width/2, 0); //turtle one starting point
turtle1.setColor(color(C)); //initial color (white)
turtle1.setWeight(4); //weight of line
turtle1.penDown(); //pen in down
turtle1.right(90); //turn 90 degrees right to face down
turtle1.forward(10); //drwa forward 10 pixels

}

function draw() {
var num = random(1, 9); //var to randomize direction
if(num > 1 & num < 3){ //1/3 of time draws 10 pixels right
turtle1.face(0);
turtle1.forward(10);
}
if(num > 4 & num < 6){ //1/3 of time draws 10 pixels down
turtle1.face(90);
turtle1.forward(10);
}
if(num > 7 & num < 10){ //1/3 of time draws 10 pixels left
turtle1.face(180);
turtle1.forward(10);
}
if(turtle1.y > height || turtle1.x < 0 || turtle1.x > width){ //whenever goes off page, restarts at top
turtle1.penUp();
turtle1.goto(width/2, 0);
turtle1.penDown();
}
if(turtle1.y < 1){ //each time drawing restarts at top, color resets to white
C = 255;
turtle1.setColor(C);
}
if(frameCount % 10 == 0){ //automatically darkens color every 10 frames
C += -10;
turtle1.setColor(C);
}
}

function mousePressed(){ //whenever mouse is pressed, color also darkens
C += -10;
turtle1.setColor(C);
}

function turtleLeft(d) {
this.angle -= d;
}

function turtleRight(d) {
this.angle += d;
}

function turtleForward(p) {
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;
}

LookingOutward-10

For this weeks post, I decided to look at Allison Burtch’s project, Mic Jammer. In collaboration with Eric Rosenthal, Burtch created a small device that can mute people’s microphones. It works by emitting a high ultrasonic noise that is inaudible to human ears but can be heard by microphones.

I found this project interesting because of how relevant it is. Burtch describes the purpose of Mic Jammer as being like taping over your webcam, but for audio and microphones. Personally, I find that there is a growing fear of being watched through my webcam, but I never considered the possibility of being listened to through the microphone and this brings up that second possibility.

The product itself is in the beginning stages of being designed and Burtch as well comments on the fact that the next step is to collaborate with a product designer to re-engineer and design the product. I find it really interesting how the product was also designed around the iphone, specifically the iphone 4/5 and later iphone 6 when it came out. It considers the placement of the microphones (on the bottom for iphone 4/5 and two on top and two on bottom for iphone 6), trying to find best way to hit and aim for the microphones.

http://www.allisonburtch.net/mic-jammer/

project-10-generativeLandscape

For this project, the first thing that came to mind for a landscape was a sky with a sun, grass and people. It was a fairly simple and straight forward idea. To embellish it, I added some clouds and mushrooms. I used simple shapes to create the various objects: people, mushrooms, clouds.

I made slight differences in the height and y placement of the people, mushrooms and ground to create more depth and also layered the light clouds and dark clouds with the sun to add more depth. There are some randomized variables such as the colors of the dresses, and various sizes of things.

//array for each set of objects
var people = [];
var mushrooms = [];
var dclouds = [];
var lclouds = [];

function setup() {
createCanvas(480, 300);
frameRate(5); //slow down frame rate
for(var i = 0; i < 5; i++){ //fills array with 5 people
people.push(makePerson());
}
for(var j = 0; j < 7; j++){ //fills array with 7 mushrooms
mushrooms.push(makeMushroom());
}
for(var k = 0; k < 3; k++){ //fills array with 3 dark clouds
dclouds.push(makeDarkCloud());
}
for(var q = 0; q < 3; q++){ //fills array with 3 light clouds
lclouds.push(makeLightCloud());
}
}

function draw () {
background(203, 238, 243);
noStroke();
fill(133, 183, 157);
rect(0, 200, width, 100); //ground
for(var k = 0; k < dclouds.length; k++){ //access dark clouds array
dclouds[k].draw(); //draws dark clouds
dclouds[k].move(); //moves dark clouds
}
fill(249, 220, 92);
ellipse(400, -40, width/2, width/2); //sun
for(var q = 0; q < lclouds.length; q++){ //access light clouds array
lclouds[q].draw(); //draws light clouds
lclouds[q].move(); //moves light clouds
}
for(var j = 0; j < mushrooms.length; j++){ //access mushrooms array
mushrooms[j].draw(); //draws mushrooms
mushrooms[j].move(); //moves mushrooms
}
for(var i = 0; i < people.length; i++){ //access people array
people[i].draw(); //draws people
people[i].move(); //moves people
}
}

function makePerson() { //creates people
var person = {px: random(0, 480),       //person x position
py: 205,                  //person y position
pheight: random(20, 50),  //person height
pcolor: random(0, 255),   //person color
pspeed: -10               //person speed
}
person.draw = drawPerson; //sets draw function
person.move = movePerson; //sets move function
return person;
}

function makeLightCloud() { //creates light clouds
var lcloud = {lx: random(0, 480),       //light clouds x position
ly: 70,                   //light clouds y position
lspeed: -1,               //light clouds speed
lwidth: random(140, 180)  //light clouds width
}
lcloud.draw = drawLightCloud; //sets draw function
lcloud.move = moveLightCloud; //sets move function
return lcloud;
}

function makeDarkCloud() { //creates dark clouds
var dcloud = {dx: random(0, 480),       //dark clouds x position
dy: 50,                    //dark clouds y position
dspeed: -2,                //dark clouds speed
dwidth: random(140, 180)   //dark clouds width
}
dcloud.draw = drawDarkCloud; //sets draw function
dcloud.move = moveDarkCloud; //sets move function
return dcloud;
}

function makeMushroom() { //creates mushrooms
var mushroom = {mx: random(0, 480),     //mushroom x position
my: 200,                //mushroom y position
mheight: random(5, 20), //mushroom height
mspeed: -3,             //mushroom speed
mwidth: random(20, 40)  //mushroom width
}
mushroom.draw = drawMushroom; //sets draw function
mushroom.move = moveMushroom; //sets move function
return mushroom;
}

function drawPerson() { //draws people
fill(this.pcolor);
triangle(this.px - 10, this.py, this.px + 10, this.py, this.px, this.py - this.pheight); //body
fill(245, 228, 215);
ellipse(this.px, this.py - this.pheight, this.pheight - 10, this.pheight - 10); //head
}

function drawMushroom() { //draws mushrooms
fill(255);
rect(this.mx - 5, this.my - this.mheight - 10, 10, this.mheight + 10, 5); //stem
fill(237, 187, 187);
arc(this.mx, this.my - this.mheight, this.mwidth, 20, PI, 0, PIE); //head
}

function drawDarkCloud() { //draws dark clouds
fill(184, 215, 219);
ellipse(this.dx, this.dy, this.dwidth, 50); //cloud
}

function drawLightCloud() { //draws light clouds
fill(212, 247, 252);
ellipse(this.lx, this.ly, this.lwidth, 50); //cloud
}

function movePerson() { //moves people
this.px += this.pspeed; //x position decreasing
if(this.px < 0){ //pops up on right edge of canvas once off left edge
this.px = width;
}
}

function moveMushroom() { //moves mushrooms
this.mx += this.mspeed; //x position deacreasing
if(this.mx < 0){ //pops up on right edge of canvas once off left edge
this.mx = width;
}
}

function moveDarkCloud() { //moves dark clouds
this.dx += this.dspeed; //x position decreasing
if(this.dx < 0 - this.dwidth/2){ //starts appearing on right edge once completely off left edge
this.dx = width + this.dwidth/2;
}
}

function moveLightCloud() { //moves light clouds
this.lx += this.lspeed; //x position decreasing
if(this.lx < 0 - this.lwidth/2){ //starts appearing on right edge once completely off left edge
this.lx = width + this.lwidth/2;
}
}

LookingOutward-09

For this weeks post, I decided to write about my friend Elizabeth’s looking outwards post on the Sugarcube MIDI controller. Similar to her post, I agree with the satisfaction of the interaction with the Sugarcube.  What I found so fascinating about the device is how accurately it can imitate the movement of a marble or a surface. In one setting, it uses simple lights to imitate physical movement of solid objects.

The project was created by Amanda Ghassaei, a grad student at the Center for Bits and Atoms at MIT Media Lab.

In addition to imitating simple movements, the Sugarcube also has many settings that create patterns of light and allows the user to interact with the lights as buttons. Besides lighting up and creating a visual performance, the device also emits sound and noises, allowing the user to use both senses and play around with sound and visuals. I find it interesting how this simple tool can be used as an educational tool and stimulate the user both visually as well as audibly.

http://www.instructables.com/id/Sugarcube-MIDI-Controller/

project-09-portrait

For this assignment I chose to use a colorful picture of a high school friend.

Initially, I wanted the interaction to be like painting on a canvas; as the mouse drags, part of the image appears. However, I felt that given the small size of the squares that appear while “painting”, it would take too long to paint the entire image. Therefore, I added random squares that would simultaneously appear as mouse drags and paints.

At first, I also randomized the size of the squares, however the random larger squares were too large and not detailed enough to create the image.

Then, I changed the size of the dots to be consistently small and decided to add two more lines of squares that would appear to the upper right and lower left of the mouse as it dragged. I also sped up the appearance of the random dots.

var photo;

var URL = "https://i.imgur.com/wxV6HZw.jpg"; //image URL
}

function setup(){
createCanvas(314, 480);
background(255); //black background
frameRate(500); //sped up the frame rate
}

var rSize = 3;

function draw(){
noStroke(); //no outline
fill(photo.get(mouseX, mouseY)); //fill of square is color of background photo
var locX = random(0, width); //random x coordinate
var locY = random(0, height); //random y coordinate
rect(locX, locY, rSize, rSize); //draw square
}

function mousePressed(){
fill(photo.get(mouseX, mouseY)); //fill of square is color of background photo
rect(mouseX, mouseY, rSize, rSize); //square drawn when mouse is clicked
fill(photo.get(mouseX - 50, mouseY + 50, mouseY)); //fill of square is color of background photo
rect(mouseX - 50, mouseY + 50, rSize, rSize); //square drawn towards upper right
fill(photo.get(mouseX + 50, mouseY - 50)); //fill of square is color of background photo
rect(mouseX + 50, mouseY - 50, rSize, rSize); //square drawn towards lower left
}

function mouseDragged(){
fill(photo.get(mouseX, mouseY)); //fill of square is color of background photo
rect(mouseX, mouseY, rSize, rSize); //squares drawn as mouse is dragged
fill(photo.get(mouseX - 50, mouseY + 50)); //fill of square is color of background photo
rect(mouseX - 50, mouseY + 50, rSize, rSize); //squares drawn towards upper right
fill(photo.get(mouseX + 50, mouseY - 50)); //fill of square is color of background photo
rect(mouseX + 50, mouseY - 50, rSize, rSize); //squares drawn towards lower left
}

LookingOutward-08

For this weeks looking outward post, I chose to look at Jesse Louis-Rosenberg and Jessica Rosenkrantz’s (both co-founders) speech where they talked about the work of their design studio, Nervous System.

Jesse is an artist, computer programmer and maker who studied math at MIT.

Jessica is a designer, programmer and artist who architecture and biology at MIT. They began by introducing their background and explaining the main three areas of focus that the projects of their studio stems from: science and nature, digital fabrication and co-creation. Their project, the hyphae lamps, was their initial example of combining science and natural patterns with digital fabrication.

Using their various projects, the two co-founders go on to describe their design ideals and the design philosophy of their company, having a huge focus on new technology and the interaction of digital fabrication and technology with nature and design. Throughout their presentation, they describe various design problems and challenges they faced and the solutions they created, connecting the solution to other new problems in order to transition from topic to topic.