Physical Computing

Inspired by the Dead of the dead celebration and the rituals that go along with them, we developed an altar that could 'bring' famous musicians back from the world of the dead. We based the interaction on the belief that if you place your ancestors pictures in the altar, they will be able to visit the living. 

For this, we chose 6 famous dead musicians to play their music through interacting with the altar. In order for the computer to know which song play, we designed a system based on three lever switches that could be 'clicked' with the musician portrait. 

We laser cut portraits of each musician with teeth in the bottom so that they could physically pressed 1, 2 or 3 switches when positioned in a slot in the altar. 

In order to send the resulting combination of the pressed switches, we used serial communication between Arduino and p5.js. The program stored 7 different .mp3 files, one for each musician and one deadly noise when no picture was positioned in the altar. 

For a final touch we decorated the boxes that hold the switches, computer and Arduino with colorful paper and flowers, so it resembled a Day of the Dead Mexican altar. 


To continue with the exploration of light and its uses with Arduino, I started using Neopixels. With a 4x4 matrix and uploading the Neopixel library to Arduino, I was able to do the same sketch I did last week, but now using a different kind of LED. The potentiometers are now changing the value of the pixel function in the code instead of directly changing the voltage of the pin of a single RGB LED diod. This is the first step to physically control addressable LEDs without the need of pre-loading a code. I would like to continue adding buttons, sliders and potentiometers to control and make different effects for light, such as strobe or figures drawn in the matrix. 

For this week’s assignment I wanted to fulfill my first assignment goal, mix the colors of a RGB LED. The cool thing about this kind of light, is that you can achieve uncountable colors by mixing the two or three of the channels. Using the Arduino and potentiometers, I built the basics for a lighting board that controls a RGB fixture. In order to achieve this I connected three potentiometers to the analog inputs and each channel of the LED to different pins. In the code, I assigned each potentiometer to dim the red, green and blue lights of the LED. With this arrangement, it would be possible to make new colors (different from red, green and blue) by mixing their luminance.

Even though in theory the connections seem right, some weird things are going on with my prototype at this stage. The red channel will not light to its maximum capacity and the blue light will either turn on or off, without dimming. I did some research about the resistors that this particular LED might need, and it seems that the red diode needs more resistance than the other lights. So I used the resistors that google said, but the problem persists. I hope I can eventually solve this problem.

#define potPinR A0
#define potPinG A1
#define potPinB A2
#define LEDPinR 3
#define LEDPinG 5
#define LEDPinB 7

void setup() {
// put your setup code here, to run once:
pinMode(potPinR, INPUT);
pinMode(potPinG, INPUT);
pinMode(potPinB, INPUT);

void loop() {
// put your main code here, to run repeatedly:
int potValueR=analogRead(potPinR);
int potValueG=analogRead(potPinG);
int potValueB=analogRead(potPinB);


int mappedValueR = map(potValueR, 0, 1023, 0, 255);
int mappedValueG = map(potValueG, 0, 1023, 0, 255);
int mappedValueB = map(potValueB, 0, 1023, 0, 255);

analogWrite(LEDPinR, mappedValueR);
analogWrite(LEDPinG, mappedValueG);
analogWrite(LEDPinB, mappedValueB);



(that is 100% Green and Blue light, making Cyan)

In order to add a 'thinking' element to a lighting switch and enhance the experience of watching a LED blink, I decided to work with a potentiometer to manipulate that blink. A light that turns on and off repeatedly is known as a stroboscopic lamp, because of the strobe effect result. If you find yourself in a completely dark room and a strobe light starts blinking, you will feel that life is suddenly happening at a very low frame rate. Your eyes won't be able to see movement as a continuous due to the lack of light from some seconds in the room. Some artists have used this effect to produce interesting experiences and movie effects but in real life. 

For this week, I did some research on how the numbers of a physical knob, a potentiometer in this case, could translate into on/off signal for a single white LED. I then added a reflector made out of metallic paper to enhance the light coming out of the LED and come closer to an actual stroboscopic lamp. 

Following my previous experience and interest in lighting design, I decided to use a RGB LED that came with my starter kit. In order to enhance the light effect of the colors and their combinations, I searched for materials in the junk shelf. I found several pieces that would reflect light in different ways. Pieces of mirror and see through acrylic bits where my starting point. I found a triangle based pyramid with a hole in the middle. I immediately tried how a regular LED would project its light through this piece. The results where appealing enough to work with. With the hole drilled in the prism as vertical axis, the prism could rotate and ‘point’ the vertices in three directions. So it fitted my urge to work with a RGB LED, three colors, three vertices.

After figuring how this LED worked electrically, I begun trying how the rotation of the prism could light each of the colors. With the use of copper tape, I made a line underneath that would close the circuit for each combination. When it was almost done, the interaction with the prism wasn’t really working as smoothly as I imagined. The tips of the LEDs underneath the prism made the rotation uneven.

After reading Donald Norman’s chapters, I reinforced my idea of making the switch interaction and playfulness of the three colored light, I decided to change the design of the switch. Making the rotation smooth enough and the transition between the colors would’ve needed different kind of materiales that weren’t available at the time. I also thought it would be cool and sturdy to use three push buttons in each of the vertices that would turn on each color and allow to mix them by holding down one entire edge of the prism and even make make white light when pressing right in the middle of it.

Finally, I used a piece of mirror which I drilled for the LED to serve as the axis to hold the prism. I also cut it in a triangle to follow the final shape of the switch and cover the switches and wires beneath. 

Thoughts on Interactivity

I’ve always thought that interactive art is the one that is completed by the audience. So Chris Crawford’s definition of interactivity made sense to my previous thoughts. Interaction is a conversation that in order to properly accomplish its purpose, both actors must respond correctly to each others inputs. But, I slightly disagree when he establishes that the interaction between someone and the fridge light doesn't correspond to an interaction. I think that the fridge light has a necessary role for the artifact to complete the experience for a person. And that role was thoughtfully given by the designers or engineers who decided to put that light there. So it may be a long distance and indirect interaction, but a very relevant one. I feel that the light in the fridge is doing more things than just lighting up the contents in the fridge. It is giving feedback of the openness of the fridge, it is an alarm when the fridge is unplugged and food may rot, it gives a special ambience to a dark kitchen, etc. and that I would claim it is interaction.


Introduction to Computational Media

During the past year I have been asking myself how did humanity chose that men was going to be the dominant gender in society. In which point did women gained a secondary role and begun being oppressed by the patriarchy. I came across to a compilation of essays by Silvia Federici: Witches Witch-Hunting and Women where I found what it could be an answer to my question. In her book, she reviews the connection between the rise of capitalism and female oppression, while telling the story of witches and witch hunting, torture and murder.

“It is in this context that the attack of women as ‘witches’ should be located. Because of their unique relation to the process of reproduction, women in many capitalist societies have been credited with a special understanding of the secrets of nature, presumably  enabling them to procure life and death and discover the hidden property of things. Practicing magic (as healers, folk doctors, herbalists, midwives, makers of love philters) was also for many women a source of employment and undoubtedly a source of power, although it exposed them to revenge when their remedies failed.

I feel that a very effective way to communicate these findings is by revealing actual data. For the final project of this course I intend to visualize a dataset of ‘witch’ hunt cases to demonstrate how what it seems a fairy tale, fiction or something from the past, is still happening nowadays.

So far I found one article published in the year 2003 that contains an analysis of surveys performed in Tanzania’s villages. The datasets compares local rainfall variation to identify the impact of income shocks on murder in a rural Tanzanian district.

Although this article is very powerful in terms of the year published, the data is very quantitative. There is also an interesting table I found in wikipedia that has less cases dated for the 1600, but contain the description of each killed witch. 

I would like to visualize one of the datasets presented, or maybe combine both (or look make a deeper research) in order to put this information out there available for many people to engage. 

Loading media into p5.js makes sense when there is a way to read the information given and use it for something. In this sketch I used the ability of computational media to read the color information of every pixel of a determined image. After gathering the RGB code of the pixels where the mouse is positioned I used the mousePressed function to draw a big rectangle on top of the image in order to pixelate it as if it was censored. I have encountered many cases where social media networks such as Instagram decide that a women’s nipple is sexual content and different to a male one. So in this sketch the interaction will lead you to pixelate and ‘protect’ yourself from this illegal content.

See sketch


My aim was to use the Star Wars Api SWAPI and draw the information about the starships. I wanted to draw an inner circle for the crew capacity and a outer circle for the passenger capacity. This way, I could compare the sizes of each starship in relation to the amount of people (or other universe habitants) they could carry, as well as the total starships. Besides not being able to properly read the data, the numbers where either to big or to small to show draw the circles in the canvas. Not even with the map or constrain function I was able to normalize the numbers. 

After giving up on the idea of drawing the crew and passengers numbers, I decided to make a simple bar graph that showed the length of each starships and their names. I was only able to show one of the ships for this sketch. Hopefully I can achieve my initial goal with a second iteration of the sketch. 


See my not ready sketch :(

Following my previous work with random phrases and the inspiration from the famous word magnets, I made a p5 version of it. In my sketch you are able to input random words and after you feel you have enough of them, you can paste them around the fridge. I used the input DOM element to allow the user to write the words. Even though if you intuitively press the Enter key, the words will be added to the array. But in order to make it easier to use, I also added a button to the interface to add the words to the array. For it to be more aesthetically appealing and have a better look, I loaded a fridge image into the sketch. To enhance even more the feel of the magnets, I added a slight random rotation for each of the words that you add.

See sketch

What is missing now is the possibility to move the words once you have them ‘on the fridge’, allowing to build phrases that make more sense, or not. But for now, I think the game is to be somehow surprised with the random order in which the words appear as you click the mouse around the screen.

Inspired by the weird phrases that typeface designers use to showcase the letters such as "The quick brown fox jumps over the lazy dog". The last contains every letter of the english alphabet so people can see the how the typeface will look. But in google fonts they use shorter ones that do not contain every letter, but a handful of them. So I started by making an array with all the words of one of these phrases. With this I wanted to make something similar to the fridge magnets that have words and you can arrange them to invent phrases. Instead of dragging them around the fridge, the words would appear at the mouse position randomly so you could 'paint' with them and see what other random phrases you could come up. 

It didn't work as I wanted because the words are continuously randomizing themselves and the sketch looks crazy, but I think I figured what I'm supposed to do in order to fix it.  

See sketch

Starting from the creepy smile faces class example, I transformed them into a series of flexible strings. The bouncing effect is given by the Y position of the mouse in order to simulate a hand playing multiple strings, like a guitar. I made a function that draws the flexible lines twice with different parameters. And used a for loop to build the rules for these strings. I also added some shiny colors to tell apart the different lines on the sketch. The R channel of this color is controlled by the X position of the mouse making crispy combination between the two.

See sketch


For this first two-person-programming experience we started by understanding the 10 Print example and playing around with it independently. We then met and shared some previous sketches of buttons and sliders and figured out how to insert them in the sketch. After this first attempt, we each came up with different results:

My original sketch 

Defne's original sketch 

We met to compare our sketches and combine them. With some difficulties on combining snippets of code which had been done with different logics, we worked our way into making a sketch that was aesthetically pleasing for both:

Final sketch

We also encounter in the process a lot of weird results on our code, some that looked better than others, and some that looked more like errors than an intentional sketch. We kept this one. 

For this assignment I wanted to use the classic bouncing ball. I started my sketch with one of p5 web's example to figure out the math around the bouncing feature of an ellipse, which I find it's the most difficult part to code. First thing I did was to make sure the ellipses stayed in the canvas. I spent some time just staring how the path of the ellipse would start making a pattern that looked like a textile weaving. With this in mind, I made the mouse interaction, the 'weaving tool'. The x position changes the stroke weight of the ellipse, allowing the animation to draw mainly colored 'stitches' or moon-shaped ones. Everything else in the sketch is set to random, so whenever you refresh it, it will randomly pick a color, the initial position of the ellipse and the angle of the direction of drawing.

See sketch


For me, computation is like a reachable parallel universe. A space to make almost anything you can imagine and that it is not impossible to reach. It may require some time, but things can always get done. I was (and still am) particularly surprised by the sorcerer characteristic that computational media has. If properly hidden, it is the perfect tool to achieve the ‘movie magic’ to impress an audience. This cool thing about this is that this way of impression builds a special engagement between the audience and the ‘artwork’. Last year I was able to prove this by myself when I collaborated in the design and implementation of an interactive installation about neuroscience. Without the goal to educate the people who experienced the installation, I was able to corroborate how after visiting the room, a tiny awareness about the neural network the piece was about sparked among the visitors. In this case, instead of trying to understand a complex scientific paper filled with unintelligible pictures and data tables, we brought new findings in neuroscience to the general public. In this course I would like to continue to develop similar exercises and transform interesting topics in entertaining and impressive experiences.


When creating this first sketch in p5.js I felt like doing a tedious hand-made craft. I thought that the cartoon I chose was going to be easier than I thought, but I guess that is something that usually happens. I say a hand-made craft because of the process of building each figures felt super slow compared to making the same figures in a software like Adobe Illustrator. I know there are a thing called variables to make some processes easier, like defining a color so that then you can write just ‘cherry red’ instead of ‘(217, 25, 82)’, but I’m not sure how to use them properly and I’m expecting to find out soon. Also, by the end of the building of BoJack I gave up on some arcs which I couldn’t figure how to put in the right position and angle as desired. I commented them to someday come back to them and figure them out.



This assignment is being developed in collaboration with Marcela Mancino. Exploring images and ideas that intersect in our work as musicians - specially in the songs As plantas em minha pele criam raízes em minha carne, Figuras, and the clip of Novena Nube - we decided to work with underwater creatures and textures. Inspired by these images, we want to explore inverted masking footage of sea animals to different textures. With that, creating a fictional ocean world where all the creatures are made out of water. Here is the link for the folder with the collected assets. Inspired by underwater textures, we want to make an animation that explores inverted masks. We want to create a fictional ocean world where the creatures are made out of water textures.

Final result:

En 1492, los nativos descubrieron que eran indios, descubrieron que vivían en América, descubrieron que estaban desnudos, descubrieron que existía el pecado, descubrieron que debían obediencia a un rey y a una reina de otro mundo y a un dios de otro cielo y que ese dios había inventado la culpa y el vestido y había mandado que fuera quemado vivo quien adorara al sol y a la luna y a la tierra y a la lluvia que la moja.

- Eduardo Galeano


In 1492, the natives discovered that they were indigenous. They discovered that they lived in America, they discovered they were naked, they discovered the sin, they discovered they had to obey to a king and a queen from another world and a God from another heaven, and that such God had invented guilt and clothing, and had ordered to burn alive anyone who worshiped the sun, the moon, the earth and the rain that moistens. 

  • +1 929 3818418
  • This email address is being protected from spambots. You need JavaScript enabled to view it.