This has been my favourite reading yet! I am a massive ‘good-design’ junkie, and love to appreciate when something is made with the User in mind. In fact, I’m so enthusiastic about this that I spent last summer teaching design principles to high school students in Japan. It was incredibly rewarding to share my knowledge and watch young minds grasp the importance of user-centered design.

One aspect of design that particularly excites me is analyzing the ergonomics of products. I love examining how objects interact with the human body and how they can be optimized for comfort and efficiency. This interest led me to develop my own acronym for designing things for people: SUPREME FAM. Each letter represents a crucial aspect of the design process:

S: Stakeholder
U: Usability
P: Primary User Needs
R: 6Rs (Rethink, Refuse, Reduce, Reuse, Recycle, Repair)
E: Ergonomics
M: Machining
E: Environment
F: Function
A: Aesthetic
M: Materials

I find that using this acronym helps me approach design challenges in a comprehensive and user-centered way, much like the principles Norman discusses in his work.

Norman’s emphasis on the importance of affordances, signifiers, and feedback in design struck a chord. I recall a recent visit to our Art Gallery, where I hesitated to touch an exhibit because there were no clear indications of how to engage with it. The art piece was discussing a jelly-like lizard and there was one on display. However, the lack of signifiers left me unsure whether I was allowed to interact or if I might accidentally damage the artwork. This experience made me appreciate how crucial it is for designers to provide clear cues that guide user behavior. I had a similar experience of bewilderment when I stood in front of a high-tech coffee machine, at a friend’s house, unable to figure out how to make a simple cup of coffee. The machine’s sleek design offered no clues about its functionality, leaving me feeling embarrassed and caffeine-deprived.

One thing that drives me crazy is the design of many public restroom sinks. I often find myself waving my hands frantically under the faucet, trying to trigger the sensor to start the water flow. Sometimes I’m left wondering if the sink is broken or if I’m simply not performing the correct “hand dance” to activate it. To improve this, I imagine a design where the sensor area is clearly marked with a simple icon or color, and perhaps a small LED light that illuminates when hands are detected. This would provide clear signifiers and immediate feedback, reducing user frustration and water waste.

Applying Norman’s principles to Interactive Media, I believe designers should focus on creating intuitive interfaces that provide clear feedback and match users’ conceptual models. For example, a website’s navigation should use familiar speech patterns and provide visible cues about the user’s current location and available actions. Interactive elements should offer immediate feedback to confirm user actions, much like how a well-designed physical button provides tactile and visual feedback when pressed. By incorporating these principles, designers can create digital experiences that are both engaging and frustration-free.

One thing that drives me crazy is poorly designed shower faucets, especially the ones with a single handle where it’s difficult to tell how to adjust temperature or water pressure. Many of these designs lack clear signifiers, making it frustrating to figure out whether turning the handle left increases temperature or pressure, or if pulling or pushing it has any effect at all. Sometimes, the hot and cold indicators are either missing, faded, or counterintuitive, leading to a trial-and-error process that often results in an unexpected blast of freezing or scalding water.

In interactive media, Norman’s principles can be applied similarly to enhance usability. Just as a well-designed shower faucet should make its function immediately clear, interactive elements in digital experiences should signal their purpose intuitively. For example, buttons and interactive objects should provide visual and/or tactile feedback, such as glowing when hovered over or vibrating when clicked (the type of feedback varying depending on the intended users). Proper mapping in digital interfaces—like ensuring a swipe-down gesture naturally leads to scrolling down—mirrors the idea of making physical controls feel intuitive. Without such authorial intent and thought in the design, interactive media can be confusing and can often lose its original intended meaning as a result. By focusing on basic HCD principles, interactive media can create smoother, more engaging experiences that minimize user frustration.

For this week’s assignment, I decided to create a generated text using p5.js.  As a fond lover of poetry and humour, I decided to write a code for a poem generator. Basically, the user would input 4 or more words, and the generator would place those words in an incomplete poem randomly. For this, I created an input box for the words, and a button for creating the poem. On click, the words are randomly placed in a pre-written incomplete poem, creating a unique and sometimes comical piece of poetry.

This is a screenshot from one poem I randomly generated.

One part of the code I’m particularly proud of is the input box. I never created these before so it was interesting to try something new.

 

// to create input box 
input = createInput();
input.position(40, height + 20);

// for 'add word' button
addButton = createButton('Add Word');
addButton.position(input.x + input.width + 50, height + 20);
addButton.mousePressed(addWord);

// for 'create poem' button
generateButton = createButton('Create Poem');
generateButton.position(addButton.x + addButton.width + 50, height + 20);
generateButton.mousePressed(writePoem);

I also  liked to experiment with new fonts, adding external files into the code for the first time.

function preload() {
  font = loadFont('machineryscript.otf')
}

Embedded sketch:

Overall, I am pretty happy with how my code turned out. I could definitely improve some aspects of it, maybe add some more elements, or create a refresh button. I would also like to try and add features more multiple random poems, instead of one.

Crawford posits that the contemporary understanding of interactivity is frequently imprecise, leading to its misapplication and devaluation. To counter this trend, he proposes a definition rooted in the metaphor of a conversation, wherein “interactivity [is] a cyclic process in which two actors alternately listen, think, and speak.” This definition moves beyond simple stimulus-response models, highlighting the dynamic and reciprocal nature of genuine interaction. Crawford clarifies this concept by differentiating interaction from mere reaction. He uses the example of a refrigerator light to illustrate this distinction, arguing that while the refrigerator responds to a user’s action (opening the door), it lacks the capacity for purposeful thought and communication, and therefore does not engage in true interactivity. A key contribution of Crawford’s work lies in his articulation of “degrees of interactivity.” Rather than conceiving of interactivity as a binary attribute, Crawford proposes a continuous spectrum, ranging from zero to high. 

A strongly interactive system, according to the principles outlined by Crawford, possesses several key characteristics. First and foremost, it facilitates reciprocal communication between the user and the system. This implies a dynamic exchange where both entities actively participate in the interaction, rather than a simple stimulus-response relationship. Secondly, the system exhibits effective listening skills. This involves accurately interpreting user input, understanding the intent behind their actions, and processing the data in a meaningful way. This requires robust input mechanisms. Thirdly, the system demonstrates meaningful thinking capabilities. The system has to engage in meaningful thinking to produce a desirable output. Finally, the system communicates via clear and understandable speaking. It provides output that is informative, easily comprehensible, and tailored to the user’s context and level of understanding.

To enhance the degree of user interaction in my p5 sketches, I would focus on several key areas. First, I would implement more sophisticated input mechanisms beyond basic mouse and keyboard interactions. This could involve libraries for gesture recognition, voice input, or data from external sensors. Incorporating input validation and feedback would also ensure the system accurately interprets user actions. I would improve the clarity and expressiveness of the system’s output. Visual cues, animations, sound effects, and dynamic text elements could be used to provide richer feedback to the user. Exploring different output modalities, such as auditory feedback, could further enhance the immersive and engaging experience.

To note, Crawford’s approach is not without its limitations. The requirement of “two actors” may prove overly restrictive when applied to certain complex human-computer interactions. In addition, the subjective nature of terms such as “good” listening, “good” thinking, and “good” speaking introduces potential challenges to the consistent application of the framework.

This is my Object Orientated Programming art piece: taking part of my love for flowers, and combining it with the coding techniques we were taught in class. Unfortunately, I was not present in class (I was sick) so I had to use a lot of self-learning.

📋Assignment Brief

• Create a generative artwork using arrays and objects
• Reference any examples or inspiration
• Use excellent names for variables and functions

💭Conceptualisation

The idea for this project stemmed from a desire to create a generative artwork that mimics the organic beauty of nature, specifically flowers. Flowers are inherently dynamic, with their delicate petals, vibrant colors, and radial symmetry, making them an ideal subject for generative art. I wanted to design a system where flowers could grow and bloom over time, creating a tranquil and visually engaging experience. Additionally, I aimed to make the artwork interactive, allowing users to “plant” flowers by clicking on the canvas. This interaction would give viewers a sense of agency and creativity, as they could influence the composition of the artwork. The overarching goal was to combine randomness (to mimic nature’s unpredictability) with structure (to ensure visual harmony), resulting in an evolving digital garden.

💻Process

The coding process began with defining the basic structure of a flower using Object-Oriented Programming (OOP). I started by creating a Flower class that encapsulated the properties and behaviors of a flower. Each flower had attributes like position (x,y), size, petal count, colors, and growth rate. The display() method used trigonometry to arrange petals in a circular pattern around the flower’s center, while the grow() method allowed the flower to increase in size over time.

Once I had the basic functionality of individual flowers working, I moved on to creating an array of flowers that could be updated and displayed in each frame. This allowed me to simulate a garden where multiple flowers grew simultaneously. To add dynamism, I introduced randomness in attributes like petal count, colors, and growth rate, ensuring that each flower was unique.

After achieving this foundational setup, I wanted to make the artwork interactive. This led me to implement the mousePressed() function, which generates a burst of new flowers around the mouse position whenever the user clicks on the canvas. To enhance visual variety, I added random rotation angles for each flower and adjusted their initial size to make their growth more noticeable.

function mousePressed() {
  // Create a burst of flowers around the mouse position
  for (let i = 0; i < 10; i++) {
    let angle = random(TWO_PI);
    let distance = random(50, 150);
    let x = mouseX + cos(angle) * distance;
    let y = mouseY + sin(angle) * distance;
    flowers.push(new Flower(x, y));
  }
}

 

The final step was fine-tuning. I experimented with different ranges for attributes like maximum size and growth rate to strike a balance between realism and aesthetics. I also adjusted the background color to create contrast and ensure that the vibrant flowers stood out.

🚩Challenges

One of the main challenges was achieving visual harmony while maintaining randomness. Nature is unpredictable but still follows certain patterns that make it visually pleasing. Translating this into code required careful tuning of parameters like petal count, size ranges, and color palettes. Too much randomness made the artwork chaotic, while too little made it monotonous.

Another challenge was managing performance as more flowers were added to the canvas over time. Since each flower is drawn using trigonometric calculations for its petals, having too many flowers on screen could slow down rendering. To address this, I limited the growth rate and size of flowers so they wouldn’t overwhelm the canvas.

Lastly, implementing interactivity posed its own set of challenges. Ensuring that new flowers appeared in an organic burst around the mouse position required calculating random angles and distances while keeping them within bounds. It also involved balancing user-triggered interactions with the generative behavior already present in the code.

📶Potential Improvements

While the current version achieves its goal of creating an interactive generative artwork with a flowery theme, there are several areas for improvement:

• Animation Enhancements: Adding subtle animations like swaying petals or pulsating centers could make the flowers feel more alive.
• Audio Integration: Adding ambient sounds or musical notes triggered by interactions could enhance the sensory experience.
• Flower Decay: Introducing a lifecycle for flowers—where they bloom fully and then slowly fade away—could add another layer of realism and dynamism.

</>Source Code

https://github.com/theSumeed/Assignment-3/tree/main

Patterns have always captivated me. From the fractals in the Mandelbrot set to the Gallifreyan language in Doctor Who, they evoke a sense of wonder. Yet, as mesmerizing as these patterns are, they often stem from predictable rules. Casey Reas’ work, however, introduces a twist: his patterns emerge from chaos and randomness. This unpredictability is what sets his art apart—it’s not just about following rules but about embracing the unexpected. Reas’ exploration of emergence– the phenomenon where individual elements combine to create something entirely new- resonates deeply with me. It reminds me of Craig Reynolds’ Boids algorithm or Conway’s Game of Life, where simple rules lead to complex behaviors. Reas takes this concept further by marrying randomness with intention, creating art that evolves organically. His work feels like a precursor to today’s AI-driven generative tools, which similarly harness randomness to produce stunning results.

One aspect of Reas’ process that intrigues me is his use of “planned randomness.” By defining simple rules like “move in a straight line” or “deviate from direction,” he creates intricate abstract pieces that feel alive. It’s a method I’m tempted to replicate in my own work- building arbitrary rules like LEGO blocks and letting them unfold into something unexpected. But this raises an interesting question: is it truly random if there are rules? Even with pseudo-random number generators, outcomes can be replicated if the same seed is used. What would pure randomness look like in art? Could we create rule-free generative systems where even the rules themselves are randomly determined? The thought of such an experiment excites me- it could push the boundaries of what we consider “random” and challenge our understanding of originality.

Reas’ work also makes me reflect on a topic I care deeply about: AI art. As an avid artist, I sometimes worry about how far AI has come in replicating creativity. When randomness plays such a significant role in art, it blurs the line between human and machine-made creations. If an artwork relies heavily on chance, does that make it less human? Or does the artist’s intention still shine through? Personally, I believe there’s value in balancing control and randomness. While randomness can add an element of surprise, too much of it risks losing the personal touch that makes art meaningful. In my own projects, I prefer to use randomness sparingly- for example, in selecting colors or text- while maintaining overall control. This balance keeps my work grounded in human expression.

Casey Reas’ work has deepened my understanding of the interplay between chaos and order in art, prompting me to reconsider traditional creative boundaries and explore the fusion of technology and human expression. Inspired by his ability to reveal patterns within randomness, I aim to incorporate both structure and spontaneity into my future projects, setting objectives while remaining open to new discoveries. My goal is to find a balance between control and chaos, mirroring Reas’ skillful approach to art.

I would like to start by explaining my artistic intent. I was recently interest in nihilism. As a matter of fact, I always thought of concepts within nihilism, and this materialized into this concept recently when reading some literature by Nietzsche. Essentially, I aimed to demonstrate my emotions and my perception of objects through this form of artistic self-obliteration, dissolving into the surrounding environment. Therefore, in this sense one might argue that this artwork tells a story (as per the inevitable dissolution into the evironment).

 

How I did it:

 

I made the canvas 800 by 600, and I decided to make the background a specific color of glistening yellow that resonated with me when taking inspiration from Yayoi Kusama’s Polka dots artwork.

I used noStroke() to create the shapes with no solid outline, as I wanted to blend in the repetitive elements (geometric figures symbolic of the representation of objects and elements in our perception of space-time).

 

Then I drew a representation of abstract ‘pumpkins’ but they aren’t really pumpkins, that is not the emphasis on art here. These rows of abstract pumpkins were drawn using a for loop.

 

I am particularly proud of the rest of my code where I believe I truly achieved my artistic goals. In this loop I tried to manipulate space and make use of the remaining space in the canvas from the pumpkins as a precursor to including the geometric figures as a representation of objects in spacetime. To do this, I used some simple boolean (if conditional).

if (random(1) < 0.5) { 
       let detailSize = size / 4; // These shapes will be smaller than the main shape.
       fill(255, 150, 0, random(100, 200)); // Set a transparent orange color.

       push(); // "Remember" the position again.
       translate(x + random(-size / 2, size / 2), y + random(-size / 2, size / 2)); // Move to a random spot somewhere on or near the bigger shape.
       ellipse(0, 0, detailSize + random(-5, 5), detailSize + random(-5, 5)); // Draw a slightly irregular circle.
       pop(); // Go back to the original position.
     }

 

 

READING RESPONSE:

Upon taking inspiration from Casey Reas, I focused on utilizing space and randomness as a method of employing artistic intent. As I mentioned in my explanation of the artwork, the randomness at hand is the implementation of these abstract spherical objects (as if they’re pumpkins or some orange circle), which fill the canvas randomly. After this, the random geometric shapes fill in the canvas randomly, this is my take on what Casey Reas outlined in his demonstrations of art through physical computing. I tried to add to this discussion further by taking inspiration from Yayoi Kusama, where I attempted to merge her abstract and repetitive use of polka dots, drawing inspiration from her use of color in her canvases of art. In my take on answering what I felt about the tension between order and chaos, I believe that I was able to show in my art how I perceive this tension, where a more nihilistic view is implemented, showing the symbolic geometric objects dissolve and move downwards in a randomized but nearly controlled manner.

 

Another aspect highlighted by Reas (timestamp 13:59) is the precise and logical structuring of things by artists, I made a new take on this where I favored randomness and chaos over structure and organization of elements in my art.

 

When I was watching Casey Reas’ Eyeo’s talk on chance operations, I tried to bare in mind the question: “Where do you feel is the optimum balance between total randomness and complete control?”. Especially because I watched the talk after doing my artwork, I felt that the talk really aligned with the concepts that I envisioned for my assignment. For example, one example that he showed that left a lasting impression on me was Project Signals:

Basically, he explained that this artwork was a result of negative or positive communications that proteins sent within a cancer cell  — essentially a visualization of biology data. Without this context, I would have assumed that it was professional art from a painter or such because of how beautiful it looked. This realization in the assumptions that I made, made me realize that there’s art everywhere and that rather than computers replacing artists, they can serve more as a tool to help us create naturally occurring phenomena into art.

Referencing back to the initial question, I think there’s an important point to be made about the balance between how much randomness we incorporate into an artwork. More specifically, I think that it doesn’t actually matter if an artwork is created totally randomly or with complete control. I believe that the beauty in creating art lies in artist autonomy, even with the uses of computer technology. Of course, for this then we would have to engage in the conversation about AI ethics (e.g. How much of the artwork is truly by the artist), but I think that might be a conversation for another day. Ultimately, I believe that what matters is the intention behind the creation, whether an artist carefully designs every element or embraces randomness as a creative tool, both approaches are valid. In my opinion, the interplay between control and unpredictability can lead to unexpected beauty, and that, in itself, is an artistic choice.

At first, I wanted to do something that was static (e.g. putting everything in setup) since that was an option presented by the professor. However, the more I thought about incorporating randomness into my project, I thought that having some animation or movement would be the best way to do that. I still wanted to keep the artwork simple and focused on making use of a clear, structured pattern while allowing for unexpected variations.

I decided to create a looping animation that generates geometric designs at five key positions on the canvas: center, top-left, top-right, bottom-left, and bottom-right.

let positions = [
  [width / 2, height / 2], // cent
  [0, 0],                  // tl
  [width, 0],              // tr
  [0, height],             // bl
  [width, height]          // br
];

Each of these positions contains a series of concentric shapes that shift over time, creating a dynamic, evolving effect. The rotation is driven by angleOffset * j, which ensures that each circle is slightly different in position based on frameCount, adding to the sense of movement. The shapes themselves are defined using beginShape() and endShape(CLOSE), which connect the calculated points to form a jagged circular pattern.

let angleOffset = frameCount * 0.1;

for (let i = 0; i < positions.length; i++) {
  push();
  translate(positions[i][0], positions[i][1]);
  stroke(colors[i]); 

  for (let j = 0; j < numCircles; j++) {
    let radius = map(j, 0, numCircles, 20, maxRadius);

    beginShape();
    for (let angle = 0; angle < TWO_PI; angle += PI / 6) {
      let x = radius * cos(angle + angleOffset * j);
      let y = radius * sin(angle + angleOffset * j);
      vertex(x, y);
    }
    endShape(CLOSE);
  }

  pop();
}

I wanted to do a bit more and add an interactive element on top of the randomness. So, I added a function that shuffles the colors whenever you click on the canvas. This makes sure that while keeping the overall structure of the artwork the same, each interaction with the piece introduces a fresh, randomized arrangement of colors, keeping it visually engaging.

function mousePressed() {
  shuffle(colors, true);
}

This project helped me appreciate the balance between structure and randomness in p5.js/computational art. By keeping certain elements predictable (such as placement and form) while allowing colors and movement to shift dynamically, I was able to create an interactive piece that feels both intentional and surprising. Well…at least I hope! Check it out: