sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Assignment 11-B
*/

var option = 3; //starting option
var w = 500; //width
var h = 300; //height
var w2 = w / 2; //width / 2
var h2 = h / 2; //height / 2
var x = []; //bubble starting pos
var y = [];
var dx = []; //bubble direction
var dy = [];
var col = []; //bubble color
var np = 50; // how many particles
var nb = 50; //how many bubbles
var title = ["Valerie","Hound Dog", "Step"];
var artist = ["Amy Winehouse", "Elvis Presley", "Vampire Weekend"];
var currentSpot = 200; //current spot and lengths are to be later configured with p5.js addons and Spotify connectivity
var songLength = 300; // placeholder
var tempo = [96,175,78,0]; //stored tempo of songs
var amp = new p5.Amplitude(); //get amplitude
var particles = [];

function preload() {
    img = loadImage("https://i.imgur.com/K3YQPRm.png"); //load spotify logo
    amy = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/amy.mp3"); //"Valerie" by Amy Winehouse
    elvis = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/elvis.mp3"); //"Hound Dog" by Elvis Presley
    vw = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/vw.mp3"); //"Step" by Vampire Weekend 
}

function particleStep() {
    this.x += this.dx;
    this.y += this.dy / 5;
}

function particleDraw() { //draw particle
    strokeWeight(this.s);
    point(this.x, this.y);
}

function makeParticle(px, py, pdx, pdy, ps) { //create particle with starting pos and velocity
    p = {x: px, y: py,
         dx: pdx, dy: pdy, s: ps,
         step: particleStep,
         draw: particleDraw
        }
    return p;
}

function explode() {
    for (var i = 0; i < np; i++) {// make a particle
        fill(255);
        stroke(255);
        var p = makeParticle(w2, h2, random(-30,50), random(-30,50), random(5,10)); //initial location x/y quadrant velocity x/y, size
        particles.push(p); // push the particle onto particles array 
    }
    for (var i = 0; i < np; i++) { // for each particle
        var p = particles[i];
        p.step();
        p.draw();
    }
}

function record () {
    noStroke();
    fill(0);
    ellipse (w2, h2 , 200); //vinyl
    for (i = 0; i < 8; i++){ 
        push();
        noFill();
        stroke(90);
        strokeWeight(1);
        ellipse(w2, h2, 190 - i * 30);
        pop();  //texture
    }
    fill(200); // blue
    ellipse(w2, h2, 75); //label
    push();
    translate(w2,h2);
    rotate(frameCount * 5);
    fill(150);
    ellipse(15, 0, 5); //label spin
    pop();
    fill(255);
    ellipse (w2, h2, 10); // peg
}

function tonearm () {
    angleMode(DEGREES);
    translate(w2 + 100, h2 - 100);
    fill(255);
    ellipse(0, 0, 30); //swivel
    var tonearmPosition = map(currentSpot, 0, songLength, 0, 28);
    push();
    rotate(tonearmPosition);
    push();
    rectMode(CENTER);
    rect(0,125, 12, 25); //cartridge
    pop();
    strokeWeight(3);
    stroke(255);
    line(0, 0, 0, 125); //bar
    pop();
}

function header () {
    image(img,10,10,20,20);
    fill(255);
    textSize(12);
    text(title[option], 35, 20); //display title 12pt
    textSize(9);
    text(artist[option], 35, 30); //display artist 9pt
}


function setup() {
    createCanvas(w, h);
    for (i = 0; i < nb; i++) {  //generate bubbles 
        x[i] = random(width); //randomly 
        y[i] = height; //at the bottom
        dx[i] = random(-.5,.5); //that float sideways randomly 
        dy[i] = random(-2,-1); // and float virtically faster
        col[i] = color(random(255)); //randomly filled in greyscale
    }
}

function draw() {
    background(10,0,0);
    stroke(0);
    strokeWeight(10);
    explode();
    var vol = amp.getLevel();
    var bdiam = map(vol, 0, 1 , 5, 18);
	var vdiam = map(vol, 0, 1, 200, 250); //vinyl amp diameter
    
    for (i = 0; i < nb; i++) {  
        fill(col[i]);
        noStroke();
        ellipse(x[i], y[i], bdiam);
        x[i] += dx[i];
        y[i] += dy[i];
        
    	if (x[i] > width) { //bounce off right wall
        	x[i] = width - (x[i] - width);
        	dx[i] = -dx[i];

    	} else if (x[i] < 0) { //bounce off left wall
        	x[i] = -x[i];
        	dx[i] = -dx[i];

    	}
    	if (y[i] > height) { //bounce off bottom
        	y[i] = height - (y[i] - height);
        	dy[i] = -dy[i];
       
    	} else if (y[i] < 0) { //float off top, appear at bottom
    		y[i] = height;
    	}
	}
	push();
    noStroke();
    fill(180);
    ellipse(w2,h2,vdiam,vdiam);
    pop();
    header();
    record();
    tonearm();         
}

function mouseClicked() {
	particles = []; //clear particles array
	explode(); //create particle explosion
    option ++; //next option when clicked
    if(option > 3){ 
        option = 0;
    }
    if(option == 0){
    	for(i = 0; i < nb; i++){
    		col[i] = color(0, 0, random(255)); //random blue
    		dx[i] = tempo[option] * random(-.1,.1) / 10; //horiz to tempo
    	}
        vw.stop(); //stop "step"
        amy.play(); // play "valerie"
    }
    if(option == 1){
    	for(i = 0; i < nb; i++){
    		col[i] = color(random(255),0,0); //random red
    		dx[i] = tempo[option] * random(-.1,.1) / 10; // horiz to tempo
    	}
        amy.stop(); //stop "valerie"
        elvis.play(); //play "hound dog"
    }
    if(option == 2){
    	for(i = 0; i < nb; i++){
    		col[i] = color(random(255)); //random greyscale
    		dx[i] = tempo[option] * random(-.1,.1) / 10; //horiz to tempo
    	}
        elvis.stop(); //stop "hound dog"
        vw.play(); //play "step"
    }
    if(option == 3){
        vw.stop(); //stop "step"
    	for(i = 0; i < nb; i++){
    		col[i] = color(255); //bubbles fill white
    		dx[i] = random(-.1,.1); //horiz moment unrelated to tempo
    	}
    }
}

Redesigning Spotify Chromecast

This projects is a brief redesign of Spotify’s current Chromecast interface. Pictured below is the current state of the Spotify Chromecast player, which displays the current song, some controls, its information, its album cover, and the album covers of tracks adjacent to it in the queue.

With Spotify Chromecast so frequently being used while hosting a social event, I would argue that the current interface is distracting from the event, or redundant at the least. The current layout would easily enable guests to continuously check which song is coming next, and which songs have already played, freely guiding listeners out of the enjoying the music in the moment. In addition to this, much of the information on the screen is only necessary for the DJ to know, and it is already being provided on their phone’s interface.

With this being said, I looked to create a new interface for Spotify when used on Chromecast that would allow listeners to stay in the moment of the music, while still providing an complimentary atmosphere to that the of the social event.

As the user plays songs, the generated bubbles behind the record and one large bubble behind the record itself jump to the amplitude of the music. The small floating bubbles move horizontally on their upward waltz in speed relation to their tempo.

This project functions as a mock-up of my Chromecast Spotify player as a living environment. Unfortunately, I was not able to configure the p5.js with the Spotify API, as it was out of the scope of 15-104, and thus only these three preloaded songs may be queued. These tracks were chosen with the intent of providing a brief range of visual possibilities this program can generate.

Controls

• select anywhere on the canvas to play the next song, thus changing the color, size and flow of bubbles

For my final project I am interested in exploring the intersection of physical aesthetics and music playback. When I go to concerts, one of the largest factors in my opinion of the performance is the quality of the visuals used to accompany the artists. I am interested in making this sort of experience more accessible through a music player. I will likely have several different songs to choose from and different visuals to accompany them. I would still like to ground the visuals in some literal manifestation, so I am considering using an interface which resembles a turntable.

Sometimes at parties I see people use their Chromecast or Apple TV to stream music on, which only displays the album cover and song title. I imagine this program to be used in this sort of social setting, where it is not necessarily the primary focus of the occasion, but accompanies the energy in an appropriate fashion.

Below is a rough digital sketch of what the program may look like. Centered is an abstract representation of a record player, surrounded by graphics that accompany and supplementally visualize the music.

From the beginning of this course, I have been interested in exploring the intersection of the visual arts and music. Additonally, for the past five years or so I have been into vinyl records, and have reignited this passion after coming to Carnegie Mellon and joining WRCT.

I recently downloaded an app called djay2, which simulates the process of live mixing with records. It has been fun to play with, but has a slightly intimidating interface to those who have no experience with real live mixing.

The only visualizations of the music in djay2 are the scrolling bar at the above the turntable and the picture disks themselves. This limitation inspired me to search for more unique audio visualization, and in this process I stumbled upon the video for “Coast Modern” by Coast Modern.

I am particularly drawn to this project because of its graphic nature. Daiana Ruiz , a visual artist whose work  often explores the living as a person of color, created this video for Coast Modern. I feel that her visual sensibilities of this piece are aligned with my usual visual approach. I admire this video’s efforts to push two dimensional shapes to their farthest affordances.

With both of these projects side by side, djay2 provides a very literal representation of music, while Daiana Ruiz’s work is far more interpretive. I am interested in how this more interpretive style could be incorporated into a project like djay2 while still maintaining its basic functionality.

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-11
*/

var option = 1;
var b = 2;
var gold = 137.507764;

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

function draw() {
    background(0); 

    //each option provides diff colors and 
    if(option == 1){
        greenHex();
    }
    if(option == 2){
        yellowTri();
    }
    if(option == 3){
        orangSq
    ();
    }
}

function greenHex () {
    var swim = mouseX / 10;
    var turtle = makeTurtle(width / 2, height / 2);
    turtle.setWeight(3);

    for(i = 0; i < 300; i++){
        if( i % 3 == 1){
            turtle.setColor("darkgreen");
        } else {
            turtle.setColor("pink");
            var swim = mouseX / 5;
        }
            turtle.penDown();
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.forward(swim);
            turtle.right(60);
            turtle.penUp();
            turtle.right(gold);
            turtle.forward(i * 1.5);
        }
}

function yellowTri () {
    var swim = mouseX * 3;
    var turtle = makeTurtle(width / 2, height / 2);
    turtle.setWeight(3);

    for(i = 0; i < 500; i++){
        if( i % 3 == 1){
            turtle.setColor("gold");
        } else {
            turtle.setColor("indigo");
            var swim = mouseX / 5;
        }
            turtle.penDown();
            turtle.forward(swim);
            turtle.right(120);
            turtle.forward(swim);
            turtle.right(120);
            turtle.forward(swim);
            turtle.penUp();
            turtle.right(gold);
            turtle.forward(i * 1.5);
        }
}

function orangSq () {
    var swim = mouseX * 3;
    var turtle = makeTurtle(width / 2, height / 2);
    turtle.setWeight(3);

    for(i = 0; i < 500; i++){
        if( i % 3 == 1){
            turtle.setColor("navy");
        } else {
            turtle.setColor("chocolate");
            var swim = mouseX / 5;
        }
            turtle.penDown();
            turtle.forward(swim);
            turtle.right(90);
            turtle.forward(swim);
            turtle.right(90);
            turtle.forward(swim);
            turtle.right(90);
            turtle.forward(swim);
            turtle.penUp();
            turtle.right(gold);
            turtle.forward(i * 1.5);
        }
}

function mousePressed() {
    option++;
    if(option > 3) option = 1;
}


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

I approached this project as an exploration in color, shape, and the golden ratio. I created three separate interactions, which can be shuffled through via clicking on the canvas. Each of these options is an exploration in a different color palette and use of shape, each with a similar underlying turtle for loop.

In my explorations, I found a few structures that resemble organic shapes of nature. In the first interaction, Ive found a faint outline of a succulent like growth present in the green strokes when the cursor is all the way to the right. The second interaction generates a negative space at its center which resembles a seashell. Finally, the third interaction yielded a similar succulent-like growth to the first, except it is constrained by right angles on the leftmost sides, dictated so by the 90 degree angles of the squares which make up the structure.

All screenshots below were taken when the cursor was on the far right of the canvas, generating the shapes with line segments at its upper bound.

Seaquence is a musical social experiment from Grey Area Labs, created by Gabriel Dunne, Ryan Alexander, and Daniel Massey. The core interface of Seaquence is appropriately a sequencer, which users can compose short compositional loops with. These compositions are assigned to “organisms” which physically reflect the audio qualities of the music they emit, such as pitch, frequency, and the sostenuto of notes. These organisms congregate in the radius of a central point in their canvas-like “environment”. The more organisms in proximity to another, the more dynamic the music arrangement becomes.

As stated, the algorithms in this project takes proximity, timing, and “drunken walk” progressions into consideration. The nature of organism movement is reminiscent of the responsive “worm” lab from several weeks ago.

I am incredibly drawn to this project, and this Looking Outwards post took me forever to complete because I spent so much time playing with Seaquence.  I think I gravitate towards this piece because of its ability to create such elaborate compositions through such a simple interface. Its ease of use is incredible and empowering.

From these observations, I find it reasonable to assume that the collaborators on this project shared similarly aligning design sensibilities. There is an emphasis on minimalism to achieve complexity. This consideration of both micro and macro levels of interaction make an understanding of intuitive human interaction evident.

the project

grey area labs

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-10
*/

var poppies = [];

var terrainSpeed = 0.00001;
var d = 0.0004;
var d2 = 0.0006;

function setup() {
    createCanvas(480, 240); 
    // create an initial collection of poppies
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        poppies[i] = makeFlower(rx);
    }
    frameRate(10);
}

function draw() {
    background(180, 180, 0); 
    noStroke();
    
    sunset();
    //mtn
    displayRocks();

    emeraldCity();
    
    //adjust 
    translate(0, 30);
    displayGrass();

    //poppies behind road
    push();
    translate(0, -40);
    updateAndDisplaypoppies();
    pop();

    //yellow brick road
    ybr();

    //poppies in front of road
    updateAndDisplaypoppies();
    removepoppiesThatHaveSlippedOutOfView();
    addNewpoppiesWithSomeRandomProbability(); 
}

function sunset(){
    //orange 1
    push();
        fill(190, 150, 0);
        rect(0, 50, width, height);
    pop();
    //orange 2
    push();
        fill(200, 130, 0);
        rect(0, 120, width, height);
    pop();
}

function ybr(){
    fill(200,200,0);
    rect(0,180, width, 20);
}

//draw emerald city
function emeraldCity() {
    //halo adjustment
    var scaleFactor = 1.2;
    push();
        //adjustment
        translate(300, -25)
        //halo
        push();
            stroke('rgba(235, 255, 120, 0.4)');
            strokeWeight(3);
            noFill();
            ellipse(125, 100, 110 * scaleFactor);
            strokeWeight(1);
            ellipse(125, 100, 95 * scaleFactor);
            ellipse(125, 100, 50 * scaleFactor);
        pop();
        //city towers
        push();
            //shimmer type 1
            fill(20, random(160,170), 0);
            rect(100, 80, 15, height, 20);
            rect(115, 90, 15, height, 20);
            rect(125, 75, 15, height, 20);
            rect(145, 100, 15, height, 20);
            //shimmer type 2
            fill(20, random(170,180), 0);
            rect(90, 100 , 15, height, 20);
            rect(110, 120 , 15, height, 20);
            rect(130, 90, 15, height, 20);
            rect(150, 130, 15, height, 20);
            //shimmer type 3
            fill(20, random(180,190), 0);
            rect(80, 180, 15, height, 20);
            rect(100, 140, 15, height, 20);
            rect(125, 120 , 15, height, 20);
            rect(145, 150, 15, height, 20);
        pop();
    pop();
}

function updateAndDisplaypoppies(){
    // Update the poppy positions, and display them.
    for (var i = 0; i < poppies.length; i++){
        poppies[i].move();
        poppies[i].display();
    }
}

function removepoppiesThatHaveSlippedOutOfView(){
    // If a poppy has dropped off the left edge,
    // remove it from the array. 
    var poppiesToKeep = [];
    for (var i = 0; i < poppies.length; i++){
        if (poppies[i].x + poppies[i].breadth > 0) {
            poppiesToKeep.push(poppies[i]);
        }
    }
    poppies = poppiesToKeep; // remember surviving poppies
}
function addNewpoppiesWithSomeRandomProbability() {
    // probability of adding a new poppy to the end.
    var newTreeLikelihood = 0.3; 
    if (random(0,1) < newTreeLikelihood) {
        poppies.push(makeFlower(width));
    }
}

// poppy moves every frame
function poppyMove() {
    this.x += this.speed;
}
    
// draw the poppy
function poppyDisplay() {
    var leafDistance = 20;
    var bHeight = this.nGrowth * leafDistance; 
    push();
        translate(this.x, height - this.closeness);
        var distFactor = 4 / this.closeness;
        //stem
        push();
            strokeWeight(25 * distFactor * .6);
            stroke(30, 130, 0);
            line(0, -bHeight * .2, 0, 0);
        pop();
        //flower
        push();
            noStroke();
            fill(200,0,0);
            ellipse(0, -bHeight * .2, 90 * distFactor * .6);
            fill(0);
            ellipse(0, -bHeight * .2, 90 * distFactor * .2);
        pop();
    pop();
}


function makeFlower(birthLocationX) {
    var poppy = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nGrowth: round(random(2,8)),
                closeness: random(20,40),
                move: poppyMove,
                display: poppyDisplay}
    return poppy;
}


function displayGrass() {
//grass
    push();
    fill(0, 90, 0); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * d) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 145, 190);
        vertex(x, y - 20);
        vertex(0, height);
        vertex(width, height); 
    }
    endShape();
    pop();
}

//rocks behind emerald city
function displayRocks() {
    push();
    fill(90, 90, 60); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * d2) + (millis() * terrainSpeed);
        var y = map(noise(t * 3), 0, 1, 160, 190);
        vertex(x, y - 20);
        vertex(0, height);
        vertex(width, height); 
    }
    endShape();
    pop();
}

I started my exploration process by brainstorming which landscape I would like to create. I had a running theme of plants going on as the objects in my array. I started with what I was most familiar with, and sketched out an idea where flowers would be generated at the eye level of a squirrel. Expanding on this, I sketched a quick layout of scrolling plants that I am not familiar with, being in the context of a jungle canopy. And finally, I pushed into a setting that doesn’t even exist with the sketch of the poppies leading up to the Emerald City from The Wizard of Oz.

I ended up going with the Wizard of Oz theme, as it excited me most. In the story, surrounding the shimmering Emerald City, the four protagonists encounter a field of poppies, which push Dorothy into a slumber. I designed this code to provide a panning view of the setting where this plot event happened, as if it were cinematically setting the scene.

I looked at Angela Washko’s interactive work titled “All The Places You’ll Go”, where she begins to use postcards as found artifacts to unravel the use of women as a representation of place in the lens of the male gaze. I initially gravitated towards this project for its aesthetic appeal, and continued onward into it out of my predisposed interest in postcards as graphic artifacts.

Diving into the project was eye opening in presenting me with the images in a sterile context, where I could think critically about the content of the postcard and compare it directly to prints with the same objective.

In some images, we see the female figure being used to sell the idea of a location’s beauty. This is seen in a more contemporary example (above) and even in a more conservative context (below).

I really admire Washko’s ability to create such a unique emotional reaction without it feeling implicitly prescribed. Everybody who interacts with the piece will have a different interpretation and connection (or lack thereof) to each postcard based upon their life experiences and travels. However, the curation of the postcards unifies these reactions to encourage viewers to think critically upon the social implications that these small artifacts are manifestations of, and if they reflect the value systems of viewers.

In an overview of her practice as a whole, Washko works to give platform to conversations about gender and feminism in places where it does not readily exist. These environments have included formal settings such as the Museum of the Moving Image and more uncharted territory such as her performance art within World of Warcraft servers.

Angela Washko earned a BFA in Painting/Drawing/Sculpture at Temple University’s Tyler School of Art. She continued her education at UCSD where she went on to earn her MFA. Angela Washko is an assistant professor of art right here at Carnegie Mellon University.

game

website

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-09
*/
 
var nick;
var i = 17.5;
var circ = i / 2; 

function preload() {
    var myImageURL = "https://i.imgur.com/v0CY2zp.jpg";
    nick = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    nick.loadPixels();
    frameRate(10);
    noStroke();
}

function draw() {
        gridImg();
        bar();
        repaint();
}

function bar() {
    if(mouseIsPressed){
        fill(0, 45, 80);
        rect(0, 0, width, 2 * i);
    } else {
        fill(0, 80, 45);
        rect(0, 0, width, 2 * i);
    }
}

function repaint(){
    if(mouseIsPressed){
        for(var px = 0; px < width; px += i){
            for(var py = 2 * i; py < height; py += i){
                fill(random(0,20),random(50,90),random(50,110));
                ellipse(px + (i / 2), py + (i / 2), circ);
            }
        }
    }
}

function gridImg() {
    for(var px = 0; px < width; px += i){
        for(var py = 0; py < height; py += i){
            var ix = constrain(floor(px), 0, width - 1);
            var iy = constrain(floor(py), 0, height - 1);
            var theColorAtLocationXY = nick.get(ix, iy);
            fill(theColorAtLocationXY);
            rect(px, py, i, i);
            fill(random(0,20),random(50,110),random(50,90));
            ellipse(px + (i / 2), py + (i / 2), circ);
        }
    }
}

In the project brief, I was most excited by the work of Chuck Close. I was interested in the construction of his portraits and how he can create new colors simply by nesting circles within polygons. I wanted to find the overlap between systematic painting techniques and digital media. Knowing that Close uses complimentary colors to create his specific optical hues, I selected green and blue to compliment the pinks and rust oranges in the photo of my friend, Nick.

Once I created the gridded out and dotted portrait, I wanted to make it feel less static. To do this, I randomized each circle so that the colors are statistically more likely to be a shade of green, but when the viewer clicks on the portrait, these dots shift towards favoring shades of blue.

I genuinely enjoyed this project once I got the hang of it. Sending progress pictures of the portrait to my friend drove me to keep pushing myself forward.

This post is in response to Mimi Jiao’s looking outwards post from week three, which can be found here.

Andrew Kudless is an architect and professor who leads Matsys, a studio based in Oakland, California which does work at the intersection of form, growth, and material systems. Material systems, the central motif of the studio, refers to the interactions of a material’s biologic, geologic, and synthetic qualities.

I was drawn to the piece “P_Wall” in for the same reasons Mimi was. I feel a personal connection to the piece and a desire to interact with it through touch.

Mimi proposed the idea of an extension of this piece through the installation of a more interactive iteration. I am interested in this idea because of the indirect dialogue the piece would conduct amongst those who have engaged with the form.

After further research into the fabrication process for “P_Wall” I have found that although Matsys renders a the panel forms digitally, they also embrace the inaccuracies in how the concrete slurry settles into approximate equilibrium.

Mimi touched upon the connotations in the final organic form resembling that of a tree. I agree that the wall feels very natural, although I initially felt that the wall looked like a collection of torsos smoothly cropped out of context. The folds resemble that of a sitting or turning person.

This impression is in sharp contrast to the inflation test Matsys used in modeling a sister piece to P_Wall, titled Sevenstar (2011). The initial form of this piece reminds me of a tessellation of lounge cushions, inviting me to sit. As the render progresses, it comes to live and begins to warp in a breathing motion. The rendering process is mesmerizingly beautiful, placing me as a spectator to an abstract materialization of life.

source

Jen Lewin is a designer and installation artist who works to create interactive pieces with a common motif of playing with light. In 1974, Lewin was born in Boulder Colorado, she attended a local elementary school where she was introduced to primitive coding practices in the third grade. where she was trained in classical ballet before studying architecture at the nearby University of Colorado campus.

Lewin began to explore an intersection between these disciplines through her work on the Light Harp project. These public installations projected “strings” of light which, when broken, play a sound at a nuanced volume and frequency. Because of their invisible nature in daylight, many are intiaill surprised when walking into her playful trap, before turning back around and engaging with it more. This activity sparks the attention of curious bystanders, who are pulled into the piece and join an impromptu, dadaist symphony for those passing by to hear.

I am drawn to how Lewin talks of her work, and how those who interact with it interact with the piece, which actually allows them to communicate with others that are playing with the piece. I am fascinated by how quickly her work is able to suddenly open up a side of people that is so vulnerably human and playful. Kids and adults alike interacted with the piece, too filled with wonder to engage in any kind of judgement.

The presentation that Lewin gave on her work was really well done, where she was able to keep a controlling, yet conversational tone with the audience leading up to an open Q&A. I think she communicated her ideas articulately, and her ability to do so while simultaneously queueing videos, action shots, and process photographs contextualized everything nicely.

Jen Lewin