In the first chapter of the book “The Art of Interactive Design” by Chris Crawford, titled “What Exactly is Interactivity?”, Chris talks about what interactivity means and sets the tone for the rest of the chapter. He starts by admitting that we don’t really know what interactivity is. However, he goes on to explain the basic idea of interaction and how it helps in creating interesting and meaningful interactive experiences using simple metaphors.

One of the metaphors he makes is thinking of interactivity as a conversation. He says that just like in a conversation, where people listen, speak, and think, interactivity also involves these three things. A high level of interactivity means that all three aspects are happening, and none is more important than the others.

One interesting point he makes is the difference between interaction and reaction. Interaction is when something responds to what you do or say, while reaction is when you respond to something. For example, books and movies are not interactive because they don’t respond to you; you just react to what you see or read. On the other hand, interactive media requires you to actively participate and engage with it. This is an important difference for designers because it affects how they create interactive content.

This distinction is important because it helps me think about my own work. It reminds me that for interactivity to be meaningful, it should not only involve users but also encourage them to interact actively. In doing so, my work becomes the conversation that Chris mentioned, my user essentially gets to think about, speak and listen to my work creating not only a greater sense of interactivity, but also an experience.

Concept:

I wanted to apply my classroom knowledge, encompassing classes, functions, and arrays, to develop an engaging interactive game. Through this process, I successfully created an addictive game. The game incorporates two classes: one for displaying the person and another for handling the moving balls. Initially, I conducted trials with balls originating from the same point, following similar paths. After receiving feedback from friends, I recognized the need for a more dynamic experience. Subsequently, I modified the code to generate balls from random points across the canvas, each with its unique trajectory. For controls, I implemented basic key functions using left, right, up, and down arrows to navigate the human across the canvas. Additionally, I incorporated arrays to introduce a new ball each time the person reaches the designated area. To enhance clarity and transform the game into a point-based system, I added a visual display of the current ball count in the top left corner. This addition encourages players to strive for higher scores, further enhancing engagement.

Highlighted Code:

//for loop which creates more balls if the human hits ball and decrements ball count
 for (let j = 0; j < ballArr.length; j++) {
   ballArr[j].display();
   ballArr[j].bounce();
   
   //if distace betwee human and ball is less than 30, move to orignal position
   let d = dist(Human.getX(), Human.getY(), ballArr[j].getX(), ballArr[j].getY());
   
   if (d < 30) {
     Human.origin();
     ballArr.splice(j, 1);
     j--;
     ballCount--; 
   }
 }

Creating this code proved to be a substantial time investment. I focused on implementing the splice and push functions within arrays to dynamically generate more balls each time the person reached the “continue” area. Through numerous iterations and referencing online examples, I was able to achieve the desired outcome, resulting in the final product I had envisioned.

Code Link: https://editor.p5js.org/Nasar/sketches/JieIBPrML

Reflections:

I take pride in the progress I’ve made, in integrating classes and arrays into my game. This endeavor significantly enhanced my understanding of these fundamental concepts. Looking ahead, I envision improving the game’s visuals and crafting a more refined character design beyond the current tree-like representation. Additionally, I aim to streamline code logic for more efficient and concise outcomes. With continued learning, I anticipate greater proficiency in envisioning diverse scenarios and seamlessly implementing them into my games. This iterative process continues to sharpen my coding acumen and creativity.

THE ILLUSION

CONCEPT

I have a deep fascination for optical illusions, which I began exploring from a young age. Among my favorite illusions is the one depicted below, consisting of multiple squares of diminishing size stacked at various angles. I decided to recreate this illusion infusing it with a rotation effect to make It more appealing.

Initially, the squares rotated in fixed positions, but I visualized a more satisfying illusion with a deliberate pattern. After researching techniques, I stumbled upon a video tutorial explaining the application of sine and cosine functions to create intricate patterns. After hours of trial and error its look never failed to create a smile on my face.

Yet, my creation remained monochromatic. To enhance its visual allure, I refined the project by applying color adjustments using the frame count in combination with sine and cosine functions. This introduced a pleasing and seamless color transition, which I extended to the background to enhance its overall appeal.

Code Highlight

translate(width/2, height/2);
  
  for(var i = 0; i < 200; i++)
    {
      push()
      
      rotate(sin(frameCount + i ) * 100)
      
      var r = map(sin(frameCount), -1, 1, 50, 255)
      var g = map(cos(frameCount /6), -1, 1, 50, 255)
      var b = map(sin(frameCount /2), -1, 1, 50, 255)
      
      stroke(r,g,b)
      
      rect(0, 0, 600 - i * 3, 600 -i * 3, 200 - i)
        
      
      pop()
    }

The Illusion

reflection and improvement

I am looking forward to  incorporating user agency into this illusion project, enabling individuals to have control over aspects such as the spiral patterns and color schemes.

I really enjoyed this talk a lot! Casey Reas’ Eyeo talk on chance operations .

One of the main ideas I found very interesting was this idea of randomness. We discussed a bit about this already in class, but I thought I’d share my perspective on the topic. I do believe that in the grand scheme of things  randomness may not actually exist. This can be especially true when discussing anything technology oriented, but from what I interpreted from the talk was something a bit more personal to the individual. To elaborate, I think randomness comes down to the individual’s perception of an event. Sure, if you give a computer a bunch of random coordinates and tell it to draw something, the computer will intake that information in a very logical and structured format and execute said command. What happens to the individual when perceiving this outcome is something quite different. Because our brains aren’t designed to function like computers, this creation by a random combination of digits appears random or out of character. You may even argue that randomness is simply something outside of our expectations or ideas, which once again goes back to what our individual perspectives are.

 

A helpful tip that I received from this video was the importance of structure with an element of surprise or randomness (excuse the redundancy). When creating art through a mechanism such as coding, one must not only understand the structure of building said creation (the logical part of the creation), but also open themselves to experimentation using our favorite word for today, randomness.

 

 

 

 

 

 

This simple p5.js sketch represents a grid of circles on a canvas. The circles are evenly spaced in rows and columns. The purpose of this artwork is to explore the fundamental principles of drawing shapes using p5.js, such as ellipses, and to create a pattern. While this version lacks interactivity, I believe that this grid of circles can be a starting point for more complex projects, where additional features and interactions can be incorporated to enhance the user experience.

one aspect of the code that I’m particularly proud of is the nested loop structure used to create the grid of circles. This nested loop efficiently iterates through rows and columns, positioning each circle at the correct coordinates on the canvas. This code snippet demonstrates the power of loops in creating repetitive patterns and organizing elements in a systematic way:

for (let x = 0; x < width; x += spacing) {
for (let y = 0; y < height; y += spacing) {
fill(0); // Set the fill color to black
ellipse(x + circleSize / 2, y + circleSize / 2, circleSize, circleSize);
}
}

Embedded Sketch:

Casey Reas’s Eyeo2012 talk provides valuable insights into the field of generative art and creative coding. Several thought-provoking concerns arise as we delve into the debate surrounding this video. To begin, how does Reas’ work, as an example of generative art and creative coding, effect our larger society? This video demonstrates the revolutionary potential of art and technology convergence and invites us to think how such developments might impact our cultural and creative landscape. Is a new era of artistic expression challenging old paradigms on the horizon? Furthermore, the video invites us to consider the evolution of human-technology connection.
Reas’ investigation of algorithms and code as artistic media raises questions about how our cognitive and sensory experiences may evolve as a result of this merger. Is there a substantial shift occurring in the way humans connect with art, as our minds and perceptions adjust to a digitally infused world? In terms of bias, it’s critical to consider if the video paints Casey Reas and the area of generative art in a favorable light. Is it objective in its presentation of the subject matter, or does it lean toward advocacy? Understanding the viewpoint from which the video is delivered can help us evaluate the material and its consequences critically. Moreover, while the Eyeo2012  featuring Casey Reas does not fundamentally alter our beliefs, it does prompt us to consider the possibilities and problems given by the union of art and technology. It ushers us into a world where creativity and algorithms coexist, inviting us to investigate the thrilling possibilities and ethical considerations that await us in this ever-changing sector.

As a kid, my first drawings were of stick figures in magical places. One stick figure would be jumping rope. Another would be reading. Two others would be playing tag. All in a giant flower field, or in space, or in a park. You get the picture. I’m still drawing stick figures now. Make sure to press your mouse down:

I don’t know how much to admit, but who really reads these besides the Professor. I’m already frustrated. I’m keenly aware of how behind my peers I am. I have big ideas but have no idea how to translate them. Between my brother and me, he’s the logical thinker. They say the devil is in the details. And as a lifelong airhead, I’m constantly worried about all the details I’m missing. I feel the consequences of my natural inattention in daily life. I feel the consequences of it when coding.

The best part of my code is the bit I saw on the Internet, linked here: https://happycoding.io/tutorials/p5js/for-loops. And embedded down below:

let lineWidth = random(minLineWidth, maxLineWidth);
  for(let lineY = 0; lineY < height; lineY+=3){
    lineWidth += random(-lineWidthChange, lineWidthChange);
    lineWidth = constrain(lineWidth, minLineWidth, maxLineWidth);
    line(width / 2 - lineWidth, lineY, width / 2 + lineWidth, lineY);

It looks straight out of a Joy Division or Arctic Monkeys poster. I took the time to thoroughly understand what was happening and make my own adjustments, but it’s something I never could’ve written myself as of now. Coding is like writing proofs. When you read a proof, you can go back through the trail of logic and understand how the mathematician arrived at their conclusion. But could you have written the proof yourself? That’s the real test of knowledge.

Never be so arrogant that you think you deserve to have been born an expert. Everyone started at one point, and what they made was bad. It was bad for a long time before it got good. You study the greats. You copy and copy and copy until you’re able to make something that’s truly your own. From here on out, I don’t want to be borrowing bits of code off the Internet. I want to write everything myself. I’ve discovered this whole new world. You have to decide whether some worlds are worth exploring. I want it to be worth it.

In his speech at the Walker Art Center, Casey Reas talks about navigating the balance between order and chaos in generative art. We had to do something somewhat similar in our assignment this week, where a lot of us started with a structure, writing code that defined the rules and parameters governing the creation of our artwork, as sort of a form of order imposed on the creative process. We then manipulated these rules to introduce variability and chaotic randomness into the system, allowing for serendipitous and visually striking outcomes.

He also explored how some generative art is dynamic and responsive to user interaction, which leads to the evolution of chaos as the art interacts with its environment. Some of us had this element of controlled chaos in our art as well, seemingly chaotic in response to changing inputs but again, governed by underlying rules.

Ultimately, what I took away from his insight is a welcoming attitude toward the idea that order and chaos are not opposing forces but can coexist with each other in meaningful ways. If you look at my assignment for long enough, the blinding randomness of colorful boxes soon blends into intricate patterns, the artist of which is chaos itself.

 

EMOJIFIED

Concept

In this project I wanted to portray myself not just through my physical appearance, but also by showcasing my personality, hobbies, and interests. To achieve this, I initially explored various methods of conveying this information, experimenting with different visual structures. However, I found that nothing captured it better than emojis. I carefully selected emojis that resonated with me and then experimented with their placement on a canvas.

I wanted to convey the idea that there’s a lot happening in my mind, even though it might not be apparent from the outside. To achieve this, I initially tried placing these emojis in a small container that resembled a portal to my thoughts, but it didn’t feel right. Then, I considered stationary placements around my image, but that didn’t quite capture what I was aiming for. Finally, I decided to position the emojis behind my portrait and give them random motion, which better represented my inner thoughts and emotions.

Creating the facial features was another journey of exploration. I stumbled upon the Bezier shape, which, although initially confusing and requiring precise coordination, presented a unique opportunity. To simplify its usage, I developed a function that assisted me in determining the mouse’s location on the screen, significantly saving me time in the process. As a final touch to enhance the project, I chose to replicate the effect of concert lights in the backdrop. Thus, when you click, dynamic lights can be observed moving behind my portrait which were also created using 3 different colored hearts.

Code that i’m proud of

Mouse coordinate function:

  //mouse coordinates
  textSize(18);
  fill(255, 50, 30);
  text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

The face

//shirt
  noStroke();
  fill(201, 73, 73);
  ellipse(189+9, 410+70, 460, 372)
  
  //collar
  fill(135, 43, 43);
  ellipse(189 +9, 260+70, 221, 138);
  
  //neck
  fill(215, 183, 150);
  ellipse(189+9, 250+70, 191, 115);
  
  //neck height
  fill(215, 183, 150);
  rect(94+9, 167+70, 190, 88);
  
  //ear R
  fill(215, 183, 150);
  ellipse(318, 170, 40, 69);

  //ear L
  fill(215, 183, 150);
  ellipse(72, 170, 40, 69);
  
  
   //Hair rear
  fill(0);
  rect(72.5, 10, 245, 170);
  
  //head
  noStroke();
  fill(215, 183, 150);
  rect(79, 10+35, 232, 186);
  
  //jaw
  noStroke();
  fill(215, 183, 150);
  ellipse(195, 200+30, 232, 179);
  
  //right eye
  noStroke();
  fill(255);
  ellipse(250, 135, 79, 41); // white eye

  noStroke();
  fill(66, 33, 11);
  ellipse(250, 135, 40, 40); //pupil brown
  
  noStroke();
  fill(0);
  ellipse(250, 135, 22, 22); //pupil black
  
  //left eye
   noStroke();
  fill(255);
  ellipse(132, 135, 79, 41); //white eye
  
  noStroke();
  fill(66, 33, 11);
  ellipse(132, 135, 40, 40);//pupil brown
  
  noStroke();
  fill(0);
  ellipse(132, 135, 22, 22); //pupil black
  
  //beard
   noStroke();
  
  let x = 12;
  let y = -120;
  fill(184, 156, 128);
  beginShape();
  vertex(79, 178);
  bezierVertex(79, 178, 178, 261, 311, 178);
  bezierVertex(311, 243, 323, 325, 195, 325);
  bezierVertex(78, 325, 75, 257, 79, 178);
  endShape();

  
  //Nose Arc
  noFill();
  stroke(171, 123, 76);
  strokeWeight(7)
  strokeCap(ROUND);
  bezier(159, 195, 181, 218, 208, 218, 230, 195);


  //Nose Tri
  noStroke();
  fill(171, 123, 76);
  triangle(194, 115, 194, 216, 230, 200);
  
  noStroke()
  fill(188, 75, 102);
  ellipse(196, 253, 94, 34);
  
  //Lip Line
  noFill()
  strokeCap(ROUND);
  stroke(133, 53, 72);
bezier(147, 246, 147, 246, 187, 266, 242, 246);
  
  //Eyebrow R
  noFill();
  stroke(0);
  strokeWeight(17);
bezier(90, 110, 105, 94, 142, 87, 166, 94);
  
  //Eyebrow L
  stroke(0);
  strokeWeight(17);
bezier(222, 93, 247, 86, 283, 95, 298, 112);

Sketch

Reflection and improvements:

In the future, I’d like to incorporate more interactive features. One idea is to make the eyes on the portrait move along with your mouse. I’m also thinking about adding different feelings or vibes that can change how everything looks – the background and the emojis – to make the project more interesting and more fun to interact with.

Reality is so insubstantial, sometimes, you don’t even know if it’s really there. Can’t quite trust your senses. Really, you can’t trust your senses at all, and yet, your senses are all you have. I’ve never been able to accept this. It’s a daily pressure on my mind.

Life comes, as Casey read, as a “rude and indigested mass.” And we order it. If you’re a painter, maybe you recognize the patterns of colors or the different hues and tones in the sky. You structure your life around these things. If you’re a writer, every picture inspires a barrage of words. You attempt to organize your surroundings into perfect sentences. You live your life on the line, through lines. However life comes, depending on who you are and what you love, you order it differently. Reality initially seems such a stable thing. But between the painter and the writer, between you and me, everything is different. Our very eyes, though they look the same and work the same, are in completely different worlds. It’s quite lonely sometimes.

I think Casey’s talk was an acknowledgment of the history and heritage that made him. I was only able to have these realizations about reality because of when I was born. Did people in the 1700s have thoughts like these? Or did they never question the stability of the reality around them? They were living in a completely different reality than I am now. One whose face was never questioned, no double glance in the mirror.

As a photographer, I was struck by how similar some of Casey’s geometrical designs were to photograms. Making photograms is the first exercise a film student does in the dark room. You throw random objects on some light sensitive paper and expose it. You end up with the outlines of simple, vague, white shapes on a black piece of paper. Casey said the simplicity of his geometrical designs encouraged you to look closer. If you changed one aspect of the code, the visuals looked completely different. In photograms, because you only see dark and white outlines, you have no idea what the objects that formed them really are. I couldn’t shake the newfound feeling that I was living in a world where all objects are in disguise. Even with the simplest of designs, you must look closer. Perhaps you could find the nature of the whole world there.

Casey visualized human experience in his art. We all begin by living in a world that is stable. And it determinedly morphs into a reality that we feel like strangers in because we realize our lack of control. The grid turns into a maze. Hence Casey’s transition into art where he was not in total control over his images. Much of the art he referenced evoked the “supremacy of pure feeling.” Our feelings mean nothing. They change on whims. They make us feel like Superman or like the world is falling apart from one moment to the next. And yet, our feelings are all we have.  Casey quoted Richter, who admitted “how much better chance is than I am.”

And maybe I can start to come to terms with my existence by acknowledging that it is the push and pull between the chaos of the universe and my attempts to order it that make it so interesting, so beautiful, so wonderful. Maybe I wouldn’t have changed a thing. Living in your own reality gets lonely. But watching Casey flick from one piece of art to the next, I got the sense that we make all these things to temper that. This is what Interactive Media is. Sharing this. Tempering that.