Final Project Proposal

For my final project, I am intending to make some kind of game/interactive particle system. I have a few inspirations that I discussed in my looking outwards for this week. I want to have particles move towards a cursor controlled by the mouse, making the user have to avoid the particles for as long as possible to avoid ending the game. I have a number of code examples from past notes, assignments, and labs that I can pull from, combine, and finally use as a template to start my project. These examples range from Flock, to Mouse Particles, Generative Landscape, Jitter Points, Phyllotactic Spiral, and Animation step to circle. My biggest hopes are that I can create a meaningful representation and relation to the particles that appear as well as making more complex elements of game structure functional (such as points, levels, etc.)

img_4222
Example codes and thumbnails

 

Michal Luria – Final Project Proposal

For my final project I would like to create a data visualization project of plays. My idea is to look at famous plays in new ways, by presenting various aspects of their structure. I will use the actual text of the play to generate data, and then present it in ways that only consider the structure, not the content. I hope this will present the characteristics of an era or genre, regardless of the play content.

Since all plays are based on character dialog, I would like to show who is on “stage” at every given movement. To represent the dialog itself, each character would have a “circle generator” on the canvas (image below). Each time a character would say a sentence, a circle will be generated, and will expand slowly until faded.

Since the project requires analyzing real texts, a large portion of the challenge would be to convert the text into data that can be used for a visualization project.

This visualization would allow overviewing a play in fast forward mode, and to show the dialog dynamics between characters, their relationship and dominance, and what character is on stage the most or least.

According to complexity and time limitations, a few more ideas on how the project can evolve are:

  1. Compare two plays from different eras and allow viewing how their structure varies in parallel.
  2. Have the character that speaks the most centered – the least a character talks, the further they are to the edge.
  3. Adapt the circle generator to create circles that stay on screen according to their length.

Attached is a sketch of how the screen might look like, while “playing” the play in fast forward:

final-project-sketch

Looking Outwards 12: Project Priors and Precursors

There are two inspirations for my project. The first is one of my favorite game apps from 2010, Tilt to Live, and the second is a visualization of immigration lobbies.

code-red
Tilt to Live

The game app Tilt to Live, developed by One Man Left Studios, is a survival game in which the user tilts their phone to move a cursor around the screen. The objective is to avoid the continual appearance of red particles that are attracted to the cursor and will end the game if the two make contact. To slow the steady barrage of red particles, the cursor can pick up various power-ups that destroy particles. I am considering a recreation of a similar type of game. I am considering adding more physical and mutual interactions to the particles. I might use a similar concept to drive an interactive mouse display instead as a game might be difficult, but the idea could use some exploration.

 

978_big01
Untangling the webs

This visual is Untangling the Webs of Immigration Lobbies with an unknown creator. I think that this type of grouping and relating might be a good approach to redesign the game. I like how there are distinct differences and a strong set of rules governing the relationship of the particles. I want to keep this kind of idea in mind when I create my particle game/interaction. While I design my game, I want to keep in mind what the particles represent. As in the case with this project, there is a meaning behind every particle. Perhaps I can do something similar in my project.

Isabella Hong – Final Project Proposal

For my final project, I want to create an audiovisual mixer like Daito Manabe’s “Arigato Skating.” In his production, Manabe used cameras to capture the movement of the junior skaters on the ice and used projectors to project visuals on to the ice in line with the movements. In the end, it looked like twinkling lights and lines were emerging from the skaters’ blades as they performed on the ice.

My idea is to have shapes and patterns emerge from the user’s mouse. The different objects that will be drawn as the mouse moves will depend on the song’s (which I have yet to choose) current rhythm. This way, the visual is in accordance to the audio, hence an audiovisual mixer.

These are some preliminary sketches and ideas that I have for the audio and visuals. They will become solidified once I choose the exact portion of one of the songs I have in mind.

img_0618

 

Project 10

jmmedenb-10c

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Tuesdays at 1:30PM
//Assignment-10c

var balloons = [];
var tSpeed = 0.0001;
var tDetail = 0.003;


function setup() {
    createCanvas(600, 400); 
    
    // create an initial collection of fish
    for (var i = 0; i < 10; i++){
        balloons[i] = makeBalloons(random(width),random(height-100));
    }
    frameRate(12);
}


function draw() {
    var cB = 20;
    x = map(cB,0,height,255,0);
    background(255);
   

    //sea
    beginShape(); 
    fill(100,255,255);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * tDetail) + (millis() * tSpeed);
        var y = map(noise(t), 1,0,100, height);
        vertex(x, y);
    }
    vertex(width,height);
    endShape(CLOSE);
    updateAndDisplayBalloons();
    removeBalloons();
    addNewBalloons();



}

//boats
function updateAndDisplayBalloons(){
    for (var i = 0; i < balloons.length; i++){
        balloons[i].move();
        balloons[i].display();
    }
}


function removeBalloons(){
    var balloonsToKeep = [];
    for (var i = 0; i < balloons.length; i++){
        if (balloons[i].x + balloons[i].bodySize > 0) {
            balloonsToKeep.push(balloons[i]);
        }
    }
    balloons = balloonsToKeep; // only keeps ballons on screen
}


function addNewBalloons() {
    // adds new ballons
    var newBalloonsLikelihood = 0.02; 
    if (random(0,1) < newBalloonsLikelihood) {
        balloons.push(makeBalloons(width,random(2,height-100)));
    }
}


// updates of balloons 
function balloonsFloat() {
    this.x += this.speed;
}
    

// balloons
function balloonsDisplay() {
     
    noStroke(); 
    push();
    fill(255,100,100);
   ellipse(this.x, this.y, this.bodySize, this.bodyWidth);
   rect(this.x, this.y+10, 10, 20);
    pop();
   fill(0);
   rect(this.x+5, this.y+30, 1, 30);

}




function makeBalloons(LocationX,LocationY) {
    var balloons = {x: LocationX+300,
                y: LocationY+275,
                bodyWidth: (50,50),
                bodySize: (50,50),
                speed: random(-3.0,-1.0),
                colorR: random(130,240),
                colorG: random(20,80),
                move: balloonsFloat,
                display: balloonsDisplay}
    return balloons;
}



I started out wanting to make boats for this project but then started thinking about things that get lost at sea, such as bottles or objects. Then I started thinking of when people accidentally let go of balloons, or events for children where everyone is given a balloon and they all inevitably accidentally let go of them and you just see a sea of balloons in the sky. I remember as a kid wondering where they went. I put together these two thoughts and decided to make a sea of balloons in the sea. I then decided to create a moving image of watching the sea of balloons floating together, perhaps people see them, perhaps they don’t, but they’re there. Maybe the sea is where all the lost balloons end up. img_1542

Isabella Hong – Looking Outwards – 12

For my last Looking Outwards post, I will be comparing and discussing the works of interaction designers, Daito Manabe and Caitlin Morris.

Daito Manabe is an artist, programmer, and DJ based in Tokyo, Japan. As a designer, he focuses on the relationship between the body and programming, opting to represent the connections in simple, clean works. He enjoys finding the balance between simple and intricate in his productions and this shows in his work, “Arigato Skating”, a motion graphic made for the opening of the NHK Trophy (a stop on the figure skating grand prix circuit). By using projectors and cameras, Manabe created the illusion that the junior skaters were creating lines of light and flowers with their blades. The full production is beautiful.

http://www.daito.ws/en/work/2012-nhk-trophy-arigato-skating.html

Caitlin Morris is an artist and technologist that explores various representations of physical space often through sound and perception. She is constantly crossing the line between digital and physical space, testing where the limit is on both. In November of 2010, Morris did a sound installation on the Brooklyn Bridge that demonstrated this flirtation with digital and physical interaction. She installed contact microphones across the railings of the Brooklyn Bridge. When pedestrians plugged their headphones into the little boxes, they could hear the vibrations of the bridge, indirectly interacting with the bridge’s interaction with water, wind and travelers. It was very cool.

Contact Microphone
A pedestrian listens to the Brooklyn Bridge

Although both Manabe and Morris are interaction designers, their works delve and trigger reactions from different senses. Manabe focuses on the visual and tactile interaction between his art and his audience. Meanwhile, Morris focuses on how her audience can interact with sound. Overall, both artist provoke reaction through their productions, something that I think is crucial when presenting personal work.

Jessica Medenbach Looking Outwards-10

Eva Shindling’s “Liquid Sound” uses recordings of words that are considered opposites such as body and mind, chaos and order, simplicity and complexity, and uses the sound vibrations from these recordings to manipulate liquid simulation. Eva then takes a freeze image of the effects of the vibrations on the liquid and turns it into a 3d sculpture. I love the train of thought that goes into making a piece of work like this. It quickly points to the fact that opposites can also blend into each other and that there is an asymmetry and deformity to the relationships between these words. The sculptures make me think about how opposites affect each other and that this binary way of thinking isn’t cut and dry. There are nuances to the meanings and associations with these words that I think are really interesting to see visually depicted. I really admire Eva’s workflow and the layers of process that go into making work like this. You can feel the process and loss of a simple definition in the passing of time it takes to make these pieces.  http://www.evsc.net/home/liquid-sound-collision

AndrewWang-LookingOutwards-12

Traces

– 2008

Barrel Distortion – Philip Rideout – 2011

Screenshot

 

Chris O Shea’s work emphasizes visualizing fluid motion. Although in this project he primarily focused on car paths, this technique could be applied to many different patterns as well. I really like time lapse as a form of visualization, and I believe that it can provide key insight and allow patterns to form from data that previously might look disoriented. On the flip side, Philip Rideout’s project focused more on the nature of one object. In this case he distorts barrels using vertex based techniques. By applying these techniques he is able to view the barrels under a comprehensive list of conditions and gain more insight into the object’s structure this way.

Although their work appears different, I believe they are actually quite similar in that they both try to explore and gain insight into objects and scenarios. Philip’s work does this with objects while Chris’ work applies to scenarios and larger scale activities. These two stood out to me as I feel that a missed opportunity could be a combination of both cases. I think it would be very interesting to see a project that combines the two aspects and observes an object in certain scenarios and evaluates its form and condition.

Looking Outwards 09

I looked at Liu Xiangqi’s Looking Outwards post on Aaron Koblin’s “Flight Patterns” work. Flight Patterns visualizes air traffic over North America, creating colorful celestial patterns. I like Liu’s statement “It seems that our planet is wrapped by layers of these nets consisting of paths.” I also had this reaction to the work. I’m always excited by seeing movement visualized. The fact that this work is also man made movement is exciting to me because my first reaction would be to think of it as nature vs. man piece and man mimicking nature. However, when I think about it more in depth, this movement of man is also natural. It is not mimicking, it is a part of the sky, we just don’t think about this movement as being as ethereal as you would the stars. The ability to use the processing program to visualize this helps to close the gap for me in this way of thinking, that I find really interesting and produces some beautiful work. http://www.aaronkoblin.com/project/flight-patterns/

Jessica Medenbach-09 Portrait

screen-shot-2016-11-14-at-10-57-38-pm

For this portrait, I liked the idea of making it out of slashes of ellipses that to me looked like raindrops. The result ends up creating a portrait that feels like looking at someone through a rainy window or in a carwash.

jmmedenb-09b

//Jessica Medenbach
//jmmedenb@andrew.cmu.edu
//Tuesdays at 1:30PM
//Assignment-09B

var img;
var Point;

function preload() {
  img = loadImage("http://i.imgur.com/lYuqE9A.jpg");
}

function setup() {
  createCanvas(800, 800);
  Point = 5;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  
}

function draw() {
  var pointillize = map(mouseX, 0, width, Point, Point);
  var x = floor(random(img.width));
  var y = floor(random(img.height));
  var pix = img.get(x, y);
  fill(pix, 128);
  ellipse(x+5, y+5, pointillize, pointillize);
  ellipse(x,y,pointillize,pointillize);
  ellipse(x-5,y-5,pointillize,pointillize);
  ellipse(x-10,y-10,pointillize,pointillize);
  ellipse(x+10,y+10,pointillize,pointillize);

  
}