Question 1A.

Manfred Schroeder: Prime Spectrum, 1968

In terms of effective complexity, I think this piece combines the order of using same sized, uniformed, black and white pixel-like blocks formed in sixteen squares, and randomness of arranging the color of blocks in certain ways. Also it appears that the tendency of accumulated white blocks are diagonal with concentrations in certain areas, and the fact that the whole photo is symmetric is also a representation of order.


Question 1B.

The problem of authorship is really interesting to me. I feel like for digital generative art, when computers started to be the execution or tool, it also became a bigger part of the process of making art. The line starts to blur when both the artist and the computer are working as a team together, since the result would not be the same without the input and response from either sides. In my opinion the computer is more than just a tool when creating generative art, and the computer and artist should be partners, since they are entitled to part of the creation and this certain part alone.



Fleshmap by Fernanda Viégas and Martin Wattenberg

Project homepage: http://www.fleshmap.com/index.html

Fleshmap, in the creators’ words, is an inquiry into human desire, its collective shape and individual expressions. In a series of artistic studies, exploring the relationship between the body and its visual and verbal representation. It contains three parts: touch, listen and look.

I appreciate it when a data visualization tells me something new from what I think I know, or what I cannot understand as well by living a life as myself. Playing with the results feels like an open and impromptu discussion with friendly strangers about an intimate topic, full of little surprises, eccentric but intriguing. It tries to explore the secret of human desire, by breaking down the basic senses, examining both the collective patterns and individual uniqueness, abstracting data from real human emotions, to put together images that represent the answer that lies in itself.

It’s fascinating to see the difference between the provider and the receiver in the interaction of touching, for both men and women, that human desire can be different from different ends. It’s not symmetric and opens up the question behind the result of touching areas but what leads to this result that is more complicated than physical interactions, in this case, touch. The origin of it all is that the heart wants what it wants.



My book is called Stripes. It contains a stripe of colors on each page.


I was fascinated by this perception study: Colour is in the eye of the beholder. I realize that colors are not only just shades or hues or RGB values; they have very strong relationships to feeling, smell, taste and memory. So I wanted to represent the concept of color by evoking them with words, so that the reader would “see” the colors by imagining them. They can be completely personal and generic, different from person to person, depending on their experience or understanding of the descriptions. Just imagine seeing the stripe that contains the colors of “cornflour sparkle“, “spider web weave“, “old Oriental rug burn“, “glisten shimmer pretzel“, “glow field of clover” and “iceberg peanut butter Arctic landscape“. You see what I mean.

A closer look at my bookbinding process:

Print and cut with an edge cutter:

img_4528   img_4529

Organize and press between two pieces of wood blocks:

img_4530   img_4531

Brush PVA glue into the spine of the book. Shorten the drying time by blowing hot air on the surface until the glue is dry. Repeat three times:

img_4536   img_4541

That’s it!

img_4543   img_4544

img_4545   img_4548

Github: https://github.com/DarcyCao/60-212/tree/master/book/



Testing the curves


Add wiggles when opening mouth.


Change mask color same as the surroundings.




Add mirror effect.



Here it is, me embracing the weirdness.

screen-shot-2016-10-15-at-9-34-42-pm        screen-shot-2016-10-15-at-9-35-59-pm

screen-shot-2016-10-15-at-9-37-31-pm      screen-shot-2016-10-15-at-9-38-26-pm

screen-shot-2016-10-15-at-9-38-38-pm      screen-shot-2016-10-15-at-9-39-42-pm

screen-shot-2016-10-15-at-9-43-44-pm       screen-shot-2016-10-15-at-9-47-49-pm

screen-shot-2016-10-15-at-9-48-47-pm         screen-shot-2016-10-15-at-9-52-26-pm

screen-shot-2016-10-15-at-9-54-58-pm        screen-shot-2016-10-15-at-9-55-14-pm

// 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;
import processing.video.*;
Capture cam;

// num faces found
int found;
float[] rawArray;
float[] tempArray;
FloatList rawBorderArray;
FloatList waveBorderArray;
IntList indexArray;
FloatList otherHalfArray;
float mid;
int tempPixel;

int highlighted; //which point is selected

// pose
float poseScale;
PVector posePosition = new PVector();
PVector poseOrientation = new PVector();

// gesture
float mouthHeight;
float mouthWidth;
float eyeLeft;
float eyeRight;
float eyebrowLeft;
float eyebrowRight;
float jaw;
float nostrils;

void setup() {
  size(640, 480);

  oscP5 = new OscP5(this, 8338);
  oscP5.plug(this, "found", "/found");
  oscP5.plug(this, "rawData", "/raw");
  oscP5.plug(this, "poseScale", "/pose/scale");
  oscP5.plug(this, "posePosition", "/pose/position");
  oscP5.plug(this, "poseOrientation", "/pose/orientation");
  oscP5.plug(this, "mouthWidthReceived", "/gesture/mouth/width");
  oscP5.plug(this, "mouthHeightReceived", "/gesture/mouth/height");
  oscP5.plug(this, "eyeLeftReceived", "/gesture/eye/left");
  oscP5.plug(this, "eyeRightReceived", "/gesture/eye/right");
  oscP5.plug(this, "eyebrowLeftReceived", "/gesture/eyebrow/left");
  oscP5.plug(this, "eyebrowRightReceived", "/gesture/eyebrow/right");
  oscP5.plug(this, "jawReceived", "/gesture/jaw");
  oscP5.plug(this, "nostrilsReceived", "/gesture/nostrils");
  String[] cameras = Capture.list();
  if (cameras.length == 0) {
    println("There are no cameras available for capture.");
  } else {
    cam = new Capture(this, 640, 480, cameras[0]);

void draw() {  
  if (cam.available() == true) {cam.read();}
  set(0, 0, cam);
  if(found != 0) 
  {//totally 132 elements in rawArray, 66 points
    for (int val = 0; val < rawArray.length -1; val+=2) {
      if (val == highlighted) { 
        //fill(0, 255, 0);
      } else {

public void found(int i) {
  println("found: " + i);
  found = i;

public void rawData(float[] raw) {
  rawArray = raw; // stash data in array

float chinWidth;
float foreheadWidth;
float noseWidth;
void getRawBorderData() {
  tempArray = rawArray;
  rawBorderArray = new FloatList();
  indexArray = new IntList(); //16,
  chinWidth = abs(rawArray[8]-rawArray[24]);
  foreheadWidth = abs(rawArray[0]-rawArray[32]);
  noseWidth = abs(rawArray[62]-rawArray[70]);
  rawBorderArray.append(rawArray[115]);//12 13
  rawBorderArray.append(rawArray[129]);//14 15
  rawBorderArray.append(rawArray[123]);//16 17
  rawBorderArray.append(rawArray[103]);//18 19 mouth
  rawBorderArray.append(rawArray[71]-10);//nose tip
  rawBorderArray.append(rawArray[55]-5); //nose bridge 20~32
//33 34 eyebrow
//33 34 eyebrow bone
  println("rawBorderArray has:"+ rawBorderArray.size()+"points");

float perc;
void randomness() {
  for (int a= 0; a < rawBorderArray.size(); a+=2) {
    perc = random(-2, 2);
    rawBorderArray.set(a, rawBorderArray.get(a)+(mouthHeight*perc));

void drawWaves() {
  for (int a= 0; a < rawBorderArray.size(); a+=2) {
    perc = random(-2, 2);

int r;
int s;
void drawMask() {
  //color c = 0;
  color c = get(400, 10);
    r = 0;
    while (r <= rawBorderArray.size()-1) {
      curveVertex(rawBorderArray.get(r), rawBorderArray.get(r + 1));
      r += 2;

void drawMask2() {
  color c = get(400, 10);
    s = 0;
    while (s <= rawBorderArray.size()-1) {
      curveVertex(otherHalfArray.get(s), otherHalfArray.get(s + 1));
      s += 2;

void getMirrorBorder() {
  for (int i = 0; i < rawBorderArray.size(); i++) {
    if (i%2 == 0){//x 
    else {

void otherHalf() {
  mid = (rawArray[42]+rawArray[44])/2;
  int Image = cam.width * cam.height; //int(cam.width-mid)
  for (int i = 0; i < Image; i++) { if (i%cam.width > int(mid)-80 && i%cam.width < int(mid)+100) { //if on he right side of face 
      pixels[max(0,(i-200))] = pixels[cam.width-i%cam.width+ (i/cam.width)*cam.width];

public void poseScale(float s) {
  println("scale: " + s);
  poseScale = s;

public void posePosition(float x, float y) {
  println("pose position\tX: " + x + " Y: " + y );
  posePosition.set(x, y, 0);

public void poseOrientation(float x, float y, float z) {
  println("pose orientation\tX: " + x + " Y: " + y + " Z: " + z);
  poseOrientation.set(x, y, z);

public void mouthWidthReceived(float w) {
  println("mouth Width: " + w);
  mouthWidth = w;

public void mouthHeightReceived(float h) {
  println("mouth height: " + h);
  mouthHeight = h;

public void eyeLeftReceived(float f) {
  println("eye left: " + f);
  eyeLeft = f;

public void eyeRightReceived(float f) {
  println("eye right: " + f);
  eyeRight = f;

public void eyebrowLeftReceived(float f) {
  println("eyebrow left: " + f);
  eyebrowLeft = f;

public void eyebrowRightReceived(float f) {
  println("eyebrow right: " + f);
  eyebrowRight = f;

public void jawReceived(float f) {
  println("jaw: " + f);
  jaw = f;

public void nostrilsReceived(float f) {
  println("nostrils: " + f);
  nostrils = f;

// all other OSC messages end up here
void oscEvent(OscMessage m) {
  if(m.isPlugged() == false) {
    println("UNPLUGGED: " + m);

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;

Code in Github: https://github.com/DarcyCao/60-212/tree/master/Darca_face



Thanks for all the kind words about the cat being cute;)

I realize my design is still actually a traditional clock, which really is not ideal. When I look back to the time when I decide to use this idea, I was a little caught up by the expectation of the “cuteness” of it that I just didn’t go further. My lesson here is to try not to be caught up by the ideas that I have, but to challenge even more and out of my comfort zone. And always remind myself to take risks.

Then comes the mechanism of the clock. There are really so many aspects that I need to reflect on. Basically, it does not always show the time right and the arms and legs are unattached. The former is mainly because it’s mainly because whenever the arms and legs coincide, the cat has to mirror itself, and when I let myself import a complex shape to avoid literally drawing the curves out in P5, I planted a seed that there is a limitation for me to try and modify and make use of the point data to be more weird and perky. Or maybe I could… Hmm…

Another problem about my design is that I did not find a good solution to integrate the concept of cat moving the arms and legs with the moving of the long hand and the short hand. While it is unrealistic for the cat to stretch 180 degrees when sleeping, I eventually could not make it its own feature by turning it into something fun instead of awkward.

While as someone who is horrible at time management, the first thing on my list is to try to get the work planned as soon as I can to have fewer regrets in the final result. At the same time I realize I DO need a lot more coding practice than I expected. 


The project that I want to write about this week is part of the Future Forward event in New York City, Drift, a thermal-responsive chandelier that interact with the lighting system in the gallery space. The reason this project stuck with me is that, while we are trying to achieve interaction with complicated electronic and digital tools, Doris Sung chose a totally different approach from her experience as an architect in experimenting with materials, made Drift itself free from electronics and digital controls, saying the installation is “something natural and seemingly unlikely”. How it works is that when the light beams change their path on the structure, then change the heat distribution in the region, that the pieces in the chandelier made of heat-sensitive metal change the curvature and tension accordingly, change the overall appearance of the whole structure. The way the metal pieces move one by one and try to slowly going back to balance is really mesmerizing, and I imagine it would be calming to watch even for hours. In fact it demonstrates the capabilities for smart buildings to move with trajectory of the sun in the future.


screen-shot-2016-09-30-at-7-49-36-am screen-shot-2016-09-30-at-7-49-45-am screen-shot-2016-09-30-at-7-49-47-am screen-shot-2016-09-30-at-7-49-49-am screen-shot-2016-09-30-at-7-49-55-am screen-shot-2016-09-30-at-7-50-00-am screen-shot-2016-09-30-at-7-50-05-am

Aside from the movement of the pieces of the structure, the material itself creates a very soothing dynamic in the space: the shimmering reflections of the metal pieces changing when people walk by, or the tilted and slightly swinging metal line where the light comes through when others stands still. In the very short video about the making of this installation, Doria Sung also dis Use the idea of balance and pivoting, she said by using the idea of balance and pivoting, there is a position that it wants to naturally be in. That reminds me of the waterwheel, a traditional water transportation system that turns according to the accumulation of water in each slot, an elegant integration of nature and human activities.




My project is initially inspired by the planning diagrams of PCB circuit board. Basically it contains lines with circles on both ends (tiny holes to insert electronic components) that make 45 degree turns. While I tried very hard to grasp the relationships among the lines and small circles, the combination of horizontal, vertical lines and lines with 45 degree angle, led me to another direction of creating something that resembles Frank Lloyd Wright’s window patterns, and somewhat art deco:

127_2_design_december_2015_frank_lloyd_wright_window_ensemble_from_the_oscar_steffens_house_chicago_illinois__wright_auction        7a06aab4d8f5e8497feac1d2125d7e17

So I started to experiment different parameters to generate the patterns that I like the most. Here are some of the early versions(some of them are still on the circuit side):





And this is the version that I decided to laser cut:





Here is the result of the laser cut(I think processing does not export circles and arcs to dxf file which is needed for laser cutting):


I noticed that when laser cutting, the repetition of some lines in the center part(mostly where the pattern is intense and the strokes are on top of each other) of each pattern can cut through the paper therefore creates areas that have a different color from the paper, therefore provides diversity and glowing effects to the pattern.

In a dark room towards the sun with high contrast:


img_4140       img_4136

img_4137       img_4134 

Finally a glitch:








Charlie is a cat. Charlie just don’t want to wake up, and he rolls around all day stretching his paws in his dreams. The little mouse Ron hangs out all the time, searching for cheese crumbs in the carpet. He moves so quiet around the edge of the carpet so that he doesn’t wake up Charlie. And slow too, as slow as six degrees per second. He’s so certain Charlie has hidden something that smells good somewhere so he just won’t quit.

The paws with the dark gray fur point to the minute, and the paws with the yellow fur points to the hour. (The directions can be a little bit off from time to time but mostly it shouldn’t be too much.) The mouse goes according to the seconds, and the carpet changes color according to the time of day too, from lighter pinkish in the day and darker bluish in the night.










Trace the shapes in Solidworks



Save as IGS file and open with text editor



Then open with Excel to extract valid point coordinates



Save as CSV file and preload in p5.js code







Finally some wierdness:



Code in Github


I want to write about an interactive digital walk site called VOID. Its unconventional, unexpected, versatile ways of interaction and subtle, submerging experience throughout the story, make it an unique learning subject for me to revisit. And every time I do, I can still see something new, the hidden glowing letters on the bottom, the different spectrums the black ice reflects, the dazzling sound from the icy, wiry and sharp geometries surrounding the letters of the Hi-Res…

liquidice kubik hires elements black-ice

VOID is a digital walk created by Robin Gardeur(IeSHKA) and the Hi-Res team in 2005. The project is very conceptual, exploring possibilities of ideas and imaginations through sounds and visuals. The forms and shapes are impossible to describe, yet so hard to look away, and each chapter has its own theme and dynamic, but together they become a Aside from the visuals, the sound effects is so well integrated, changing according to every input of the user, every shape and concept.

On the preface it writes: “All art is created from nothing into something. Our imaginations piece together concepts which we then transform as well as manipulating mass to fill space. We use VOID to house these pieces, and we see the emptiness that surrounds them as potential for new ideas.” It is fascinating that the creators choose to make the idea of “idea” into a “out of reality” experience that is well thought out and beautifully put together.

The website was built using WebGL and Web audio technologies, threejs, howlerjs, GSAP and Coffee Collider. Although they all look quite intimidating, I determine to use my time in the course to learn more about them and open up the possibilities for my own ideas at the same time. Will be quite a journey.

Creating the VOID: https://medium.com/@HiReSLondon/creating-the-void-851d95488dc1#.9z8hn036n

VOID: http://void.hi-res.net

VOID II: http://void-ii.hi-res.net/


Darca-LookingOutwards01-Giorgia Lupi

The video I choose is from an information architect Giorgia Lupi in Eyeo 2014. She talked about her obsession with hand drawing and its role in her life as a design tool and a means of expression. She draws constantly whenever she is thinking, and it helps her so much to understand herself as an artist.

She takes her drawings very seriously and not seriously at all at the same time. She draws whatever is in her mind and does not really try to make sense of them, enjoying the moment of spontaneousness and comfort of expression. Then a lot of times in her work, when she tries to visualize complicated data and information, she can somehow retrieve the once random shapes and images in her drawings and create amazing and out-of-box ideas.

She talked about it like it happened so naturally, which is the most fascinating for me, that for her, working as an artist has become an extension of her inner self therefore is truly enjoyable and adventurous. Just like when she talked about her work visualizing the data of scientific articles and their citations over the years, she is inspired by her love of the music notes. She was fascinated by how music notes can display such compact information with so much elegance and simplicity, and how much they resembles the relationships among many factors in the scientific world, and translated the symbols of music into variables that can accurately reflect the information hidden in the data of 20 years. It appears to be a delightful coincidence, but in fact it takes really deep understanding of the data and imagination to make the connection valid, and create a whole new perspective. It is not only a good example of problem solving in design practice, but also human-centered design thinking, which results in an experience for the readers to engage, explore or even care, therefore delivers the information that is initially obscure and hard to follow through.




The Life Cycles of Ideas, Popular Science

Aside from her amazing projects, the speech really got me thinking about what makes an artist unique, what makes an artist’s personal style, and what I can do to find my own. While it’s difficult that information is overloaded, and everyone has his or her own theory of how to make it to the other side, her insistent self exploration and unprejudiced acceptance of herself and her art is truly inspiring. But most of all, she makes me never afraid of my ugly drawings again.


After reading this fascinating article, I started to wonder the purpose of defining artworks as “first word art” or “last word art”. Because it might just fall into the pattern of a closed circle in my opinion. It implies that certain kind of art should start somewhere and when it peaks, the mic is dropped and the chapter ends. But is it possible that “first word art” and “last word art” are simply outliers, or turning points that opens new doors to others who comes after? If technically the “last word art” can be overridden by something that is created in the future, the “last” in it simply stands for the turning point in the past. And it’s always open to interpretation that whether it is “first word art” or “last word art” as the history is written and more discoveries are made.

So one might imagine the history of art grows like trees, while there is a turning point, it simply grows out new branches and reaches further. It could be a continuous process in which every attempt of becoming a turning point is contributive and accumulates to the point that the turn is actually made.

Back to the discussion of “first word art” and “last word art”. In the world of new media, the community culture is a powerful factor that allows artists to share and collaborate more frequently and easily than ever. Artists with different backgrounds can bring in more “first word arts” in the collaboration, and this might be more likely to inspire each other to make something completely new (“first word art”); or become a stronger force to take certain “first word art” up a level.

I agree with the idea that “last word art” and “first word art” are not mutually exclusive. When I was reading the article, it occurred to me that the relationship between those two kinds of art might just be like Jon Stewart and Stephen Colbert. The former started the format of political satire on late night television and the other made his mark by playing an absolutely epic character that goes beyond the format itself. The character becomes his own “first word art”, starting a new genre of satirism. And those who come later often take a little from everyone, and even if not all of them are so symbolic as those two at this moment, there always shall be a John Oliver that takes it away to somewhere else.