Week 4 – A web of words

Concept

For this week’s assignment, I knew right off the bat that I wanted to do something with poetry. Having felt inspired by Camille Utterback’s Text Rain piece, I thought that an unexpected poem concept would be interesting and originally wanted to use a database of google searches to generate poetry. However, after not finding any databases that struck my interest I decided to take a break and come back to the assignment later. It was then that I started writing a poem inspired by the feeling of being homesick that I ended up having my idea. In the poem, I kind of jumped around a bit as I dissected how my homesickness portrayed itself in my life and ended up getting the idea of a word web. From there I decided that I wanted lines from my poem to connect to other random lines from poems I’d gathered on the internet.

Components 

Because I was somewhat combining the database option with the generative text output I decided I wanted to keep the design of both aspects to be relatively simple so as to keep my expectations fairly realistic. However, even what I thought would be simple to execute, took a lot of trial-and-error / re-starting for simplicity. Generating the typewriter like output is pretty simple in the code but took a lot of planning and replanning on my part as I kept getting stuck with the line breaks, and how the words were being stored.

Once I got that rolling I wanted to focus on how I would incorporate the database of poetry. I ended up creating a few different methods so that I could randomly generate information in my poem, and then have it located in the provided poems. Then, just for an aesthetic component I imported a font so that each line of poetry had a bit more uniqueness to it and added visual aspect. You can also click the mouse to generate more words with different excerpt of the poems which I think further instils the idea of how everything is connected in some megaweb (even in ways we could never imagine)

An Aspect I Am Proud Of 

I think in writing this program I put more of my ‘programming skills’ to the test than I have in the past. I needed to spend a lot of time on the design process because after hitting a few dead ends I realized the importance my algorithm played into the functionality of my code. Although this is not the part I struggled the most with, I’d like to highlight my functions to generate the random words and phrases seen below.

function randomWord() {
  let randLine = lines[int(random(0,23))]; //choose a line from my poem
  let words = split(randLine, ' '); //make each word
  //an element in an array
  let chosenWord = words[int(random(0, words.length))];
  //choosing a random word from the random line 
  wordInData(chosenWord); //find it in the data set
}
function wordInData(chosenWord) {
  let attempts = 0; //preventing max stack call error
  while (attempts < 1000) {
    let randomDataLine = dataPoems[int(random(0,dataPoems.length))];
    let words = split(randomDataLine, ' ');
    //doing the same thing from my poem
    if (words.includes(chosenWord)) { //if random word is found
      magazineLine = randomDataLine;
      return; //stops the function from continue 
    }
    attempts++;
  }
  // If no match found after maxAttempts, choose a random line
  // = random(dataPoems);
  randomWord();
}

I chose to highlight this code because it took me quite a long time to figure out how to parse the data from both text files to make them into arrays I could work with (although in the end it ended up being quite simply I just didn’t understand the structure of loading files).

Final Product (double click for the random poetry!)


(Also I know from this week’s reading that we should have to explicitly say what to do for it to be good design and user-friendly but Rome wasn’t built in a day!!!)

Reflection

This excerpt however, also brings me to what I’d like to improve about the program. I’m still not really sure if this is an issue with the data set of my program or just poor design on my part but I was running into a maximum stack error when attempting to find words in the data set of poems. Because the program would iterate over 1,000 times trying to find a word, it would end up crashing would also created a lot of stress and wasted time.

Therefore, in the future I’d like to find the root of the issue and redesign the program so that it is solved. Although I am proud of what I designed because of how far I came in terms of hardcoding my version, I know that this algorithm is far from ideal and definitely want to tweak it. Furthermore, I’d love to make it more interactive with maybe the user choosing a word to search for instead of the program generating it for them but just hadn’t gotten that far conceptually with this version.

Week 4 – Reading Response

The Psychopathology of Everyday Things by Dan Norman was an interesting read as it caused me to deeply analyze the very mundane interactions I have with everyday objects in my life. The “Norman Door” phenomenon highlighted an interesting problem that I found to clearly illustrate the importance of addressing usability in what we design. It is a very common (and embarrassing) experience to walk into a glass door or continuously pull an unmarked push door. But if that is the case, if this issue is so prevalent, why aren’t we doing more to fix it? Two hours ago, I might’ve said because that’s just life, and walking into a very clean glass door is sometimes exactly what we need to stay humble. However, after reading Norman’s critique of these confusing designs, I’ve realized it doesn’t necessarily have to be our life.

After doing a bit of googling and further diving into this Norman door concept, I was reminded of the most frustrating design feature I’ve ever come across. If anyone lives in a NYC apartment, or any urban apartment building, they may be able to relate. Most of the time, these building are designed with a lock on the front door to your building and then another lock to your apartment. Many of these apartments will often have one key (for both locks) where one side of it opens building and the other opens your apartment. A common user error is to insert the wrong side of the key into one lock when it should be the other. (I know this sounds a bit confusing, try to imagine something simple, I’m overcomplicating it a bit) After 8 years of living in the same apartment I still sometimes insert the key the wrong way and believe there has to be a better way while still having to only use one key for both doors.

My proposal is that there is some kind of tactile imprinted indicator on each side of the key that tells you which side to use. My key personally is different colors on each side so in theory it should be very straightforward on which side to use but somehow I still couldn’t tell you which one is right (it also doesn’t help that the colors are not uniform for all copies of the key, so you have to memorize multiple combinations). If there was a small “F” for front door, and an “A” for the apartment door, I think even that would help. This may be too simple of a signifier but I think even a raised dot on the front door side and nothing on the apartment door side would help (so you could feel for it in your pocket as your approach the door instead of fumbling around at the front door.

I believe all of Norman’s principles of design are applicable in interactive media because they enhance the interactive experience between the designer and user. Not only does his focus on discoverability clearly correlate to a seamless experience for our user’s, but it reminds us as designers that we can only view our product with the end in mind, while the user’s are the opposite. I conceptualized this a bit more with what it’s like to put together a pen. If you’ve just taken it apart, you remember where every piece goes, and exactly how the pen should function; but if you’ve just been given a bunch of part and told it should make a pen it might be a bit more difficult to assemble.

This also leads me to discuss Norman’s conceptual modeling idea. I think an effective way to gauge your usability is to test this model with someone else. For every project we’ve done so far I usually send it off to my friend’s or my mom with a set of instructions on what they should do in order to generate activity. However, in the future I might just try and show them without any guidance and see what they are able to discover. This works an indicator for me as to what mapping makes sense and what does not. Although implementing all of these ideas is far easier said then done, this reading, in conjunction with the ideas from the previous week about what interactivity truly means has me excited to create a well rounded product that hopefully incorporates most of these standards.

Week 3: Rainbow Wind Chimes

Concept

When trying to decide what I wanted to do for this assignment, I found Chris Crawford’s definition of interactivity coming to mind. In previous assignments, I think I was too focused on one or two aspects of interactivity that made my piece feel like it was lacking something, despite me being finished. So in getting started with this one, I took to the internet for some general brainstorming on what interactive art could be. After a quick Google search, I came across the following image: 

This ribbon installation by Benoit Pailley caught my attention and became the main inspiration for my piece. In addition, either in class or through clicking through other people’s  work I saw a cool blending trail element  and definitely wanted to incorporate that feature into my own project.

Lastly, as I began to see the project develop further I was reminded of wind chimes (mostly because of their rectangular shape) and their movement in the fading out of colors so decided to go with that as my overall theme. I briefly considered making all the rectangles hues of green to represent the flow of nature but felt that that was a bit too far of a reach and was more comfortable with the brighter, louder colors for this one. I thought the bright colors on contrast with the black and white background was a nice juxtaposition with the soothing nature with which the objects are moving.

Components 

Although it made a big difference in the final outcome making  the object trail as they move was super simply. I simply added on a second parameter to background(0, 10)  so that the alpha transparency value would smooth out the color of the rectangle for every frame. I got this idea from Ethan Hermsey  on Stack Overflow.  For the foundation of the code (generating the rectangles and having them move) I referenced the code we reviewed in class, more specifically Ball Class 2. From there, I simply added an array og objects so that I could store all of the rectangles in one place, and change them by referencing for (let rectangle of rectangles) .

I added a few ‘interactive’ (not sure if they live up to Crawford’s definition) components for the user that are accessed through the mouse and keys. For starters, when the mouse is double clicked, all of the rectangles become shades of grey and depending on what key is pressed, the rectangles will flow from a different side of the canvas. Also, the spacebar changes the colors back from shades of grey to multi-colored and all the rectangles stop moving when you hold down on the mouse.

An Aspect I Am Proud Of

I am most proud of the interactivity in this assignment. Although once you get one side down, it is rather easy to apply it to the other three I ran into little problems (like dealing with keyCode() and keyPressed() that prolonged the process. Furthermore, I ended up undoing a couple of changes with these moving pieces that took me quite a while was rather proud of myself for doing so because although it made me feel like I wasted time, it was all in the name of the artistic process.

function doubleClicked(){
  //why does it change direction for bw but not back to color?
  whiteBack = true;
  for (let rect of rectangles) {
    rect.color = random(255); 
    rect.speedX *= -rect.speedX;
  }
} //color -> BW change direction (after first time?)
//bw -> no change
function keyPressed() {
  whiteBack = true;
  if (key === ' ') {
    for (let rect of rectangles) {
      rect.color = color(random(255), random(255), random(255));
      // rect.speedX *= -rect.speedX;
    }
  }

The code that I’ve embedded is not my entire keyPressed function but actually a piece of keyPressed() and the entirety of doubleClicked(). I chose these two because they were the first two functions I added to alter the rectangles movement and thus the most difficult for me to implement.

Final Product

Reflection

Overall, I am fairly satisfied with the outcome of this piece. It is by far the most aesthetic thing I’ve created for class so far and was an effective application of the concepts we learned. However, I feel like it lacked depth in terms of meaning and kind of just developed as something I’d enjoy visually.

Also, there are two odd bugs that I couldn’t figure out and would like to solve in the future. The first one being that after switching from black and white to color (or vice versa) there are streaks of the previous paths of the rectangles as if they were created in a background of a different color. From what I could tell, I set it so that the background would be the same throughout (either black or white) but when it is supposed to be white, it almost appears grey against the white-streak contrast. Finally, in some instances when the rectangles are returning back to their starting side (after bouncing on the opposite wall) they just fade away and I could not figure out why. I used the code from class  for the walls of the bouncing ball (if (this.y < 0 || this.y > height) ) for both x and y (when deemed necessary) to ensure they stayed within their boundaries but was unable to get it to work how I imagined.

All in all, I really am pleased with this piece and do actually want to fix these issues because once that is done, I do feel like the project will actually be complete.

 

Reading Response – Week 3

After reading the excerpt from Chris Crawford’s “The Art of Interactive Design” I am excited to explore my own personal definition  of what interactivity is and how I can apply it to what we create in class. I think I would also use the three categories Crawford gave us to determine whether or not something is interactive. Listening, speaking, and thinking seem to be the standard for ‘quality interaction’ so I believe we should also apply them in our design process. I think the listening part might be the most difficult to implement because I’m not exactly sure how that would be done creatively.

To improve the user interaction in my P5 sketches I think even just consciously asking myself, is this program listening, thinking speaking, will show results in one way or another. However, to go further, I think I’d like to let my imagination go a bit further and consider what I’d enjoy interacting with. So far, I have been limiting myself to rather simple projects because I was afraid of the more daunting aspects of implementation. Using these three key standards I think even implementing my ideas will be easier because I can ask myself, well how do I do this? Ok, if the program is ‘thinking’ about what the user wants, maybe I can code a few options for the program to choose from based on user input and what it hears.

Similar to what Reas seemed to be advocating for, I think Crawford wants us to think a bit more abstractly. Whether or not something is interactive might be a harder question to answer than what one might expect and can be debatable in many different contexts.

 

Week 2: Comparison is the thief of joy

Concept 

For this week’s assignment I had to spend a lot of time brainstorming and somewhat fumbling through the dark before I had a sound idea of what I wanted to create. Originally, I was stumped as to how I would use effectively use a loop while still creating something ‘artistic’. However, after watching Casey Raes’ talk, I felt more confident in the fact that art did not fit some predetermined definition I made us.

Thus, I came to the conclusion that I wanted my piece to focus on comparison, and how it effects us as people. I started out with a sketch and planned for something much more complicated than what I ended up producing but it gave me a starting point for my code.

Components 

After giving myself a bit of a reality check, I decided the three rings would be stationary and depending on where the user clicks the mouse, a different element of the piece would be highlighted. Each of the three rings (representing unity altogether) also represent separate themes. The highest one represents individuality and when the user clicks on it, the rings separate and display yellow and purple colors. I chose these two because across cultures they represent royalty, wealth, and prosperity which I believe can only flourish through sufficient strength and independence.

When the ring to the left is clicked an image resembling the Seed of Life appears which is a symbol of creation and harmony across many religions (in slightly different variations). I chose this symbol to represent the peace that we find through self-reflection. Lastly, when the ring on the right is clicked, the entire unity symbol changes colors randomly which represents a person’s creativity and unique characteristics.

An Aspect I Am Proud Of

The aspect I am most proud of is what happens when you click outside of the three rings. A static-like image is created in the background which is intended to represent the ‘noise’ from society that often distracts us from understanding who we are. I used nested for loops to create this and was a bit indecisive on what I wanted the image to become. As I was writing the code, I was kind of just moving some loops around to see what worked and what didn’t and when I got to the grid design, became interested in how the image could imitate that of static.

function static(){
  noStroke();
  frameRate(40);
  for (let x=0;x<6;x++){
    for (let y=0;y<6;y++){
      fill(random(255));
      rect((x*100),(y*100),100);
    }
  }
}

Final Product

Reflections

Overall, I’m quite proud of the creative process I went through to come up with this concept. Although I did not meet my original goal in terms of the technicalities, it took a lot for me to generate these ideas and actually get something out of them so I am rather satisfied. However, in terms of improvements, there are a lot of areas in which the code could be written more efficiently (i.e. not redrawing the symbol every time user interacts with the mouse and instead just adjusting the parameters). Furthermore, in the future, I would like to dive in to the ‘oscillating-objects-unity-symbol’ idea I had going just to see it through.

Reading Reflection – Week 2

I found Casey Reas’ Eyeo talk to be really interesting because it gave me a new perspective on how technology can create art. Although I would consider myself a fairly creative person, recently I’ve felt surprisingly restricted by how I can use code to make art. Reas’ work, in particular the one that represented the movement of cancer cells inspired me because it showed how interpretive art can be and also the unique ways in which we can reference aspects about life to influence what we create.

I also found it interesting how Reas distinguished between pieces he deemed complete and others he did not. He labeled a few of them as rather simple or mundane but as a viewer they seemed complete to me. Although this seems rather insignificant I believe it highlights how personal the artistic experience is to an artist. This acted as a reminder for me to work with intention because once I have a goal in mind, like Reas, I believe it will be easier for me to deliberately work on my projects with creative freedom while still having goals in mind.

All in all, I enjoyed the refreshing prospective Reas provided through displaying his own work and hope to apply it to my own methods. Seeing the wide array of examples and applications has not only given me ideas for how I might approach this week’s project but also gives me more confidence to freely explore future developments.

Week 1: Self Portrait

Concept

For my self portrait I wanted something that represented a few aspects of my personality in ways that I don’t normally think about them. I tried to think of puns/inside jokes within my life that would add to the self portrait both visually and conceptually. I also knew that I wanted to add some interactive component/movement in the portrait but was unsure as to what exactly I wanted when I got started.

Components

To walk you through some of these components lets starts with the most obvious, the color changing background and sun-emoji mouse. I am a visiting student from New York, and have spent the last 10 years in Harlem, NYC but am originally from Florida. Florida is often referred to as “the Sunshine State” and although I consider myself a New Yorker, still believe that being born there is important to who I am. I found implementing the color tracking background components and sunshine mouse to be relatively simple but spent a lot of time working on this piece because of the color theory aspect. I had a very difficult time match the colors of the background to a “Floridian sunrise” but ended up on settling with this blue (representing night) to orange (daytime) transition.

let c = color(mouseX-200, 100, 100);
  background(c);
//sun
 textSize(48);
 text("☀️", mouseX, mouseY);

An aspect I am proud of

Another component I would like to highlight is the camera/flash feature. A big hobby of mine if film photography so I thought I’d add in a little camera around my neck to capture some beautiful scenery. I added the flash mainly because I wanted something interactive but also thought of it as a joke because I am quite bad at taking photos with flash. Although this code is also quite simple, it is what I would like to highlight as what I am particularly proud of because I had quite a bit of difficulty trying to get it to work. I was having a lot of trouble distinguishing the uses between mousePressed(), mouseClicked(), and mouseIsPressed() but ended up solving the problem by finding a tutorial on the click-event feature.

//camera flash
  if (mouseIsPressed){
    //referenced vidianindhita's tutorial
    noStroke();
    fill('white');
    ellipse(380, 550, 50, 50);
  }

My final product

Reflection

All in all, I really enjoyed this assignment and was excited to work with something new. I found manipulating the shapes to make different images more difficult than I expected it to be and enjoyed the challenge of trying to figure out what shapes could make what facial features. In the future, I would like to fix the color issue with the sunrise because I think it is a super cool feature that just needs a bit of tinkering. I’d also like to try and figure out what other dynamic pieces I could add. For instance maybe moving clouds or a sun that rises on it’s own without the mouse. Also, I did attempt to track my pupils onto the mouse within the parameters of the whites of my eyes but didn’t make much progress so hopefully I can figure that out too.