Computational Media Applications: Making an Interactive Piece to Release Frustration

After learning creative coding or computational media for almost 4 months, it’s time to create something as an application of what we learned in class. For this computational media final project, I collaborate with Ridwan Madon and Krizia Fernando. We were making an arcade game-inspired interactive space that allows users to physically interact to release their frustration, called Anger Flanker.



As I mentioned before in the previous blog here, the number of people who are suffering from mental health is increasing each year. Regarding this serious issue, we were being challenged how to help the community as individual to increase awareness towards this issue. Of course to reduce the number of people who suffer from mental illness is such a big step, but in order to help, it doesn’t have to be something big. So, if we see from different perspective, rather than to make a big impact, we started from questioning how might we at least help people to feel good, to not think too much about their problem.



The first idea was how to explore users’ emotions and in the end make them feel good. We wanted to make them drove their anger by facing them something difficult, making them feel negative at first then turned it to positive feeling.

The question was: how could we change users’ emotions in a certain amount of time, without forcing them to do it unnaturally?

We did some explorations and researches about it. We went through thinking of making a game, which we could adjust the difficulties. But in the end, a game setting wasn’t something we looked for. It wasn’t that relatable to the users in real life so that they could releasing their emotions naturally. We wanted to make it more meaningful and relatable.

After doing some researches, we knew that people tend to release their anger or frustration by shouting, throwing, or breaking something. This gave us an idea to make an interactive piece that actually can vent users’ anger. Users are encouraged to do physical interactions to drive their anger, such as smashing, stomping, clenching on something, shouting, or breaking whatever.



We spent a lot of time doing exploration and fixing our concept. After that, we started designing rough sketching and making prototype. We did the development after the idea was solid, and the prototype worked. It was in an iterative process. We did some user testing then improved this project after we got some insights from users.


This is the design of our project. We wanted to make a semi-personal space so that the user will be more comfortable to interact with it. From our user testing and research, we knew that some people are not comfortable screaming in public. That’s why we designed such a semi personal space.



Since we wanted to make it as realistic as possible, then we created our own animations. It’s about breaking walls.

Pseudo code

The logic is actually very simple. We only wanted to play multiple videos from users’ input. This is the pseudo-code of our project.

for video 1 to the last video
   load the videos to the browser

if the user is hitting hard enough
   play a video
   go to next video
   stop previous video
   draw encouraging text on canvas, moving up
else don't play video and don't float the words
if the user is standing on the board and it's the last video
   reload the program
else keep playing each video
if the users are screaming not loud enough
   give them message to scream louder
if the users are screaming loudly, but not the loudest
   give message to scream even more louder
else if the users are screaming loudest
   tell them good job

Websocket video player

We thought it was easy to play multiples videos on the browser, especially in local server. But apparently not. It was such a pain in the neck to play whole bunch of videos in web browser. We were facing some problems relating uploading and playing videos in websocket.

It was actually not easy to keep playing videos through websocket, because how websocket works is actually exchanging data back and forth from client side to the server side. And due to the size itself, video is heavy. Also, in this project, we didn’t just play one videos but multiple videos. This is another issues. Multiple socket connections are opened and closed to play multiple videos.

We were having some issues playing multiple videos, because the user when request the video from the server side, then the server will give it back to the client side and play it. It’s complicated if we want to play many videos. We need to request video to the server, but sometimes the server is not done giving it back to client, and the users request new/next video. This issue should be handled properly. It worked like this.

So we wanted to make sure that the request sent to server and back to client is done properly before making new request. We adjusted the code so that it worked like that. Also, we needed to make sure that only one video is playing at a time.


Node.js Live-server

In this project, we used node.js live server. At the very beginning, we used Python Server, but it wasn’t as powerful as Node Live Server. When we used Python Server, the videos are loaded very slowly. That’s why we changed to use Node Live Server instead.

It’s actually pretty easy to install and use Node.js Live Server. All you need is just install it from terminal (command line) using this line of code:

npm install -g live-server

Once it’s installed, you can use it at any directory folder by typing this command:


Then go to the browser and open localhost:8080.


P5 serial communication

We used JavaScript library called p5.js in this project. And to control the elements in p5.js, we used physical controller. Since we’re controlling it from sensors using Arduino, we needed to use p5 serial communication to make the computer and the Arduino communicate to each other. For this communication, we need a third party application called p5serialcontrol, it can be downloaded here.

Then in the p5.js code, we needed to add some lines to open communication.

// Variables for serial connection
var serial; // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1411'; // fill in your serial port name here


function setup() {

// Create canvas for p5js canvas
createCanvas(windowWidth, windowHeight);

// Initialize serial communication
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on('list', printList); // set a callback function for the serialport list event
serial.on('connected', serverConnected); // callback for connecting to the server
serial.on('open', portOpen); // callback for the port opening
serial.on('data', serialEvent); // callback for when new data arrives
serial.on('error', serialError); // callback for errors
serial.on('close', portClose); // callback for the port closing

//serial.list(); // list the serial ports; // open a serial port


function serverConnected() {
console.log('connected to server.');

function portOpen() {
console.log('the serial port opened.')

function serialEvent() {
var data = serial.readLine();

if (data.length > 0) {
var sensors = split(data, ",");

valueSensorTouchLeft = int(sensors[0]);
valueSensorTouchRight = int(sensors[1]);
valueSensorTouchFoot = int(sensors[2]);

function serialError(err) {
console.log('Something went wrong with the serial port. ' + err);

function portClose() {
console.log('The serial port closed.');


User Experience

The objective of our project is to make user feels good after interacting with this sort-of game. We wanted to make user release their frustration or anger through physical interactions. This is our user journey map.

Final Project

See our final project video below. And for all the code, it’s all in my Github page.


Leave a Reply

Your email address will not be published. Required fields are marked *