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


This week’s assignment took me awhile to take in. So, I’m going to do a bit of post-reflection blogging after presenting my typefaces and expressive words. Choosing a typeface to represent your name and even who you are is incredibly challenging. It makes you think of who you really are, what do you really represent, and what do you want to be represented as. A name is such a significant element of who we all are and for me, I feel very strongly about this as I have two names. Karalyn, being my given name, of which I will respond to if called. And KC, what I’ve been called since I was about four years old. It’s been roughly twenty-three years of being called this name, and yet I still face difficulty in presenting my name to people I meet. I am both Karalyn and KC. To me, they are much more than just names; they each represent something significant about myself. People who get to know usually say, “I couldn’t imagine you as a Karalyn. You are so KC”. And funnily, those who have known me for a long time and with whom I have a deeper connection usually get to a point where they naturally begin calling me Karalyn. These people are only handful.

What does this have to do with choosing a typeface for my name? If I am going to choose a typeface to represent who I am, I should present a name that I believe represents who I am in my day-to-day life. And even though have an imbalance of letters for a first and last name is challenging, I chose to do this assignment as KC.

Below are the typefaces I chose. Looking back, I would choose differently. However, as of right now, I think that Alegreya speaks to simplicity, but gives a sense of imagination. It’s a typeface that doesn’t need a lot to say a lot and I like that. Also, I love the typewriter feel of Inconsolata and how it appears similarly to the typeface in a programming editor.

Screen Shot 2015-09-26 at 6.43.22 PM

     Maven pro light


Screen Shot 2015-09-26 at 6.45.13 PM


      Humanist sans

Screen Shot 2015-09-26 at 6.46.25 PM


      Humanist Sans

Screen Shot 2015-09-26 at 6.48.05 PM



Screen Shot 2015-09-26 at 6.49.06 PM


Screen Shot 2015-09-26 at 6.50.02 PM

     Modern Antiqua


Expressive Words

Below are my hand-drawn expressive words. I plan to work on my Illustrator skills and bring these images to life.

FullSizeRender 2

FullSizeRender 3



Getting more comfortable with circuits

This week I re-did a few of the labs to practice setting up the board and coding. In trying to practice using variable resistors, I had some issues when I tried to include two photo sensors and two LEDs.

Below you can see that only the green LED is on when I plug in the Arduino. This was my first issue. I couldn’t figure out why the red light wasn’t turning on. I ended up trying out a few different LEDs and it still didn’t come on.


The other issue was related to my code. I used the map function to change the range of photo sensor so it could communicate to the LED output. But when I printed the values of the green LED it was still showing 400-900, instead of 0 to 255. This could be related to having issues understanding the map function, or if something is wrong with my wiring.

Servo Motor Lab

After trying out the Analog Output lab with tones (see previous post), I tried the Servo Motor lab.

It took me a few tries to understand where the analog input, power, and ground went in relation to the motor. It seems as though the more I understand how to code and wiring functions, I become less creative in how I can apply this to real applications.

Analog output tones (with flex sensors)

I decided to re-do the tones lab this week and use flex sensors for my variable resistors, rather than photo sensors. Although I like the idea of detecting light and using that to create an output, I was feeling that my results weren’t very accurate. And finally realizing that the shop has flex sensors to rent, I went to town.

A few strange things about this lab:

The flex sensor connected to Analog Input 1 didn’t detect anything in the serial monitor. I changed the flex sensor a few times, and it didn’t seem related to the sensor itself.

Also, a question about this lab: other than declaring the global variable for speakerPin as 8, we don’t mention which analog inputs the flex sensors are connected to. How are the sensors reading the input? Why is that not important in the code?


Screen Shot 2015-09-29 at 7.54.40 PM


Sensing the surrounding

Screen Shot 2015-09-24 at 9.15.29 AM

Screen Shot 2015-09-24 at 9.15.49 AM

Screen Shot 2015-09-24 at 9.14.03 AM

We are the sensors

This week in general was very overwhelming. There were days, moments, actually, where I was feeling a lot of clarity and things would start to make more sense. And then suddenly, it felt as if I lost everything and hadn’t understood anything to begin with. I’m in the belief that ITP is actually a language school. The languages we are learning aren’t ones we necessarily use to verbally communicate with one another. Rather we are exploring ways in which we understand what’s happening around;  we’re exploring how to convey to others what we’re constantly thinking about; we’re exploring ways in which we want to see change in the world. We’re communicating through the things we create and build. And we’re using a variety of languages to do so– Arduino, p5.js, Photoshop, Illustrator, github, Unity, C Sharp. These are some of the languages I’m currently learning. The languages I’m attempting to use to create my ideas. And like learning any language, the only way to learn one is to use it.

Learning about analog input and output has made more sense than anything we have done so far in PComp. I think because it’s most like how humans take in and convey information. In the workshop on Tuesday, the residents gave a physical representation of how analog input and output works.

“Let’s say I receive information. I am reading the information. analogRead. And then I want to tell someone else. analogWrite.”

Just like humans, or possibly any living thing in the world, there’s no yes or no answer. We’re much more complicated than that. What’s my takeaway? We are the sensors here. We are the analog input and what we create is the output.

Below was my favorite of the labs we did this week. I loved it because it inspired me the most. Although I didn’t build anything upon this, I thought of ways to apply this for future projects to build upon.

I love the idea of sensing light. I also love the idea of helping people feel more comfortable. Especially when learning. Here at ITP we are absorbing tons and tons of information. Sometimes after long days when I try to go to sleep, I won’t be able to turn my brain off. Sure, I could watch something mindless on Netflix, but that’ll still keep my brain busy. I want to create a device that when light is sensed, a lullabye-type song will play. The sound played can be altered and personalized for the person. The sounds of the ocean, rain, or even a calming song. I’d love to also adapt this for children.

Imagine a child’s mind whirling with constant wonder. They have so many thoughts going on at once perceiving/sensing what they see, hear, or feel in the world. All the want to do is tell you about it. Ask questions. Get answers. Give their “output”. Then it’s time for bed. How to calm their mind down? Other than reading, sometimes a child just wants to hear a song, which results in often an awkward lullabye. With this said, this device would sense as the room would get darker, and a soft lullabye would play. Or it could even be personalized to be the voice of their parent/loved one when they are sleeping at a friend’s house.

Interactive Technology

I have a few ideas for interactive technology:


  • CVS self-checkout
  • Movie theater kiosk
  • Disney World Fast-Pass kiosk

For each of these, I can’t help but think of Brett Victor’s rant, in that using screen isn’t as interactive as it really could. Nothing is changing shape and giving us clues that things are working in the way they should.

I’m going to explore the interactive technology of self-checkout, specifically at CVS. I regularly shop at CVS. I have a personal reason for using self-checkout and I’m curious if my reason is similar to others. Whenever I have to buy something I’m slightly embarrassed about, such as Gas X, or an obscene amount of chocolate that’s obviously for me, but I’m pretending I will share, I will go to self-checkout. This idea works with Norman’s article on emotion design, as the experience is then more pleasing for the user.

However, funnily enough, the actual interaction most of us have with self-checkout kiosks are not very pleasurable. This ties along with Norman’s idea of affect and behavior. When you touch the screen, but the screen senses you want a different button than what you intended to choose, it’s common to feel frustrated. You might even feel embarrassed. Perhaps this negative affect will cause you to hurry up and finish your transaction before a line too large complies behind you. Conversely, you might be so excited that virtually no one (that you know of) saw that you just bought 4 types of candy bars and a bag of beef jerky that you breeze through the checkout process.

Something I always find funny about self-help kiosks is that there is typically an employee monitoring the process. Either they’re helping with visibility of the kiosks or helping them figure out how to make the kiosk stop telling you to place your items in the bag.

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

Good Sign, Bad Sign

As someone who tries to practice positivity in chaotic New York City, where one cramped subway ride can ruin your day, I thought I had a knack for finding signs. Even though, this week’s assignment was to find actual signs, I was surprised at how challenging it was for me to not only distinguish a good sign from a bad sign, but finding signs in general.

I noticed these signs– I don’t think the actual design of the sign is necessarily bad, but it seems like it can be confusing information. I found this on the fast paced Queens Blvd. This sign is meant for drivers, are presumably zooming past and having to slow down a bit to understand the true meaning of this sign. Or maybe that’s the point?


I found a couple of signs that were filled with information overload.

This sign is located on a side street that is more used by pedestrians. It’s located near the top of the building and contains a lot of information that a pedestrian would unlikely stop to read.

FullSizeRender 2

This one, however, is placed in the subway, a perfect place to engage in leisure wall-reading. When you’re cramped in a spot during rush hour and forced to stare at the subway’s wall, it’d be easy to lose yourself in this sign. What I find overwhelming is the use of two (+) typefaces and the use of color doesn’t seem to distinguish hierarchy. The cupid-looking baby is also very strangely place upon the ‘h’ of Health.


I liked this sign at first glance. I think the typefaces, although two are distinguished between in each other. The more cursive typeface shows more importance by being the name of the dry cleaners and the print-like typeface gives the necessary information, i.e. the phone number.


This sign is a great example of telling an outsider every thing you could possibly see inside of a store. I found this interesting that not only is it a type of hardware/safety shop, it’s also a deli.

FullSizeRender 6

The sign below is a sign I want to like for my love for pizza and colors, but I find it too busy. The difference in fonts for each letter makes the sign look chaotic. I would change it by make it more simple with a single typeface and a single image.

FullSizeRender 3

I like this sign below because it’s simple, but has an elegant feeling. I think that is reflective to what the cafe is: quaint and sophisticated.



FullSizeRender 5

The winner in the “bad sign” category went to the one below, hands down. This sign is located in the subway of the incredibly populated, Union Square stop. It seems as though someone came and placed stickers upon a stop sign in no particular order.

Screen Shot 2015-09-22 at 12.39.09 AM

I decided to take this sign on as a challenge. I’m happier with the simpler images and the message. However, I think I would have changed the color or shape of the sign.

This was my second time working with Photoshop, but the first time to actual attempt to edit an image. I found myself struggling to do seemingly simple tasks, like resizing an exported image. Although I was frustrated during the process, by the end I began doing things faster and with more ease. I’m looking forward to improving my photoshop skills in future projects.

Screen Shot 2015-09-22 at 12.38.05 AM

Turning things on

I learned a lot doing the labs this week. I attended two Physical Computing workshops.

Workshop on 9/11:

  • What is a circuit?
  • What are these components?
  • I want to turn this LED on.


Workshop on 9/15:

  • Seriously, why do we use a multimeter?
  • No really, what are these components for?
  • I want to turn two LEDs on.


To apply what I learned using switches, I wanted to make a simple application that would ultimately encourage someone to finish a book.

When the book is completely closed both sets of LEDs would go on:


When the book is halfway read, the yellow LEDs turn off, and only the red LEDs are on.


Wouldn’t you want those bright red lights to turn off? Me too! So, why not finish the book?


To demonstrate someone using the book:

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


Combining the readings from Crawford and Victor with the in-class exercise to create a fantasy device, I see interactivity as a much more primal concept than I had before. I guess I had been identifying interaction with the digital age and disregarding how basic interaction can be.

With Crawford’s definition that interaction is a conversation, it helps to show that interaction not only needs two actors for the speaking and listening, but it also requires the time to process what each person is contributing. This makes me wonder how we, as producers can control the result of a user’s interaction. Each time someone interacts with a device, person, etc, it leaves some unpredictability. Overall, Crawford’s definition highlights the importance of interaction for people to grow individually and expand ideas.

Along with this idea, this is what happened during class while creating fantasy devices. In many cases, it seemed that initial ideas evolved after groups came together and expanded the idea to make sense for their individual vision. Having the devices be as unfeasible as possible opened up the possibility to create something they might have not even thought about before the class. I think that alone shows how powerful interaction is–not only were we as humans interacting with our groups to expand our ideas to eventually settle on one, we were also interacting with the materials, and having the materials interact with each other.

However, the idea that we were interacting with the junk materials goes against Crawford’s definition of interaction, as it would be impossible for a piece of paper to converse with metal to say, “Hey, this isn’t working”. Yet, working with the materials in hand allowed me to understand how the idea would come together, which I think goes along with Victor’s rant: the importance of our hands.

Hands are such a basic tool, I for one often take for granted. It’s true we always touch screens and pushing buttons, but what are really interacting with? Similar to knowing when a conversation is good, we also can understand when something feels strange or good just with our hands. Victor shows that most of the physical, digital interaction we have today doesn’t return a physical reaction, which is an important part of the “conversation”.

In thinking about digital technology and interactivity, I would say that most apps we use to talk today, especially across the globe are not interactive.


Design Analysis: Assignment 1

For this assignment I chose to analyze the design of the poster for the Japanese film, “My Neighbor Totoro” by Hayao Miyazaki.  Generally speaking, I am attracted to beautifully drawn animations, so it’s no wonder why I enjoy watching his films.

Screen Shot 2015-09-11 at 3.52.56 PM










My first observation was the subtle difference between the Japanese and English posters. Other than the language of the title, the differences are the font type for the title and the color scheme. It begs me to question, what is the significance of the color choices. We had discussed the appeal to green in the last class, as many people said green was there favorite color. Green can represent many moods depending on the shade, e.g. nature, peace, excitement, wealth. In the Japanese poster the greens seem to represent more of nature and tranquility. The poster seems to be almost made with water colors and therefore has a soft touch as if the colors were casually swept on the poster with a paintbrush.

Screen Shot 2015-09-11 at 4.00.39 PM


In the English version, however, the color scheme is based on reds:

Screen Shot 2015-09-12 at 8.20.14 AM

We see softer shades here as well. Similar to the Japanese version, the dominant shade is the lightest. Each poster share the dark shade that takes up the bottom half. Even after singling out each color, I still am curious why red for English (American) and Green for  Japanese. Often when a movie is translated into a new language, the poster differs from the original, as it will reflect the culture of the translated language. However, for these, the two are identical except for the color scheme.


I find that the composition of this poster is very balanced–the bottom half is very dark, whereas the top half is very light showing the softness of nature. The trees act like arrows, and literally point to the top half, which has a more tranquil feel.

The gridlines below show an equal balance of space. Although most of the poster is symmetrical, there are aspects that show movement, e.g. the birds flying and the larger person standing next to the smaller, and the mountain landscape. These subtle imbalances of the symmetry reflect the continuity of nature, which seems to be a theme.

Screen Shot 2015-09-11 at 3.42.00 PM


Although I wasn’t able to identify the type font of the Japanese title, the letters have a very simple precision, making them bold but not overwhelming. The font for the English poster is in Seta Reta NF (this is my first time ever talking about fonts), but what I learned is that this font is clean, crisp, and elegant. Visually different typefaces, but giving off a similar message.

Screen Shot 2015-09-12 at 8.29.45 AMScreen Shot 2015-09-12 at 8.26.58 AM




There’s a lot going on in this poster, yet I don’t find it overwhelming. I am first attracted to the face inside the dark section of the bottom. At a glance it’s not clear what the shape is, however once the face is seen, then it leads to seeing the entire entire character, which then draws the attention to the title. I personally like designs that have hidden messages and the fact the ears of the character, Totoro are shown as trees signify a nature theme, and in turn brings the eye to the top half of the poster.