Day 42 @ ITP: ICM

Week 6
Assignment #1

Combine an html slider with an array.

I realize there are way more complicated ways to do this. This past week I got a bit way-sided by other classes, but definitely want to catch up—and have ideas for how I could use various applications in ICM for web or projects. For this one I decided I wanted to add an image, which is something I hadn't done yet. I combined it with one of Shiffman's tutorials on adding words with an array. The words are cheesy. But at least the application worked! Maybe this could be some office lobby art.

If you click on it the word changes. If you move the slider the transparency layer color changes:

Source

I tried adding other images but couldn't get them to coexist on the same canvas. Working towards it. 

Next I tried uploading my own image (I realize this is not technically part of the assignment, but eventually this is going towards adding images in an array, or at least animating one if I can combine it all before class). I added in the same place where you add .js files associated with the sketch.

_89803957_original-hall-barn.jpg

Click to add more "~" wavy line symbols... Move the slider to change the color transparency:

Below I was able to get a few images uploaded from the internet into my sketch in an array, but I didn't get to the stage of animating them. I wanted to make something change automatically or with a slider, like rotating the images or adding and subtracting the images with mouse clicks. But I will have to figure that out this upcoming week (or some other interesting interaction or animation with objects...for the next homework assignment...):

Day 41 @ ITP: Phys Comp

Week 6
Midterm project progress update

Today Jim and I had our second meeting about our midterm project. We scheduled an appointment with a resident, Nikita, to get some advice on project development for it. But first we met and tested plugging the Arduino with Jim's MIDI sketch into my computer to trigger more interesting sounds in Logic using a software synthesizer called Omnisphere. We did some troubleshooting using these instructions that were in the book "Arduino Music and Audio projects" on using MIDI Hairless with an audio editing program:

And...it worked! Apparently we just needed to install this driver for it to be able to work with other programs besides MIDI Hairless and we were able to successfully trigger notes with different voices in Omnisphere using Logic. We also figured out how to scale them there into different scales, and tested some other interactions or changes to the sound that we would potentially want to trigger using MIDI from the Arduino. 

Then we met with Nikita and asked her about a few different elements: What the best kind of enclosure would be, and how to mount the buttons, were my biggest questions, as I am totally new to soldering, and haven't taken fabrication yet (And I also feel partially more responsible for designing the enclosure as Jim is helping a lot with the coding, though we are also making sure with each step of the project that I get the process for each element as well — his explanations are very clear and helpful!) She said we could use some of the buttons I have and hot glue them to a cardboard or cheap plastic enclosure. And with a simple laser cutting project we could map out the exact design we want to make in Illustrator and then cut the right holes, solder the buttons to wires so they sit properly above the enclosure, and that's about it. Also probably for this I could use an Xacto knife if we go with cardboard, which is probably what we will go with for this since it is just a prototype...

We also asked her about interaction design for it and what would work best, describing that we basically want to create a MIDI controller where the pulse rate sensor would change the tempo and play sounds, and a few buttons would change different effects on the sounds. It turned out she had actually made a similar project shaped like a Walkman using a plastic soap box, some of the same buttons I had acquired, the black push buttons (Note! she also said we could get buttons for free in the shop!), some hot glue to adhere them to the enclosure, soldering to attach the buttons to the breadboard, and functions from the buttons that made the audio play, fast forward, rewind and stop. 

After our meeting for advice with Nikita, Jim and I regrouped to re sketch how we wanted our project to work. We also decided that a knob might be best for some interactions such as changing the pitch (to the left to make the note more flat, and to the right to make it sharp), and that we would add a button that would change which instrument is selected (based on how many times it is clicked), or change the key or scale (also from one button, based on how many times it is clicked), and one that would add a sustain to the last note triggered from the sensor.

We also tested the pulse rate sensor monitor and it worked, reading Jim's heartbeat and sending it to the serial monitor and the serial plotter, looking much like a heart rate reading display in a hospital. We tweaked the parameters a bit so that the LED indicator on the Arduino blinked more like a heartbeat (at first it was blinking twice when it hit the threshold of 550, so we changed it to 650 and it started to blink more like a normal heartbeat rhythm).

Our next step is to code a button that will change a selection every time it is pushed...as well as figure out from the book which of our interactions will be doable using MIDI.

Day 39 @ ITP: Phys Comp

Week 6
Midterm project: the beginning...

I met with Jim Schmitz today to start working on our collaboration for our midterm project. I found a pdf to the book "Arduino Music and Audio Projects" on the NYU library online and shared it with Jim who read it before we met and explained to me how MIDI works in binary code.

Notes:

The first four digits of 0000 send whether or not a key or button is pushed. The second four digits 0000 send the note. (?)

In binary 1 = true and 0 = false. 

(a & b) = if one is false, then it is false

(a | b) (a or b) = if one is true, then it is true

Binary has a value of 0 or 1 and each bit after goes up in the powers of 2.
Or 1, 2, 4, 8, 16, 32, 64, 128.
1x16 + 0x8 + 1x4 + 0x2 + 1x1

Normal numbers are in the powers of 10... so ones, tens, hundreds, thousands...

Jim's notes while explaining to me...

Jim's notes while explaining to me...

A prototype of our prototype

We came up with a sketch of how we want our project to work. We had already decided on a musical instrument that would involve interactive elements using MIDI. Together we looked at materials we had to work with, and decided on an instrument which would be controlled by a sensor (most likely a pulse rate sensor attached to the user's index finger) that will change the tempo of the sounds, which in turn will be altered through push buttons that add effects or otherwise change the sound. The sound information will be generated through MIDI from the Arduino into a software instrument using an audio editing program (such as Logic or Ableton) or using Hairless MIDI (which was mentioned in the book "Arduino Music and Audio Projects.")

midterm_project_sketch_v1.jpg

Some inspiration

Day 36 @ ITP: Phys Comp

Some inspiration for using light in an interactive audio/visual installation...

Day 36 @ ITP: Phys Comp

Notes on readings for Week 5:

Making Interactive Art: Set the Stage, Then Shut Up and Listen
by Tom Igoe

...if you’re thinking of an interactive artwork, don’t think of it like a finished painting or sculpture.  Think of it more as a performance. Your audience completes the work through what they do when they see what you’ve made.  Figure out how to suggest to them what their course of action could be, and how they might uncover their story, and their own emotional interpretation of the work.

Example: Happy Feedback Machine

One thought on this I had from talking about interactive pieces in class today was that at Yoko Ono's retrospective at MoMA a couple of years ago there was one room where the instructions were simply: "Touch each other." I noticed that no one was going in that room. Maybe they were intimidated by the open ended-ness of the instruction. I am wondering if sometimes there can be too little instruction too. So getting the balance just right between too much and too little instruction could also be key in helping someone know what to look for or how to get something out of the experience. Another quote I thought of, though I can't remember who said it, is that sometimes if you don't tell people what to look for, they'll miss it. Once I held a concert at sunset and advertised in the description for it in the invitation that the sun would set during the first set. After we played a few people came up to me and said it was so nice to watch the sun set while the music was being performed. I also wondered if they would have had as much awareness of that, however simple it was, if it had not been pointed out as intended as part of the experience. However I also think there is an analogy between books and movies here — books allow you to make your own images, hence freeing the imagination. Movies do it all for you, making it easier to check out the imagination part of your brain.

I ideally would want it to be so obvious how you would interact with an installation that barely any instruction would be required; the installation would set the scene in itself. If the intention is to create a meditative installation, is it necessary to say that or just most important to create an inherently meditative space where people can do whatever they want or feel inspired to do, or feel whatever they choose to feel while in it? I like the idea that the audience completes the work — they are an integral part of the whole interaction, and they are not controllable. Nor do I want to control them, but maybe rather suggest a way of experiencing or interacting with the space through how it is set up, without words. These are all things to think about when starting to make interactive projects in the future.

Sketching User Experiences: The Workbook
by Saul Greenberg, et al.

Note: Start sketchbooking/drawing again!!! Installation ideas!!!!!

Day 34 @ ITP: ICM

Week 4
Assignment #1

Recreate your sketch from the first week using a function

Step 1) 

Building off of the code Aarón helped me make, I changed the parameters and tried to figure out more which each part was doing. Supposedly in this version, in order to create the optical illusion, circle is drawn 7,000 times instead of just ten times like in the last exercise, and each circle is calculated to be less than 0.1 spaced apart to create the illusion that it is slightly vibrating or moving.

On p5js.org: Source

On p5js.org: Source

Next, I would like to draw two simple triangles with a function in the background, and add a circle. It won't be exactly like the original drawing but I am allowing myself to riff on the first one a bit... 

On p5js.org:Source

On p5js.org:Source

3) Now to add the circle. I will do it with a function even though it's just one circle. Maybe I will also try making it a sphere, instead of a circle? To make it a little more challenging or exciting...

Hmmm... This is what I came up with. I tried the sphere and it broke the whole code. So I went back to adding an ellipse. At first it made the triangles disappear when I added it as a separate draw function, but when I defined it and then included it in the draw function that called the triangles in showed up. I made the fills different for each by adding that manually. It's different from the original but a similar idea. I am going to keep playing with creating functions and layering them before our class on Weds 10/11 and try to come up with something with a sphere. Also still trying to grasp how push(); and pop(); are used, as well as translate, so will study up on those as well.

Final:

On p5.js: Source

On p5.js: Source

Original sketch from Week 1's assignment:

Day 29 @ ITP: ICM

Week 4
Quiz Catch-up from last week...

I was able to figure out the first few questions on last week's quiz (with some help from videos and tutorials, honestly, I could not write the codes on my own) but was totally stumped on these last two exercises. I met up with Aarón the resident to go over these, and realized through our meeting and his advice that in order to learn how to learn how to write shorter code sometimes it is easier to do things with tons of lines of code at first, just to break down what is happening — and then simplify it later once you get the concepts down. 

Doing the quizzes is helping in general to force myself to figure some things out, but I have yet to actually write anything from scratch without checking a source somewhere. The concepts are sinking in but the next step or challenge for me would be to write some of these from scratch, possibly only with p5.js as a reference...

Note: The last exercise is similar to how the mirror board piece in the ITP lobby works! Or at least how the squares are mapped...in terms of registering movement and altering their appearance I am not quite understanding that yet.