sketch

//monica huang
//monicah1
//final project

var drops = [];
var terrain = [];
var stars = [];
var fireworks = [];
var cols, rows;
var scl = 90;
var w = 500;
var h = 500;
var flying = 0;
var gravity;
var speed;
var particles = [];
var flowfield;
var fr;
var inc = 0.1;
var zoff = 0;
var sound; 



function setup() {
  createCanvas(1100, 500, WEBGL);
  speed = map(mouseX, 2, width, 5, 2);

//throw off lines

for (var i = 0; i < 10; i++) {
    drops[i] = new Drop();
}


//colors
colorMode(HSB, 255);
  cols = floor(width / scl);
  rows = floor(height / scl);
  fr = createP('');

  flowfield = new Array(cols * rows);

  for (var i = 0; i < 10; i++) {
    particles[i] = new Particle();
  }

  
//flowing plain
  cols = w / scl;
  rows = h/ scl;

  for (var x = 0; x < cols; x++) {
    terrain[x] = [];
    for (var y = 0; y < rows; y++) {
      terrain[x][y] = 0; 
    }
  }

}



function draw() {
  background(125,255,0);
  speed = map(mouseX, 0, width, 0, 5);

//throw off lines
  for (var i = 0; i < drops.length; i++) {
    drops[i].fall();
    drops[i].show();
  }

//colors
  var yoff = 0;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;
      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(1);
      flowfield[index] = v;
      xoff += inc;
      stroke(0, 50,170);
    }
    yoff += inc;

    zoff += 0.0003;
  }

  for (var i = 0; i < particles.length; i++) {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].edges();
    particles[i].show();
  }

  fr.html(floor(frameRate()));

//flowing plain
  flying -= 0.1;
  var yoff = flying;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }
  translate(0, 50);
  rotateX(-PI/3);
  fill(0,0,0);
  translate(-w/2, -h/2);
  for (var y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (var x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, terrain[x][y]);
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
    }
    endShape();
  }

}

//---------------------------------------------------------------------------

// lines
function Drop() {
  this.x = random(width*2);
  this.y = random(-500, -500);
  this.z = random(0, 10);
  this.len = map(this.z, 0, 10, 0, 30);
  this.yspeed = map(this.z, 0, 10, 1, 20);

  this.fall = function() {
    this.y = this.y + this.yspeed;
    var grav = map(this.z, 0, 60, 0, 0.6);
    this.yspeed = this.yspeed + grav;

    if (this.y > height) {
      this.y = random(-200, -200);
      this.yspeed = map(this.z, 0, 20, 4, 10);
    }
  }

  this.show = function() {
    var thick = map(this.z, 0, 20, 1, 3);
    strokeWeight(thick);
    stroke(random(0,255), random(0,255), random(0,255));
    line(this.x, this.y, this.x, this.y+this.len);
  }
}

//colors
function Particle() {
  this.pos = createVector(random(width), random(height));
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.maxspeed = 2;
  this.h = 0;

  this.prevPos = this.pos.copy();

  this.update = function() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  this.follow = function(vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];
    this.applyForce(force);
  }

  this.applyForce = function(force) {
    this.acc.add(force);
  }

  this.show = function() {
    stroke(random(0,255), random(0,255), random(0,255));
    this.h = this.h + 1;
    if (this.h > 255) {
      this.h = 0;
    }
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  }

  this.updatePrev = function() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }

  this.edges = function() {
    if (this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if (this.pos.x < 0) {
      this.pos.x = width;
      this.updatePrev();
    }
    if (this.pos.y > height) {
      this.pos.y = 0;
      this.updatePrev();
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }

  }

}

I am inspired by space, speed, and motion in galaxy. I am interested in creating 3d dimensional space and motion with 2 dimensional lines and colors.

I am interested in allowing people to question the reality.  What make one thinks the object is real or not. There are many existing things in our daily spaces that are invisible to our five senses: sight, hearing, touch, smell, taste. Sometimes one can so blinded by one’s thoughts and the reality that the society create. How can one be encouraged to see beyond the curated reality, focusing on seeing and feeling the true forms.

I am interested in creating a mix of 2D and 3D animation with particles and elements in space. Elements may be: strings, lines, dots, cubes, cylinders and such. Then, using these elements to create motions like: distortion, explosion, tension, and more. I want to connects the motions and flow of each scenes. Considering the sense of visual complexity can be delicate and intricate, how do I make complex elements in motion visually pleasing and soothing. Adding on the visual animation, I would want to add on sound affects.

o.T., Astana Contemporary Art Center, Artists & Robots, 2017

Galerie Mitterrand, Paris, 2017

http://www.kogler.net/kunsthaus-bregenz-2000-projektion#

Peter Kogler, an Austrian artist, works on floors walls and ceilings with ling designs illusion for 30 years, bending spaces in unnatural ways. He manipulated box-shaped space to virtual maze of time and space. He creates undefined movement and sense of insecurity in spaces for people to experience in. He sees computer for artists as “liberated from many physical limitations of all former media”. He explores the new dimension in architecture.

I am interested in the idea of allowing people to question what is real and what is not. what is important and what is not. What values do we hold on. Human can be manipulated with visual easily, we only think what the normal spaces are like based on what we are used to. If we exposed to more of what diverse perspective spaces, will we be comfortable in those spaces one day?

‘Oscillate’ – Thesis Animation of Sine Waves by Daniel Sierra 2015

Sierra is a digital artists, designer, and creative coder who specializes in audio visualization, animation, and mixed reality experiences. In Oscillate, he was interested in the emergence of complexity in sound from fundamental sine and cosine waves, using tools like Houdini, Reason, Nuke, After Effects, and Processing.

In Oscillate, I am intrigued by how he presented the elements in we encounter daily to this delicate form. Moreover, he added on his own audio sound design to the original visualized sound elements. The splashes, strings, and lines create a great tension in between.

I liked how Peter Kogler and Daniel Sierra play with 2D and 3D with natural elements in space, giving the sense of mysteriousness and delicacy.

While Sleeping by Ikue Mori 2013

Ikue Morie is a japanese artiest who moved from Tokyo to New York in 1977.  She started playing with drum, then formed a band creating radical rhythms and dissonant sounds. Then she started to used drum machine to improvise music.

I was intrigued by her perceive in music. This piece, While Sleeping, made me thought about what do I hear when I’m asleep or when I’m peace and calm states. How does she relate sounds while sleeping to the sounds she created. It is interesting that she used many mediums, some natural and some made up to create the subtle  music in While Sleeping .

sketch

//Monica Huang
//Section E
//monicah1@andrew.cmu.edu
//Project-11
var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(100);
    myTurtle = makeTurtle(width, height);
    myTurtle.setColor(color(255, 100, 200));
    myTurtle.setWeight(2); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(50);
}

function draw() {
    var step = (frameCount - startFrame)/20.0;
    myTurtle.forward(step);
    myTurtle.left(10.0);
    if (myTurtle.y > height) resetCanvas();

}

function resetCanvas() {
    background(100,0,10);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/6, height/2);
    myTurtle.penDown();
}

function mousePressed(){
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}

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

This piece I was playing with the tension of pattern and the randomness when interfere with the continuous flow of pattern.

//Monica Huang
//Section E
//monicah1@andrew.cmu.edu
//Project-11
var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(100);
    myTurtle = makeTurtle(width, height);
    myTurtle.setColor(color(255, 100, 200));
    myTurtle.setWeight(2); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(50);
}

function draw() {
    var step = (frameCount - startFrame)/20.0;
    myTurtle.forward(step);
    myTurtle.left(10.0);
    if (myTurtle.y > height) resetCanvas();

}

function resetCanvas() {
    background(100,0,10);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/6, height/2);
    myTurtle.penDown();
}

function mousePressed(){
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}

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

SaveSave

sketch

// noise() function. 

var angleSpeed = 0.0005;
var angle = 0.005;

function setup() {
    createCanvas(480, 150);
    frameRate(20);
    background(0);
}
 
function draw() {
    
    // light sources shining on the living things
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * angle) + (millis() * angleSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    for (var x = 0; x < width; x++) {
    	fill(255,240,0);
        var t = (x * angle) + (millis() * angleSpeed);
        var y = map(noise(t), 1,4, 1, height);
        vertex(x, y); 
    }
    for (var x = 0; x < width; x++) {
        var t = (x * angle) + (millis() * angleSpeed);
        var y = map(noise(t), -3,10, -3, height);
        vertex(x, y); 
    }
    endShape();

    //living things
    for (var i = 0; i < 100; i++) {
        ellipse(random(width), random(height), 0.5);
    }
    
    
}

Here, the scenario is to have light sources projected on flock of living creature in a dark night. The light source moves randomly spotting the flock. I was interested in playing with the combination of movements and randomness of small scale objects and pieces of geometric shapes. The final sketch seems fairly success from what I imagined it to be.

Social Soul by Lauren McCarthy , Kyle McDonald and MKG 2014

Lauren McCarthy is an artist focus on social and techonolgy. Kyle McDonald is an artist focus on code. MKG is a creative agency specialize in branding.

Social Soul was an immersive digital experience created for Delta Airlines at TED 2014 and was inspired by the question “how does it feel to be inside someone else’s social media stream?”. It’s an space and media projection experience of one’s twitter streams in 360 degree surrounding mirror, monitor, and sound space.

I am intrigued by the unexpected approach on presenting social media physically larger than human scale. People use social media so often daily on their phones and computers, which are always on screens that are smaller than human scale. The scale difference makes people feel the autonomy over social media. Standing in the Social Soul space, I imagining myself feeling overwhelmed. It gives people the sense of they have no control of the endlessly replicants of informations and time. The experience is a metaphor of how powerful social media can be. The mirror is the physical metaphor of replicating information infinitely.

http://lauren-mccarthy.com/Social-Soul

sketch

var frames = []; // An array to store the images
var characterX;  // The X location of the character
var characterY;  // The Y location of the character
var targetX;     // The X goal, from the user's click
var targetY;     // The Y goal, from the user's click
var exampleImgOnly; 

 
//---------------------------------------
function preload(){
  
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "http://i.imgur.com/svA3cqA.png";
    filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
    filenames[2] = "http://i.imgur.com/IgQDmRK.png";
    filenames[3] = "http://i.imgur.com/kmVGuo9.png";
    filenames[4] = "http://i.imgur.com/jcMNeGq.png";
    filenames[5] = "http://i.imgur.com/ttJGwkt.png";
    filenames[6] = "http://i.imgur.com/9tL5TRr.png";
    filenames[7] = "http://i.imgur.com/IYn7mIB.png";
  
  
    // LOAD THE IMAGES INTO THE frames ARRAY,
    // USING THE FILENAMES STORED IN THE filenames ARRAY.
    for (var i = 0; i < filenames.length; i++){
    	frames.push(loadImage(filenames[i]));
    } 
}
 
//---------------------------------------
function draw() {
    background(222);
  
    // MOVE THE CHARACTER TOWARDS THE TARGET.
    var dx = targetX - characterX;
    var dy = targetY - characterY;
    var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
  
  
    // DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
    image(frames[frameCount%8], characterX, characterY);
    
    // FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT. 
    /*if(mouseX < targetX){
        image= scale(filesnames, -1,1);
    }
    image*/
    // Don't touch this:
    // Draw a spot at the target, colored based on the character's proximity. 
    drawTargetEllipse (distanceFromCharacterToTarget);
    characterX = lerp(characterX,targetX,0.1);
    characterY = lerp(characterY,targetY,0.1);
}
 
 
//=======================================================
// PROBABLY NO REASON TO CHANGE ANYTHING BELOW THIS LINE. 
function setup() {
    createCanvas(800, 480);
    imageMode(CENTER);
    frameRate(12);
  
    // Initialize the character and target positions. 
    characterX = width / 2; 
    characterY = height / 2; 
    targetX = characterX;
    targetY = characterY;
}
 
//---------------------------------------
function drawTargetEllipse(distanceFromCharacterToTarget){
    if (distanceFromCharacterToTarget < 80){
        fill(0,200,0, 40); // Green if we're nearby
    } else {
        fill(255,0,0, 40); // Red if we're far away
    }
    noStroke();
    ellipse(targetX, targetY, 160,160); 
}
 
//---------------------------------------
function mousePressed() {
    targetX = mouseX;
    targetY = mouseY;
}

This is a portrait of my grand-grand-father. The effect of slowly revealing  pixels of the portrait brings in the sense of history and senses. I almost want the picture to become three dimensional and see my grand-grand-father in reality.

Drift 2017 by Nicholas Sassoon caught my attention.

(gyueunp – Looking Outwards 06)

I agree with the peer that the constant alteration of visual create an narrative. The alterations seems like its intentionally telling a story, but I could not get it entirely because there was so much going on when looking at the piece. There are varieties of ways looking at the piece, like looking closely and far away, guessing the narrative, combining the experience of audio and visual senses.

It is interesting how the Sassoon creates 2D and 3D images with repetition elements, playing with alterations. To me, the pieces seems almost like a short film. I love the combination of elements and narrative. This way of presenting allow me to interpret the experience in variety of ways.

Eyeo 2017 – Joanie Lemercier

Website

Joanie Lemercier is a French artist who works on projections of lights in space, exploring with how light and projections manipulated perceived reality. He sees light as medium and space as depth. He works on music festivals, installation, stage design, architecture, and, most recently, nature and landscape.

I am interested in exploring how he creates surreal 2D to 3D experiences using just lights and projections. He create these experiences by imitating the nature, translating instinct feelings, and creating visual manipulation. I am aspire how he goes with his concept to the last, using different mediums to complete high fidelity work. The created experiences are so immersive and powerful. In the Eyeo 2017 talk, it is interesting that he talks about that how human senses can be so easily deceived, that human need to be aware and critical about how they perceive reality.

Eyjafjallajökull, new york 2015

Château des Ducs de Bretagne, Nantes, 2010