For our final, Jackie and I partnered up and build a system for automatic drawing and facilitating creative collaborations.

We decided to build a glove equipped with 4 vibration motors referencing the directions up, down, left and right and a system that allows x number of participants to control and trigger said motors.

System Diagram:

  1. Any number of participants are able to press up, down, left and right using key or mouse pressed.

  2. Participants actions are recorded and saved in a server.

  3. Said actions trigger the corresponding motors via serial.

  4. The “medium”/drawer moves the pen accordingly.


To divide the work, I focused on developing the crowdsourced experience and Jackie focused on building the wearable. This blog post will mainly cover the user experience and server development while Jackie’s will focus on the development, prototyping and building of the wearable. Here is a link to her blog:


It being the first time I build a server, I started by booking office hours in order to get an idea on how to diagram the process. Turns out there are many different ways to approach it and those don’t necessarily mix. It was a lot of trial and error but a huge learning experience that I’m grateful for.

I started by building the HTML side of the interface in p5 and, as per Shawn’s help, following Dan Shiffman’s tutorial on incorporating and express to a p5 sketch and connected it to Jackie’s arduino sketch via serial. The main road block I encountered here was allowing cross-network connections to the server and recording users input. I tried several things from this point, installing nrgok in order to support cross network connections, tried creating json files out of the input data, pushing them into arrays, looked into the service twitch and building more of a chat server (which Dan Shiffman’s tutorial technically did) but nothing worked.

I showed the process to my friend Luming who helped me go about it a different way. First I needed to separate my serial code from my html code (I had them all in sketch.js). I created 3 different sketches -

  • sketch.js: here I called my key action functions and had buttons animation

  • server.js: received the key action functions

  • laptop.js: mainly for sending the information to the arduino

He also told me about which allowed me to create a specific url for any participant to join in as well as allowed for cross network connection.

Link to full code:

User Experience:

Key elements considered for the experience:

  • Incorporated in the code a pointer event with a timeout in order to prevent all of the motors to be on all of the time.

  • Created a landing page where users are introduced to their “medium” and/or drawer and given the instructions as well as the link.

  • Created a drawing pad.

Screen Shot 2019-05-08 at 2.49.36 PM.png

Special thanks to Luming, David Ríos, Shawn, Brent and of course Jackie <3


For this week’s assignment I was inspired by the readings on the subconscious and this idea of “being in touch” with it. I was particularly drawn to this quote by Frederic William Henry Myers that we saw in class:

I think it is possible that our left hemisphere, having been more constantly used than our right hemispheres, may be more crowded and blocked (so to say) with our own already fixed ideas. An external intelligence wishing to use my brain, might find it convenient to leave alone those more educated but also more preoccupied tracts, and to use the less elaborated, but less engrossed, mechanisms of my right hemisphere.

During the automatic exercise in class, much like with everything else that seems to ask of me to relinquish control (i.e. meditation) I found myself thinking too much about it and not being able to go about performing the task. When it came to doing the exercise on our phones, I found it to be easier because the options were already in front of me and all I needed to do was ‘randomly' choose. There is much to say about whether I attempted to control the outcome, but it was interesting to me that I found a certain level of comfort in letting the operating system do the automatic writing for me.

So with this in mind I wanted to create a program in which the user can ‘tap into their subconscious”. The user inputs a text and the program mixes it, using Markov Chain principles and RitaJs parameters, and outputs a different version of it. Sort of like automatic writing in reverse in a way, in the sense that the user inputs something their consciously intended to write and the program attempts to ‘decipher’ what their subconsciousness meant to say.

I was inspired by this piece in particular:

I started by doing The Coding Train’s tutorial on RiveScript. I initially wanted to go with RiveScript because I was interested in exploring more of an interaction with the program. However, I was not able to properly install it. From my understanding (and I very well could be/probably am wrong), I need to run RiveScript from a text editor and can’t directly from the p5.js editor. I started editing on VS Code but could not get my local host to run. After I installed the latest version of python, the command line for running a local host on the terminal changed and for some reason it won’t open it.

I moved on to getting it to work on p5 and RiTa as per themémoire involuntaire no. 1 piece.

To start I wanted to input a memory or excerpt from my journal. Using .getPosTags() function from RiTa to get the parts of speech in the text. Then, using the rhymes function, I would switch these words for words that rhyme but don’t hold the same meaning. Lastly, using the Markov chain n-grams method, I would mix up the arrangement of the text itself.

My intention with this is for the text not to go completely off what the conscious mind wrote, but trying to find what might be underlying it. This idea that our consciousness might be filling a blank with something similar but not exactly what we meant. Sort of the same idea as/going back to this quote from ‘Drawing on the Right Side of the Brain’:

"[W]e have learned to see things in terms of words: we name things.... The dominant left verbal hemisphere doesn’t want much information about things it perceives—just enough to recognize and categorize. The leftbrain... learns to take a quick look and says “Right, that’s a chair....” [...] The left-brain has no patience with this detailed perception and says..., “It's a chair, I tell you. ... [D]on’t bother to look at it, because I’ve got a ready made symbol for you.” . . . When confronted with a drawing task, the left hemisphere comes rushing in with all its verbally linked symbols...."

I followed Dan Shiffman’s tutorial and adjusted it accordingly. Here is the result so far:

Screen Shot 2019-04-03 at 1.28.09 PM.png
Screen Shot 2019-04-03 at 3.30.55 PM.png

It is not doing everything I intended it to do. I need to work on:

  • remove blanks

  • make sure the whole text is included all of the time

  • replace parts of speech that rhyme or are similar


For this week’s assignment, we were asked to “invent an “-omancy,” or a form of divination/prophecy based on observing and interpreting natural events.”.

I spent some time thinking of what could be categorized as a “natural event” on the internet and came to the conclusion that one of the most organic is user experience (in a way). How a user navigates through a webpage / program, the order of the clicks, time spent on it. Even though this in a large way designed to work a certain way, it is ultimately the users decision/actions/interests/subconsciousness that directs how they navigate through it. This can be further capitalized with the content of the page.

With this in mind, I wanted to create a personality test that reads the “constellation” of your clicks / navigation using mouseX and mouseY using the following criteria:

  • the action itself needs to come directly from the user, with no prompts or direction.

  • if x then y

The idea is that these random gestures or ways of navigating will give the user an insight into who "they really are”. Using the corpora list of personality traits and setting parameters for how many ellipses the user can draw, based on the coordinates that are created from it, the program will generate a random personality trait for the user.

Unfinished code:


Screen Shot 2019-02-27 at 2.23.26 PM.png

For this assignment we needed to: “Invent your own “oracle deck.” Your deck doesn’t have to be a physical object (though it can be).” It proved to be much harder than I expected it to.

At first when looking over the brief, I was drawn to Morgan’s Tarot & Phantom House style. I liked the idea of deconstructing a story (in one of the examples it seemed to be personal, the other someone else’s) and creating imagery and assigning meaning to it.

After last class and when asking myself questions like “can a computer program be a ‘reader’, I started thinking about what types of “readings” we do both digitally & analogically. I believe it was Ashley, last class, which compared social media to a type of reading, where icons carry certain meanings. I tried narrowing it down and following this path, but it didn’t lead to anything. I started creating a tarot deck around popular meme’s, with the intention of correlating the meaning we have already assigned to it online and the meaning it would get from being used to tell fortunes but it seemed to fall flat.

Then I tried working around a particular story and deconstructing it and got stuck. i found myself changing subjects, authors, stories without arriving to something concrete. The fact that the imagery (even though it doesn’t even need to be physical or image heavy but I can’t seem to put myself on a different route) is so important made me second guess every decision.

I decided to loo at the brief and references again and realized, in both cases, I was reading them in a similar way that I read comics. I was also particularly drawn to Calvino’s views when readings last class’ assignment and was also interested in tarot decks as a way of story telling, not only fortune telling (are this even different?! no. yes they are) It made me think of one of our classmates comparison between Scott McCloud’s ideas and Calvino’s style from last class.

At this point I was already in a time crunch but went down this path. I took imagery from Daniel Clowes’ novels and I’m in the process of creating a deck around it. I chose this artist in particular because it’s one of my favorites and I’ve read most (if not all) of his novels. My intention, once I am finished, is to see what kind of stories can be told from mixing all of these ‘excerpts’ from these novels.

Artboard 1.png

I am in the process of adding this to a p5 sketch that will randomly assign one card in a specific order, building a ritual around it. I will then document what kind of stories come from it.

To be continued..

MEDITATION #1 - Morning Ritual

Screen Shot 2019-02-12 at 9.15.58 PM.png

For this assignment I tried to create a tool with the intent to ‘ritualize a ritual’. When looking at my own daily routines and looking at the rituals in respect to individual-collective-rational-irrational, I noticed that the rituals I most consciously perform are the ones that are most strongly correlated to my anxiety. I researched the relationship between psychology and rituals and found several articles (included below) that point out the relationship between both and explain that rituals are a way by which we believe we can control situations, even though they may be uncontrollable. In other words, rituals can help minimize anxiety. Additionally, I noticed some of the rituals I perform just because I was brought up catholic, even though I don’t practice it anymore. This made me think of an argument presented by French philosopher Blaise Pascal, called Le Pari Pascalien, in which he argues that a truly rational person will believe in God whether it exists or not, because if it exists, then the person reaps the rewards it promised. If it doesn’t, they don’t have anything to lose. It is certainly arguable, but this concept introduced the possibility that we may also follow or pick up certain rituals in a conscious way with the expectation they will work, even though we might not truly believe the ‘rationale’ behind it.

Wanting to explore this and the placebo effect idea of something being true just because you believe so, I decided to create a morning ritual where the user is prompted to input whatever they are most worried about for that day (i.e. meditation presentation, doctor’s appointment, traveling, etc). The tool then generates a random “mini-ritual” to perform that will help the user ease their mind and consider a positive outcome. It aims to give the user the idea that they can somehow control the situation, making them approach the situation more confidently and hopefully helping them overcome fears/anxieties/concerns. The generated responses are all rituals or practices suggested by specialists to reduce anxiety/relieve stress, so even though in a way the “mini-rituals” are generalized and not directly related to the users particular situation, they would be practices that would help ease the user’s mind.

Ritual Labs describe the characteristics of a ritual as: redundancy, repetitiveness, rigidity. I want to explore whether the repetitive act of getting up and checking the program before anything else every morning would do its purpose, regardless of the fact that the actions required by the program vary every day. I read in one of articles (can’t remember which one) that it takes +4 days for a ritual to set in. I have also read that it takes +21 days for a habit to set. I will do this for the duration of that time frame and report back on the results.

In regards to the actual implementation of this idea, I struggled with the code (sorry, Allison!!). I am having an issue formatting the “answers” that are pulled from the array using the DOM library. Because of this, as of now, they are not in the same font/size/placement as the rest of the design and it’s driving me crazy. Also, I would like to try to include in the program a timer associated with each response along with a visualization so that the user has a guide on how to follow each “mini-ritual” and for how long.

Here is a link to the sketch:

Below is the code:

let index;
let answer;
let button;
let tea;
let morning;
let answersArray = ["Repeat this mantra 5x: 'Don't go in your mind where your body is not'", 
                    "Hold your breath to the count of 3. Release through your mouth to the count of 3. Repeat this 10x.", 
                    "Repeat this mantra 5x: 'This is only a paper tiger'", 
                    "Do and hold child's pose for 3 minutes", 
                    "Take a breath, sit comfortably, let go and pay attention to the sounds of the room or space you're in. Stay in it for 3 minutes before checking out.", 
                    "Make your bed neatly and consciously and you'll approach the challenge the same way", 
                    "Take a 2-3 minute ice cold shower", 
                    "Pet a dog", 
                    "Go on a 30 minute walk", 
                    "List 3 things you're happy about this morning."];
let drawAnswer;

function preload() {
  tea = loadImage("images/tea.png");

function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  canvas.position(0, 0);'z-index', '-1');

  morning = select("#morning");
  txt = select ("txt");

  // button = createButton('ease my mind');
  // button.position(windowWidth/2-45, windowHeight/2+270)

  let button = select("#button");

  // let answer = random(answersArray);


function windowResized() {
  resizeCanvas(windowWidth, windowHeight);


function draw() {
  image(tea, windowWidth / 2, windowHeight / 2, width / 2, height / 2);

  // selectAnswer();
  // function windowResized () {
  //   resizeCanvas (windowWidth, windowHeight);

  // }


function selectAnswer() {
  console.log('I CLICKED THE BUTTON');
  let r = floor(random(0, answersArray.length));
  let txt = createDiv(answersArray[r]);
  txt.position(250, 600); 
  // createP(answersArray[r]);