September 2023 – Page 19 – Introduction to Interactive Media

FlowFields- Assignment 3

This week’s assignment delved into the world of object-oriented programming and arrays. My inspiration for this project stemmed from my previous encounter with Perlin noise and flow fields. Initially, I found the code for implementing these concepts somewhat complex. However, this week’s lessons on noise, arrays, and classes made things clearer. This video by “The Coding Train”, about Perlin noise really put things into perspective for me, and this is how I stumbled upon my artwork.

The artwork I created is essentially a flow field, which consists of an array of points moving in response to their positions relative to where the mouse was clicked. Firstly, I wanted to create a Perlin noise piece, but I also wanted to have a high level of interactivity in my piece. Searching “moving Perlin noise” led me to achieve this.

I utilized a class called “point” and developed functions to display and update these particles. When the mouse was clicked, the “push” function was invoked to relocate the particle randomly, resulting in an interactive field when the user interacted with the mouse.

The most challenging aspect of this project was the “update” function. It was responsible for moving the particles to random positions on the screen and recalculating noise values based on their positions. The difficulty arose from the new concept of noise scale, which I struggled to grasp accurately. Additionally, handling particles that went out of bounds and ensuring they returned to random positions proved to be a complex task. However, by drawing on the bouncing ball problem we studied in class, I eventually overcame this challenge. Below is the snippet of code I take most pride in:

//update particles position based on the noise
update() {
  //calculate noise value based on position
  let n = noise(
    this.position.x * noiseScale,
    this.position.y * noiseScale,
    frameCount * noiseScale * noiseScale
  );
  
  //Map noise to an angle
  let a = TAU * n;
  
  //Update particles position based on the angle
  this.position.x += cos(a);
  this.position.y += sin(a);

  //if particle is off-screen, reset to random location
  if (!this.onScreen()) {
    this.position.x = random(width);
    this.position.y = random(height);
  }
}

For future improvements, I aspire to introduce a gradient shift in the flow fields, dynamically changing colors as they traverse the canvas. As I reflect on this assignment, I take pride in the progress I made in understanding these intricate concepts. Looking ahead, I am eager to continue refining my work, with plans to enhance the visual impact of the flow field. This assignment has undoubtedly been a steppingstone in my journey to mastering interactive media coding.

The Art of Interactive Design

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.

Assignment 2: Loops

For this assignment, I drew inspiration from Casey Reas, who delved into the realm of randomness in his artistic endeavors. What has always fascinated me about art is that there’s no single “correct” way to perceive it. So, I set out to create something that generates different results based on user interaction. I designed squares with circles inside them, and these circles change in size as the user hovers their mouse over the squares. This introduces an element of unpredictability and variability into the creative process, echoing Casey Reas’s exploration of randomness.

“

The part of code that I like is this:

In this section, when the mouse hovers over a square, it dynamically adjusts the size of the associated circle according to specific conditions. This results in a captivating pulsating effect for the circles when users interact with the squares. What makes this fascinating is that each person’s experience will yield a different pattern based on where and how long they hover their mouse.

I found this assignment to be a delightful exploration. It prompted me to view art and generative art from a fresh perspective, highlighting that even within randomness, there exists an underlying sense of pattern. It’s as if the elements of chance and algorithms are working together to create a structured yet ever-evolving composition.

Assignment 2 – Zentangle!

For this assignment of making an art piece using Conditionals & Loops, I tried to combine the meditative aspects of Zen art with the precision of code, resulting in a unique and soothing digital art piece.

Concept

The concept of creating Zentangles is to relax, do art, appreciate the simplicity and be grateful for the opportunity and time to do the art! A Zentangle is usually drawing repetitive basic shapes & curves on a tile of paper or cardboard. For me, this tile was the p5.js canvas, the repetitive shapes – for loops I used and my code – the pencil!

The sketch(es)!

I began with a lot of thoughts and abstract ideas on how to go about doing this and made a countless number of edits, bigger or smaller shapes, darker or lighter mode, time-based creation or mouse-interactive creation, corner positioned or center positioned, and I just couldn’t pick so I decided to give all of them to this blog post!

This one is the mouse-interactive one where, hovering over different positions on the Canvas enables different colors and shapes. To temporarily pause we can mouse click, keypress ‘s’ to stop or release mouse click to resume.

This one is time-based where it changes the color, radius and spacing based on a set time and frameRate. Mouse click pauses the loop by doing noLoop(), and releasing resumes the loop using loop().

.

A part of the code that I’m happy about is the math and the logic that went into making the circles and squares rotate and move in a specific way. I used the map() function to re-map the range of values that the radius of the circle can take, translate() to modify the center, followed by creating a function to check the position of the cursor to adjust color and spacing. For the time based one, I just used the frameCount.

function makeArt(maxRadius,spacing,numCircles,minRadius)
  {
    translate(width / 2, height / 2);

  for (let i = 0; i < numCircles; i++) {
    let x = cos(angle) * spacing * i;
    let y = sin(angle) * spacing * i;
    let radius = map(i, 0, numCircles, minRadius, maxRadius);
    let outerRadius = maxRadius*1.25;
    rectMode(CENTER);
    rotate(angle);
    rect(0, 0, outerRadius * 1.5, outerRadius * 1.5);
    rect(outerRadius*1.5, outerRadius*1.5, 17, 17 );
    push();
    translate(x, y);
    rotate(-rectAngle);
    ellipse(0, 0, radius);
    pop();
  }

  angle += 0.01;
  rectAngle += 0.31;

Reflections

I’m enjoying the assignments for this class and feel like I’m challenging myself to think more out of the box. This felt like the perfect first step towards balancing the ‘Order & Chaos’ like from the Casey Reas read! For improvements, I think I could add more shapes or curves and not just stick to the ones I did and maybe try to create a more complex mandala/zentangle!

Reading reflection – Week #2

Casey Reas opens his speech illustrating how it’s been largely the role of artists to maintain order in the face of nature. However, as he continues further showcasing his own and other artists’ works, I started to doubt this idea of his.

The work that captured my attention the most was “Signals”, created in collaboration with American designer Ben Fry in 2011. This artwork showcases protein communication within a cancer cell, where each graphical cluster represents signals between networked proteins in a cancer cell as they change over time. Individual arcs represent signals from one protein to another; arc size corresponds to signal magnitude. Professor Michael Yaffe’s laboratory provided the data. Here is the artwork in question:

Reas’ approach to data visualization as a creative expression presents important questions regarding how data representation through art affects different viewpoints. “Signals” may convey a feeling of the complicated conflicts taking place within cancer patients’ bodies, perhaps demystifying a difficult biological process and establishing a connection to their own health journey. This type of visualization can also be a significant tool for scientists and researchers in acquiring insights and developing ideas on cellular behavior.

However, when ordinary people without a scientific background are considered, the possibility for bias and misinterpretation emerges. Such simulations’ aesthetic appeal may unintentionally romanticize or oversimplify the complicated realities of diseases like cancer. It is critical to recognize that, while art can improve our understanding, it can also distort it.

To conclude, it is critical to investigate the various perspectives on this junction of art and science. How do patients, scientists, and members of the general public react to data-driven art? What are the ethical and educational consequences of visually representing complicated scientific concepts? These issues emphasize the diversity of data visualization in art, as well as the importance of taking a balanced approach when understanding and appreciating these creative interpretations of knowledge.

Reading Reflections – Week 2!

Randomness, Random numbers, Coin flipping – math class? The only time I’d hear this combination of words was in a math class. Now, adding Art to it, I’ve always heard that you should let your art flow instead of binding it until it ends up creating something satisfying and my perspective broadened significantly after watching Casey Reas’s talk on Chance operations.

However, What intrigues me more than the thought that goes into making random generative art or the experimentation involved in it, is the viewer’s experience and its subjective nature.Art, by its very essence, is subjective, and everyone brings their unique perspective to the act of viewing it. When randomness is introduced into the equation, this subjectivity intensifies. During the talk, I found myself having different interpretations for each demo piece he presented.

Taking, for example, the ‘Fractal Invader.’ While the idea of creating art based on a coin flip is amusing in itself, what truly fascinated me was how my mind suddenly began to perceive people, faces, and complete figures within the artwork. Like this one that looks like a man represented by these black and white squares.

It made me wonder why our minds often deceive us into thinking something is incomplete, and yet, duplication somehow makes it appear whole. Why do we read into it when it’s duplicated? I like that recurring appearances of elements & patterns can create a sense of rhythm and harmony within a particular piece of art.

Introspecting on Reas’s discussion of randomness in isolation, particularly his mention of “the space between order and chaos,” I realized that even this concept is subjective. It left me curious on a slightly different front. How can we determine, to what extent randomness conveys which specific emotion? because just one visual is enough for our minds to start an endless stream of thoughts related to it. I’m interested in exploring further on two aspects: understanding the balance between order and chaos and finding effective ways to express emotions through randomness in the viewer’s experience of generative art.

Assignment 3

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.

Coding assignment – Week #2

For this week’s assignment, I wanted to experiment with two-dimensional arrays. Here is the outcome of my experiment:

I achieved the two-dimensional array structure by using nested loops (a loop within a loop) to arrange the ellipses in an organized manner. The outer loop, controlled by the variable ‘x’, is responsible for iterating through the columns of the grid. It starts with an initial value ‘spacing/2’ and increments by the value of ‘spacing’ in each iteration. This ensures that each column is spaced evenly from the previous one. Inside the outer loop, there’s an inner loop controlled by the variable ‘y’. This inner loop iterates through the rows of the grid, just like the outer loop does for columns. It also starts with an initial value ‘spacing/2’ and increments by ‘spacing’ in each iteration, ensuring that each row is spaced evenly from the previous one.

// creating a 2D array to achieve a board like structure
  // iterating through columns. setting the initial x position from spacing/2 and y position from spcing/2 to make all the ellipses on the board appear full.
  for (let x = spacing/2; x < width; x += spacing) {
    // iterating through rows. 
    for (let y = spacing/2; y < height; y += spacing) {
      // generating a noise value n that depends on the position of the ellipse and changes over time due to t
      let n = noise(x,y,t);
      // mapping the noise value from the range [0,1] to the radius value in the range [0, 25]
      let radius = map(n, 0, 1, 0, 25)
      noFill()
      // adding additional animation that makes the ellipses with radius <10 to fill
      if (radius < 10){
        fill(255)
        ellipse(x, y, radius)
      }
      else{
        stroke(255)
        ellipse(x, y, radius)}
    }
  }
}

Besides the 2D array, another key element of my sketch was the Perlin noise. Perlin noise, named after its creator Ken Perlin, utilizes an algorithm that generates a sequence of pseudo-random numbers in a way that maintains a natural sense of order. In this sequence, each successive number is closely related in value to the one preceding it. This approach results in a “smooth” transition between these numbers, giving rise to a more organic and less chaotic visual effect compared to pure randomness. In my case, Perlin noise generates variations in the ellipse sizes, making the transitions between the different sizes appear smooth and organic. The Perlin noise value is calculated based on the position of each ellipse on a 2D grid (x and y coordinates) and changes over time due to the ‘t’ parameter.

// generating a noise value n that depends on the position of the ellipse and changes over time due to t
      let n = noise(x,y,t);

After looking at the sketch for a while, I realized that it reminded me of microalgae. The visual output of the sketch sort of resembles the view of microalgae under a microscope. It also captures the organic growth pattern due to the Perlin noise, mimicking the natural variation seen in these microorganisms. While my sketch is rather abstract, I believe it conveys the idea of a living system evolving and changing over time, which happened to be a nice accident.

By CSIRO, CC BY 3.0, Link

Assignment 3 – Light

Concept:
I recently saw a post (below) about love that touched me very much, and I thought that I would be able to represent this idea visually using what I currently know about objects and arrays.

This was my initial idea, where the circles represent the waves of light radiating out from each of us and intersecting with other people’s lights:

And here is the final sketch, where each time you run the code, the circles start at random places, and the increments between the circles also vary. You can click the mouse to make the circles appear:

A bonus of the random starting locations of the circles is that each outcome made me think of different types of relationships. For example:

A mother and her child:

Long distance best friends:

Future lovers who are just about to meet for the first time:

I started out the assignment only meaning to depict the “long distance” visual, but the randomness sparked many more possibilities, which I was not expecting!

Highlight:
I am proud of this part of my code, because the forloop + objects + arrays integration was something that I struggled a bit to understand, but after watching several Coding Train videos and following his examples, I was able to apply the same principles to my own code.

let circles = [];

function setup() {
  createCanvas(500, 500);
  background(0);

  for (let i = 0; i < 2; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(1, 50);
    circles[i] = new Circle(x, y, r);
  }
}

function draw() {
  if (mouseIsPressed){
      for (let i = 0; i < circles.length; i++) {
      circles[i].show();
      circles[i].increaseRadius();
      }
  }
}

Reflection and ideas for future work or improvements:
I would like to assign colors to the light waves, for example making the smaller circles brighter/more saturated and having the color fade out as the circles get bigger. It would also be cool to apply some kind of blur feature so that the circles look more like actual light.

Resources:

week 2 – reading reflection

My favorite aspect of Casey Reas’ talk was the way he seamlessly wove together the overarching themes of order, chance, and symmetry within the realm of digital art. Right near the beginning, he piqued my curiosity with a thought-provoking statement about the creation of art that is ‘artificial but possesses an organic quality.’ He displayed some of his initial pieces – the first in which he relinquished These pieces, born from a collaboration between his artistic intent and the unpredictability of chance, seemed to possess a unique and mesmerizing sense of nature. Later on, towards the end, he displayed some art pieces which were created with the intention of as much order and symmetry as possible, saying that they had been criticized as ‘having no humanity’. These contrasting statements made me think of nature and the world we live in, which is neither entirely organized nor thoroughly chaotic. Nature is a sort of organized chaos, where natural elements – from the orbit of the sun to the migration of birds – follow a sort of fixed geometry, but there’s enough distortion so that it doesn’t appear eerie. I think this is why interactive media art, particularly geometric and generative art appeals to me incredibly: it captures the very essence of nature, the one that is capable of locking in one’s gaze for a long moment.

Casey Reas

Reas’ comments about chance in art also struck me greatly. The calculated randomness gives the illusion of unexpected art that keeps becoming itself, belying the computational nature it has underneath. As Reas explained, the incorporation of chance doesn’t diminish the artist’s role but rather extends it into a realm where the boundaries between intention and serendipity blur. It’s akin to setting up the conditions for creativity to flourish, allowing the elements to interact and shape the final composition organically. In this way, the artist becomes a collaborator with the forces of randomness, enabling art to unfold with a vitality that mirrors the dynamic nature of life itself. This concept challenges conventional notions of authorship and control in art. It suggests that, in the digital age, artists are not just creators but also curators of algorithms and data, fostering a dialogue between human imagination and the machine’s computational abilities.