Author: Jania Jones

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.

 

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.

 

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.

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.

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.