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

sketch

//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; 


function preload() {
    song = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/music.mp3");
    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;
    }
}

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

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.

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.

http://www.creativeapplications.net/sound/bleep-space-ios-sequencer-toy-and-tabletop-arcade/

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:

sketch

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 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 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/

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.

sketch

//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;
  }
}

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/

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.

sketch

var photo;

function preload(){
    var URL = "https://i.imgur.com/wxV6HZw.jpg"; //image URL
    photo = loadImage(URL); //loaded image into variable
}

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
}

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.

http://n-e-r-v-o-u-s.com/about_us.php

Eyeo 2015 – Jesse Louis-Rosenburg and Jessica Rosenkrantz from Eyeo Festival // INSTINT on Vimeo.