Winter Show 2015- post reflection

The Winter Show was an amazing success for us. It was the first time our microcontroller was consistently working, not to mention the longest we have ever used it.

Days leading up to the show I never thought I’d finished the final product of the gloves. I was still very nervous for the day of the Winter Show if they would last the two days. We had a variety of users from tall men to very young children, all fit their hands nicely in the gloves.

IMG_3393 IMG_3394

IMG_3357 IMG_3360

IMG_3368 IMG_2897

Right before the show began I add two more pieces of non-conductive velcro, which was helpful to wear the cape without using the battery. Although I was super pleased with the final iteration of the cape, it didn’t have the best functionality with the game. Once a user began moving their arms to fly, the cape more often than not, slipped off.

When we discovered that the cape was hindering users to play the game with a lot of movement, I began having the cape act as a reward. Once someone, usually a child finished the game, they were rewarded with the cape as a symbol of being a superhero.

IMG_2826 IMG_2828


I learned an incredible amount from this project. Eve and I were super proud with the result. I know truly understand why everyone says to start early. That’s a lesson best learned with experience, especially with the fabrication aspects of the project. I am excited to continue learning about wearables, coding, and fabricating more in the upcoming semester.

Superhero cape progress

This was a  super successful week for the superhero cape team! Eve and I managed to put in a lot of hours, tested many things, and have a much clearer vision for our final project. The main issue we faced this week was finding the right microcontroller for our project.

Last Thursday, which feels like a year ago, we met with Benedetta who helped us troubleshoot our issues with using the BlueFruit with the Arduino Mini. Two important things we learned was that there was an issue with the BlueFruit and accelerometer we were using. We spoke a lot about how we could calculate speed with the accelerometer. The advice she gave us was to go back to testing on the Uno until we are certain about the data we are getting. This was hard personally to go a few steps backwards, but retrospectively it was all so worth it!

As recommended by Benedetta, I went back to the serial lab input labs when we graphed data from Arduino. First I mapped all three axis points in different colors, and then just limited it to the data we will actually be using, which is mainly the z-axis. This ended up being a great way to initially tests other things.

When we started to feel more comfortable with the data, Eve worked on a cape calibration programmed through p5, which turned out AWESOMELY!

Since the data aspect was good, I went to focus on starting to fabricate glove prototypes. After talking to Teresa in the Soft Lab, we spoke about the idea of making fingerless gloves, which will eliminate anticipate issues with sizing. I then whipped up a shiny, purple glove.

IMG_3104 2

Thankfully, Friday was Soft Club meeting was all about big switches. It was great to talk with other ITPers who are interested in soft fabrication and soft circuitry. Plus, it was awesome to discuss and walk through ideas. I have been progressively getting more and more interested in this topic. Jason Beck is very knowledgeable about soft circuitry with his amazing work in assistive technology and very generous with his time (and basically has anything you could imagine to borrow).

Having the glove prototype helped me to visualize the rest of the project. For the past few weeks I have been designing the cape to have the gloves attached to sleeves that would be sewn in. This would mean that the microcontroller would live in the back of the cape and wires would run down to each arm. This would be kind of complicated, especially for someone with no experience with soft circuitry at this scale. Teresa and I discussed this a lot and I would just need to make sure the wires are secured, but also flexible to accommodate the users’ movements. This made me very nervous as I was uncertain I’d be able to successfully build this.

I put that aside on Saturday and worked on implementing the accelerometer data inside of a sketch made with a webgl canvas in p5.

The complicated part of this was making sure the incoming data was adding to the camera. Initially they were at the same speed, which meant each time the accelerometer would drop, or return to the resting state the camera would then jump back.

Screen Shot 2015-11-25 at 9.19.17 AM

This was a great success for us and allowed us to think more about our next prototyping tests.

Saturday took a turn for me later in the day, however. I began thinking more about the cape and all of the wires and the uncertainty of not knowing which micrcontroller we would be using. I am not sure why it to took me so long to realize that by having the gloves attached to the sleeves of the cape would hinder tall people to use the cape. Then I decided to consider having a microcontroller in the actual glove. This would eliminate my concerns with the wires and allow the cape to have more movements.

On Sunday I spent most of the day exploring microcontrollers: sensorTag, RFduino, and Moteino. We reached a place where our uncertainty of microcontrollers led us to be swayed in every direction that came our way. Teresa emailed me Sunday night to tell me about a microcontroller that might be “the one”– The Adafruit Feather 32u4 BlueFruit LE.  Finally, we decided to take office hours with Tom for Monday to discuss this further.

After meeting with Tom he helped us understand more the data we were receiving. He looked more into the Adafruit Feather and confirmed it would be a good choice to try out. So, we bit the bullet and ordered one with a lipo battery. In the meantime he advised us to test the accelerometer on a Leonardo, as its processor is the same to the Feather, meaning once we get the Feather it would a simple transition.

After that I spent some time trying to work with Adruino Mini + BlueFruit. This worked with the accelerometer. So I decided to solder more wires on the board to accommodate a switch and make it more compact to test with. That led to an hour of soldering that should have taken less time and ultimately did not work. For sanity’s sake, I put that aside and went back to the Uno. My goal was to not only get the accelerometer working, but also a switch in order to emulate our final project.

This was very challenging for me. The data coming in for the switch and accelerometer was fine in the serial monitor and the console in p5, however, the push button wasn’t changing the background (as I coded it to), but rather it sped up the camera. That’s when I realized the data was interfering. Finally I was able to get it to work.

The next challenge was doing that same thing on a Leonardo. Simple, right? 7 hours later…

Screen Shot 2015-11-25 at 9.52.49 AM

Now I feel ready for the next steps. Prototyping this inside of a glove.

As for the cape, I worked on simulating the cape’s fun effects when the user puts it on.


Final proposal: Welcome all superheroes

For my final ICM project, I will be collaborating with Eve Weinberg from Dano’s class. We both share a love for children’s books and have been working together for Samsung’s VR lab. The idea for creating a story around superheroes arose from a thought I had to make an interactive superhero cape for my PComp final. Eve had reached out separately to gauge my interest in collaborating on an interactive story for ICM. These ideas alone seemed cool, but the opportunity to combine them sounded like basically the most exciting idea ever.

Why superheroes? Great question! Before ITP I had taught English as a Second Language for a variety of ages, demographics in several geographic locations. Although I taught children for 2 years, most of my experience is in teaching multilingual adults. I was one of those teachers who secretly believes/wishes they are a motivational speaker. This led me to putting any teaching activity on hold to give a 5-10 minute talk to my students about why they were there. Why were they learning English? Why were they in NYC? Why were they in San Diego? Why are they in this specific class? It almost served as a reminder to them and myself when we tend to get a little comfortable in class and forget how important it is to be engaged in your own learning process.

Additionally, when I served on City Year at a high school in Queens as the 9th grade Literacy Coordinator, I spent most of my day having conversations with my students about their lives in and outside of school. Maybe you’re thinking what’s the point of that if my objective was to help them read and write better. And even more, maybe you’re thinking what the hell does this have to do with your ICM final idea. In short, I believe that everyone’s a superhero, but it’s an individual’s choice to practice their personal super powers. I also don’t not believe I am the only teacher in the world who thinks like this. In fact, I am under the firm belief that all teachers believe this about their students. In this project, I want to explore how we can show anyone they’re a superhero. I hope to convey what it means to be a superhero and help people find that power within themselves.

Is this meant for kids? Another fantastic question! Yes and no. Of course, we want to empower kids, but we also want adults to unleash their child-like imagination.

Learning can be both incredibly empowering and paralyzingly scary. In order to learn, one needs to be vulnerable, in order to be vulnerable, one needs to feel comfortable. In order to feel comfortable in an uncomfortable situation, one must trust their learning environment.


Summary: In this interactive story, a user will have the opportunity to test their skills as a superhero in order to save their school from a blackout. The story will begin by putting on a cape (possibly a mask and gloves) that will help the user navigate through the experience. They will learn about 5 superhero traits: wisdom, compassion, focus, bravery, and confidence. For each trait they will complete a task to get them closer to the fuse box, which will help them turn on the lights and save the school.

To get some inspiration, we visited the bookstore, Books of Wonder.


IMG_2973       IMG_2973

We found a lot of great books to read and use as resources.

IMG_2977       IMG_2976


After creating an outline of the story, we then decided our text would rhyme.

Screen Shot 2015-11-04 at 9.24.53 AM Screen Shot 2015-11-04 at 9.14.50 AM

Screen Shot 2015-11-04 at 9.15.11 AM Screen Shot 2015-11-04 at 9.17.44 AM

These are a few slides that represent what our story will look like in p5.

FullSizeRender 18

ICM final draft

Posted in ICM

Here comes the sound and video

Screen Shot 2015-10-28 at 10.55.17 AM

I had so much fun making my sketch this week. I think it was a combination of getting more comfortable with code and making something that tells more of a story. I decided to go with something a bit silly and just have fun with the process. I worked with sound and focused on volume thresholds. The idea was based on a longer project idea I was considering that helps someone understand their own volume and tone. Often when we speak about something that we are passionate about, we tend to get louder. Sometimes this volume change is misinterpreted. I think it’s especially difficult to perceive volume and tone when you’re speaking in your non-native language. Even as an American from an incredibly loud family, I tend to shut down when other people’s volume increases. I have a difficult time communicating when both parties are yelling. However, I am sure that my volume also increases or changes in a discussion, debate, etc, which I can be unaware of in the moment.

If you’ve ever had a conversation that involved the statement, “I’m not yelling, you’re yelling” or even in a situation where you find both parties, or even one accusing the other of yelling. To deal with this issue, I thought of visualizing volume and eventually tone. To begin with this assignment I just focused on volume and decided to make it more playful.

To start I got comfortable with working with thresholds. I made a simple sketch that shows increase of volume with different shapes and colors. Once the highest threshold is hit, particles are triggered to move randomly across the sketch. It also shows how many particles are moving across the screen, as more are added as the volume continuously increases.

Screen Shot 2015-10-28 at 11.13.18 AM

With this basic idea, I decided on how I would tell a story using this visualization. My objective is that you must help the flowers by giving them more a sun and in turn more flowers will grow. Here, when the highest threshold is hit, two things happen: the sun appears and continuously gives more light to the flowers and the song “Here Comes the Sun” is triggered to play.

Screen Shot 2015-10-28 at 10.55.26 AM

Posted in ICM

API and data

This week was super challenging for me. I learned that working with APIs takes the coding experience to a new level. However, I also learned the limitless possibilities we have in working with data. Data isn’t something I think about very often. In fact it’s something I’ve subconsciously trained myself to avoid, as it typically involves numbers, which scares me. BUT, if I have learned one fundamental thing at ITP in the past 2 months (only 2 months!), it’s that math is our friend. Math includes numbers. Numbers are the basis of data. Data tells us what we are all doing and visualizing it helps us understand it. It’s amazing! So, it’s worth it.

I tried exploring the process of implementing an API and started with NYTimes. What I was able to do honestly did not excite me very much, and in turn didn’t motivate me to create something visually interesting. I need a purpose. Even as a very illogical person, I need things to make sense and know why I’m doing something. Why am I showing something? Why am I spending time to code something to show people, including myself? Why does anyone know?

After thinking a lot about it and losing my mind a bit, I decided that I would benefit more by creating my own JSON file. Then I asked myself what data would be interesting to me and then asked if that would also be interested in anyone else. Two of my greatest interests other than education are people and languages. I love exploring how people can learn with others. What we can learn from each other and languages allow the endless opportunity to communicate with anyone. Languages can create barriers, but they can also eliminate boundaries we subconsciously put up. At ITP there are so many boundaries when we first walk in–we plunge into an unparalleled environment of coding, collaboration, technologies, and languages. The last one is the most used and overlooked. We are so focused on the languages we learn inside classrooms: C++, p5, Javascript, Illustrator, Unity, Python, etc but we often forget about the languages used outside the classroom. The languages many people at ITP use to not only further understand their understanding of

Posted in ICM

DOM, what are you?

This week was pretty tough for me. I definitely would say that I went to, what I call, the dark place of coding. That’s when you suddenly feel like  you are inside a never-ending cave of of errors, or even worse when there are no errors, but the code is not doing what you want. I’m not sure if it was this “fall break” or my underestimation of the understanding and power of DOM. DOM, if that is your real name, what are you?

In everything I do I need context to fully create and work 100%. I begin to lack motivation when I don’t know why something is. And this was a very strong feeling this week.

Before I reached a point of creating anything, I tried to absorb as much information about DOM as possible. I realized that I had never used images in a sketch, so first I tried to do that. And then eventually got to toggling a video. I was able to get that to work and use a video of a PComp project. Then from there, I decided to play around with a button controlling more in a sketch. I came up with the idea for a children’s story I have been working on. The very abridged version.

Before getting to that I met with Moon for office hours. We spent an hour of talking about DOM.

Screen Shot 2015-10-14 at 11.11.50 AM

It looked a lot like this, which makes me speechless. I have no words to even begin to understand this.

So, for the sake of time and my own sanity, I decided to go back to my idea and put DOM aside.

Screen Shot 2015-10-14 at 11.16.36 AM

Currently there are 6 pages to the book. It took me awhile to understand how to make each page like a “scene” that has both an image and text. Basically I made two arrays–one for the images and one for the text.

Here is the first array for images which are triggered when the button is clicked in another function.

Screen Shot 2015-10-14 at 11.21.08 AM

Here is the array for the pages. It took me a very, very long time, but I finally figured out how to customized the text on each page.

Screen Shot 2015-10-14 at 11.19.29 AM

To continue on this, I think there must be a better way to have both arrays inside one “Scene” object, but can’t wrap my head around how to do that.

Posted in ICM

Functions, Arrays, Objects, oh my!

This week my main focus was to make my code from last week more concise. I want to continue building on my game idea, eventually creating a timer, levels and more challenging interactions. My code went from almost 400 lines to 97. Screen Shot 2015-10-06 at 10.06.03 PM

I first created a constructor function and made parameters for each part of the bouncer. The color refers to the original color of each ball and the target, which is seen in the next part refers to the color the ball turns into after being clicked.

Screen Shot 2015-10-06 at 10.09.19 PM

For the palette array that I defined previously, I hardcoded the color values. Since there are 10 balls, I created 10 color values to be assigned to each.

Below I pasted each screenshot of the game sketch. Each ball begins grey and as they are clicked they turned into their assigned color.

Screen Shot 2015-10-06 at 10.04.26 PM

Screen Shot 2015-10-06 at 10.04.38 PM

Screen Shot 2015-10-06 at 10.04.51 PM

Screen Shot 2015-10-06 at 10.04.59 PM

Posted in ICM

Catch and pop

This week I had one main goal– to code my entire sketch from scratch and to make sure I understood all of the logic within the code. I was getting worried that I was making sketches and getting code to work, but not really understand how and why. This is very important to me, especially as we progress in P5 and then eventually into other programming languages. Rather than starting to code and seeing where it takes me, I decided to draw out what I wanted to make and try to create algorithms to make things happen the way I wanted.

It began with an idea to have a ball bounce up the left side of a triangle and have a ball roll down the right side. But after I got the ball to roll, I became uninspired and brainstorm a new idea.

Screen Shot 2015-09-29 at 9.22.10 PM

I started thinking about moving balls on the bottom of the screen. In order to get  a ball to move back and forth to a certain point, I knew I had to do some math and figure out how to do that.

FullSizeRender 4

Although this took all of my memory of geometry and most of my brain power, I was so happy with myself. From there I was able to get a few balls moving to a certain point and then back again. I used the triangle as a guide.

Once I had that, I decided to add more balls to the equation. Still using 4 triangles as my guide.

After this, I wanted to make the balls increase in size every time they are clicked. However, in order to do this, I need to understand how to do this. I created a separate sketch to make one single, un-animated ball enlarge when clicked. Soon enough, I changed my idea to have the balls disappear when clicked. In order to do this, I just made the balls change to the same color as the background.


Posted in ICM

Collaborative code

Goals and collaboration

This week’s assignment was exciting and challenging. I found it very helpful to work in a small group and share ideas about our codes. From the beginning, Emmanuel, Paula, and I each had one skill we wanted to practice. Rather than focusing on a visual outcome, we initially wanted to conquer our personal goals.

After being inspired by last week’s class, I really wanted to bounce balls on all sides of the screen. This began with one initially moving horizontally from the bottom left of the canvas toward the right. It took me some time to figure out how to restrict the ball within the canvas and ensure that it would continuously move back and forth on its own. Then I added another ball on the top of the canvas also going horizontal. For this ball, I need to define its limits on the y-axis, in order to ensure it would only bounce toward the perimeter. I made the restriction from 0-200, using if-statements.

The most challenging part of this was to get the third ball to move along the y-axis. Initially the ball would bounce vertically down the page without moving on the x-axis at all. Eventually I understood the importance of having different speed variables for each ball.

Once I got all 4 balls moving, I reversed the shapes moving horizontally and then vertically.

Screen Shot 2015-09-23 at 12.07.51 AM

Screen Shot 2015-09-22 at 11.57.53 PM

I eventually I decided to add a basic slider to alter the color of the shapes.

Combining code

Paula’s main goal of this assignment was to practice rotating shapes. When we combined our code it created this amazing continuously changing image. We ended up with 4 sliders: rotation, diameter, count, and shape color.

Screen Shot 2015-09-23 at 12.26.19 AM

Screen Shot 2015-09-23 at 12.25.50 AM

Posted in ICM

Making things move


Making things move using code is one thing, and making code do what you want is another animal. I wanted to make sure that I understood the logic of the code more so than creating something visually beautiful.

Below shows that there are three “flower” shapes using ellipses. The largest of the three doesn’t animate, but acts like the base, as if the three shapes are one.

Screen Shot 2015-09-15 at 10.16.55 PMScreen Shot 2015-09-15 at 10.16.29 PM

Screen Shot 2015-09-15 at 11.56.18 PM This shows the three flower shapes.

Screen Shot 2015-09-16 at 12.16.33 AM

I wanted the two smaller flowers to move to the right, but return to their original position and then repeat. To do this, I created the variable “limit” to help track the position of the shapes as they move. When the code initially runs the shapes grow bigger as “limit” is initially defined as “0”. Once “limit” is over 100 the “wide” and “tall” variables decrease.

In order to ensure the shapes would return to their original position value, I made an if-statement that said once CircleA and circleC are greater than 360 (on the x-axis), it would return back to the value of 25. Although this isn’t the best transition, since the shapes jump back to restart the animation, I was happy with the exhale/inhale simulation.

I chose to fill the color of the ellipses with a random color that is different each time the code runs. To ensure the ellipses are filled differently each time, I created the variables ballR, ballB, ballG in the setup function.

Screen Shot 2015-09-16 at 12.19.45 AM

I wanted to an action controlled by the mouse as well.

Screen Shot 2015-09-16 at 12.19.45 AM

Finally, to show the change in colors of the background as the code runs:

Screen Shot 2015-09-16 at 12.23.27 AM

Posted in ICM