Category: Uncategorized

anson-FaceOSC

screen-shot-2016-10-13-at-9-40-06-pm

screen-shot-2016-10-13-at-9-40-39-pm

screen-shot-2016-10-13-at-9-40-57-pm

I used Rebecca Fiebrink’s Machine Learning tool, the Wekinator, to connect FaceOSC to Isadora (software used most often in live performance for video cueing / playback and some interactivity). My face is controlling the speed of the video playback, and in a sense becomes a remote control. This project for me was about plumbing – aka connecting different pieces of software to each other, enabling communication. It was also a chance for me to work with Dr. Fiebrink’s Wekinator again – a tool I am very interested in exploring further. I enjoyed this process.

Guodu-FaceOSC

fsdf

Inspired by Text Rain and Typeface2 by Mary Huang. In the process, I became intrigued by painting with type, with one’s face movements.

gif1 Type as a path gif2 Got into rotating type

gif4

gif5

// a template for receiving face tracking osc messages from
// Kyle McDonald's FaceOSC https://github.com/kylemcdonald/ofxFaceTracker
//
// 2012 Dan Wilcox danomatika.com
// for the IACD Spring 2012 class at the CMU School of Art
//
// adapted from from Greg Borenstein's 2011 example
// http://www.gregborenstein.com/
// https://gist.github.com/1603230
//

import oscP5.*;
OscP5 oscP5;
// num faces found
int found;
float[] rawArray;
//which point is selected
int highlighted;
String word = "HelloWorld";
//int wordIndex = int(random(wordBank.length));
float textX;
float textY;
//float speed = 1;
float speed = .01;
//float posX = rawArray[0];

//float textSize = random(0 30);
float textSize = 30;
float rgbColor = random(255);

void setup() {
size(640, 480);
frameRate(30);
oscP5 = new OscP5(this, 8338);
oscP5.plug(this, "found", "/found");
oscP5.plug(this, "rawData", "/raw");

textAlign(CENTER);
textX = random(width);
}
void draw() {
//background(255);
//stroke(0);
//noStroke();
//background(255, 0, 0, 10);
textSize(textSize);

if(found > 0) {
for (int val = 0; val < rawArray.length -1; val+=2){
if (val == highlighted){ fill(255,0,0);}
else{fill(100);}

//ellipse(rawArray[val], rawArray[val+1],8,8);
//text("Use Left and Right arrow keys to cycle through points",20,20);
//text( "current index = [" + highlighted + "," + int(highlighted + 1) + "]", 20, 40);
//println(rawArray[val]);
fallingWords();
}
}
}
void fallingWords(){

float rgbColor = random(255);
textY = textY+speed;
float x1=map(textY, 0, height, 0, 255);
fill(rgbColor+x1, 102, 153, 80);
textSize = rawArray[128]/5;
rotate(rawArray[100]);
text(word, rawArray[100], textY);
if (textY > height){
//reset text's falling placement (textX, textY) and speed
textX = random(width);
textY = 0;
//speed = 1;
speed = random(.01,.1);
background(204,204,204);

}
}
void keyPressed(){
if (keyCode == RIGHT){
highlighted = (highlighted + 2) % rawArray.length;
}
if (keyCode == LEFT){
highlighted = (highlighted - 2) % rawArray.length;
if (highlighted < 0){highlighted = rawArray.length-1;
}
}
}
/////////////////////////////////// OSC CALLBACK FUNCTIONS//////////////////////////////////
public void found(int i) {
println("found: " + i);
found = i;
}
public void rawData(float[] raw) {
println("raw data saved to rawArray");
rawArray = raw;

}

 

anson-Plotter

This is my plotter drawing, “Cocktail Olive Generator.”

olives_small1

I’m pleased with this drawing, though it is by no means complex. This is very simple code created with a double for loop and some random parameters to generate a little variety. Honestly, the reason for the simplicity is two fold – one, this week my time was extremely short due schedule, so I created something simple that I knew I could execute in a reasonable amount of time (both to write the code and draw with the plotter). And two, I’m still at the early stages of creating generative drawings, so I’m sticking within my knowledge base on this particular assignment. When I wrote the code, I originally intended to create something that looked like bubbles. However, what appeared had the immediate and distinct appearance of cocktail olives. Such simple shapes took on a little bit of humor and playfulness, which was pleasantly surprising. It was a lot of fun to draw these with the plotter, and I would like to try to create a more complex drawing with this machine again. In addition to being fun to watch, it was very satisfying to have something that had been entirely digital, take on physical form, using nice paper, a good pen, and a tangible output. I think the pedagogic value of this assignment is multi-layered, but this connection between the digital and physical is paramount. Witnessing a machine make marks with a pen has an uncanny effect of seeming both animate and mechanistic at the same time. This also displayed for us the actual process that the computer uses to draw the lines we generate in Processing – breaking them down into separate actions instead of immediately appearing on screen as it does in the browser (play window). This helped us to dissect our code, seeing how we might logically change it to make the plotter process faster or more streamlined. One odd thing was that the plotter actually drew each circle twice before lifting up and drawing the next circle. There must be a reason in my code, but I wasn’t able to determine this.

I think it would be fun to create a drawing that utilize the plotter and hand drawing, using the machine as a collaborator to create an artwork.

Below is the code:

screen-shot-2016-10-01-at-5-55-45-pm

takos-plot

g3020

t12

Final:

p_20160930_0416481p_20160930_0421521

Sketch:

p_20160930_0921041

Process:

My original idea was to make a human face generator (a la my sketch) with randomized face shapes, eyes, nose, mouth , and eyebrows. I started off by making the face shape, which worked in theory but I had a lot of trouble with my bezier curves and ended up switching to curveVertex(), which I thought looked too symmetrical and inorganic, and also didn’t work all the time. From there i decided to exaggerate the glitches and increase the randomnesses of the vertices. Then I added the facial features based somewhat on my drawing style. I usually draw y eyes far apart, so i added that into the code by making the variable averageEyeDist to a high number, and made it so not all of the faces will have pupils. I also coded the noses to have two different nose types = just the nostrils, or an upside down triangle. The mouse is generally a diagonal line, which is one of the way I draw mouths when I’m drawing non-realistic things. Even though it didn’t end up the way I had originally planned, I thought the result was entertaining. Id was also interesting to watch the plotter draw the faces because it drew in the order I usually draw, which was subconsciously the way that I coded it (or almost close – i draw the mouth before the nose not the other way around).

Code:

https://github.com/tatyanade/PLOT/blob/master/sads.pde

anson-LookingOutwards04

Interactive installations. There are too many. It’s hard to choose one to focus on. Do you go with the commercial / advertising projects? Artwork in galleries? Performance? I could pick Hakanai by the French artists Adrien M and Claire B… or the complete advertising coup of the decade, the Museum of Feelings in New York City (created by Ogilvy / Radical Media), or Kyle McDonald’s Sharing Faces… or Social Galaxy by Black Egg (and Kyle McDonald and Lauren McCarthy, with some code by our own Dan Moore), which utilized the user’s Instagram feed and takes you inside your own images and hashtags, floating around with the feeds of other participants, inside an infinite mirror tunnel. This is inside the Samsung store in Chelsea in NYC. Having participated in this, I can say it is moderately uncomfortable, a little embarrassing, a little thrilling, a little ego-trip, and a little 2001 Space Oddesy.

One of the most well known interactive installation is Chris Milk’s Treachery of Sanctuary which I have seen many people lay claim to, and spread around the internet with abandon.

I like all these installations. I wonder how to grow from the “interactive installation pose” – aka the spread arms and waving them around in front of a projection that responds to your (graceful movement) (flailing). Gesture-based interaction is very compelling to me, but it is also a little repetitive. How can we push this method further? What new technology can we use to allow our natural body language to come through?

I have to also shout out Golan’s list of installations that include a large majority of work done by women. I clearly have more research to do.

screen-shot-2016-09-30-at-9-12-48-am
Image above: Museum of Feelings

Guodu-Plot

My interpretation of a gradient/transition from order to disorder was inspired by design drawing warmups that I do everyday. It mostly begins with drawing straight lines, then drawing a few 2D shapes (squares and circles) then moving to 3D forms, the most important being the cube.

20160930_061611-copy

Here are some warmup pages from my sketchbook:

20160930_063520-copy

20160930_061354-copy

Deconstructing the cube, and ultimately drawing, it is all about connecting points and drawing lines. I wanted a gradient that gave the sense of building upon each other, from dots, to lines, to squares, to cubes. I also started to think about machines or robots “warming up in drawing” because by design, they are really meant to draw complicated, generative, and parametric designs that humans typically can’t, or at least not in an efficient, and perfectly precise manner. How do other people perceive machines drawing imperfectly? I’m intrigued by the idea to have a machine mimic my drawing style.

In the end, the concept that I had didn’t translate too well into code. I was too focused on the idea of a machine mimicking my drawing style and I realized too late that it’s extremely easy for a machine to draw built in drawing functions, which have taken me months to master. Secondly the drawings and code are in sections, they aren’t really related or parametric. For next time, I’ll focus more on parametric design and compositions that challenge the plotter more, or are appropriate for laser cutting.

While I was really excited to compare my hand drawings to the plotter drawings, the plotter had some technical difficulties. I apologize for not having the intended deliverable, but here it is in on laser cut 1/8″ plywood:

20161003_002940 Power was a little too high for my first laser cut, but it was interesting to see certain parts poking through.

20161003_003019 20161003_002952 20161003_002904 20161003_003007

Processing Screenshot:

screen-shot-2016-10-03-at-4-41-01-pm

 

 

aliot-ClockFeedback

A lot of people like the general design. Admittedly, I did too. I think my success came from keeping it simple and smooth– the motion was coherent and corresponded to every other element. The elements that people didn’t like were the motion of the smallest circle– they wanted it to be on the outside of it’s path-circle and the colors. I definitely understand the color criticism especially given that I had not put much consideration into that part of my project. I was more focused on the movement of the circles at the expense of the color consideration. As for the criticism about the placement of the circles: I tried many different combinations of which circles go inside which and had carefully considered this component. Perhaps this is just a difference of opinion.

Moving forward I will consider color more and I especially liked the suggestion to xor the colors.

tigop-LookingOutwards03

image image image image image image

R&Sie(n)

R&Sie(n)’s work is very interesting in that it seems to generate landscapes or extensions of landscapes. These landscapes and extensions seem rather extraterrestrial, and I enjoy how the artists merge the extraterrestrial with the mundane by allowing people or animals(or animal figures?) to interact with the space created within the sculptural versions of the generative works. I like the use of code to manipulate an environment.

Lumar-Interruptions

PLEASE HAVE FUN CLICKING:

sketch

You’ll have to refresh to a new ‘movie’ to get new and different interruptions from the audience.

I had a lot of fun with this assignment! And…yes, it’s not exactly a recreation, but the code make the recreation would just be taking out the frameCount element in the perlin noise part of the draw function/just take a screen shot of the program when it first starts.

screen-shot-2016-09-22-at-8-31-50-pm screen-shot-2016-09-22-at-8-32-55-pm screen-shot-2016-09-22-at-8-33-04-pm screen-shot-2016-09-22-at-9-02-13-pm

Essentially, I am making an array that holds all the object lines of a row, and then putting that series of row arrays into my giant lines array, which is now arranged by lines[i][j] = a line in row i and column j. Easy! Kind of like a 2d array. Ish. The perlin noise function is used to determine whether a line should draw or not. Essentially by making the increment by which the x and y of the lines reaaaaally small to zoom into an area of the perlin wave – given that, the closer a line is to another, the closer the noise output value – since noise is only generated between 0 and 1, that given value can determine whether it is drawn or not depending on a specific ratio of how empty you want the canvas. (MUCH THANKS TO PERLIN! And Kaleb was kind enough to have explained the concept behind it as well!)

______________________________________________________________

From Monday:

screen-shot-2016-09-18-at-2-09-30-am

Simple for loop/grid structure generating lines with somewhat non-uniform random rotation. I’m going to continue playing with limits and Gaussian randomness. And then maybe throw in some Perlin noise to achieve the interruptions – or make it interactive; I’ve been itching to throw in some physics or something like pseudo particle trails that eat up the lines to achieve the random empty spaces.

If anyone else would like to look into this – here’s a link to a lecture on types of randomness!

October 14

 

Guodu-Clock

sketch-34.js

 

T – Seconds / I – Minutes / M – Hours / E – Milliseconds

How to achieve the rotational placement like an actual clock (M is at 58 minutes, or I is at 12pm)?

Anson-clock

This is not so much a “clock” as it is a minute timer. It’s also a video, because I wrote it in Processing, not p5.js.


//triangle made of three points and an angle
PVector anchor; 
PVector trianglePt1;
PVector trianglePt2;
float theta;


PImage img1, img2, maskImage;
//float offset = 0;
//float easing = 0.05;

//class of circles called Spot
//declare the class, the array, and the object
Spot[] sp = new Spot[12];



void setup() {

  size(640, 480);
  frameRate(60);
  anchor = new PVector(width/2, height/2);
  theta = 0;

  //construct the object
  for (int i = 0; i < 12; i++) {
    sp[i] = new Spot((i+1)*width/12-(width/12/2), 40, width/12);
  }

  img1 = loadImage("profile_cutout.png");
}


void draw() {

  background(250, 215, 210, 0);

  image(img1, 170, 288, 300, 300); 
  tint(255, 185);  // Display at half opacity
  blendMode(SUBTRACT);  
  fill(30, 125, 175);

  theta += 360/60/frameRate;
  trianglePt1 = calcPointonCircle(radians(theta), 150);
  trianglePt2 = calcPointonCircle(radians(theta+90), 150);
  triangle(anchor.x, anchor.y, trianglePt1.x, trianglePt1.y, trianglePt2.x, trianglePt2.y);

  fill(190, 100, 200);

  for (int i = 0; i < sp.length; i++) {
    ellipse(sp[i].x, sp[i].y, sp[i].diameter, sp[i].diameter);
  }

  for (int  j = 0; j < 12; j++) {
    float thetaCoordinates = radians(j*30);
    int radius = 150;
    float x = radius*cos(thetaCoordinates) + width/2;
    float y = radius*sin(thetaCoordinates) + height/2;
    ellipse(x, y, sp[j].diameter/2.65, sp[j].diameter/2.65);
  }

  /* Below is an effort to get the array of Spots sp[i] to move down the screen. I wanted them to move down 
  one per hour, and map this to time, but I didn't figure it out. 
  
  valid = True 
   
   while(valid==True)
   for (int i=0; i<12; i++) {
   if (random() 0.5) {
   then sp[i] [sp[i].y]-1
   
   }
   if sp[i][sp[i].y]==height {
   valid = false;
   
   }*/
}

//float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;


PVector calcPointonCircle(float _theta, float radius) {
  PVector tempPoint = new PVector(anchor.x+radius*cos(_theta), anchor.y+radius*sin(_theta));

  return tempPoint;
}

class Spot {
  float x, y, diameter;

  Spot(float xpos, float ypos, float dia) {
    x = xpos;
    y = ypos;
    diameter = dia;
  }
}

Lumar-LookOutwards02

I really loved Stephanie Posevac (and the small startup interaction firm she works with in cali) when I was first introduced to this area of new media arts. I found data visualization incredibly exciting, both as a creative problem to work out how to best show complex data, but also to make the silly mundane things in life hold more meaning.

(short blurb on Stefanie – she’s a UK based designer who has made lots of  work with data projects that involve language, literature and science while illustrating for various books and exhibiting at the MoMa…like HOW COOL IS THAT?)

Eyeo2012 – Stefanie Posavec from Eyeo Festival // INSTINT on Vimeo.

But anywhooo – her work was the stepping stone that brought me interests further into data visualization. (Golan talked about her (or mentioned offhandedly?) during our first lecture as well) I really admired how beautiful her data aesthetic was – the aesthetic sells just as well as the functionality of the design.

Something along those lines – but not quite so aesthetic – also enables effortless data/information transmission;

An older project – but still one of my favorites- called NeuroViz is especially exciting because and it’s an incredibly simple tool for “visualizing the activation and inhibition of nodes within neural networks such that those within our brain.” Being able to communicate the complexity in a straightforward incredibly effortless way takes so much effort. I appreciate these more knowing the iterative process behind it.

Guodu-LookingOutwards01

Eyeo 2015 – Zach Lieberman, From Point A to Point B

zach-profile_original

Zach Lieberman is an American new media artist and programmer who has “a simple goal: he wants you surprised”. He describes the core of his work to be “augmenting the body’s ability to communicate”. He is the co-creator of openFrameworks and currently teaches at Parsons School of Design, where he received his MFA in Design and Technology.

Immediately upon speaking, Zach seems like such a down-to-earth, fun, and approachable guy, asking if the audience, “felt like family”. We all went on a “journey” because his talk was so humorous, engaging, deep, and human, and this latter point is want I was to discuss about Lieberman.

Zach stated he’s been to Eyeo 4 times and it’s been an emotional ride, where the first time he was really happy because it was his first time, the second time he was heartbroken for some reason, the third time he was happy again because he had just opened a new school (School for Poetic Computation), but in this fourth talk, his father had just died three weeks ago. I was really moved because Zach still came to Eyeo to give his talk, making it a tribute to his Father’s belief that “The world needs stories. We are drowning in data, and we need people to weave stories.”

What struck me was how genuinely passionate he was about his work, you can just hear it by his enthusiastic tone and the number of times he said he was “obsessed” with things like how a line (he talked A LOT about this, it was so cool) can be used to separate or disconnect people, how the “world is all around us, we just need a way to see or hear it”, and how everything is about connections. To me, his work doesn’t come off as computational or cold, which is what I associate with most programmers (but then again, I haven’t had much exposure to a lot of creative computing projects yet so more to come in Looking Outwards :^) ).

I really admire this because I think some of Lieberman’s work can be considered human-centered design, which is what I’ve been learning in the School of Design. I think the way that he talks about his thought process for his Play the World piano radio is inspirational for me as a designer. I saw it as another way to think about creating products that are engaging, emotional, memorable, and understanding of natural human behavior. Basically he created a program that makes the keys on a piano have the same pitch as a random song from around the world, so people can see and hear what African music might sound like and then suddenly from Rio de Janiero (go to 27:19 in the video to see how excited kids and adults got when they played this piano). One guy who played it said to Zach, “I need this in my life”. The current, sad stereotype with technology is that we’d rather be spending time on our smart phone screen than with close family and friends. I think Zach’s attitude and work shows that technology can touch upon topics that get people to see other people’s world views and stories, making it seems like the technology that we interact with now (mostly phones, tablets, and computers) is just the beginning and we will be having more intricate and thought provoking experiences.

Other cool projects that I didn’t touch upon:

  • Last year, I designed a font with a friend, but Zach created a program to visualize a car’s movement into a font :O
  • Zach, my instructor Golan (!!!!!!!), and others worked together to create an abstract, playful speech performance

 

 

 

 

 

Antar-lookingoutwards02

Symphonie Cinétique – The Poetry of Motion (2013), Joachim Sauter (ART+COM) X Ólafur Arnalds

Symphonie Cinétique is a collaborative piece created by Joachim Sauter and ART+COM, with Icelandic composer and pianist Ólafur Arnalds. The group of artists, designers, engineers and programmers that is Berlin’s ART+COM built five large responsive pieces to create a kinetic composition that translates music into mechanical motion.  It took this large interdisciplinary team over five years to create the pieces, which were exhibited at MADE in 2013.

This one one of the first pieces of responsive art that completely captured my interest and made me determined to learn how to create responsive and interactive work. Seeing the designers, and engineers work with the musician to create an instillation over five years is an inspirational moment for interdisciplinary collaboration. I always understood interaction to be “if I kick my work, it should kick me back”, but this piece helped me understand interaction is more than simply action and reaction. The musician and the pieces are creating poetry together, and while both are independently beautiful pieces of art, they create a surreal experience when in harmony.

From what I understand, almost everything ART+COM creates is in house, and for 20 years I believe they would be considered First Word art. Since 1995 ART+COM has been working to visualize concepts that are seem intangible. This is simply another iteration at an attempt to create a physical piece to visualize something we cannot see. While Arnalds has composed for many dances, which one could say the human visual interpretation of music, he has never been able to truly see his music. I imagine both Arnalds and Sauter were inspired by other interpretations of music visualizes and interactive mechanics.

 

Lumar-GradiantCircleForFun

This was a slight tangent from our actual assignment – just a special effect; it’s a color gradient in various shapes (the example here is a circle).

Cambu had pinned a really cool visual on pinterest and I had thought it was an incredibly beautiful yet refreshingly simple aesthetic that would be fairly short and quick to code up…..so I couldn’t resist. (Credit and thanks to cambu for bringing up the concept!!!! Probably wouldn’t have ever crossed my mind to try it otherwise. IT’S SO FUN TO PLAAAAY WITH)
(Much love for Krawleb for introducing, explaining and teaching how the noise function works! I really appreciate the time you take to help others!!!!)

I might add more features after this post – to see the latest verison:

(P.S. the circle rotates in the most up to date version!)

https://rawgit.com/MohahaMarisa/Interactivity-computation/master/Lumar_CircleGradient/index.html
lumar-circlechanging

lumar-circles

Guodu-FirstWordLastWord

The first thing I thought of as I was reading this was the quote, “Amateurs borrow, professionals steal”. If the world was really judged solely by if it were “First Word Art” then we’d all be screwed, not everyone is Haydn or the flip side Beethoven in the music world, or Da Vinci in fine arts, or the Beatles in pop music, or Steve Jobs for Apple.

For me, I don’t consider myself even close to a creative genius, which I believe contributes to creating either First Word Art, or Last Word Art, one offs basically. But I definitely consider myself creative because I’ve always enjoyed drawing and playing music ever since I could remember. It began with learning classical piano, then taking art classes, then loving to draw anime (seriously), then switching to the Trombone, then learning Jazz Trombone, then taking my first graphic design classes, and now today, where I express myself through design style drawing and most of all photography. My interests are obviously not about mastery and delving deep into one area, but learning across instruments and ways to draw. I find that whenever I start with a blank canvas, whether it’s the beginning to a jazz improvisation or a new illustrator document, my first thought is thinking about all the work that has already been produced, especially the masters. Then I think, what can I offer? How can I still be novel? And the answer is usually through developing and honing a voice as well as understanding one’s world values. The latter is still a work in progress, but now being a third year design student and having so much more experience seeing what others have already done, I find that I’m “borrowing” less and less from others.

Another quote that First Word Art and Last Wort Art reminds me of is original work. Paul Rand, a famous graphic design who designed the IBM logo once said, “Don’t try to be original, just try to be good.” I think this quote is more relevant than ever now that the internet and social media provide a platform to share content and see each other’s lives. It’s becoming harder and harder to stand out when everyone is learning from each other and sometimes knocking off from other people’s styles on platforms like Instagram and Tumblr. Aside from all the plagiarism and copyright problems the internet has caused, I personally think the internet has allowed for people to find new outlets of expression and do innovative work. It does constantly feel like there is a lot of First Word Art being produced because people are getting so good at their hobbies and using new technology.

Overall I think what I’m trying to say is that I think the internet and technological advancements have shaped our culture to become more creative and collaborative. I think it’s such a wonderful thing to be able to google Beethoven and also hear about how a new kid, like Joey Alexander is the “next big thing”, even a reincarnation of past legends. We can constantly get inspiration and feedback from each other to product our best work. Some people are just better at thinking and design and drawing and painting with more innovative techniques and naturally produce First or Last Word Art. I think a lot of people might get caught up between being the first or last because they want to be acknowledged or remember. In the end, the truly great artists are just focusing on their work, and it’s really up to how his or her work affects people on an emotional level that allows his or her work to transcend beyond eras.