ICM: Week 3 -Trading Code

This week’s assignment was to code a page with sliders and switch it with a partner.  We decided that since space was both an interest we would create a space shuttle dashboard.  For mine, I essentially create an image mover and zoomer with an added tint effect.

In switching codes, the biggest realization for me was how important it was for my program to be clean and organized.  I tried to make sure to clearly label each section and indent when necessary so that my partner had an idea of what I was trying to do.  This also helped me as I went along because it became easier to know where things are that needed to change.  Also, it was easier to combine different aspects of my code with my partner’s.

The hardest part of this week was figuring out how to change the tint of the picture. When I used the tint function and had variables setup for each color value, it didn’t seem to work because the tint function was in “function draw().”  Using the examples located on the p5.js website, it showed that the tint function was used in the setup only.  Although I did really want to use this method to vary the tint, I knew that by creating an opacity of the image and then varying the background I could create the same effect. Overall for my program, I created what I envisioned from the start and am happy with the result, even though I would still like to know how the tint function worked.  Here and below is my final result and here is the added tint buttons to my partner’s.

Collaboration Assignment


  1. Can the tint function work inside the draw function so that it can be varied?
  2. Why does the tint function slow down the frame rate and make the page not load? Is this due to too big of a picture size.


PComp: Week 2 – Switches

This week’s labs were a great refresher of my previous education in basic circuits.  However, I did run into a few issues when trying to create a basic switch application. My idea was to create two rings where one had an LED and the other was battery powered.  When they touched, the LED would light up.  This is a fairly basic concept but I discovered it was much more difficult to execute.  The original plan was to use rings and just attach the electronics. During the first attempt, the plan failed due to not having tape of any kind.  In the second attempt, the wire of the LED wasn’t long enough.  These two things lead to discovering the helpfulness of conductive tape in the situation. Below is the final solution.

Switch Ringsimage6

There was an issue with keeping the batteries together.

Soldering would have been a better move but for now, a clothes pin kept them together tightly:


Questions: Is conductive tape always conductive on both sides?



ICM: Week 2

This week’s assignment required the three following parts:

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

The most difficult part of this was the random function when using a bezier.  I wanted to create waves that were randomly placed but kept ending up with exaggerated waves when I made the cooridinates random within the bezier function.  I finally determined that the best way was to use translate and create those parameters as random with the limits of the “ocean.”

In addition, I was having difficulty creating clouds that would load at different y-values. When I randomized the y-coordinates, the cloud animated up and down as seen below:


After messing around with the placement of the line “cloud1.y = random(0, 250),” I found that if I placed it in setup then it would only change when the page was refreshed.  This reinstated the idea that the setup function is only loading once while the draw function is constantly reloading.



In the end, I made a monochromatic seascape that can be seen below:

PComp: Week 1

Before reading Bret Victor’s  “A Brief Rant on the Future of Interaction Design” and Chris Crawford’s The Art of Interactive Design, I thought I had a good generic definition of interactivity.  In my mind it was when an action occurred between two objects and caused a reaction.   I think this goes along with Crawford’s idea of listening, thinking, and speaking. Although, I think I might be missing a clarifying statement about the listening of the second object.  According to Crawford, it appears that in order for a true interaction to happen, both “actors” need to listen to an action, think about it, and then thoughtfully speak about it.  The analogy of actors makes me realize that it is important to add communication into the definition when discussing technology. In addition, I really liked the idea of varying degrees of interactivity.  It’s something I have never thought about until now.  It makes me curious if there would be a way to quantify the interactivity of something. I think this is an important part that can be added to the definition. Finally, a key component of Victor’s piece was that interactivity isn’t just about finger touching a screen.  Victor points out that our hands are a one of a kind tool that we fail to use.  This could be taken even further to bring in all senses.
In general, I think I am now less clear on what is considered interactivity because I realized how broad it can be while still being narrow.

For the sake of this post, I will say that a possible definition of interactivity is a human creating a various level of reaction from a piece of technology by using one of the five senses, with a focus on touch, sight, and/or sound.  The only possible example I could come up with for digital technology without interaction is a digital billboard. You can see the information displayed but you can’t change them as the average person.

Video and Sound: Week 1

The issues these articles and videos that surround plagiarism, copyright infringement, and trademark violations seem to come down to the intention of the “secondary creator.”  Is the intention of this creator to make an exact replica usually with the goal of making a monetary amount/gaining recognition or is the intention to create something new using the inspiration of the original?   The originator’s assumption of the secondary creator’s intention can cause these discussions.  I liked the quote from the Kirby Ferguson’s Embrace the Remix: “great artist steal, just not from me” when he was referring to Steve Jobs.  Does everyone want to just be inspired without inspiring?  What happens if a mass amount of people are inspired by the same thing? An example that comes to mind is the video of Axis of Awesome’s “Four Chord Song”

Something that came to mind was the difference between stealing within art and science.  It seems to be a bigger deal when it comes to creating an art piece that is inspired by another’s than when a scientist piggybacks in order to create a new theory.  I wonder if this is just because art is much more personal giving of ideas?

In regards to the walk, it was an interesting experience.  While I really enjoyed the concept, I’m not sure I enjoyed doing “Her Long Black Hair” walk.  Part of the issue was that I did this with an injured foot and the pace became off so I had to pause a couple of times to make sure I was at the right point.  This made it hard to be fully immersed in the experience.  I started to become focused on her tone of voice rather than what she was saying.  I did like that it pointed out things that I wouldn’t normally look around for.  It took me out of my tunnel vision a few times. I want to try it again when I can keep up to see if I might like it better. It also inspired me to take my own walks while trying to stay in the present instead of zoning out.  

“Her Long Black Hair” is impressive from just a technical aspect in how each sound was recorded so well.  As you can hear in the three sounds recorded during our scavenger hunt, ours are less clear.




ICM: First Impressions

After messing around with p5.js, I can say that my first impression of ICM is definitely a good one. I am most excited about seeing what can be done once we get in a little deeper.

To get more familiar with this language, I tried to add the basic shapes from the reference guide in my picture.  Each shape became easier to add until I got to the Bezier and Curve functions.  I found that the Curve function confused me because of the order of each parameter.  In my mind, it is more intuitive for the first and last parameters to be the start and stop points rather than control points. Once that was understood, it was easier to experiment with. However, I would like to know how I could create lines along the planet without just knowing exact coordinates.

ICM Week 1: Spaceship Adventure

The most exciting find was using the randomSeed function.  I wanted to add background stars but decided it was too tedious to put the coordinates in one by one.  As I was messing around with the various random functions, I found that if I put randomSeed(i), it was cause the “stars” to move around the page in an animated fashion.

Code : Randomizing Stars

Although, I am pretty happy with the results, I still have a few basic questions:

1. How can shapes be grouped together? Is there a way to “subtract” shapes from each other?

2. How can an object move across a page?