Midterm - Proposal

Midterm

For my midterm project, Alejandro and I have decided to pair up to expand on one of his previous projects that he made earlier in the  semester.

We have a couple of ideas, but haven't finalized anything concrete.

Concept

The main idea is that we want to make a music making machine that reads a strip of translucent colored material where bands of alternating color sections are read from a light sensor that is mapped to create a song. We will be mapping the different colors to the distinct tones that, which either via (1) a revolving disk, or (2) a moving flat sheet will create lyrical sounds.

Movement of music maker

We need to determine how we will move the strips of of translucent strips.  A DC motor might be effective for the rotating disk, but we are unaware of how to move the strip along a track.

Representation of colors

The other variable that we need to determine is how we will represent the colors on the strip.  Do we want to simply tape together colored acrylic sections to create the song or do we want to have it more of a contribution from the user by having them color the bands using a marker on a transparency film strip.

DOM elements in p5.js

For this assignment we were asked to create an interactive page in p5.js using p5.js dom elements. I had a lot of fun creating and playing around with these elements, but I ran into a fair amount of issues when trying to implement different ideas.

Initially, I wanted to create a photobooth where you could apply filters to the createCapture() of the video and then save that photo somewhere on the screen. I ran into a lot of problems trying to implement this. What I believe the issue was is that I am applying the filters on the canvas and since the canvas is occupied, I am not able to print them below. Would I need to have a second canvas if that's the case?

The other issue that I ran into was not know exactly when to add styles to javascript, when to add them to the html, and when to add them to the css section.  I feel like I did it wrong since I created all the elements in javascript, i couldn't have them all in one div.  Thus mass selection on the page to move them to the center became this huge task.  With that said, I'm still not sure how to navigate where each element should be created and what place would be the best to style those elements.

I don't feel like this is a finished project as I spend a lot of time just trying to get it to work, but I did learn a tone in the process :).

Here is the that I am calling instacopy.

Logo and Brand Design

We were asked to create a logo that represents us and use that imagery to create a business card. Here are my initial sketches.

fullsizerender-1

The sketch in the middle, circled, is the idea that I decided to go with.  The Hero's Journey, outlined by Joseph Campbell is a concept that I studied as an editor and actor.  Because of this I have a connection to this concept.

The Hero's Journey is visually depicted as either a circle or line graph.  I used the circle visual to create my logo.  As seen below, the three acts are demonstrated in a circular pie chart.  By making act one black, the visual can be seems as a 'C'. Which is why I decided to use it for my logo.

artboard-1

Here is the business card I created with the logo above.

I wanted for it to be a little bit more useful so i decided to take the opportunity to teach the individual about the Hero's Journey.

img_2521

The business card is an accordion-style business card where I included the stages on the Hero's Journey.

I included half of the first dot of the Hero's Journey intentionally on the front of the business card to indicate that there is information cascading.  I used this as a visual queue to encourage the individual to continue reading and open the card.

img_2522

img_2524

Serial Communication

Assignment

For the serial communication assignment, my partner Dominic and I from the Synthesis workshop added a second variable to our sketch with serial communication.

Using the potentiometer, the color of the sketch would change as you moved from 0-1023

Our original Synthesis sketch is explained in this blog post.

Arrays & Objects

We were asked to create a sketch using arrays and constructor functions. This really helped to simplify and organize the code which I appreciate, because it makes it easier to read.  For this assignment, I wanted to simply try to emulate my favourite season by making the leaves fall on the page when one clicks on the canvas. Go ahead, click above! You can also see the code here.

A struggle that I had creating this sketch was that I was trying to attempt to have the leaves fall and spin at different speeds.  This turned out to be a very daunting task and I decided I would leave that out and ask the teacher for assistance on this during class.

Last Friday, we took at stab at combining ICM with Physical computing by using serial communication to communicate between p5.js and the Arduino.  Please read about that experience at my Synthesis Workshop - Combing PComp and ICM blog post.