For my final project, I create a particle game in which the player attempts to avoid an increasing amount of particles which follow the cursor. The circular cursor is controlled by the mouse and is the direction in which all the particles move individually towards. A timer tracks the number of red particles on the screen and acts as a scoreboard which halts when the cursor makes contact with a particle. This game is based off one of my favorite iPhone apps which I discuss in my project priors and precursors.

The main source code comes from the Flock Particle Mutual Interactions example from our class notes. Overall, I was able to execute my original proposal. There were some features that I found worked better than others which was the main difference between my proposal and my final project.

sketch

//Kyle Lee
//Section C
//kdlee@andrew.cmu.edu
//Final Project

function particleUpdate() {
    if (this.bFixed == false) {
        this.vx *= this.damping;
        this.vy *= this.damping;

        this.px += this.vx;
        this.py += this.vy;
    }
    if (this.px + particleDiameter/2 > width ||
        this.px - particleDiameter/2 < 0){
        this.vx = -this.vx;
    }
    if (this.py + particleDiameter/2 > height ||
        this.py - particleDiameter/2 < 0){
        this.vy = -this.vy;
    }
}

var particleDiameter = 8;
function particleDraw() {
    fill("#FA4E44");//red
    ellipse(this.px, this.py, particleDiameter, particleDiameter);
}

// add a force to the particle using F = mA
function particleAddForce(fx, fy) {
    var ax = fx / this.mass;
    var ay = fy / this.mass;
    this.vx += ax;
    this.vy += ay;
}


// make a new particle
function makeParticle(x, y, dx, dy) {
    var p = {px: x, py: y, vx: dx, vy: dy,
             mass: 1.0, damping: 0.9,
             bFixed: false,
             addForce: particleAddForce,
             update: particleUpdate,
             draw: particleDraw
            }
    return p;
}

var seekFactor = 0.0010;
function seek(p) {
    var desiredX = mouseX - p.px;
    var desiredY = mouseY - p.py;
    p.addForce(desiredX * seekFactor, desiredY * seekFactor);
}

//attempt to implement a restart without reloading page.
//Unable to empty array and restart time
// function keyPressed() {
//     loop();
//     background();
//     time = 0;
//     myParticles.push(time);
// }

var myParticles = [];
var nParticles = 1000;
var follow = true;
var cursorD = 30;
var x = 200;
var y = 200;
var diffx = 0;
var diffy = 0;

function setup() {
    createCanvas(400, 400);
    for (var i = 0; i < nParticles; i++) {
        var rx = random(width);
        var ry = random(height);
        var p = makeParticle(rx, ry, 0, 0);
        p.bElasticBoundaries = false;
        p.damping = 0.99;
        myParticles[i] = p;
    }
    frameRate(25);
    noStroke();
}

function draw() {
    background(250);
    var time = ceil(frameCount/10);
    var xConstrain = constrain(x, cursorD/2, width - cursorD/2);//mouse boundary
    var yConstrain = constrain(y, cursorD/2, height - cursorD/2);//mouse boundary
    for (var i = 0; i < time; i++) {
        var ithParticle = myParticles[i];
        ithParticle.fx = 0;
        ithParticle.fy = 0;
        if (follow) seek(ithParticle);
    }

    fill("#FA9998");
    textAlign(CENTER);
    textStyle(BOLD);
    textSize(36);
    text(time, width/2, 100);//displays time/score

    fill("#2A3447");
    ellipseMode(CENTER);
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.2*diffx;
    y = y + 0.2*diffy;
    ellipse(xConstrain, yConstrain, cursorD, cursorD);//draws cursor/player

    for (var i = 0; i < time; i++) {
        var p = myParticles[i]
        var length = dist(xConstrain, yConstrain, p.px, p.py);
        p.update(); // update all locations
        p.draw(); // draw all particles

        if (length < cursorD/2){//stops game
            textStyle(BOLD);
            textSize(48);
            fill("#FA4E44");
            text("Game Over", width/2, height/2);

            textStyle(NORMAL);
            textSize(14);
            fill(0);
            text("reload to restart", width/2, height/2 + 20);
            noLoop();
        }
    }
}

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.)

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.

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.

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.

For my project, I used turtle graphics to create a spiral. With each iteration, I modified each length and starting rotation to create a smooth spiral. Furthermore, I modified to color to change as the turtle graphics changes. It further emphasizes the spiral with the energetic red at the points with the subdued blue in the back.

kdlee-project-11

var iterations = 100;//number of forloop iterations
var rAngle = 90;//turn angle

function setup() {
    createCanvas(600, 600);
    background(0);
    var kyle = makeTurtle(300, 200);
    for(var i = 0; i < iterations; i++){
        var len = 100 - i;
        var r = map(i, 0, iterations, 0, 255);
        var g = 50;
        var b = map(i, 0, iterations, 150, 0);
        kyle.setColor(color(r, g, b));

        kyle.penDown();//drawing
        kyle.forward(len);
        kyle.right(rAngle);
        kyle.forward(len);
        kyle.right(rAngle);
        kyle.forward(len);
        kyle.right(rAngle);
        kyle.forward(len);
        kyle.right(rAngle);

        kyle.penUp();//adjusting for next draw
        kyle.forward(100);
        kyle.right(rAngle);
        kyle.forward(100);
        kyle.right(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;}

For my Looking Outwards Post on computational music, I looked at an article discussing the Components To the Creative Process. Music needs creativity like many other forms of art. I’ve always seen creativity as a subjective force. Thus, I was surprised and admittedly skeptical when I saw this article claim there were 14 necessary components to creativity.

In a study by computational scientists and linguists, researchers poured over material from various fields from over 6 decades to land 14. Again, I was very skeptical that there was a single path of creativity. Upon reading the list, I found that it wasn’t a hard set pathway, but a series of more subjective terms.

These combined components don’t equal a definition of creativity, so much as elements of the process.

 Bill Keller, Sussex University

Hearing that flexibility and subjectiveness were built into this list, I was actually put at ease reading it:

1. Active involvement and persistence
2. Dealing with uncertainty
3. Domain competence
4. General intellect
5. Generating results
6. Independence and freedom
7. Innovation and emotional involvement
8. Originality
9. Progression and development
10. Social interaction and communication
11. Spontaneity and subconscious process
12. Thinking and evaluation
13. Value
14. Variety, divergence, and experimentation

The researchers then claim that the importance of each of these all change with the type of work, field, and intention. But I was curious how exactly they were able to synthesize these 14 components from all the work they looked at.

Next, looking at this list, I began speculating which creative component would be easiest or hardest to put into a computer. A few seemed obvious such as dealing with uncertainty, progression and development, thinking, and evaluation. But things like emotional involvement, originality, social interaction and communication, and spontaneity and subconscious process frankly all seem against a computer’s nature. It makes me think that computation can be hugely beneficial, but not comprehensive to the creative process of computational music; there still needs to be a human element to contribute emotion.

For my project, I decided to make my landscape out of numerical elements. As the landscape changes, so do the numbers. I used noise functions to build the terrain and random floor numbers to create the numbers. To keep the numbers from drawing on every X value, I used an if statement and a % to spread the numbers out across the canvas width.

kdlee-project-10

//Kyle Lee
//Section C
//kdlee@andrew.cmu.edu
//Project-10

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup() {
    createCanvas(640, 240);
    frameRate(25);
}

function draw() {
    background(255);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        var integer = floor(random(0, 9));
        stroke(0);
        if(x%8 == 0){
            text(integer, x, y)
        }
    }
    noFill();
    rect(0, 0, width - 1, height - 1);
}

P9 Artist Profile: Adrien Segal

I chose Adrien Segan, a data sculptor and product design visualizer. As a product design major, I initially was drawn to her pieces, all of which showcase some tremendous craft and form. After reading more material on her vision, it became clear that her projects identity’s were about the embodiment of data regarding the natural world. She takes a tangible emotional approach to visualizing statistical information while:

“Scientific conventions are founded on the belief that we must systematically eliminate emotional involvement in order to uncover truths about the natural world. As a result, I feel a deep disconnect from nature and a great loss of intuitive knowledge.”

Her work is the bridge between compelling data, and powerful emotion that together inspire great vision. Her Trends in Water Use project is one example in which she uses USGS data as dimensions of a cavernous canyon, creating a representation of the absence of water, the gravity of the situation, and the passing of time.

One critique I did have, particularly with this project, was the fact that at first glance, it looks like a piece of decorative furniture. I didn’t understand the piece until I read the description on the website and watched an accompanying video. Although I am now intrigued with the project’s meaning, I am unsure how it will be interpreted by people viewing it for the first time without context.

For my self portrait, I randomly spread particles across the canvas, and set each fill color to its corresponding location and color on the original image. I then cascaded each to move in random directions, creating streaks of color that distort the image the longer the code runs.

kdlee-09

var underImage;
var x = [];
var y = [];
var dx = [];//movement
var dy = [];//movement
var col = [];//color
var d = [];//diameter
var movement = .5;//speed of particles
var particles = 3000;//number of particles
var diameterS = 1;
var diameterL = 10;

function preload() {
    var url = "http://i.imgur.com/S9K9aFe.jpg";
    underImage = loadImage(url);
}

function setup() {
    createCanvas(400, 600);
    background(250);
    underImage.loadPixels();
    frameRate(30);
    noStroke();

    for (i = 0; i < particles; i++) { // for creating 2000 elements
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-movement, movement);
        dy[i] = random(-movement, movement);
        d[i] = random(diameterS, diameterL);
        col[i] = underImage.get(x[i], y[i]);//pulls color from coordinate
    }
}

function draw() {
    for (i = 0; i < particles; i++) {  // for drawing 2000 elements
        fill(col[i]);
        ellipse(x[i], y[i], d[i], d[i]);
        x[i] += dx[i]//builds movement
        y[i] += dy[i]//builds movement
        if (x[i] > width) x[i] = 0;        // wrap horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       // wrap vertically
        else if (y[i] < 0) y[i] = height;
    }
}

For this week, I looked at Yugyeoung Lee’s post from week 2. The project that Lee discussed is an experimental architectural prototype from the designer firm Softkill. Using bone structures as a basis for infrastructure, computer algorithms build a sound structure, that is then printed in material and cost effective plastics. A advanced algorithm coupled with a sophisticated laser technology makes this project possible.

I agree with Lee in saying that this kind of conceptual experimentation reveals much about how architecture can move towards a more cost and material efficient future. The additional features of no adhesives and lightweight fibers further shows promising signs for this technique and technology. I think this project certainly serves itself well as a concept project, but I do think there are several considerations that were not addressed in the article. While it was uplifting to see that these fibers were bioplastics, it certainly does not mean this architecture is completely sustainable. Although some of the bases for the fibers would be from renewable materials, the amount of energy needed to transform that material into structurally sound plastic might outweigh its own benefit. This is my guess as to why more projects using this bioplastic material technology have not come about in the three years since Softkill’s project; the process to use this seemingly green material consumes too much money and energy to be sustainable.

I watch the Dear Data lecture from Giorgia Lupi & Stefanie Posavec. Both Giorgia and Stefanie are information designers but work and live on either side of the Atlantic. After meeting at EYEO, they decided to collaborate on a personalized data visualization project. They decided to take advantage of the distance and every week they chose a data point to track. They would independently choose a way to track that point and how to represent that point, leading in drastically different but sometimes surprisingly similar. All the letters were hand crafted and drawn, consuming much more time, but resulting in a much more personalized data visualization that ultimately lead to the two getting to know each other quite intimately despite only meeting in person on four occasions.

This project is absolutely fantastic. Data visualization is so strong on its own and I wouldn’t expect an analog approach to be beneficial. However, the exchange they had was surprisingly compelling. I admire the amount of effort to track data, compile it, and keep up for a year. The parallel methods they used were fairly interesting, especially when they diverged drastically.

One thing that I am curious about is how they were able to generate data points accurately and how to come up with topics each week. This is mainly because I am just surprised by how they were able to pull off such an impressive project. And the imperfection of this data visualization exchange is really what makes this such a compelling project.