Medien Wiki - User contributions [en]

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T08:29:48Z

Yunbaby: /* Demonstration */

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

Here is the code running in Processing:
Main Tab:
<source lang="Java" line start= "1">
import netP5.*;
import oscP5.*;
import processing.video.*;

OscP5 osc;
NetAddress remote;
Movie myMovie;

int localport = 12000;
int remoteport = 1065;
boolean debug = true;

Sphere sphere1;

String skeleton1 = "LiQianqian";
String bone1 = "Root";
String bone2 = "LeftHand";
String bone3 = "RightHand";

int depth;

void setup() {
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov");
fullScreen(P3D);

sphere1 = new Sphere(1);

depth = width;

osc = new OscP5(this, localport);
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
setPort(localport);

plugBone(sphere1, skeleton1, bone1);
plugBone(sphere1, skeleton1, bone2);
plugBone(sphere1, skeleton1, bone3);

refreshSubscriptions();
}

void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
subscribeBone(skeleton1, bone2);
subscribeBone(skeleton1, bone3);
}

void movieEvent(Movie m) {
m.read();
}

void draw() {
sphere1.draw();

if (frameCount % 10 == 0) {
refreshSubscriptions();
}
}

void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}

void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}

void setPort(int port) {
OscMessage msg = new OscMessage("/configure/port");
msg.add(port);
osc.send(msg, remote);
}

void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector");
msg.add(50.0);
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote);
}
</source>

Sphere Tab:
<source lang="Java" line start= "10">
class Sphere {
float x, y, z;
float x1, y1, z1;
float x2, y2, z2;
float x3, y3, x4, y4;

float a, b, cc;
float a1, b1, cc1;
float a2, b2, cc2;
float a3, b3, a4, b4;

float d, e, f;
float d1, e1, f1;
float d2, e2, f2;
float d3, e3, d4, e4;

float speedChange, speedChange1, VideoSpeed;
int play;
color c;

int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}

int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}

int newFrame = 0;

Sphere( color c) {
this.c = c;
}

void draw() {
image(myMovie, 0, 0, width, height);

if(speedChange > 0.3 && getFrame() < 599){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 0) myMovie.play();

float newSpeed = map(speedChange1, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);

fill(255);
x4 = abs(x2 - x3);
y4 = abs(y2 - y3);
speedChange = abs(x4 - y4);
println(speedChange);
text("Root Speed: " + nfc(speedChange, 2) + "X", 10, 30);
x3 = x2;
y3 = y2;

speedChange1 = dist(a, b, cc, d, e, f);
text("Hand Distance: " + nfc(speedChange1, 2), 10, 50);

VideoSpeed = speedChange1*play;
text("VideoSpeed: " + nfc(VideoSpeed, 2) + "X", 10, 70);

text(getFrame() + " / " + (getLength() - 1), 10, 90);
}

public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);

x2 = abs(x - x1);
y2 = abs(y - y1);
z2 = abs(z - z1);

x1 = this.x;
y1 = this.y;
z1 = this.z;
}

public void updateLeftHand(float a, float b, float cc) {
this.a = map(a, 0, 100, -width/2, width/2);
this.b = map(b, -100, 100, -height/2, height/2);
this.cc = map(cc, 0, 100, 0, depth);

a2 = abs(a - a1);
b2 = abs(b - b1);
cc2 = abs(cc - cc1);

a1 = this.a;
b1 = this.b;
cc1 = this.cc;
}

public void updateRightHand(float d, float e, float f) {
this.d = map(d, 0, 100, -width/2, width/2);
this.e = map(e, -100, 100, -height/2, height/2);
this.f = map(f, 0, 100, 0, depth);

d2 = abs(d - d1);
e2 = abs(e - e1);
f2 = abs(f - f1);

d1 = this.d;
e1 = this.e;
f1 = this.f;
}
}
</source>

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demonstration''' ==
{{#ev:youtube|https://www.youtube.com/watch?v=Ns1VKddXT_w|1000|left|Wool's World|frame}}
 

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T08:29:09Z

Yunbaby:

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

Here is the code running in Processing:
Main Tab:
<source lang="Java" line start= "1">
import netP5.*;
import oscP5.*;
import processing.video.*;

OscP5 osc;
NetAddress remote;
Movie myMovie;

int localport = 12000;
int remoteport = 1065;
boolean debug = true;

Sphere sphere1;

String skeleton1 = "LiQianqian";
String bone1 = "Root";
String bone2 = "LeftHand";
String bone3 = "RightHand";

int depth;

void setup() {
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov");
fullScreen(P3D);

sphere1 = new Sphere(1);

depth = width;

osc = new OscP5(this, localport);
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
setPort(localport);

plugBone(sphere1, skeleton1, bone1);
plugBone(sphere1, skeleton1, bone2);
plugBone(sphere1, skeleton1, bone3);

refreshSubscriptions();
}

void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
subscribeBone(skeleton1, bone2);
subscribeBone(skeleton1, bone3);
}

void movieEvent(Movie m) {
m.read();
}

void draw() {
sphere1.draw();

if (frameCount % 10 == 0) {
refreshSubscriptions();
}
}

void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}

void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}

void setPort(int port) {
OscMessage msg = new OscMessage("/configure/port");
msg.add(port);
osc.send(msg, remote);
}

void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector");
msg.add(50.0);
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote);
}
</source>

Sphere Tab:
<source lang="Java" line start= "10">
class Sphere {
float x, y, z;
float x1, y1, z1;
float x2, y2, z2;
float x3, y3, x4, y4;

float a, b, cc;
float a1, b1, cc1;
float a2, b2, cc2;
float a3, b3, a4, b4;

float d, e, f;
float d1, e1, f1;
float d2, e2, f2;
float d3, e3, d4, e4;

float speedChange, speedChange1, VideoSpeed;
int play;
color c;

int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}

int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}

int newFrame = 0;

Sphere( color c) {
this.c = c;
}

void draw() {
image(myMovie, 0, 0, width, height);

if(speedChange > 0.3 && getFrame() < 599){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 0) myMovie.play();

float newSpeed = map(speedChange1, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);

fill(255);
x4 = abs(x2 - x3);
y4 = abs(y2 - y3);
speedChange = abs(x4 - y4);
println(speedChange);
text("Root Speed: " + nfc(speedChange, 2) + "X", 10, 30);
x3 = x2;
y3 = y2;

speedChange1 = dist(a, b, cc, d, e, f);
text("Hand Distance: " + nfc(speedChange1, 2), 10, 50);

VideoSpeed = speedChange1*play;
text("VideoSpeed: " + nfc(VideoSpeed, 2) + "X", 10, 70);

text(getFrame() + " / " + (getLength() - 1), 10, 90);
}

public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);

x2 = abs(x - x1);
y2 = abs(y - y1);
z2 = abs(z - z1);

x1 = this.x;
y1 = this.y;
z1 = this.z;
}

public void updateLeftHand(float a, float b, float cc) {
this.a = map(a, 0, 100, -width/2, width/2);
this.b = map(b, -100, 100, -height/2, height/2);
this.cc = map(cc, 0, 100, 0, depth);

a2 = abs(a - a1);
b2 = abs(b - b1);
cc2 = abs(cc - cc1);

a1 = this.a;
b1 = this.b;
cc1 = this.cc;
}

public void updateRightHand(float d, float e, float f) {
this.d = map(d, 0, 100, -width/2, width/2);
this.e = map(e, -100, 100, -height/2, height/2);
this.f = map(f, 0, 100, 0, depth);

d2 = abs(d - d1);
e2 = abs(e - e1);
f2 = abs(f - f1);

d1 = this.d;
e1 = this.e;
f1 = this.f;
}
}
</source>

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demonstration''' ==
{{#ev:youtube|https://www.youtube.com/watch?v=Ns1VKddXT_w|1000|right|Wool's World|frame}}
 

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T08:25:41Z

Yunbaby: /* Demonstration */

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

Here is the code running in Processing:
Main Tab:
<source lang="Java" line start= "1">
import netP5.*;
import oscP5.*;
import processing.video.*;

OscP5 osc;
NetAddress remote;
Movie myMovie;

int localport = 12000;
int remoteport = 1065;
boolean debug = true;

Sphere sphere1;

String skeleton1 = "LiQianqian";
String bone1 = "Root";
String bone2 = "LeftHand";
String bone3 = "RightHand";

int depth;

void setup() {
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov");
fullScreen(P3D);

sphere1 = new Sphere(1);

depth = width;

osc = new OscP5(this, localport);
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
setPort(localport);

plugBone(sphere1, skeleton1, bone1);
plugBone(sphere1, skeleton1, bone2);
plugBone(sphere1, skeleton1, bone3);

refreshSubscriptions();
}

void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
subscribeBone(skeleton1, bone2);
subscribeBone(skeleton1, bone3);
}

void movieEvent(Movie m) {
m.read();
}

void draw() {
sphere1.draw();

if (frameCount % 10 == 0) {
refreshSubscriptions();
}
}

void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}

void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}

void setPort(int port) {
OscMessage msg = new OscMessage("/configure/port");
msg.add(port);
osc.send(msg, remote);
}

void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector");
msg.add(50.0);
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote);
}
</source>

Sphere Tab:
<source lang="Java" line start= "10">
class Sphere {
float x, y, z;
float x1, y1, z1;
float x2, y2, z2;
float x3, y3, x4, y4;

float a, b, cc;
float a1, b1, cc1;
float a2, b2, cc2;
float a3, b3, a4, b4;

float d, e, f;
float d1, e1, f1;
float d2, e2, f2;
float d3, e3, d4, e4;

float speedChange, speedChange1, VideoSpeed;
int play;
color c;

int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}

int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}

int newFrame = 0;

Sphere( color c) {
this.c = c;
}

void draw() {
image(myMovie, 0, 0, width, height);

if(speedChange > 0.3 && getFrame() < 599){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 0) myMovie.play();

float newSpeed = map(speedChange1, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);

fill(255);
x4 = abs(x2 - x3);
y4 = abs(y2 - y3);
speedChange = abs(x4 - y4);
println(speedChange);
text("Root Speed: " + nfc(speedChange, 2) + "X", 10, 30);
x3 = x2;
y3 = y2;

speedChange1 = dist(a, b, cc, d, e, f);
text("Hand Distance: " + nfc(speedChange1, 2), 10, 50);

VideoSpeed = speedChange1*play;
text("VideoSpeed: " + nfc(VideoSpeed, 2) + "X", 10, 70);

text(getFrame() + " / " + (getLength() - 1), 10, 90);
}

public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);

x2 = abs(x - x1);
y2 = abs(y - y1);
z2 = abs(z - z1);

x1 = this.x;
y1 = this.y;
z1 = this.z;
}

public void updateLeftHand(float a, float b, float cc) {
this.a = map(a, 0, 100, -width/2, width/2);
this.b = map(b, -100, 100, -height/2, height/2);
this.cc = map(cc, 0, 100, 0, depth);

a2 = abs(a - a1);
b2 = abs(b - b1);
cc2 = abs(cc - cc1);

a1 = this.a;
b1 = this.b;
cc1 = this.cc;
}

public void updateRightHand(float d, float e, float f) {
this.d = map(d, 0, 100, -width/2, width/2);
this.e = map(e, -100, 100, -height/2, height/2);
this.f = map(f, 0, 100, 0, depth);

d2 = abs(d - d1);
e2 = abs(e - e1);
f2 = abs(f - f1);

d1 = this.d;
e1 = this.e;
f1 = this.f;
}
}
</source>

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demonstration''' ==

{{#ev:youtube|https://www.youtube.com/watch?v=Ns1VKddXT_w|1000|right|Wool's World|frame}}

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T07:16:28Z

Yunbaby: /* Demonstration */

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

Here is the code running in Processing:
Main Tab:
<source lang="Java" line start= "1">
import netP5.*;
import oscP5.*;
import processing.video.*;

OscP5 osc;
NetAddress remote;
Movie myMovie;

int localport = 12000;
int remoteport = 1065;
boolean debug = true;

Sphere sphere1;

String skeleton1 = "LiQianqian";
String bone1 = "Root";
String bone2 = "LeftHand";
String bone3 = "RightHand";

int depth;

void setup() {
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov");
fullScreen(P3D);

sphere1 = new Sphere(1);

depth = width;

osc = new OscP5(this, localport);
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
setPort(localport);

plugBone(sphere1, skeleton1, bone1);
plugBone(sphere1, skeleton1, bone2);
plugBone(sphere1, skeleton1, bone3);

refreshSubscriptions();
}

void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
subscribeBone(skeleton1, bone2);
subscribeBone(skeleton1, bone3);
}

void movieEvent(Movie m) {
m.read();
}

void draw() {
sphere1.draw();

if (frameCount % 10 == 0) {
refreshSubscriptions();
}
}

void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}

void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}

void setPort(int port) {
OscMessage msg = new OscMessage("/configure/port");
msg.add(port);
osc.send(msg, remote);
}

void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector");
msg.add(50.0);
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote);
}
</source>

Sphere Tab:
<source lang="Java" line start= "10">
class Sphere {
float x, y, z;
float x1, y1, z1;
float x2, y2, z2;
float x3, y3, x4, y4;

float a, b, cc;
float a1, b1, cc1;
float a2, b2, cc2;
float a3, b3, a4, b4;

float d, e, f;
float d1, e1, f1;
float d2, e2, f2;
float d3, e3, d4, e4;

float speedChange, speedChange1, VideoSpeed;
int play;
color c;

int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}

int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}

int newFrame = 0;

Sphere( color c) {
this.c = c;
}

void draw() {
image(myMovie, 0, 0, width, height);

if(speedChange > 0.3 && getFrame() < 599){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 0) myMovie.play();

float newSpeed = map(speedChange1, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);

fill(255);
x4 = abs(x2 - x3);
y4 = abs(y2 - y3);
speedChange = abs(x4 - y4);
println(speedChange);
text("Root Speed: " + nfc(speedChange, 2) + "X", 10, 30);
x3 = x2;
y3 = y2;

speedChange1 = dist(a, b, cc, d, e, f);
text("Hand Distance: " + nfc(speedChange1, 2), 10, 50);

VideoSpeed = speedChange1*play;
text("VideoSpeed: " + nfc(VideoSpeed, 2) + "X", 10, 70);

text(getFrame() + " / " + (getLength() - 1), 10, 90);
}

public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);

x2 = abs(x - x1);
y2 = abs(y - y1);
z2 = abs(z - z1);

x1 = this.x;
y1 = this.y;
z1 = this.z;
}

public void updateLeftHand(float a, float b, float cc) {
this.a = map(a, 0, 100, -width/2, width/2);
this.b = map(b, -100, 100, -height/2, height/2);
this.cc = map(cc, 0, 100, 0, depth);

a2 = abs(a - a1);
b2 = abs(b - b1);
cc2 = abs(cc - cc1);

a1 = this.a;
b1 = this.b;
cc1 = this.cc;
}

public void updateRightHand(float d, float e, float f) {
this.d = map(d, 0, 100, -width/2, width/2);
this.e = map(e, -100, 100, -height/2, height/2);
this.f = map(f, 0, 100, 0, depth);

d2 = abs(d - d1);
e2 = abs(e - e1);
f2 = abs(f - f1);

d1 = this.d;
e1 = this.e;
f1 = this.f;
}
}
</source>

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demonstration''' ==

{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|1000|right|Wool's World|frame}}

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Digital Puppetry Lab/Group A Midsummer Night's Dream

2016-09-13T07:13:01Z

Yunbaby: /* Demonstration */

== A Midsummer Night's Dream==

Group work by '''Liu Yun''' & '''Li Qianqian''' & '''Fan Xiangzhen''' & '''Wu Junyuan''' & '''Tan Yuxin'''

== Introduction ==

Have you ever looked at the moon with the breeze at night? Have you ever heard the harmony of the birds and frogs? Do you remember the wonderful summer nights?
We just want to give you a midsummer night's dream.
This project is based on processing with the face detection and data collection, and then send the data message into the MaxMsp. We divide four regions in MaxMsp. The various sounds you hear will change according to your different position. In addition, in the unity we tried to establish a vivid picture of summer. Imagine that grass is moving with the wind in a beautiful moonlight accompanied by bursts of sounds of insects. Let`s enjoy a summer dream together.

== Diagram ==

[[File:FLowDiagram.jpg]]

== Demonstration ==
{{#ev:youtube|https://www.youtube.com/watch?v=CroYcuakmjM|1000|left|A Midsummer Night's Dream|frame}}
[https://www.youtube.com/watch?v=CroYcuakmjM '''Demonstration Viedo''']

[[File:Demo1.jpg]]

[[File:Demo2.jpg]]

== Appendix ==

[[File:FaceDetectionOutput.jpg|left]]
'''Data Input:''' 
· Getting data (the position X and Y of the center of face and the size of face) by face detection 
· Sending data from processing to Max/Msp by OSC 
· Another processing file sending the same data to Unity by using different port 
 

[[File:ProcessingToMaxMsp.jpg|left]]
'''Data Transfer:''' 
· Receiving data from processing by OSC 
· Only keeping number from the message by using 'zl slice' 
· Dividing number into three usable data by using 'unpack' 
· Sending data separately from Yun's laptop to Xiangzhen's laptop in Max/Msp by OSC 
 

[[File:SoundEffect&BG.jpg|left]]
'''Audio Output:''' 
· Receiving data from Yun's Max/Msp by OSC 
· Control volumes of 4 corner's sound effects by building different functions with data received 
 

[[File:ProcessingToUnity.jpg|left]]
'''Data Using in Unity:''' 
· Receiving data from processing by OSC 
· Dealing with function call between js and C# file 
· Using 'x' and 'y' data sent by Yun's laptop to control the quaternion of the camera 
· Connect TUIO app with Laptop 
 

[[File:TuioPad.jpg|left]][[File:ScreenTouch.jpg]]
'''Data Getting by phone:''' 
· Using the app TuioPad to get screen touch data by phone 
 

[[File:UnityTerrain.jpg|left]]
'''Terrain Creation and Particular System in Unity:''' 
· Build a terrain -- tree (5 styles) --build grass --adjust parameters 
· Create skybox, light environment, windzone 
· Create glow warm and falling leaves particle system 
 

[[File:scripts_1.jpg|left]]
''Scripts_1:''' 
· Refer to unity asset "firstcharactorcontroller" 
· Variable definitions 
· Initializing the transform of camera 
· Getting data from osc 
 

[[File:scripts_3.jpg|left]]
''Scripts_2:''' 
· Set the range of data 
· Using function of Quaternion to change rotation of the camera

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-09-13T07:11:22Z

Yunbaby: /* Demonstration */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
This video is about a 3D Chinese Knot tied from loose to tight. The 3D animation is made by 3DS MAX. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
[[Image:CapturyAxis2.png|thumb|left|Diagram]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
{{#ev:youtube|https://www.youtube.com/watch?v=dufgDEGYieY|1000|left|Demonstration Video of Controlling the Video in Processing with Captury|frame}}
[https://www.youtube.com/watch?v=dufgDEGYieY Demonstration Video of Controlling the Video in Processing with Captury]

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T07:07:36Z

Yunbaby: /* Demo */

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

Here is the code running in Processing:
Main Tab:
<source lang="Java" line start= "1">
import netP5.*;
import oscP5.*;
import processing.video.*;

OscP5 osc;
NetAddress remote;
Movie myMovie;

int localport = 12000;
int remoteport = 1065;
boolean debug = true;

Sphere sphere1;

String skeleton1 = "LiQianqian";
String bone1 = "Root";
String bone2 = "LeftHand";
String bone3 = "RightHand";

int depth;

void setup() {
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov");
fullScreen(P3D);

sphere1 = new Sphere(1);

depth = width;

osc = new OscP5(this, localport);
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
setPort(localport);

plugBone(sphere1, skeleton1, bone1);
plugBone(sphere1, skeleton1, bone2);
plugBone(sphere1, skeleton1, bone3);

refreshSubscriptions();
}

void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
subscribeBone(skeleton1, bone2);
subscribeBone(skeleton1, bone3);
}

void movieEvent(Movie m) {
m.read();
}

void draw() {
sphere1.draw();

if (frameCount % 10 == 0) {
refreshSubscriptions();
}
}

void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}

void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}

void setPort(int port) {
OscMessage msg = new OscMessage("/configure/port");
msg.add(port);
osc.send(msg, remote);
}

void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector");
msg.add(50.0);
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote);
}
</source>

Sphere Tab:
<source lang="Java" line start= "10">
class Sphere {
float x, y, z;
float x1, y1, z1;
float x2, y2, z2;
float x3, y3, x4, y4;

float a, b, cc;
float a1, b1, cc1;
float a2, b2, cc2;
float a3, b3, a4, b4;

float d, e, f;
float d1, e1, f1;
float d2, e2, f2;
float d3, e3, d4, e4;

float speedChange, speedChange1, VideoSpeed;
int play;
color c;

int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}

int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}

int newFrame = 0;

Sphere( color c) {
this.c = c;
}

void draw() {
image(myMovie, 0, 0, width, height);

if(speedChange > 0.3 && getFrame() < 599){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 0) myMovie.play();

float newSpeed = map(speedChange1, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);

fill(255);
x4 = abs(x2 - x3);
y4 = abs(y2 - y3);
speedChange = abs(x4 - y4);
println(speedChange);
text("Root Speed: " + nfc(speedChange, 2) + "X", 10, 30);
x3 = x2;
y3 = y2;

speedChange1 = dist(a, b, cc, d, e, f);
text("Hand Distance: " + nfc(speedChange1, 2), 10, 50);

VideoSpeed = speedChange1*play;
text("VideoSpeed: " + nfc(VideoSpeed, 2) + "X", 10, 70);

text(getFrame() + " / " + (getLength() - 1), 10, 90);
}

public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);

x2 = abs(x - x1);
y2 = abs(y - y1);
z2 = abs(z - z1);

x1 = this.x;
y1 = this.y;
z1 = this.z;
}

public void updateLeftHand(float a, float b, float cc) {
this.a = map(a, 0, 100, -width/2, width/2);
this.b = map(b, -100, 100, -height/2, height/2);
this.cc = map(cc, 0, 100, 0, depth);

a2 = abs(a - a1);
b2 = abs(b - b1);
cc2 = abs(cc - cc1);

a1 = this.a;
b1 = this.b;
cc1 = this.cc;
}

public void updateRightHand(float d, float e, float f) {
this.d = map(d, 0, 100, -width/2, width/2);
this.e = map(e, -100, 100, -height/2, height/2);
this.f = map(f, 0, 100, 0, depth);

d2 = abs(d - d1);
e2 = abs(e - e1);
f2 = abs(f - f1);

d1 = this.d;
e1 = this.e;
f1 = this.f;
}
}
</source>

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demonstration''' ==

{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|1000|right|Chinese Knot Interaction|frame}}

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T04:14:08Z

Yunbaby:

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

Here is the code running in Processing:
Main Tab:
<source lang="Java" line start= "1">
import netP5.*;
import oscP5.*;
import processing.video.*;

OscP5 osc;
NetAddress remote;
Movie myMovie;

int localport = 12000;
int remoteport = 1065;
boolean debug = true;

Sphere sphere1;

String skeleton1 = "LiQianqian";
String bone1 = "Root";
String bone2 = "LeftHand";
String bone3 = "RightHand";

int depth;

void setup() {
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov");
fullScreen(P3D);

sphere1 = new Sphere(1);

depth = width;

osc = new OscP5(this, localport);
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
setPort(localport);

plugBone(sphere1, skeleton1, bone1);
plugBone(sphere1, skeleton1, bone2);
plugBone(sphere1, skeleton1, bone3);

refreshSubscriptions();
}

void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
subscribeBone(skeleton1, bone2);
subscribeBone(skeleton1, bone3);
}

void movieEvent(Movie m) {
m.read();
}

void draw() {
sphere1.draw();

if (frameCount % 10 == 0) {
refreshSubscriptions();
}
}

void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}

void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}

void setPort(int port) {
OscMessage msg = new OscMessage("/configure/port");
msg.add(port);
osc.send(msg, remote);
}

void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector");
msg.add(50.0);
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote);
}
</source>

Sphere Tab:
<source lang="Java" line start= "10">
class Sphere {
float x, y, z;
float x1, y1, z1;
float x2, y2, z2;
float x3, y3, x4, y4;

float a, b, cc;
float a1, b1, cc1;
float a2, b2, cc2;
float a3, b3, a4, b4;

float d, e, f;
float d1, e1, f1;
float d2, e2, f2;
float d3, e3, d4, e4;

float speedChange, speedChange1, VideoSpeed;
int play;
color c;

int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}

int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}

int newFrame = 0;

Sphere( color c) {
this.c = c;
}

void draw() {
image(myMovie, 0, 0, width, height);

if(speedChange > 0.3 && getFrame() < 599){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 0) myMovie.play();

float newSpeed = map(speedChange1, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);

fill(255);
x4 = abs(x2 - x3);
y4 = abs(y2 - y3);
speedChange = abs(x4 - y4);
println(speedChange);
text("Root Speed: " + nfc(speedChange, 2) + "X", 10, 30);
x3 = x2;
y3 = y2;

speedChange1 = dist(a, b, cc, d, e, f);
text("Hand Distance: " + nfc(speedChange1, 2), 10, 50);

VideoSpeed = speedChange1*play;
text("VideoSpeed: " + nfc(VideoSpeed, 2) + "X", 10, 70);

text(getFrame() + " / " + (getLength() - 1), 10, 90);
}

public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);

x2 = abs(x - x1);
y2 = abs(y - y1);
z2 = abs(z - z1);

x1 = this.x;
y1 = this.y;
z1 = this.z;
}

public void updateLeftHand(float a, float b, float cc) {
this.a = map(a, 0, 100, -width/2, width/2);
this.b = map(b, -100, 100, -height/2, height/2);
this.cc = map(cc, 0, 100, 0, depth);

a2 = abs(a - a1);
b2 = abs(b - b1);
cc2 = abs(cc - cc1);

a1 = this.a;
b1 = this.b;
cc1 = this.cc;
}

public void updateRightHand(float d, float e, float f) {
this.d = map(d, 0, 100, -width/2, width/2);
this.e = map(e, -100, 100, -height/2, height/2);
this.f = map(f, 0, 100, 0, depth);

d2 = abs(d - d1);
e2 = abs(e - e1);
f2 = abs(f - f1);

d1 = this.d;
e1 = this.e;
f1 = this.f;
}
}
</source>

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demo''' ==

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T04:04:10Z

Yunbaby: /* Summary */

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demo''' ==

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people. 
It was a pity that the Captury didn't work well that day because of the update. We could only show the screen interaction part with play back video of the Captury and the live capture video shot before to explain to every participant. If it work, the interactivity will definitely be more meaningful and interesting.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T03:56:38Z

Yunbaby: /* Summary */

== '''WOOL'S WORLD'''==

Group Project by
'''Yun Liu''' | '''Xiangzhen Fan''' | '''Qianqian Li'''

== '''Basic Idea''' ==

As growing in the society, people can't avoid setting up the relationships with others and the relationship will become more complex and extensive.
Some people become more mess when they rush to solidify the relationship, while others choose become indifferent and even no longer social with people, which make them gradually derailment with society.
We do not want to defined it how to deal with it is totally exactly. We turn the relations visualized and let the users to feel their relationship with others in the society, looking directly at it, make himself balance. We aim to help people to find a balance of dealing with the interpersonal relationship, try to find a way to perspective on this relationship.

For this project, we'd like to use the wool as the theme. In China, the word 'WOOL (毛mao线xian)' will be used to describe complex relationships, because it is 'shear continuously, manage to return disorderly'.

== '''Design''' | Interaction with Screen ==
The user will see a representative image of him on the screen, many fine lines around on it. The thin lines are a kind of metaphor of the complex relationships in the society. 
[[File:Diagram_2.jpg|thumb|left|300px|Original Diagram]]
[[File:Lines.jpg|thumb|none|300px|Original Graphic Design]]
 

If the user stood there motionless, lines will disappear slowly and weak, and the user will disappear on the end. It means that if you do not take care of interpersonal relationships, the relationship will not get clearer, only would make themselves out of touch with the community.
[[File:Moving.jpg|thumb|left|300px|Various relationship in the society]]
 
[[File:Standing.jpg|thumb|left|300px|Keep balance in the society]]
[[File:Static.jpg|thumb|none|300px|Cut off from society]]
 

If users try to clear the lines by doing actions quickly and aimlessly, those lines will be more and more disorderly which would turn into a mess. This shows that if you are too eager to sort it out in a rush and expand relationships, not only will make the relationship more chaotic, but also separated from the real contact with others.
[[File:Mess.jpg|thumb|left|300px|Mess with all the relationships]]
 

== '''Design''' | Interaction with Objects ==

Using different forms of wool represent various relationships in the modern society.

[[File:ObjectOverview.jpg|thumb|left|300px|Object Diagram]]
 

'''Plumb Line'''

Nowadays, people sometimes know each other just by coincidence. Some people feel attracted to each other, but some just pass by in your life.
We'd like to hang many plumb woolen lines with photocell and vibration sensor in the space. If two or more than two people holding the end of the woolen line at the same time, they will feel the vibrations. It likes the meeting between each other. We also thinking about using Pulse Sensor to control the strength of the vibration, that people will feel different feedback by themselves. This also stands for different relationships, some are close and some are estranged.

[[File:Overview2.jpg|thumb|left|300px|Object Diagram]]
[[File:WoolSensor.jpg|thumb|right|500px|Plumb Line with Sensors]]
 

'''Mystic Box'''

More and more media appear in the modern society, people take the initiative to establish a wide range of contacts with others through the media. Actually，this box in our interaction design means the media. It is a collection of many different colors of wool. The user can choose a yarn and try to pull it.
However, there are many possibilities represent the development trends of different relationships.
For example, one line is pulled up, but there is no change, which similar to the result of the failed social.
While two lines are pulled up, and found that it was the same root rope. This implies that the two people have established a connection through the media.
But this connection is not stabled, there is another possibility that when you pull away from long distance or forced over, the line will be broken. It shows that interpersonal relationship should maintain a more healthy and reasonable distance，a good way could help people to make the relationship stable.

[[File:Box.jpg|thumb|left|500px|Object Diagram]]
 

== '''Installation''' ==

'''Interaction with Screen'''

At the beginning of the installation, we decided to replace those colorful fine lines with a 3D Chinese knot, which is designed with one line and very expressive in shape. On the other hand, a complex knot could also become a metaphor to describe a human being with complex relationships in his/her life.
So we would like to use a Chinese knot as a representation of user on the screen. User can control the knot with his/her movement. If user move quickly or keeping doing gestures, the knot will get very tight which means those relationships cannot be get rid of easily. If user just stay put and do nothing, the knot will get more and more loose. And during the whole interaction, the position of knot is consistent with user.

[[File:ChineseKnot.jpg|thumb|left|500px|3D Chinese knot]]
 

During the process of installation, the biggest problem we met is how to stimulate the 3D Chinese knot in real-time. We have explored methods online and obtained with few proper answers. Finally we decided to use a pre-made animation of 3D Chinese knot instead of a stimulation in real-time. The speed of playing fast forward or rewind the animation is related with the changing rate of user's movement. The faster user move on, the faster the animation will be played on, vice versa.

[[File:ChineseKnotTight.jpg|thumb|left|450px|Chinese knot get tight]]
[[File:ChineseKnotLoose.jpg|thumb|right|450px|Chinese knot get loose]]
 

The user is captured by the tracking system in real-time, and the related data of his/her movement will be sent to the Processing which control the play of the animation we made.

[[File:ChineseKnotDemo.jpg|thumb|left|500px|Chinese knot demo]]
 

'''Interaction with Objects'''

We finally decided to use the photocell sensor and vibration motor to build a plumb line. Each line is wrapped with red wools and tied as a handle. The sensor and motor are connected to the Arduino Uno which is running on a laptop.

Here is the code running in Arduino:
<source lang="Java" line start= "1">

int photocellPin = 0; // the cell and 10K pulldown are connected to A0
int photocellPin1 = 1; // the cell and 10K pulldown are connected to A1
int photocellReading, photocellReading1; // the analog reading from the sensor divider

void setup() { // We'll send debugging information via the Serial monitor
Serial.begin(9600);
pinMode(3, OUTPUT);
pinMode(5, OUTPUT);
}

void loop(void) {
photocellReading = analogRead(photocellPin);
photocellReading1 = analogRead(photocellPin1);

if(photocellReading < 400 && photocellReading1 < 400 ){
digitalWrite(3, HIGH);
digitalWrite(5, HIGH);
delay(100);
}

else {
digitalWrite(3, LOW);
digitalWrite(5, LOW);
delay(100);
}

Serial.print("Analog reading1 = ");
Serial.println(photocellReading); // the raw analog reading1
Serial.print("Analog reading2 = ");
Serial.println(photocellReading1); // the raw analog reading2
Serial.println(" ");

delay(10);
}
</source>

== '''Demo''' ==

== '''Summary''' ==
On the 16th of July, Wool's World exhibited in Digital Lab. We played the PPT about the introduction of Wool's World on the video wall when we arranged the exhibition. The red object handles and all the plumb lines with different length hung from the top. The mystic box covered by black wool felt with knitted woolen lines set in the center of the platform. It's glad that all the participants had a good experience when they tried the object handles, especially felt the vibration of the handles. For sure, if we can do more interactive handles, it will be more interested for lots of people.
It was a pity that the Captury didn't work well that day because of the update. We just showed the screen interaction part with play back video and the live capture video shot before and then explained it to every participant.
[[File:Summary01.jpg|thumb|left|1000px|Wool's World]]
[[File:Summary02.jpg|thumb|left|450px|Plumb Line]]
[[File:Summary03.jpg|thumb|right|450px|Mystic Box]]
[[File:Summary04.jpg|thumb|left|450px|Summary]]
[[File:Summary05.jpg|thumb|right|450px|Summary]]
 

== '''Conclusion''' ==
In the design process of our work, the interactive elements set up complete connected to our theme. We hope that the user can realize the vivid state of human relationship by this work, and can control and influence it through their own movement, eventually reach the self-sustainability. After many investigations and relevant data studying, finally we found that the "rope" can be maximum physical and poetic simulate the "relationship". Further, we developed the simple rope to the Chinese knot. Chinese knot represents a kind of harmony and good will, which is very similar to the interpersonal relationships we pursue. At the same time, based on the interaction of the screen, we increased the physical interaction part in same style. A wide variety of wools also represent the complicated interpersonal relationship, and multiplayer interaction device allows users to experience the different results of interpersonal communication directly. We hoped that we could give the users the experience of all aspects.

However, we must admit that there are many regrets. For example, in the original design, we wanted to simulate the process of tie the knot through 3D technology and interact with users in real-time. But unfortunately, because of our technical level is very limited, the time is not abundant，we decided to use the knot animation to be controlled by user`s movement after discussion. Very fortunately, finally we display very well. The Feedback from users who played the device is also satisfactory. Overall, we achieve the expected effect.

== '''Expectation''' ==
Art is very independent and personalized. Each user can obtain different experience in our interactive device. Therefore, when design the project, we should prepare more comprehensive investigation and analysis in the early, it can make the project more perfect. At the same time, in terms of technology, we believe it is possible that when we have higher technical ability to complete process of tie the Chinese knot through 3D technology, it will be more striking and have more artistic effect. It is worth mentioning that the Chinese elements in our work are also very unique. In the future, we hope that we can integrate a variety of different countries and regional cultural elements, which will increase more possibility in our design.

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T03:38:27Z

Yunbaby: /* Summary */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T02:03:14Z

Yunbaby: /* Summary */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-13T02:01:39Z

Yunbaby: /* Summary */

File:Summary05.jpg

2016-09-13T02:01:08Z

Yunbaby:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Summary04.jpg

2016-09-13T01:59:36Z

Yunbaby:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Summary03.jpg

2016-09-12T04:59:09Z

Yunbaby:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Summary02.jpg

2016-09-12T04:47:18Z

Yunbaby:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:Summary01.jpg

2016-09-12T04:44:38Z

Yunbaby:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-12T04:40:45Z

Yunbaby: /* Summary */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-12T04:34:20Z

Yunbaby:

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-12T03:28:04Z

Yunbaby: /* Design | Interaction with Screen */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-08T08:43:44Z

Yunbaby: /* Design | Interaction with Objects */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-08T08:33:36Z

Yunbaby: /* Design | Interaction with Screen */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-08T08:27:01Z

Yunbaby: /* Design | Interaction with Screen */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-08T08:07:33Z

Yunbaby: /* Design | Interaction with Screen */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-08T07:33:58Z

Yunbaby: /* Design | Interaction with Screen */

GMU:Human and Nonhuman Performances II SS16/Group FLL

2016-09-08T07:30:26Z

Yunbaby:

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-30T16:21:33Z

Yunbaby: /* Demonstration */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
This video is about a 3D Chinese Knot tied from loose to tight. The 3D animation is made by 3DS MAX. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
[[Image:CapturyAxis2.png|thumb|left|Diagram]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[https://www.youtube.com/watch?v=dufgDEGYieY Demonstration Video of Controlling the Video in Processing with Captury]

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-30T14:35:09Z

Yunbaby: /* Control The Video By Processing */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
This video is about a 3D Chinese Knot tied from loose to tight. The 3D animation is made by 3DS MAX. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
[[Image:CapturyAxis2.png|thumb|left|Diagram]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[http://www.example.com Demonstration Video of Controlling the Video in Processing with Captury]

File:CapturyAxis2.png

2016-07-29T18:59:04Z

Yunbaby:

== Summary ==

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-29T18:58:50Z

Yunbaby: /* Control The Video By Processing */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
[[Image:CapturyAxis2.png|thumb|left|Diagram]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[http://www.example.com Demonstration Video of Controlling the Video in Processing with Captury]

File:CapturyAxis.png

2016-07-29T18:57:16Z

Yunbaby: uploaded a new version of "File:CapturyAxis.png": Reverted to version as of 00:13, 29 July 2016

== Summary ==
Axis related with Captury and Performance Platform.

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:CapturyAxis.png

2016-07-29T18:48:05Z

Yunbaby: uploaded a new version of "File:CapturyAxis.png"

== Summary ==
Axis related with Captury and Performance Platform.

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:CapturyAxis.png

2016-07-29T18:47:08Z

Yunbaby: uploaded a new version of "File:CapturyAxis.png"

== Summary ==
Axis related with Captury and Performance Platform.

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:DataReceive Capture.png

2016-07-29T00:53:52Z

Yunbaby: uploaded a new version of "File:DataReceive Capture.png"

== Summary ==
Data received in the Captury.
Screenshot of the Captury
== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-29T00:30:49Z

Yunbaby: /* Let's Enjoy The Example File */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[http://www.example.com Demonstration Video of Controlling the Video in Processing with Captury]

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-29T00:30:37Z

Yunbaby: /* Demonstration */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[http://www.example.com Demonstration Video of Controlling the Video in Processing with Captury]

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-29T00:29:40Z

Yunbaby: /* Demonstration */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[http://www.example.com Controlling the Video in Processing with Captury]

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-29T00:29:20Z

Yunbaby:

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
 

*Using position x as the condition. If user stand in the center of the platform, the speed will be slowest. The farther away from the center user stand, the faster the movie play.
*Using position y as the condition. If user stand at the side close to the Video Wall, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(x < -50 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

float newSpeed = map(abs(y)/10, 0, 150, 0*play, 2*play); //abs() to have absolute position value
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File ==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

== Demonstration ==
[http://www.example.com link Controlling the Video in Processing with Captury]

File:CapturyAxis.png

2016-07-29T00:14:53Z

Yunbaby: /* Summary */

== Summary ==
Axis related with Captury and Performance Platform.

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:CapturyAxis.png

2016-07-29T00:13:57Z

Yunbaby: Axis related in Captury.

== Summary ==
Axis related in Captury.
== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-29T00:13:16Z

Yunbaby:

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:
[[Image:CapturyAxis.png|thumb|left|Coordinate Axis of the Performance Platform]]
 
*Using position x as the condition. If user stand at the left edge, the speed will be slowest. The righter user stand, the faster the movie play.
*Using position y as the condition. If user stand close to the platform, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(y > 200 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 1) myMovie.play();

float newSpeed = map(x, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-28T23:53:13Z

Yunbaby: /* Control The Video By Processing */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using position values to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*First thing to know is about the relationship between coordinate axis in the Captury and the Performance Platform. Here is the diagram:

*Using position x as the condition. If user stand at the left edge, the speed will be slowest. The righter user stand, the faster the movie play.
*Using position y as the condition. If user stand close to the platform, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(y > 200 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 1) myMovie.play();

float newSpeed = map(x, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-28T23:47:23Z

Yunbaby: /* Use The Data From The Captury In Processing */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LS's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "50">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using a single value (position x) to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*Using position x as the condition. If user stand at the left edge, the speed will be slowest. The righter user stand, the faster the movie play.
*Using position y as the condition. If user stand close to the platform, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(y > 200 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 1) myMovie.play();

float newSpeed = map(x, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

File:DataReceive.png

2016-07-28T23:44:54Z

Yunbaby: /* Summary */

== Summary ==
Data received in Processing.
Screenshot of Processing.

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:DataReceive Capture.png

2016-07-28T23:44:29Z

Yunbaby: Data received in the Captury. Screenshot of the Captury

== Summary ==
Data received in the Captury.
Screenshot of the Captury
== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

GMU:Tutorials/Networking/Controlling Processing with The Captury

2016-07-28T23:43:40Z

Yunbaby: /* Use The Data From The Captury In Processing */

== Introduction ==
Processing is usually used for the electronic arts, new media art and visual design. 
If you want to have a creative work in processing with Captury, you need to receive the OSC messages from the Captury and then use the data as the variable. 
This includes OSC with Processing and an example of controlling the video in Processing with Captury. 
Follow this Step by Step tutorial for using PROCESSING to play the VIDEO with CAPTURY!

== Tips Before Beginning ==
*In this tutorial, you will see how to use a '''single value''' getting from the Captury to control processing. For further processed data, referencing the tutorial by Qianqian Li: [https://www.uni-weimar.de/medien/wiki/GMU:Tutorials/Performance_Platform/Measuring_Motion_with_Processing Measuring Motion with Processing]

*Before the coding in Processing, make sure that the following libraries have been installed: ''Sketch > Import Library > Add Library''
**'''oscP5''': An Open Sound Control (OSC) implementation
**'''Video''': GStreamer-based video library for Processing

*Prepare the video with a '''high resolution''' that can be showed on the video wall well. Because the change of the play speed, the video need a '''high frame rate''' to play fluently even with low speed. Here is the information about the video used here as the example:
**Format: .mov (H.264 Codec)
**Resolution: 1920*1280 px
**Length: 10s
**Frame Rate: 60 FPS
**Frame: 0~599

== Use The Data From The Captury In Processing ==
Data sending and receiving between the Captury and Processing over a network connection require OSC (Open Sound Control) protocol. The following is the anatomy of OSC in Processing. 
 
'''PART 01 – Connect the Captury and Processing'''
*To build a connection between the Captury and Processing, you need to define port number. This could basically any number, and using a 4- or 5-digit number to stay out of the range of most common ports.
<source lang="Java" line start= "18">
int localport = 12000;
int remoteport = 1065; //Port number the Captury used to send messages
</source>
[[Image:remotePort.png|thumb|left|Port for the Captury to Send Messages]]
 

*Start oscP5, listening for incoming messages at local port.
<source lang="Java" line start= "45">
osc = new OscP5(this, localport);
</source>

*Remote is a NetAddress, which includes an IP address and a port number. Here it used as parameter to sending OSC messages back to the Capury.
<source lang="Java" line start= "46">
remote = new NetAddress("kosmos.medien.uni-weimar.de", remoteport);
</source>

'''PART 02 – Receive data from the Captury'''
*Inform Processing the name of the skeleton and the bone in use. Remember to rename your own skeleton to tell the difference from the other.
<source lang="Java" line start= "25">
String skeleton1 = "LS"; //Skeleton name same with the Captury
String bone1 = "Root"; //The bone in use
</source>
[[Image:SkeletonBoneName.png|thumb|left|Name of Skeleton and Bone]]
 

*Incoming OSC messages are forwarded to the oscEvent method and this function runs every time you receive data. Print the Address Pattern and the Typetag of the received OSC messages in the console.
**Address Pattern is used to differentiate between different messages you are sending on one port. Here to differentiate between different bones and skeletons.
**Typetag is used to define what the data type is. For the data of position x, y, z receiving from the Captury, they are all float 32 type and will be showed in console as 'f' ('i' for int 32, 's' for OSC-string, 'b' for OSC-blob, etc.)
<source lang="Java" line start= "78">
void oscEvent(OscMessage msg) {
if(debug) {
print("### received an osc message.");
print(" addrpattern: "+msg.addrPattern());
println(" typetag: "+msg.typetag());
}
}
</source>
[[Image:DataReceive.png|thumb|left|Data Received in Processing]]
 

*To make sure that all the bones in use are available and refresh them every second or so. And send the message back to the Captury.
<source lang="Java" line start= "58">
void refreshSubscriptions() {
subscribeBone(skeleton1, bone1);
}
</source>

<source lang="Java" line start= "71">
if (frameCount % 10 == 0) {
refreshSubscriptions();
}
</source>

<source lang="Java" line start= "103">
void subscribeBone(String skeletonId, String bone) {
OscMessage msg = new OscMessage("/subscribe/" + skeletonId + "/blender/" + bone + "/vector"); //Create OSC message
msg.add(50.0); //Add a float to the OSC message
msg.add(0.0);
msg.add(100.0);
osc.send(msg, remote); //Send the message
}
</source>
[[Image:DataReceive_Capture.png|thumb|left|Data Received in the Captury]]
 

'''PART 03 – Pass data to the object'''
*Define a function to plug a specific bone to a object.
<source lang="Java" line start= "88">
void plugBone(Object target, String skeleton, String bone) {
String path = "/" + skeleton + "/blender/" + bone + "/vector";
osc.plug(target, "update" + bone, path);
}
</source>

*Declare and construct a object (sphere) from the class Sphere, which is the receiver of the data.
<source lang="Java" line start= "22">
Sphere sphere1;
</source>
<source lang="Java" line start= "40">
sphere1 = new Sphere(1);
</source>
<source lang="Java" line start= "68">
sphere1.draw();
</source>

*Use plugBone function to pass position data of LiQianqian's Root bone to the sphere object
<source lang="Java" line start= "50">
plugBone(sphere1, skeleton1, bone1);
</source>

'''PART 04 – Use the data as a variable'''
*In the class Sphere, define the float variable for the position of the sphere.
<source lang="Java" line start= "3">
float x, y, z;
</source>

*Update the position of the root node. This function will be plugged to OSC.
<source lang="Java" line start= "48">
public void updateRoot(float x, float y, float z) {
this.x = map(x, 0, 100, -width/2, width/2);
this.y = map(y, -100, 100, -height/2, height/2);
this.z = map(z, 0, 100, 0, depth);
}
</source>

Then you can have a sphere moving follow the data from the Captury! For further application, you can use x, y, z to control whatever you want in Processing!

== Control The Video By Processing ==
Since we can successfully use the data from the capture, it can be creatively to use the position of the object to control whatever you want in Processing! 
The following is an example of using a single value (position x) to play or reverse the video and change the play speed of the video. 
 
'''PART 01 – Play a video in Processing''' 
*Basic code to play a video in Processing.
<source lang="Java" line start= "12">
import processing.video.*; //Import libraries
</source>
<source lang="Java" line start= "16">
Movie myMovie; //Declare a object as Movie
</source>

<source lang="Java" line start= "31">
void setup() {
size(1920, 1080); //or use 'fullScreen(P3D);'
frameRate(60);
background(0);
myMovie = new Movie(this, "Chinese Knot_Final.mov"); //Load a movie, normally followed with 'play()' or 'loop()'
}
</source>
*Draw the movie by the class object (Sphere)
<source lang="Java" line start= "22">
void draw() {
image(myMovie, 0, 0, width, height); //Position to put the movie
}
</source>
*Called every time a new frame is available to read.
<source lang="Java" line start= "62">
void movieEvent(Movie m) {
m.read();
}
</source>

'''PART 02 – Play or reverse the video and change the play speed''' 
*Using position x as the condition. If user stand at the left edge, the speed will be slowest. The righter user stand, the faster the movie play.
*Using position y as the condition. If user stand close to the platform, the movie will play as usual, if else the movie will reverse.
<source lang="Java" line start= "4">
int play; //Declare a value to judge play or reverse the video
</source>

*Get the total number of the movie frames.
<source lang="Java" line start= "7">
int getLength() {
return int(myMovie.duration() * myMovie.frameRate);
}
</source>

*Get current frame.
<source lang="Java" line start= "11">
int getFrame() {
return ceil(myMovie.time() * 60) - 1;
}
</source>

*Pay attention that if the movie play to the end, it must be reversed. And if the movie reverse to the beginning, it must play as usual.
<source lang="Java" line start= "26">
if(y > 200 && getFrame() < (getLength() - 1)){
play = 1;
myMovie.play();
}
else {
play = -1;
myMovie.play();
}

if(getFrame() < 1) myMovie.play();

float newSpeed = map(x, 0, 150, 0*play, 2*play);
myMovie.speed(newSpeed);
</source>

== Let's Enjoy The Example File==
Thanks for your attention to this tutorial, and feel free to debug and improve it.
*Here is the complete code for this tutorial uploading on GitHub: [https://github.com/Yunbaby1028/WoolsWorld.git Complete Code of Wool's World] 
*Example File including the movie is shared on Dropbox: [https://www.dropbox.com/sh/f8jcuw03nekoelz/AABeKONtJAI1vfNK4tWSZ3dTa?dl=0 Example File of Wool's World]

File:SkeletonBoneName.png

2016-07-28T23:38:53Z

Yunbaby: /* Summary */

== Summary ==
Name of Skeleton and Bone.
Screenshot of the Captury.

== Copyright status: ==

== Source: ==

File:DataReceive.png

2016-07-28T23:38:32Z

Yunbaby: /* Summary */

== Summary ==
Data received in Processing.
Screenshot of the Captury.

== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==

File:DataReceive.png

2016-07-28T23:38:16Z

Yunbaby: uploaded a new version of "File:DataReceive.png"

== Summary ==
Data received in Processing
Screenshot of the Captury
== Copyright status: ==

== Licensing ==
{{self|c}}
== Source: ==