Final Post / fitos_egrera



A conventional chat service, hosted in a computer, is inter faced to a series of electrodes connected
to the face of the artist; at the other side of the exhibition space another computer allows a
member of the audience to chat with the artist. The system translates the emoji (a visual
representation of facial expression) sent by the user in electrical impulses that force the
physiognomy of the artist, through a custom electrical muscle stimulation device, to mimic the
gesture of each icon.
 The artist has no option, his/her facial nerves are being shocked with
electrical impulses to contract and relax specific areas of the face; the artist’s expression is
mediated by technology in ways where free will is not longer a component in social relationships;
communication of emotions is hegemonized through contemporary technological communication

Technologies:  TENS machines (Electrical muscle stimulators), arduino, nodejs, javascript, html, ccs.


DOCUMENTATION From Transiconmorphosys, Exhibition at EYEBEAM, NY

2 5 1 3



2.  Arduino and Javascript (BEFORE KNOWING NODEJS)

A paint tool by creating an interface between javascript and Arduino using JSON files.  Three potentiometers were connected to the Arduino to create RGB values.  The data from the Arduino was sent to processing, and processing created JSON files with the data.  Finally, javascript called the JSON files from AJAX in order to execute the script.

Watch the video here for more information.




This video shows how our single button, time based security lock works. The combination is time based, meaning that the user has to press and hold the button the correct amount of time three times.



Final Post

Summary of my experience in CClab.
This class has offered me a great chance to touch on different type of coding languages in a very short period of time. I am very happy I can now know what do these languages do and eventually put some of them in practice for some of my projects. Below are three projects I am most proud of:
1. Typography Class
This is a collaboration project about turning a mundane font, arial into a fun confetti font. Here is our change the font project.
Screen Shot 2013-10-14 at 7.40.10 PM
2. Dancing Robot is a small animation created by Madhav and Yuchen Zhang using Arduino. See how the robot dances in this short movie.
Click here to see our code.

Dancing Robot controlled by a potentiometer.

Click here to see our code.
To sketch out different poses of the robot and the position of the animation frames, we worked in an illustrator sheet.
3.Final Project
This is a experimental performance project that involves using node.js, LinuxTerminal, Festival tts, spacebrew on a raspberry pi and processing on a laptop. Below is a photo of the screen of raspberry pi when it is receiving commands and text from its publisher.

photo 1 copy

photo 2 copy

photo 3 copy


Final Post _ Grace Tingshan Gou

I. 3 favorite assignments over the course of the semester

1. Fish and Bubble – JSON&AJAX – collaborated with Toni Jinghao Tao



Click “Fish and Bubble” to enter our aquarium where you can control the movement of a tiny spiny puffer fish. As you move your mouse, it will keep bubbling, and once your mouse moves above the water into the sky, the fish becomes a bare bone in the air. As for the coding part, we used canvas animation to generate the movement of bubbles, and created 10 .json files within each there are data – color, radius, speed, etc – for different bubbles so that every time when you move your mouse, there will be a request asking for a random .json file via AJAX.

2. Halloween Style Pattern Generator – JavaScript Class – collaborated with Toni Jinghao Tao

QQ20131217-8@2x    QQ20131217-3@2x

QQ20131217-4@2x    QQ20131217-7@2x

QQ20131014-4@2x    QQ20131014-5@2x


This is an experiment using Javascript class. We got our inspiration from the car racing demo – wrong version – showed in class. If there was no “context.fillRect” to refresh the background every time, there would be four stripes leaving on the screen.  So we imagined if we left our canvas like this, there probably would be some unexpected beautiful patterns generated on the screen. For the coding part, there are four different classes -Cut, Ring, Bite, and Tangle- within class Pattern, and in each of these classes there is another class that defines the fundamental shapes which are stripe, ring circle, triangle, and solid circle respectively. When clicking each of the words/images, there will be visual mappings indicating how these words look&feel like and how these effects are generated.

There is something interesting: what you saw in Tangle effect was just ONE instance that we created based on the class Solid Circle. If we increase the number of solid circles, say 20, the pattern will look like the last image. It feels like we use 2D shapes to create a 3D effect which looks more like being tangled with ropes.

3.  League of Food – openFrameworks&Arduino




IMG_5423    IMG_5428



It is no more an emerging problem that people are having junk food almost everyday, but even though there have been researches focusing on   epidemics and how to deal with it, the public’s ability to go back on the right track — fight their bodies against eating fast food and avoid the temptation of the hidden power of some processed foods — is still weak. The reasons for the increasing consumption of more fast food mainly lie in its convenience, low price, and its taste. But there is almost nothing we can do to change either of them.

Under this circumstance, I want to make a game that let people play the role of food who will collaborate with its ally and compete with the other team by killing people getting off work, hoping to make people aware of the problem by experiencing themselves, to inhibit their temptation to taste them, and finally to prevent them from further purchasing fast food in their daily life.


The biggest problem for me is the graphics. How the interface looks like will have a great influence on the experience of players in this kind of game. Since I don’t have a design background, it might be a little hard for me to visualize the style and feelings I want to present in this game. Another challenge for me is how to create an interesting mechanics that can be both attractive and thought provoking. There is a blur boundary yet huge difference between pure educational games and games that intends to be educational but designed to be entertaining. There are many games are designed to be both educational and entertaining firstly, but they are most likely to abandon either of the labels later on, ending as a game purely for fun or a game that people won’t play twice since it treats players as students.


I mainly created classes for different characters in openFrameworks to finish the game. For the user control, I used Arduino to communicate with openFrameworks and DIYed a costumed controller for 4 players. I originally wanted to use 4 JoySticks to give players better experience, but they turned out expensive. So I adopted used boxes and batteries to simulate the experience of direction control. They worked well expect that they were a little fragile. I didn’t expect that pixel adjustment could be a problem. But during the whole process one of the problems that are really annoying and that I should pay attention in my future work is the pixel calculation.

There are several iteration processes that I want to share. My first iteration is that people will automatically move towards food, but this will end up with players only shooting straight forward and never changing the direction of their canons. So in my second iteration people will move towards fixed directions that are supposed to their homes. In this way, people will have to change their shooting directions and create junk food along their way of going home. But there is another problem. There are too many junk food that they create on the screen, which on one hand will affect the visual effect, on the other hand people will be killed easily if there are enough of them. So in my third iteration, there only can be one piece of food for each team, and if they create another one the previous one will disappear. In this iteration, people got more involved and tended to both change the shooting direction and control the numbers of bullets they shoot.

In the documentation video there were the whole process when people played this game. But there was only one problem. When the person was killed by potato chips, the program unexpectedly exited. After I tried to run it again, there was always an error: “targetconditionals.h not found” which seemed to have nothing to do with my files. We tried to figure out, but didn’t find a worked solution on the forum. So the final documentation could only look like this currently.

Future Improvement:

As can be seen in the documentation, even though there were problems that have been fixed, it is still hard for two players to target a point at the same time, and players sometimes still tried to shoot aimlessly. So in my future iterations, I hope to add trajectories for each of the canon to help them better target a point. Further, I hope to restrict the numbers of bullet later to prevent them from shooting too much during this game. Also, a great sound is really important for a game. So I might have to give my League of Food a better sound to speak to itself. As I said in the challenge part, I need a better graphic for this game. So I have invited one of our DTers Yang Wang to help me with the graphics.

Finally, I want to say that this game was not what I originally thought because it looks more like a game purely for fun now instead of making people think of something. So I want to further push my game to be more strategic, meaning that two players will still be human, the other two will play the role as animals or plants, trying to avoid being slaughtered or cut off by human, being fed with poisonous food, and finally avoid being cooked into food. In this way, people might have a deeper experience other than just fighting for a higher score.

II. Summary of my experience of the semester

I got my bachelor degree in computer science program, but to be honest, it was because I didn’t like coding that I was thinking to transfer into this program. Coding was boring to me because all I did before was to use complex algorithms to figure out solutions and giving out numbers as the results. So it was firstly a nightmare to me when I knew we would have a coding course at first semester. But at the end of the semester, I have to say, the new languages that I learned  like Javascript and the new features that I explored from programming c++ are so interesting that I have renewed my impression in this field. There were amazing visual effects that I could do with coding other than just numbers. Although what I did was just the basic transformation these languages are able to do, I had a deeper understanding of  what is “generative art”. Besides, there was no right or wrong. As long as one has anything to present, it is cool. And sometimes there are even unexpected results which could be better than the original thinking. I like it when there are a lot of possibilities out there.

It was a great experience for me this semester. With all these languages and skills in hand, what I have to do next is to figure out how to properly use these new technologies and combine it with good concepts.

Final Post

Semester Summary:  I came into this course never having written a line of code before (until Bootcamp, of course) so there was quite a lot for me to learn and explore through out this semester. In this class specifically I learned so much. Initially my interests were learning more about physical computing and working with arduino, which is why my favorite project (#1 posted below) was the assignment we were given to work with node.js. Though, to my surprise, as I look back at the work I have completed most of it is based off of web development. My understanding and skill level of working with Javascript/HTML/CSS has increased dramatically over the past few months, I am really happy with the websites I have created, and I now feel pretty comfortable taking on web projects.

Favorite projects:


For this assignment I worked with Lucy Matchett & Nicole Messier to create a website that is responsive to a physical interface. We created an interface out of paper and then used arduino to communicate through node.js to the website. It was a really cool way to see how web can be transformed in new ways, as well as a great experience to deepen my understanding of code.


This assigment was great because I had not yet worked with the LCD screen for arduino. Having a readout connected to arduino is vital for a lot of projects and understanding this system of communication was really helpful.

3. New York Chocolate show for Luxury & Design:

Re:Neith for Major Studio 1:

Lastly, here are two websites that I created, each for final projects. Both were working with HTML/CSS/JS and neither of which I could have dine without our initial coursework on these subjects.  Although, they both still need some final touches, I am really happy with how they turned out both aesthetically and functionally.

Final post – Jinghao Tao – ‘Toni’


My background was animation design, so I was not good at c++ language and Arduino before here. I think in my first semester, I need to challenge myself, such as technical aspects. Through a whole semester to learn CC lab course, I have learned a lot here, such as JavaScript, Arduino, Openframeworks, even Brainwaves (e.g., NueroSky). So I have a deep understanding of relationship that between that technology and design, and also, I will continue to focus on technology and design and figure out that how to use technology and design to create more interesting projects. So, for my three works that I post on the blog, the first one is a basic JavaScript experiment, and the second one is more complex than the first one. After I learned JavaScript I also learned basic programming C++. So for my final project I used Openframeworks to finish my final project.

3 Favorite Assignments:

#1 –

#2 –

Fish and Bubble by Grace Tingshan Gou&Tony Jinghao Tao

Click “Fish and Bubble” to enter our main page. As you move your mouse, you will find that the fish keeps bubbling as it swims and once your mouse moves above the water, the fish goes dead as a bare bone. In this assignment, we used canvas animation&object to generate the movement of bubbles. As for JSON&AJAX, we created 10 .json files within each there are some data of the bubble. Once you move your mouse, there will be requests asking for different .json files using AJAX.

#3 – Final project.

This video shows that why the people need my final project.

This is the first part of my final project, in the first part of my project, I created a virtual scene that can be projected onto the wall. For this virtual scene, the background is a dense forest, and it is raining. User can through the brainwaves to interact with the virtual scene. For example, the user can through meditation values to control the rainfall, through attention values to control speed of raindrops and speed of the wind or direction of the wind, even can control the brightness of the weather. In all of my hypnosis background music, I combine a soothing voice and rainy voice with relaxing music to provide user with the ultimate hypnotic experience. Also the rainy voice can be controlled by the meditation values.

This is the second part of my final project, in my final project, there has another part to help people sleeping, which named hallucinatory part that can be transformed with the change of the attention values. Because the mystic achieves hallucinations by gaining control of his own dissociative mechanisms, perhaps this is a form of self-hypnosis. Such individuals can accomplish an astonishing withdrawal from the environment by prolonged intense concentration.

Final Post — Xiaoqi

1. Canvas Homework

Screen Shot 2013-12-16 at 10.05.29 PM

Click the link to draw an painting of your own. When you click on the different positions in the web browser, you can draw squares in different colors and with different sizes.


2. Liquid Crystal Homework

It’s a team work with Xiaofeng Lin. This is a two-person racing game. By clicking the button, the faster racer will win.

3.Experiments with texts

Screen Shot 2013-12-16 at 10.13.06 PMScreen Shot 2013-12-16 at 10.17.35 PM


Using processing, I did a series of experiments trying to codify texts. Using this way, I am trying to find the boundaries between texts and images. The link of my presentation keynote is CCfinalP.

Final Post from Siu Him ‘Jimmy’ Tang

My background was graphic and web design, and I didn’t know much about coding and programming before Bootcamp. Since CC Lab is my only technical course for this semester, I learnt most of the codes from doing the weekly assignments. I really enjoy learning Javascript as I am now capable of writing my own (simple) script instead of just copy it from a library. Also, I love OF!  Although it was difficult to begin with, I found OF is more organized than Processing. For the future, I think I will focus on web and creative coding, but I don’t mind to learn to more about physical computing. Lastly, I will continue of what I started in CC Lab while keep pushing myself to learn more codes and different softwares.

#1 – HTML5 Canvas Animation:
I worked with HTML5 canvas for the first time for this assignment. Prior to CC Lab, I only had a basic foundation of HTML and CSS, but don’t know that much about Javascript. I used to copy Javascript/ JQuery codes online and implement it in a HTML page (without knowing how the javascript code works). In this assignment, I played around with the given sample code and created an animation where the objects change in sizes and colors according to the cursor’s X and Y coordinates. I gained a better understand of the algorithm behind Javascript ,and it inspirited me to learn more about it. Here is the link!
Screen Shot 2013-12-16 at 9.08.22 PM Screen Shot 2013-12-16 at 9.08.34 PM

#2 – Processing to OpenFrameworks:
In this assignment, I successfully translated a Processing file (that I worked on during bootcamp) into a OpenFramworks project. Since OF have more a complicated file structure than Processing, it took me a while to fully understand where to place the codes in OF. Since OF have its unique syntax,  I had to study the OF’s online documentation in order to createa function. More importantly, I simplified the code, by simply using IF statement, from 10 lines to 2 lines of code.
Processing Code
OF file

Screen Shot 2013-12-16 at 9.16.44 PM Screen Shot 2013-12-16 at 9.27.35 PM 

#3 – Final Project w/ Javascript and OpenFrameworks:
My final project for Major Studio 1 is a series of experiments on exploring my own identity and notions of identity; also, I used this project as a chance to examine what recent technology can offer. Due to experimental natural of this project, I delivered a series of explorations instead of  a unify final product.

I cut a webpage into different parts, and recreate the page with a drag function applied to each part (prototype #1, #2) . Instead of clicking, visitors can drag each individual part around. By rearranging the parts on the foreground of my Facebook profile, visitors can reveal what is hidden on the back. For prototype 3, I replaced the drag function with hover function as a way to examine different interaction.

Prototype #4 was an attempt to break the boundaries between digital and physical space. I used OpenFrameworks, a toolkit for creative coding, to access the webcam on computers because it able the program to track movements from the viewer. Once the viewer moves in front of the cam, it trigger to apply an function to the digital file as the foreground image disappear and reveal what is on the back.

The future plan for this project is to set up an online platform where people can upload their own ‘reveal version’ of a webpage. Also, I would like to  develop a online application that enables user to make their own ‘reveal’ of any existed site. Since the topics that I chose for the second half of this project were related to social justice, I can see the potential of using this project as the beginning of a pathway to reveal hidden truths to the public.

Screen Shot 2013-12-16 at 11.33.16 AM

Screen Shot 2013-12-16 at 11.39.18 AM

Screen Shot 2013-12-16 at 11.45.33 AM

Screen Shot 2013-12-16 at 11.51.25 AM
Prototype#4 w/ OF

Screen Shot 2013-12-16 at 12.02.07 PM

Screen Shot 2013-12-16 at 12.03.11 PM

Documentation videos: