Hourly Comic

Hourly Comic For our first Collective Narrative assignment, we were asked to document one full day, hour by hour, in any format desired.

I decided to record and collect my day on Saturday January 28, 2017. I did my best to go about my day the way I would any other day and not try to curate it as a result of documenting it, even though I was definitely self conscious about whether or not I was doing enough things of interest.

The daily format that I usually like to abide by is the following:

1. Take a look at the news, even if the events are difficult to read about it
2. Get outside. Going from building to subway to building doesn't count.  Spend some good quality time outside.
3. Do something active.
4. Practice to get better at something.
5. Evaluate: if there is something from your day that you don't like, try to take an action to make some part of it better. **this is a new one for me.

For this assignment, I took a photograph every waking hour, on the hour. I also tried to record some audio in each environment so that it can help immerse the individual viewing this hourly comic experience.

Enjoy!

10AM

My alarm goes off and I immediately snap this photo and record my groggy voice.

It's hard to get up after a Friday night out in NYC, but I have a busy day so I need to get a move on.

11AM

After grabbing a quick breakfast, I grab my computer and look at the most recent news source so I can check #1 off my list. Floored by the immigrant ban. No words.

12PM

My alarm goes off on my phone for me to take my next photo and the hourly comic has found me on my 30-minute walk to a new coffee shop. Check #2 off the list.

1PM

I spent some time in this cute little coffee shop in Greenwich Village to get some reading done for next week's classes

2PM

There's this great dollar and craft store close to campus that i like just wondering around in.  It's so mesmerizing. For this trip I actually needed some supplies for a potential upcoming project, so I decided to drop in here as it was very close to where I had coffee.

3PM

This is what I'm looking at 3PM. Saddened by what is going on, but feeling better because of the amount of people that are sharing their support.  Because I have a busy evening, I feel bad that I can't be there also to support the issue.  No words. No audio.

4PM

To try to get the news off my mind, I head to my aerial silks class. Check #3 off my list.

I forgot to record audio in this space.  The audio would be 'tin-y' and 'echo-y' anyway, so it's probably better that I didn't ;)

5PM

The comic caught me just when I was just pulling my home-made, sour dough crust pizza out of the oven.  The pizza crust is something that I've been trying to perfect for many months now.  This one was good, but I still have to work at it. Accomplishing #4

6PM

I took the subway to Brooklyn to video record an ITP alumni-hosted event called Mixed Signals - an evening for electronic music, performance and art.

7PM

This is the event space and at this time I was setting up and ensuring that the gear was working well.

8PM - 9PM

The performers were fantastic! Have a listen to one of the pieces in the audio sample below.

10PM

Matt Romein, an ITP resident, was the headliner and performed In Triplet, a custom slit-scan based audio/visual sampler.

11PM

After a long evening of shooting, I took this blurry picture from a Lyft car driving over the Brooklyn bridge on my way back to Midtown Manhattan. No audio. Just rest.

12AM

By the time I got home from the shoot I remembered all the awful things that were happening and I wanted to do something that might help the situation.  I just wanted to do something. I remembered that there were these post cards that you could print to send to your senator. Here's the link so that resource if you're interested I'm hoping even the small things that everyone does will ultimately compound into some positive change. #5 completed

Music Cred: Rockin' in the Free World - Neil Young.

PComp Final- Dating Stories: An Interactive Film

My final project for Physical Computing and Intro to Computational Media was an interactive film that I worked on with Jina Jung called Dating Stories.

We are handing over the reins in the medium of storytelling to the observer by asking them to choose the direction of a first date.  - Creators

Description

This interactive film is a comedic, 'choose your own adventure’-style narrative directed towards adults. The lead actress in the film, Christine, has two choices from her search on a popular dating app: will she go on a date with Douglas or Jared? Ultimately the individual observer gets to decide. By using the physical, interactive board, the observer has the ability to choose what path the date goes on in the film by moving the wooden piece from node to node. Their choices and full narrative are executed on the screen.

Process

Final Project Proposal

Build of Materials

Circuitry

What I learned from user testing:

We didn't initially have a signal for the 'start' state on the board. This confused some people because they didn't know if their action had an effect when they put the wooden piece on the board.  Originally, the first video started playing when the individual put the wooden piece on start, but there was no response on the actual board informing the individuals that they were doing to correct interaction.  So after the user testing, a week before the project was due, we implementing a pulsing glow of the two LEDs around the start node that disappeared when you placed the wooden piece on start.  We also cut the first scene down so that the first choice happens almost immediately after the user puts the wooden piece on start so that they understand from the first second how they are to interact with the board.

When the user is to choose a path, on the screen there is a split screen of the two options, and the two paths light up indicating that the film and board are waiting for their selection.  This feature was very successful in user testung and really informed the user as to when they were to interact.

Final Code hosted on Github

Here are some visuals from how we created the project:

Building the board

This was my original rough sketch of how I thought the board might look like (without images)

Visual story workflow

With the image in mind above, Jina created this map for our board to be printed on acrylic

Cardboard test

Board Top

We ended up cutting two acrylic surfaces: 1) to hold the magnetic sensors and neopixel LED strips and one board that would go on top as a face plate.  Are first attempt at laser cutting the board didn't work, so we used it as the board to hold the sensors

Internal Structure

Arduino Location

We had to also add some wood to support this sensor plate

We decide to velcro the arduino and board to the bottom of the acrylic sensor plate.  This below image is that plate flipped over

Curcitry

This is what the sensor plate looks like from above, with the magnetic sensors.  This was before we added the LED strips. They would go on top of where the paths are shown here.  The holes helped to direct where each LED should be so that they can be seen in the top plate.

Door Sensor (Interna)

We put at magnet in the base of the wooden piece so that when it was placed on a node, the sensor would send the signal via serial communication to p5.js.

Final Look

Shooting the film

Here are the short boards I wrote for the film:

Image + Storyboard for Jared Scenario

Image + Storyboard for Douglas Scenario

We shot the entire film, which included seven different endings in an 8 hour shoot. Here are some stills from the day:

Film Still

Film Still

Direction Choice film still

Programming the board and the media in the browser

Here is my ICM post that talks a little bit more about my experience with the coding side of the project.

There was serial communication from the arduino to p5.js and back to the arduino which was something I haven't done before. I learned a lot of new things while creating this project. Including how to think through and break down the code into small chunks to be able to create your desired effect.  This isn't something we really go over in class, so I am happy that I am starting to get an intuition for this.

LIght testing

We submitted our project to ITP's Winter Show.

On the second day of the show, I was interested in seeing some of the statistics of what path people decided on more often.  I attached Mixpanel, an analytics platform and a company I used to work for, to see what paths viewers most often took. On the second day, the Winter Show was a four hour event. We had 80 people watch the film (according to the analytics). Below describes what paths were the most popular:

analytics

With 20%, the most popular ending was when Jared forgets his wallet and Christine has the pick up the tab after he drinks more than his fair share of beers.

Jared: Oh shoot... I think I forgot my wallet. Do you think they take Venmo?

Christine: You forgot your wallet? Don't worry, I got it. <she walks away with the check>

Jared: I can Venmo you?

<Christine continues to walk away, not acknowledging his comment>

Film Still

Final Project: ICM

Dating Stories: An Interactive Film

For my final ICM project, I decided to combine my PComp and ICM finals to create an interactive, nonlinear film.

Dating Stories: An Interactive film is a comedic, 'choose your own adventure’-style narrative created for adults. The lead actress in the film, Christine, has two choices from her search on a popular dating app: will she go on a date with Douglas or Jared? Ultimately the individual observer gets to decide. By using the physical, interactive board, the observer has the ability to choose what path the date goes on in the film by moving the wooden piece from node to node. Their choices and full narrative are executed on the screen in p5.js.

Here is what the physical board looks like:

And here are some stills from the film:

At certain points in the film, the viewer will see a split screen that gives them the opportunity to decide what the direction of the film goes in

This project comprised of filming the media, fabricating the board, programming the arduino from the physical interactions, and coding the the responsive media in p5.js.

What I learned from this project

• How to use a development server
• How to correctly work with the P5 IDE & git
• How to effectively use the developer console. CMD + OPT + J all day

I really enjoyed having the opportunity to combine my final project for both ICM and Pcomp. Having the opportunity to use the tools form both of these classes really helped to pull this idea together.

I am hosting the p5.js and Arduino code on Github. Here is the location for the Dating Stories code.

Assignment 6: Mounting Motors

In our last class we reviewed the importance of correctly mounting motors on a project. For this week's assignment, we are asked to create something that involves a motor and the correct mounting of that motor.

Working with the Motor

As per Ben's suggestion, immediately after class I headed over to the junk shelf to pick up an old CD-ROM component to strip it of it's stepper motor.

Here is what the CD-ROM looked like after removing the case and many metal layers

img_2814

I extracted the motor, but wasn't able to find any information about how much voltage it would take to power it online.  The only information on the motor were the numbers 010209. I took the motor to the floor, soldered a positive and negative lead on the motor and used a power source to determine that the motor can be efficiently powered with 5 volts.

The black piece below is the piece that held down the motor and I am surely keeping so that I can properly mount my motor

Here is the motor remounted

I'm interested in using the moving part for my project

Once I found out that this motor was actually a DC motor and not a stepper motor, I decided to scratch using it because it was too hard to slow down and I only wanted small movements in my project.

Project

I am really interested in using a motor to work with a Reveal the Message print. I wanted to ultimately use a motor that could easily be controlled with fine movements. With this said,  I ended up using a Servo since I already had one in my toolbox.

With my servo in hand, I just needed to find a mount for the motor.  At Tinkersphere I found this pan and tilt bracket:

I got the servo working in the behavior desired with the following Arduino code:

#include <Servo.h>
Servo myservo;
int potpin = 0;
int val;
void setup()
{
 myservo.attach(9);
}
void loop()
{
 val = analogRead(potpin);


 val = map(val, 0, 1023, 0, 179);


 myservo.write(val);

delay(15);
}

I decided that I would use a box I already had instead of going and purchasing something additional.

I drilled the mount and servo onto a wooden wall. And mounted the wooden wall to the box.

I then added the Arduino to control the servo and breadboard in the box.  I also drilled a hole to insert the USB cable to power the Arduino

I used a hole punch to make the hole for the potentiometer and cut a whole for the top of the servo to punch through to spin the component. I went searching at the junk shelf for a knob to make the top of the potentiometer look more polished and I found this one that fit my potentiometer perfectly:

Here is the image that I created and printed to reveal to the message.  I decided that a great way to use the servo in this reveal would be to use a CD with a red vinyl strip that would allow you to read the message when it was over top of it

Here is the disc I had from a previous project. I simply added the red vinyl, the white, laser cut topper, and the servo mounting horn:

I then simply attached the CD and made sure that when the potentiometer was turned that the words were revealed.

img_2865

Exploring Unity - 3D graphics used in gaming and VR/AR

For our last assignment, we were required to create a 3D character, use C# programming language to control the character, and put that them in an environment. We used Adobe Fuse for character creation and Mixamo to apply pre-made animations.

This is my character, Jess at Burning Man in the year 3000, when the event will inevitably be hosted on the moon.

Jess can be controlled with the following key presses:

• walk forward [ up arrow ]
• walk backward [ back arrow ]
• walk forward diagonally [ up arrow + left arrow, up arrow + right arrow ]
• air-guitar playing animation [ key 1 ]
• robot dance animation [ key 2 ]
• fall flat animation [ mouse click ]
• wait animation (randomly picks between two different options) [ key 5 ]

[video width="2880" height="1800" mp4="http://www.chrissyelie.com/wp-content/uploads/2016/12/Documentation_unity.mp4"][/video]

Here is the C# code for controlling the animations above:

using UnityEngine; using System.Collections;

public class player : MonoBehaviour {     

    public Animator anim;     public Rigidbody rbody;

    private float inputH;     private float inputV;     // Use this for initialization     void Start () {         anim = GetComponent<Animator>();         rbody = GetComponent<Rigidbody> ();

         }          // Update is called once per frame     void Update () {         if(Input.GetKeyDown ("1")) {              anim.Play ("guitar_playing", -1, 0f);         }         if (Input.GetKeyDown ("2")) {              anim.Play ("robot_hip_hop_dance", -1, 0f);         }         if (Input.GetMouseButtonDown (0)) {             anim.Play ("fall_flat");         }         if (Input.GetKeyDown ("5")) {             int n = Random.Range(0, 2);                           if (n == 0) {                 anim.Play("WAIT01", -1, 0f);             }             else {                 anim.Play("WAIT03", -1, 0f);                 }                  }

        inputH = Input.GetAxis ("Horizontal");         inputV = Input.GetAxis ("Vertical");

        anim.SetFloat ("inputH", inputH);         anim.SetFloat ("inputV", inputV); 

        float moveX = inputH * 20f * Time.deltaTime;         float moveZ = inputV * 50f * Time.deltaTime;

        if (moveZ <= 0f) {             moveX = 0f;         }

        rbody.velocity = new Vector3 (moveX, 0f, moveZ);     } }