Concept
I started this project with the purpose of encapturing the essence of this semester, a type of memorabilia. In order to figure out how to do that, I have to go through many types of interaction and setting to land on a viable idea that would require a more simplistic interaction with a scope for storytelling. Finally I decided to use a circular structure which a person can complete 1 by 1 each segment. The purpose would be to finish the whole circle (journey). As I have started to conceptualized the activity to be like a journey, I felt that the literary framework of “Hero’s Journey” would be a great fit. In order to reflect the “Hero’s Journey,” I divided the framework onto 5 segments accordingly: acquiring knowledge/advice, enjoying lively goods, getting distracted from work, working hard to reach goals, and reflection/atonement. Hence, each segment carries these themes respectively from 1 to 5. I included activities and artists that make frequent visits to my day to day life, as by doing this I was able to commentary on our daily lifestyles of growth and change, our hero’s journeys. Something interesting I added is the option of staying on a tile and experiencing it or just skipping by stepping on the next tile. In some cases, skipping a tile is show of no effort, and in others it is a show of determination. Finally, the final page upon completing the tile 5 explains the metaphor on hero’s journey as each of ours journey, and reminds that we are all going through our own journeys next to each other or even together.
Implementation
There is a circuit implementation as well as the software implementation.
For the circuitry, I have had to do some soldering. For the setup of the circle, I have designed a circle with an inner radius of 20 cm and outer radius of 45 cm. The circle is divided into 5 segments which are laser cut to acrylic plates. Under each segment there is an FSR (force sensing resistor), which all are parallel to each other and are in series with 10k Ohm resistor. The values are read analog.
In terms of software, I have had to commit day and nights as there were to many areas to cover which I quickly realized was too much for my plate. For each tile I have utilized different approach. The first tile encompasses a simple representation of knowledge by an image of a quote on an old paper in a library. The second tile has a song playing on a Spotify interface with respective lyrics that touches upon life, youth and joy. The third tile uses the screen recording that I have taken of my own reels feed in instagram. I wanted to incorporate ‘scrolling’ as it is one of the biggest escape/distarction methods I use in my daily life, and as I have recently lost my phone I have been especially realizing how refreshing it is to not have these distractions. In the third tile there is a video that pops up that mentions you have to jump to reach stars which is shadowing. The user has to make the choice of continuing to the next tile themselves, as this is a conscious decision I made. If there is no decision to leave, you are stuck in the loop of social media forever. In the fourth tile, there is a starry night, with a girl sitting on a moon. When the use jumps on the tile the star gets closer and closer to the girl. When the girl reaches the star or user just moves onto the next tile without trying to reach the star, the 5th tile starts. In the 5th tile, there is cycles by Mac Miller playing, with a relaxing image of a midnight beach. This room is designed to be contemplative where the user should just reflect and absorb. When the sequence finishes the final page is prompted. The final page clarifies the concept of the “hero’s journey” and talks about the overarching theme of each tile, and makes a note on how we are all on our own journeys in the company of each other.
The start page. The icon lights up when the mouse is hovered above.
In the implementation side, I had to experiment with different fonts, images, video representation, concept markers and general design. Managing sound and video was especially challenging.
The user only has to take steps as they seem to fit. Similarly they should jump on the 4th tile if that’s something they wish for. They will be having headphones on as well as a tablet in their hands which they can receive all the inputs.
Hero’s Journey – Final Sketch
The link for my sketch.
Arduino Code
My Arduino code is very simple which 5 analog readings are received and passed together at each loop to the serial connection p5.js as follows:
void setup() {
Serial.begin(9600);
}
void loop() {
//receives information from the analog pins accordingly and assigns them
int tile1 = analogRead(A0);
int tile2 = analogRead(A1);
int tile3 = analogRead(A2);
int tile4 = analogRead(A3);
int tile5 = analogRead(A4);
//passes the readings seperated by comma from the pins directly to p5js
Serial.print(tile1);
Serial.print(',');
Serial.print(tile2);
Serial.print(',');
Serial.print(tile3);
Serial.print(',');
Serial.print(tile4);
Serial.print(',');
Serial.println(tile5);
//marks the end of 1 run of data by continuing to a new line
}
p5.js Code
In p5.js code is quite long for this code and therefore please follow the following link to reach the editor that hosts my p5.js code.
I have described the general progress of the experience in terms of p5js in the previous section. One thing interesting about my code is that since creating canvas and creating a video element at the same time is not allowed, instead I displayed the videos by passing them as images and displaying them quite fast. This allowed me to switch videos and come back to any, play around with displays, and music. There is also more freedom in terms of the placement of the video displayed. Basically, the video becomes that is comparatively way easier to manipulate in p5js. However, there needs to be considerations for the frame rate of the sketch. The following is tile 3 code, one of the parts in which I implemented this method:
let organizerCount = 0;
let changeVideo = 0;
let duration = 0;
//the main setter for the videos has to be called once
function organizer() {
short.size(350, 1.78 * 350);
short.loop();
short.hide();
reel.size(350, 1.78 * 350);
reel.loop();
reel.hide();
}
//function checks whether there is pressure on the next tile
//to prompt up the next tile event
function tile3Function() {
if(dataTile4 > 100){
//the videos are stopped and the selector value is changed
reel.stop();
short.stop();
selector = 4;
}
if (!organizerCount) {
//the organizer function is called only once
organizer();
//escape from if condition
organizerCount++;
}
//setup the main reel video with the 'jump for stars' video
//popping up randomly
else {
background(255);
frameRate(60);
//put out video image by image in order to have a canvas to
//manipulate
let img = short.get();
let mg = reel.get();
//formatting
strokeWeight(0);
stroke(0);
fill(0);
//the bacground of the phone is black
rect((width - img.width) / 2, 20, 350, 1.95 * 350);
//randomly prompt up the 'jump for stars' part
if (changeVideo == 2) {
//stop the main reel video
short.pause();
image(mg, (width - mg.width) / 2, (height - mg.height) / 2);
changeVideo = 2;
duration++;
//run the jump for the stars video for a set time
if (duration == 60) {
changeVideo = 0;
//switch back to the main reel
short.play();
duration = 0;
}
}
//the random value generaor prompt the 'jump for stars' video
//and runner for the main reel video
else {
changeVideo = int(random(1, 900));
image(img, (width - img.width) / 2, (height - img.height) / 2);
}
//phone image on the videos that are played
phone.resize(img.width * 2.55, img.height * 1.35);
image(phone, width/10.2, -80);
}
}
Communication between Arduino and p5.js
I have used the exemplary communication that was given to us in the class. Hence, there is the following snippet in my p5js sketch to receive serial data from Arduino, as well as the needed library and html edit for this communication. Reading for the p5js from Arduino checksfor 5 data points and stores them into 5 variables to be used in other parts of the code.
function readSerial(data) {
if (data != null) {
// when there is an actual message, receive and split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed and assign one by one to variables
if (fromArduino.length == 5) {
dataTile1 = fromArduino[0];
dataTile2 = fromArduino[1];
dataTile3 = fromArduino[2];
dataTile4 = fromArduino[3];
dataTile5 = fromArduino[4];
print(
dataTile1 +
" " +
dataTile2 +
" " +
dataTile3 +
" " +
dataTile4 +
" " +
dataTile5 +
"\n"
);
}
}
There is also another function that prompts up when space bar is pressed to establish the serial communication between Arduino and the p5js editor.
function keyPressed() {
if (keyCode == 32) {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
Challenges
The whole project was quite stressful for me as I felt early on that there were some loopholes in the logic and storytelling aspect of it. Despite figuring out the physical interaction of it to be simple and clean, I realized that even after giving days to plan out the storytelling did not change how complicated it turned out to be in the end. I was trying to sketch out each tile and transitions between tiles as well as the general storytelling framework I was going to use for so long, that I experienced a little withdrawal in my capability figure this out. So I just simply sat down and drafted what I had on my mind till now.
In terms of Arduino, the most challenging part was to figure out how to evaluate data to detect jumping, as 1 jump would give consecutive no pressure values to p5js, which disrupted the work on my tile 4. Hence, I decided to counter this by setting the frame rate a set value, so that irrespective of the speed that Ardino delivers to the computer the receiver of the data would be ordered and easy to analyze and deal with. After doing that, I was able to see trends in how the force reading changes during a jump and make the necessary adjustments to register jumps one by one.
The p5js section is definitely more complicated part of my code, and without doubt at every tile (out of 5) there was a long design process as I tried out styles. I incorporated videos and sounds heavily as my experience with this semester was completely defined by videos and sounds as well. In doing that, for example, in the distraction (scrolling in Social Media) video I had to find a way to have the video on but also a canvas so that I can have a phone silhouette on as well as switch between 2 video entities randomly. Figuring out this part was very challenging and had to do a lot of research in terms of how to run videos in p5js. I had a similar struggle in controlling sound files as well, which required a similar amount of commitment in its logic.
While doing the p5js, the rest of the methods I used were not completely new but still challenging. An issue I have had problems till now is the completeness and digestibility of the total experience. Despite putting more time into the design and storytelling sketch this time, I felt that there was still aspects that just did not feel complete. For example, I spent such a long time on tile 2 (which a song is listened in the topic of jot of living), I changed the construction of the page at least 10 times, because I was not able to figure out what kind of delivery worked best out of each option in the grand scheme of the project. Looking at the user reactions, I think the project needs a pamphlet prior to being used, that will allow the users to get into the mindset of the project.
Successes
The experience finally running from the start to finish was what I felt the most proud about, as I have been working on it piece by piece for so long. I’m especially the most proud about the simple experiences like in the last tile just watching the night sea roll to sound of Circles playing. Similarly, reaching the stars tile is so simple yet feels so important and beautiful to me. I was happy to be able to put a concept that I felt to be true and constantly felt around me into a project. I always felt that we were all so consumed with our struggles, successes, distractions, reflections all the time, which always circled back to start. Slump would appear every other week. We would overwork ourselves for a couple weeks every now and then. We would become especially introspective every now and then. I just wanted to concretely draw this process out, personalized with the tokens that I believed marked this journey. My main goal all along the project was to have the scene after tile 5, where many circles appear, intersecting each other. This is what I felt thankful for the most throughout the whole semester. We all had to go through our journeys but it felt even more worthy because we got to have each other’s company: intersecting circles/journeys with our intersecting lives.
Future Improvement
For future improvement, I would want to make this project even more immersive. I feel that every moment of it works to establish a feeling or understanding in the user, which requires the full attention of the user. Hence, I was thinking a fully immersive experience that would limit the user’s ability to look away would definitely align with my project. This would also help to emphasize that our power is on how we respond to what comes our way. We get to look away (step away), but we don’t get to just not see. I think that in terms of this project, this was the overarching dynamic that was created and there are many ways this could be implemented by changing the experience’s location from computer screen, to projected screen on 4 walls inside a small chamber created with projection fabric.
User Testing
User testing was done but I cannot paste the specific video/photos due to privacy reasons. However admittedly there was haste in terms of rushing through the steps similar to my previous project in midterm. It seems that I will have to think more about how to handle this issue by changing the interface or giving a booklet of directions to read before users try out the the journey.
Additional User Testing:
User Input Highlights:
The user did not mention hardships in terms of the instructions of the experience.
There were interesting insights and take about the individual perception of the journey.
The linked circle outro was especially a favorite, as according to the user it emphasized how people come by to our lives and even if they have to leave, there is a possibility they will be back as there are two points of intersection between each circles.
The user made interesting comments about the distraction tile, and how it was constant battle between looking at the reels and looking at the “reach the star” reel.
The user mentioned that it did not feel as if it was a circle but was more of a path as they were not the same person at the end of the journey. After talking about my inspirations of hero’s journey concept and how I made parallels between the literary device and the experience, they found it very intriguing. They think that the other users should be redirected to receive more information on hero’s journey upon going through the project as well.
The user felt that instructions were generally clear. They did not know what to do after being trapped in the reflection room, but as this was my intention as a part of the project I though it was exactly how it should be when I saw the user just switching between tiles to try to get out of reflection room. The user thought it was a good example of the things we could not run away from/just leave.