[Research] Generative Animation

http://www.presstube.com/project.php?id=259

http://www.victortaba.com/

http://www.anasomnia.com/

http://blog.soulwire.co.uk/art-design/illustration/generative-illustrations-for-ishihara#more-1042

[Development] Producing Root Animation

[Research] Animation Example

Anasomnia

Anasomnia

[Research] Language in Processing

Colour


http://en.wikipedia.org/wiki/Web_colors

Yoon: In Processing, "#" should be changed in format of "zero-x" E.G., #00ff00 can be 0x00ff00

[Research] Ants

[Example of Use of Motion and Colour Detection]

Ants - Philip Worthington

Yoon: His another project which called "Ants" is another generative table based installation about ants' life. Digitised ants seeking objects on the table and they connect each object as a way.



Yoon: During the interview (Pictures and interview - http://www.worthersoriginal.com/viki/#page=shadowmonsters), Philip Worthington explains ants find where the objects are and what colour they are too. So ants go to find objects and make colourful corridors. This looks like a digital version of a toy called "Ant Farm (1968)".


Yoon: Jose M. Hernandez describes this as an "underground architecture" in his book Antfarm Retrospective (2004). And Worthington uses the characteristic of ants into his project and has made people can make their own architecture from their belongings with ants.

Technically, first camera and the infrared table define where the object is, and they send ants to it, then second camera detects their colour. Then the generative algorithm colour the corridor in the matched colour. And the motion detection runs all the time that it can track their moves.

[Development] Blob Test with Processing

Processing

[blob test]

original open codes: BlobDetection by v3ga.net


//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
//BlobDetection by v3ga
//May 2005
//Processing(Beta) v0.85
//
// Adding edge lines on the image process in order to 'close' blobs
//
// ~~~~~~~~~~
// software :
// ~~~~~~~~~~
// - Super Fast Blur v1.1 by Mario Klingemann
// - BlobDetection library
//
// ~~~~~~~~~~
// hardware :
// ~~~~~~~~~~
// - Sony Eye Toy (Logitech)
//
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

import processing.video.*;
import blobDetection.*;

Capture cam;
BlobDetection theBlobDetection;
PImage img;
boolean newFrame=false;

// ==================================================
// setup()
// ==================================================
void setup()
{
// Size of applet
size(640, 480);
// Capture
cam = new Capture(this, 40*4, 30*4, 15);
// BlobDetection
// img which will be sent to detection (a smaller copy of the cam frame);
img = new PImage(80,60);
theBlobDetection = new BlobDetection(img.width, img.height);
theBlobDetection.setPosDiscrimination(true);
theBlobDetection.setThreshold(0.2f); // will detect bright areas whose luminosity > 0.2f;
}

// ==================================================
// captureEvent()
// ==================================================
void captureEvent(Capture cam)
{
cam.read();
newFrame = true;
}

// ==================================================
// draw()
// ==================================================
void draw()
{
if (newFrame)
{
newFrame=false;
image(cam,0,0,width,height);
img.copy(cam, 0, 0, cam.width, cam.height,
0, 0, img.width, img.height);
fastblur(img, 2);
theBlobDetection.computeBlobs(img.pixels);
drawBlobsAndEdges(true,true);
}
}

// ==================================================
// drawBlobsAndEdges()
// ==================================================
void drawBlobsAndEdges(boolean drawBlobs, boolean drawEdges)
{
noFill();
Blob b;
EdgeVertex eA,eB;
for (int n=0 ; n
// ==================================================
void fastblur(PImage img,int radius)
{
if (radius<1){ w="img.width;" h="img.height;" wm="w-1;" hm="h-1;" wh="w*h;" div="radius+radius+1;" pix="img.pixels;" i="0;i<256*div;i++){" yw="yi=" y="0;y>16;
gsum+=(p & 0x00ff00)>>8;
bsum+= p & 0x0000ff;
}
for (x=0;x>16;
gsum+=((p1 & 0x00ff00)-(p2 & 0x00ff00))>>8;
bsum+= (p1 & 0x0000ff)-(p2 & 0x0000ff);
yi++;
}
yw+=w;
}

for (x=0;x<<16) x="=" p1="x+vmin[y];" p2="x+vmax[y];" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMatbZC5ItS-4WdsJ-k5VAGU32SROgVYn3UnG9fr1CbhgOQc6ZKbcb5UARTtnZJQuEw_9AfKseeTFHNhvkHbHDVjk21y6lsO76VyqaxJkrzdL5gNIfaehlYU5fRx4Fz9JqUGXIcCpTjpkb/s1600/bd_webcam.JPG">Yoon: I just copied the codes and pasted into a new sketch. But the original itself is a bit too rough to be used as it is. First of all, my room isn't as bright as I expected that there may be some interference from ambient lights. Secondly, the output image is pixelated which may not give clear border to judge blob areas. Thirdly, the red rectangulars are not necessary and the colour of edge (light green) is not suitable. So I added some codes from another open source which to make the quality of image better, removed red straight lines and tested changing the colour of edges.


Fixed codes:

//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
//BlobDetection by v3ga
//May 2005
//Processing(Beta) v0.85
//
// Adding edge lines on the image process in order to 'close' blobs
//
// ~~~~~~~~~~
// software :
// ~~~~~~~~~~
// - Super Fast Blur v1.1 by Mario Klingemann
// - BlobDetection library
//
// ~~~~~~~~~~
// hardware :
// ~~~~~~~~~~
// - Sony Eye Toy (Logitech)
//
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

import processing.video.*;
import blobDetection.*;

Capture cam;
BlobDetection theBlobDetection;
PImage img;
boolean newFrame=false;

// ==================================================
// setup()
// ==================================================
void setup()
{
// Size of applet
size(640, 480);
// Capture
cam = new Capture(this, width, height, 30); noStroke(); smooth();
// BlobDetection
// img which will be sent to detection (a smaller copy of the cam frame);
img = new PImage(80,60);
theBlobDetection = new BlobDetection(img.width, img.height);
theBlobDetection.setPosDiscrimination(true);
theBlobDetection.setThreshold(0.2f); // will detect bright areas whose luminosity > 0.2f;
}

// ==================================================
// captureEvent()
// ==================================================
void captureEvent(Capture cam)
{
cam.read();
newFrame = true;
}

// ==================================================
// draw()
// ==================================================
void draw()
{
if (newFrame)
{
newFrame=false;
image(cam,0,0,width,height);
img.copy(cam, 0, 0, cam.width, cam.height,
0, 0, img.width, img.height);
fastblur(img, 2);
theBlobDetection.computeBlobs(img.pixels);
drawBlobsAndEdges(false,true);
}
}

// ==================================================
// drawBlobsAndEdges()
// ==================================================
void drawBlobsAndEdges(boolean drawBlobs, boolean drawEdges)
{
fill(0,0,0);
Blob b;
EdgeVertex eA,eB;
for (int n=0 ; n5);
stroke(174,25,36);
for (int m=0;m
// ==================================================
void fastblur(PImage img,int radius)
{
if (radius<1){ w="img.width;" h="img.height;" wm="w-1;" hm="h-1;" wh="w*h;" div="radius+radius+1;" pix="img.pixels;" i="0;i<256*div;i++){" yw="yi=" y="0;y>16;
gsum+=(p & 0x00ff00)>>8;
bsum+= p & 0x0000ff;
}
for (x=0;x>16;
gsum+=((p1 & 0x00ff00)-(p2 & 0x00ff00))>>8;
bsum+= (p1 & 0x0000ff)-(p2 & 0x0000ff);
yi++;
}
yw+=w;
}

for (x=0;x
rsum=gsum=bsum=0;
yp=-radius*w;
for(i=-radius;i<=radius;i++){ yi=max(0,yp)+x; rsum+=r[yi]; gsum+=g[yi]; bsum+=b[yi]; yp+=w; } yi=x; for (y=0;y
pix[yi]=0xff000000 | (dv[rsum]<<16) x="=" p1="x+vmin[y];" p2="x+vmax[y];">
Yoon: the webcam caught the completely dark area. And then I did simular but with my mobile device and it was to compare to a dark point in brighter background.



Yoon: The webcam seems trying to catch some pitch-black area first and comparatively adjusts rest of area with ambient light.

[Research] Shadow Studies

Meaning of Shadow

Definition of Shadow

from Oxford Advanced Learner's Dictionary [http://www.oxfordadvancedlearnersdictionary.com/dictionary/shadow]

:dark shape
1 [countable] the dark shape that somebody/something's form makes on a surface, for example on the ground, when they are between the light and the surface

:darkness
2 [uncountable] (also shadows [plural]) darkness in a place or on something, especially so that you cannot easily see who or what is there

:influence
4 [singular] shadow of somebody/something the strong (usually bad) influence of somebody/something

:somebody that follows somebody
6 [countable] a person or an animal that follows somebody else all the time

:something not real
7 [countable] a thing that is not real or possible to obtain

Yoon: The meanings of shadow are generally negative if you see the definitions above. However, shadow is a scientific phenomenon in nature. No one can put you and your shadow separately. This is a nature and the shadow is represented by the light on the opposite side of object.

And shadow itself is flexible. But the flexibility is mainly depended on the shape of the real object which leads shadows. Light can be effectively used to change shape of shadows but it is limited.



Yoon: Light can widen, shorten, brighten or darken shadows but it cannot actually transform the original image. There are three elements to play with shadow, first of all, shadow of course, object and light.



Yoon: The illustration describes the relationship between light, object and shadow. A is the distance between the object (presented as a circle in the middle), B is the distance of the light from the ground where the object has been set. If the B casts the light on the object, shadow is automatically produced. "a" is the brightness of shadow and it is interact with the distance of A. Finally, if B gets longer, then the "b" which is the size of shadow gets bigger. So this illustration reminds the importance of lighting. With this simple function, many artist work on their shadow art.



Niloy J. Mitra, Mark Pauly




(Top) A sculpture casts three shadow poses of an animated cartoon character at 60 degree angle. Substantial initial inconsistencies (shown as gray pixels) have been removed by the optimization. The red line indicates a topological surgery performed by the user on the deformation mesh to specify the shape semantics. Bottom row shows the sculpture from different viewpoints without the transparent casing.

Abstract:

To them, I said, the truth would be literally nothing but the shadows of the images.

- Plato, The Republic

: Shadow art is a unique form of sculptural art where the 2D shadows cast by a 3D sculpture are essential for the artistic effect. We introduce computational tools for the creation of shadow art and propose a design process where the user can directly specify the desired shadows by providing a set of binary images and corresponding projection information. Since multiple shadow images often contradict each other, we present a geometric optimization that computes a 3D shadow volume whose shadows best approximate the provided input images. Our analysis shows that this optimization is essential for obtaining physically realizable 3D sculptures. The resulting shadow volume can then be modified with a set of interactive editing tools that automatically respect the often intricate shadow constraints. We demonstrate the potential of our system with a number of complex 3D shadow art sculptures that go beyond what is seen in contemporary art pieces.

http://www.graphics.stanford.edu/~niloy/research/shadowArt/shadowArt_sigA_09.html

[Research] Night Light

Night Light

night lights from thesystemis on Vimeo.


Hellicar & Lewis produced and art directed a large scale interactive installation for the rebrand of NZ Telecom at the Ferry Building, Auckland, New Zealand.

http://www.hellicarandlewis.com/2009/10/16/night-lights/

Yoon: Big size of event always successful? I don't think so. That is full of risks to succeed. I think any installation has got its appropriate size which has to be on exactly. And this installation went really well with the public size. There are many good works like projecting on public buildings with realistic and gorgeous graphics.

RalphLauren.com celebrates 10 years of digital innovation with Ralph Lauren 4D.
A historic fusion of art, fashion & technology at the 888 Madison Ave store in NYC.


Even it mentions 4D, it was just about a very well produced 3D graphic screen based work. People are standing the opposite side of road and watching it is what it is about. Nevertheless it was successful because its theme was still a fashion show which was to celebrate 10 years of digital innovation in the brand. However, "4D" was bit exaggerated in this 3D screening event. If you look at the crazy people dancing in Night Light project, you may feel more like 4D than Ralgh Lauren "4D" fashion show.

Using software created in openFrameworks by YesYesNo, we collaborated to create a series of installations that worked with peoples bodies, hands or even mobile phones.

YesYesNo: We used 3 different types of interaction - body interaction on the two stages, hand interaction above a light table, and phone interaction with the tracking of waving phones. There were 6 scenes, cycled every hour for the public.

http://yesyesno.com/night-lights

Yoon: Shadow, people dance with their shadows. It is used as a reinforcement about their dancing. They can see which shadow is theirs with doing some gestures. The shadow actually made a connection between private (person) and public (building).

Feedback

Feedback - case study from onedotzero on Vimeo.

http://www.onedotzero.com/video/11160574/

Memo: "wanted to make people smile", "augment", "people performance based"

How do their works engage audience?
: I think that is fun to play with. It looks playful at the first place and they are actually encouraged to make some art with their performance. During the play, they do what ever they are tempted with the technology and the result will be published in a format of photography in Flikr. It is a process of making a fun so to speak, first, it has an attractive set, second, understandable which is easy to use, three, playful with producing personal meanings. They play with their reflection through the webcam and the monitor. I think it is worth to play with.

[Research] Reactable

Reactable in Oslo

Reactable performance by Carles López and Marcos Alonso at the Gulltaggen event.

Oslo, April 24, 2008

Yoon: This is an upgraded version of my proto idea. This installation has a room for participants which is very important to a postmodern art. Minimalism also encourages people to join as a part of it. Beat based music makes people shake their body on the rhythm and beat. And the rhythm is made by participants themselves. On the rounded table, random people surrounded the table and they make music instantly. There are some kinds of objects contain sensors in it and the objects interact with the table. The table is possibly projected from the bottom of inside of table and each object has different levels of sound and vision. The object is interactive as an instant button of mixer or synthesiser. It can be moving all over the table and can be turning as a dial. It can show the image of future DJ in a club. It is totally playful and creative.

[Research] Jung's Shadow

Yoon: In Jungian Study, "everyone carries shadow", shadow is interpreted in three psychological terms as anima, animus and persona. They use shadow as a psychological area controlled by unconscious mind. For instance in a dream, Von Franz mentions the action of interacting with shadows in dreams, "A conversation with the shadow may indicate that one is concerned with conflicting desires or intentions." I believe these are all about unconsciousness which live with you whole life in variety of formats. It is sometimes recognised as a physical dark shape of like your twin, or it can be expressed as a different aspect of mind like anima or animus.


http://www.faithbarista.com/2009/12/leaving-the-shadows-inviting-renewal/

Yoon: In a Walt Disney's classic animation Peter Pan (1953), there is a conflict between Peter pan and his shadow. The shadow looks exactly same as Peter Pan but it tries to run away from him. The shadow looks like it is desperate for freedom but Peter Pan doesn't allow it to go for it. The shadow may reflect one of Peter Pan's unconscious mind. Peter Pan can be an icon of freedom or adventure but he looks he is so strict to his shadow that his shadow gets forced back to belong to Peter Pan. From this story, I started to imagine interacting with my shadow. Now Dreams will come true.

[Dev] Contents Design

Key Words

shadow animation - "angles" between projector and the screen

tactile installation - short touch (touching+removing) or long touch (touching+lasting+removing)

complexity

shadow and interaction - each shadow has got their own story behind the objects, one shadow meets other activated shadows they are interactive each other.

[Dev] contents development

Fun with Processing and a Webcam - 9. EdgeNormals2d_workinprogress

User ID: taoubt

This clip is a real-time display of using a program simply called "processing" and a webcam. The video was created by and features the genius Martin Antolini.

Yoon: This is a clear idea of using generative animation. There are some more tests in "processing" with webcam. However, I chose this test because of its simplicity. Others were little bit too much, I mean those look so perfect that I can't see any room for participants. However, this simple bouncing concept is more like playful. This can make shadows like following participants' arms. And if my concept of generative animation is like small people running around the arm then the predicted image will be like this.

Yoon: Short animated runner but I need to know how to use it in "processing"

Yoon: When people put an object on the table, small people appear and running around the shadow.

[Dev] Shadow ani test

Animation Design

#1 - Choosing Object: Scissors

#2 - Shadow Research

#3 - Animation production

#4 - Sound effect production

#5 - Proto shadow animation test #1

[The Truth]

Yoon: The shadow is fake. It shows how it will be working after linking all the Puredata or Arduino stuff. I produced animation (shadow) in Flash and I stand the scissors vertically that the real shadow is hidden. This animation-test is only to see how the fake shadow will look in a simulated environment.

[Research] The Shadow Monsters

Shadow Monsters

Shadow Monsters by Philip Worthington, from the Design and the Elastic Mind exhibition at MOMA in NYC. April 2008.

Yoon: Today, before the tutorial, I was trying to expand my idea in the exactly same way. I actually tried to present that the shadow would not only reflect their hand. The shadow would be transformed in somehow random way with fake shadows by pre-produced animations. Which means that the same as this great piece (above). I could have commited the plagiarism, but Chris said, it would be enough if I am stuck on the first idea with some deeper development. So, now I'm back to the original. I am happy with that I can still use the tactile things. The sense of "touching" might be the key point of this project.

So, who the hell is him..

"Q. How did the design of the Shadow Monsters project develop?

A. The Shadow Monsters grew from a brief about technological magic tricks. I was looking at optical illusions and Victorian hand shadows particularly interested me as a starting point. The subtlety with which a character could be created was already very magical and I wondered if there was room to experiment with these techniques. Looking back to my own childhood, I remembered the feeling of casting huge shapes in the light of my father’s slide projector, creating monsters and silly animals. I enjoy working with simple intuitive things; playful feelings that touch us on a very basic level.

At the same time I was experimenting with some software for vision recognition so slowly the monsters evolved. At first I made a puppet show with coloured pencils that had hair and eyes... and this slowly grew in complexity until I had a system that could go some of the way to understanding hand posture. The rest is history."

http://designmuseum.org/design/philip-worthington

[Idea Development] Tactile Shadow Animation

Brain Storming

Infection of Physical Information - By your hand, your brain gains lots of information.

How brain remembers? - Remembering can mean deliverying to long term memory. Ingemination will help.

Information infection - We are living in such a huge wave of information. In a basic of commercial way, the key is to win the war of memory.

Invisible - the interaction between an event and a person (brain) is invisible

Unconsciousness - media help the ingemination in the unconsciousness.



Shadowalk - interactive installation

"shadowalk uses the digitized shadows of passersby to create temporary, 2-dimensional, sculptures on the floor; it's meant for large groups to play with. by nathaniel stern, henry lam and margot jacobs"

Yoon: This is very like what I expect on my final piece. From my view it is tracing shadows and showing the "afterimages" of the participants (their hands). Making people's own art is a creative idea. However, they play individually. It looks like making a collaboration art but in fact they play by themself. I wish there were some interactive events between shadows.

Interactive Shadows - InteractionDesignLab

Yoon: This giant installation gives me an image of walking on the snow. Again, it uses the traces and the shadow triggers the moving sensor.



ACCESS - an interactive art installation by Marie Sester

"ACCESS is an an interactive installation that lets web users track anonymous individuals in public places, by pursuing them with a robotic spotlight and acoustic beam system.

Access Website: http://www.accessproject.net/
Access Credits: http://www.accessproject.net/credits...."

Yoon: This shows how fast and accurate the sensor can respond from the trigger. It looks very annoying (you cannot get rid of it!!) but the idea of spotlighting individuals is really great.

[Research] Arduino & Puredata

Arduino

"Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It's intended for artists, designers, hobbyists, and anyone interested in creating interactive objects or environments. "

http://www.arduino.cc/

Puredata

"Pd (aka Pure Data) is a real-time graphical programming environment for audio, video, and graphical processing. It is the third major branch of the family of patcher programming languages known as Max (Max/FTS, ISPW Max, Max/MSP, jMax, etc.) originally developed by Miller Puckette and company at IRCAM. The core of Pd is written and maintained by Miller Puckette and includes the work of many developers, making the whole package very much a community effort.."

http://puredata.info/

[Tutorial #1] Tool's Life (Plaplax, SONAR, 2007)

Title: Tool's Life @ SONAR 2007

Artist: "Japanese processing work by Tokyo-based Plaplax and their art subproject minim++ was recently shown at Tokyo’s ICC for their 10th anniversary. Now at SonarMàtica, the shadows of their “Tool’s Life” magically spring to life: Various metal items are placed on a table in a darkened room. A spotlight focuses on the table. When the objects are lightly touched, their shadows dance whimsically, while the objects themselves remain in place."

Post tutorial

The idea was not bad. The tactile animation instalation will be great in the show if there;

is an interesting story behind the installation. (do not make your art boring)

is a great research backing up the scenario. (something meaningful)

is a bit more complexity on the table. (more functions)

So,

I guess this means that I got the agreement.

hoooray.

Helpful Sourses

sifteo.com - siftables

alumini.media.mit.edu/

scenocosme.com

modusarts.org/

"puredata"