Week 3 OOP + Reading

Being tasked with creating generative artwork using Object Oriented Programming, I thought of my intent and drew inspiration from the Perlin Noise algorithm developed by Ken Perlin. Reminiscent of my generative artwork for week 2, I decided to create polygons of a dynamic (n) sides. These sides are adjustable by the user and through rapid clicks and interaction, the number of n sides of the polygons increases. The polygons also rotate in a random manner, as my artistic intent was to not follow a specific order, rather to allow the objects to move in any manner.

 

Without the rapid clicks, the art at hand is emphasized through the Perlin Noise effect, where the movement of the mouse generates a subtle but artistically significant noise.  In the grander sense, I would replicate this generative artwork on a larger scale, a larger screen, or perhaps that its canvas doesn’t have boundaries and is projected. However, to show a simple demonstration of it this pop-up suffices.

Technical Details:

I created three classes: Star, StarryBackground, and NoisyShape. The first class is responsible for the individual stars with a glowing effect, making the artwork seem more realistic and complimenting the life that the Perlin Noise adds to the art.  StarryBackground manages this array of stars and organizes them into the background of the canvas. NoisyShape is the key class for interaction and animations in the art, where rapid clicks change the level of noise, n sides, and creates distinctions in every iteration (the canvas constantly changes and does not reset).

I highlighted this class as it was the most interesting part to me:

 

//Noisy Shape and PERLIN POLYGONS

// A dynamic, multi‑sided polygon whose vertices are perturbed by Perlin noise.
class NoisyShape {
  constructor(x, y, radius, nSides) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.nSides = nSides;
    // Pick one of the strategic colors.
    this.col = palette[int(random(palette.length))];
    this.noiseOffset = random(1000);
    this.rotation = random(TWO_PI);
    this.rotationSpeed = random([-0.001, 0.001]);
  }
  
  update() {
    // This creates an animation that rotates the polygons after rapid clicks, creating a dynamic and randomized movement.
    this.rotation += this.rotationSpeed;
    // When rapid clicks occur, intensify effects:
    if (rapidClickTriggered) {
      this.rotation += random(-0.05, 0.05);
      this.x += random(-3, 3);
      this.y += random(-3, 3);
      this.noiseOffset += random(0, 0.02);
    }
  }

Specifically, the part that stood out to me in creating this class was the perturbation of the polygons by the Perlin Noise.

 

READING THE ART OF INTERACTIVE DESIGN

 

Upon reading the art of interactive design, the author’s use of an introductory scenario to highlight a simple instance of interaction ( a conversation ) stood out to me and helped set a conceptual basis of interaction for me. What interests me is the assertion of this conceptual basis without referring to etymological significance in meaning. I believe that the author does this so as to not subtract from the emphasis on clarity through the concise medium of the scenario. However, I would argue that a small reference to the etymology of the word ‘interact’ inter + – act inter: A latin word meaning between. act (derived from the latin word ago) : Do / Action. This would help solidify the importance of displaying how important the reciprocation is in this back and forth between two actors

The simple conversation between Gomer and Fredegund does that exactly. It shows how important the roles and actions of both actors are. Therefore, the counterarguments the author answers in the subsequent passages are dismissed on the basis of weak interaction between (where one actor does the majority of the actions, and there is no distinct reaction by the other actor). i.e reading a book, movies, the example of Greeks and Romans in viewing paintings (which is significant in the context of computed generative art).

What stands out to me and impacts me in this reading is the utilization of the definition under the author’s continuous conceptual framework, highlighting interaction as a continuum… Therefore, I transcend my opinion and thoughts on interfaces as mediums to facilitate these interactions , thinking about the possible ways of facilitating interaction with no compromise on listening, thinking, and speaking.  Therefore, I must think of the user’s perspective or I would now have another user interact with my work, whilst making my own metrics as measures of these three aspects. Additionally, there must be a consideration of the target user / audience to establish a basis for how well that person would be able to think and speak. Therefore, I feel incorrect in how vaguely I thought of this part of interaction, with the assumptions that the interaction would be highly intuitive to everyone, and that they would be able to speak easily.

One thought on “Week 3 OOP + Reading”

  1. Very cool! Moving left/right and up/down seem to have a similar visual effect, and the changes seem to loop/repeat as you move the mouse a short distance, so the interaction is a bit unsatisfying. You could think about, for example, having a larger change when you’re further from the center and a different change for up/down vs left/right. The smoothness is pretty satisfying but I wanted to see more difference overall as I moved the mouse to different points in the canvas. Have a look at the map() function for an easy way to map between different ranges https://p5js.org/reference/p5/map/

Leave a Reply