Category: Spring 2024 – Aaron (Section 001)

Once, a very thirsty traveler came to the bar and asked, “Water!”

The bartender, raising an eyebrow, says “Sure, sire, would you like room temperature or icy chill water 🥛?”

“Uh, cold please”

“Do you lean towards distilled, mineral, or perhaps a sparkling variety?”

The traveler scratching his head says, “Just regular water is fine”.

The bartender goes “In terms of regular water, we have classic spring regular water or purified tap…”

---

Judging by Chris Crawford’s Interactive Design definition, this is an interactive process.

• There are two actors – the bartender and the traveler
• They actively listen to each other,
• and think (Whether bartender thinks or not is debatable)
• and speak

The only catch here is that this interactivity “did not solve the problem”.  They did interact, there is flow of information between them, but the problem remains unsolved.

Just like how Crawford ranted about people in that day and age re-brands “The Same Old Stuff” as “New Interactive Technology” with hype and criticized how the “plays” ranks about a 0.01 on a 10-point Crawford Scale of Interactivity, I am also going to use this writing to rant about how his interactivity definition ranks pretty low (say around 3.14ish) on the 100-point Pi’s scale of Aesthetic Practicality. This definition of [Interactivity = “two actors” AND “listen” AND “think” AND “speak”] ought to be, at least expanded to be applicable.

Expanding the definition of Interactivity

Personally, when I encounter “Interactivity” I see it not as a “process” (unless you are dealing with human to human problems, where you have to Talk It Out Loud ™). Normally in the context of Human-Software Interactions, UI/UX design, interactivity is about how efficiently you can give the user the complete tutorial so that they can utilize the system with minimal guidance.

On more formal terms, if we ignore the video game industry (because by definition, games have to be interactive), I see interactivity as a measure of “the rate of transfer of information between two agents (i.e. Human-Computer), where this transferred information helps solve human problems using the computer with minimal input in minimal time.” just as in the diagram below.

Note that my definition explicitly states that the more interactive the system is,

1. the more time it saves and
2. the less guidance it needs to give the user in the future.

Otherwise if we go by Crawford’s definition, we fall into the danger of “Impractical Interactivity Deadlock Situation” where two parties keep on interacting without results, just like the bartender joke above.

In short, the holy grail of “Interactivity” is, ironically, to minimize more “interactivity” in the future. Because if you have to keep interacting… if you have to keep going to the bank because the bank customer service keeps tossing you back and forth with other departments and your credit card issue is still not solved, the “interactivity” is simply … not “interacting”.

In short, the holy grail of “Interactivity” is, ironically, to minimize more “interactivity” in the future.

~ Pi

Best Interactivity is Implicit Interactivity, change my mind

Personally, I agree with Crawford, that “Good Interactivity Design integrates form with function.” However, the only pebble in my shoe is that Crawford has the explicit “speak” component in his definition. In a well-designed software, you don’t necessarily have to explicitly speak. The good design speaks for itself, learning curve is so smooth such that the users enlightens themselves without any guidance and hitting F1 for user manuals.

There was a good old time in the UI design when “Skeuomorphism” – a user interface design which adds real-world design cues to virtual objects to make those objects more understandable.

This is the perfect marriage of form and function.

For instance, just look at the Garage Band guitar User Interface.

Super short, sweet and simple. Anyone who have intimately slid their fingers up the fretboard , do not need additional tutorial in order to play the Garage Band guitar. It is intuitive. There is no need to explicitly have the expanding speech bubble saying “In order to use the overdrive/flanger pedal, tap here.”

Also, the interface is just beauty in purest form 😌👌.

The design itself is already intuitive and interactive.

However, just like the average American marriage [source], after 8 years, the form and function got a divorce ☠️… and the entire world catches minimalism/flat design virus, to the extent that where intuition is murdered (Yes, I am looking at you, Material Design and Neumorphism).

The best example of the such worst UI nightmare is the audio mute/unmute icons.

 

After years of experience during COVID, and after using Zoom countless professional settings, my dad still cannot tell whether the audio is muted or not just by looking at the button. (Does red color mean that it is already muted? Or I click the red and it will mute?)

Whereas a sensible, more intuitive audio on/off button will look more like this.

(Flip the switch, light means it is currently on, no light means it’s currently off… Everyone know this from interacting with other electronic gadgets, there is no need to specially train the user)

Hence, when you don’t have this auto intuition built into the original design, explicit interactivity (a.k.a. helper texts here and there, or your IT support guy) has to come in unnecessarily. This interactivity is just a bloat in the system, and a waste of space, and resources.

Well, as they say “Communication is key”, I appreciate the importance of interactivity in human-software interactions. However, in the context of Good software, such “talk-back” explicit Interactivity should be the last resort a good designer should fall back to.

A good doctor doesn’t easily prescribe antibiotics… this is supposed to be the last resort.

Hence, from the artistic engineer point of view…. When designing anything, intuitive function has to come first, then the form, and only then throw in the “explicit” when there is no other way out.

Perhaps, it is time we rebrand Crawford’s definition to Practically-Aesthetic-Interactivity (abbreviates to PAI? Hahaha, very punny Pi, very punny.), and we may be…. just may be… see better intuitive software in the future.

In this assignment, I developed a serene landscape populated by butterflies, clouds, and flowers, inviting viewers to immerse themselves in a tranquil virtual environment.

Key Elements:
– Butterflies: Colorful and graceful, the butterflies are the focal point of the scene. Programmed to flutter across the canvas, their movements are dynamic and captivating.
– Background: The canvas serves as a backdrop for the scene, featuring a gradient sky and soft, rolling clouds that drift lazily across the horizon.
– Flowers: Adding depth and detail to the landscape, flowers bloom sporadically, their vibrant colors contrasting against the lush greenery.

Conceptual Framework:
The project draws inspiration from the beauty and harmony found in the natural world. By combining artistic vision with computational techniques, the goal is to evoke a sense of wonder and serenity, inviting viewers to momentarily escape the confines of reality and immerse themselves in a digital oasis of creativity and beauty.

This assignment provided an opportunity to explore the intersection of art and technology, demonstrating how code can be used to create immersive digital experiences that transport viewers to captivating virtual worlds. Through careful design and implementation, the project aims to evoke a sense of wonder and appreciation for the beauty of nature in the digital realm.

code:

let butterflies = [];
let clouds = [];
let flowers = [];

function setup() {
  createCanvas(800, 600);
  
  // Create a flock of butterflies
  for (let i = 0; i < 10; i++) {
    let butterfly = new Butterfly(random(width), random(height));
    butterflies.push(butterfly);
  }
  
  // Create some clouds
  for (let i = 0; i < 5; i++) {
    let cloud = new Cloud(random(width), random(height));
    clouds.push(cloud);
  }
  
  // Create some flowers
  for (let i = 0; i < 20; i++) {
    let flower = new Flower(random(width), random(height));
    flowers.push(flower);
  }
}

function draw() {
  // Draw gradient sky background
  background(135, 206, 250); // Light blue
  for (let y = 0; y < height; y++) {
    let inter = map(y, 0, height, 0, 1);
    let c = lerpColor(color(135, 206, 250), color(255, 255, 255), inter);
    stroke(c);
    line(0, y, width, y);
  }
  
  // Display and update clouds
  for (let cloud of clouds) {
    cloud.display();
    cloud.update();
  }
  
  // Update and display each butterfly
  for (let i = 0; i < butterflies.length; i++) {
    butterflies[i].update();
    butterflies[i].display();
  }
  
  // Display flowers
  for (let flower of flowers) {
    flower.display();
  }
}

class Butterfly {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.color = color(random(255), random(255), random(255));
    this.angle = random(TWO_PI);
    this.size = random(20, 40);
  }
  
  update() {
    // Update position
    this.position.add(this.velocity);
    
    // Change direction randomly
    if (random() < 0.01) {
      this.velocity.rotate(random(-PI / 4, PI / 4));
    }
    
    // Wrap around screen
    this.position.x = (this.position.x + width) % width;
    this.position.y = (this.position.y + height) % height;
  }
  
  display() {
    // Draw butterfly wings with pattern
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size / 2);
    let wingOffset = this.size / 4;
    let wingSize = this.size / 2;
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    fill(255, 100); // Semi-transparent white
    ellipse(-wingOffset, 0, wingSize, wingSize * 2);
    ellipse(wingOffset, 0, wingSize, wingSize * 2);
    fill(0, 100, 255); // Semi-transparent blue
    ellipse(-wingOffset, 0, wingSize / 2, wingSize);
    ellipse(wingOffset, 0, wingSize / 2, wingSize);
    pop();
  }
}

class Cloud {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-0.5, 0.5), 0);
    this.size = random(50, 100);
  }
  
  update() {
    this.position.add(this.velocity);
    if (this.position.x > width + this.size) {
      this.position.x = -this.size;
    }
    if (this.position.x < -this.size) {
      this.position.x = width + this.size;
    }
  }
  
  display() {
    noStroke();
    fill(255);
    ellipse(this.position.x, this.position.y, this.size * 1.5, this.size);
    ellipse(this.position.x - this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
    ellipse(this.position.x + this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
  }
}

class Flower {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.size = random(10, 20);
    this.color = color(random(255), random(255), random(255));
  }
  
  display() {
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size * 1.5);
    fill(255, 0, 0); // Red
    ellipse(this.position.x, this.position.y - this.size / 1.5, this.size * 0.8, this.size * 0.8);
  }
}

 

Reading Response:

The first chapter of “The Art of Interactive Design” presents a thorough and insightful exploration into the true essence of interactivity. The author, Chris Crawford, dismantles the common misuse and overuse of the term by defining interactivity as a cyclic process in which two actors alternately listen, think, and speak. This definition, grounded in the analogy of a conversation, strips away the ambiguity surrounding the concept and refocuses our attention on the quality of the engagement rather than mere action and reaction.

Crawford’s critical perspective on the buzzword nature of interactivity in the 1990s and the superficiality of its application to products and technologies drives home the importance of discernment when evaluating interactive experiences. His reference to the frenzied rat race for ‘new and improved’ interactivity, often without substance, highlights the need for more profound and meaningful interactions rather than mere novelty.

The conversation example between Fredegund and Gomer excellently illustrates Crawford’s definition of interactivity, emphasizing the importance of understanding and responding within the context of an exchange. Moreover, his critique of non-interactive activities, like books and movies, offers a clear boundary between passive and interactive experiences.

Crawford’s commentary on the degrees of interactivity is particularly thought-provoking. He challenges the binary view of interactivity as either present or absent, proposing instead a continuum where the depth and richness of the interactive experience can vary. This nuanced approach allows for a more sophisticated analysis of interactivity in various contexts, from refrigerator doors to video games.

In summary, Crawford’s elucidation on interactivity is not only eye-opening but also serves as a call to action for designers and users alike to aspire for deeper, more meaningful interactions. His insistence on the necessity of all three components of the interactive process (listening, thinking, and speaking) provides a clear framework for evaluating and designing interactive systems. The first chapter sets the stage for a deeper dive into the intricacies of interactivity design and its implications for technology and society.

For this project, I was super inspired by those amazing nights spent away from the city lights in the dessert, looking up at a sky full of stars. I wanted to try and capture a bit of that night sky with code.

I started by creating a bunch of twinkling stars using classes and arrays, which felt a bit like putting together a digital constellation. The fun  started when I played around with the `noise` and `sin` functions to make the stars change colors and gently pulse. 

Adding a gradient background to mimic the night sky’s colors was a bit tricky at first, but once I got it, it really brought the whole scene together. The whole process was a lot of trial and error, but seeing the final result was totally worth it. It was a cool mix of creativity and coding.

 

Code:

let stars = [];

function setup() {
  createCanvas(600, 500);
  for (let i = 0; i < 100; i++) {
    stars.push(new Star());
  }
}

function draw() {
  // To set the gradient background from blue to black
  setGradient(0, 0, width, height, color(25, 25, 112), color(0), Y_AXIS);
  
  // Update and display each star
  for (let star of stars) {
    star.update();
    star.display();
  }
}

// Function to create a vertical gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
  for (let i = y; i <= y + h; i++) {
    let inter = map(i, y, y + h, 0, 1);
    let c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x, i, x + w, i);
  }
}

// Constant to specify vertical gradient
const Y_AXIS = 1; 


class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(0.5, 3);
    this.t = random(TWO_PI);
    this.color = color(random(255), random(255), random(255), random(100, 255));
  }

  // Update the star's properties
  update() {
    this.t += 0.02; 
    this.size = this.size + sin(this.t) * 0.5;
    // Randomly move the star
    this.x += random(-1, 1);
    this.y += random(-1, 1);

    // Change the star's color using Perlin noise for smooth transitions
    this.color = color(
      noise(this.t) * 255,         
      noise(this.t + 5) * 255,     
      noise(this.t + 10) * 255,    
      random(100, 255)             
    );
  }

  display() {
    noStroke(); 
    fill(this.color); 
    ellipse(this.x, this.y, this.size); 
  }
}

The provided code is designed to create a gradient background transitioning from a dark blue color to black. This effect is achieved by calling the `setGradient` function with specific parameters: the starting coordinates `(0, 0)`, the width and height of the canvas (`width`, `height`), the initial color (dark blue, defined by `color(25, 25, 112)`), the final color (black, defined by `color(0)`), and the direction of the gradient (`Y_AXIS`). This setup results in a vertical gradient that fills the entire canvas, creating a visually appealing background effect for graphics or visualizations.

Reading Response:

In the book “The Art of Interactive Design,” Chris Crawford explains that true interactivity is like having a good conversation. For something to be interactive, both sides need to listen, think, and then speak or react. He argues that many things we call interactive, such as books or movies, aren’t truly interactive because they don’t allow for this two-way communication. Crawford points out that simply pressing a button isn’t enough, there needs to be a deeper level of engagement where both the user and the system or product can exchange information and respond to each other in a meaningful way.

Crawford also criticizes how the word “interactive” is often used more for marketing than to describe a genuine interactive experience. He warns that this can lead to confusion and disappointment when the interaction isn’t as rich as expected. He urges designers and users to think more critically about what interactivity means and to seek out or create experiences that allow for a genuine conversation-like exchange, where both parties can learn and adapt from the interaction. The book challenges readers to look beyond the hype and to strive for genuine, quality interactivity in technology and design.

Concept:

 

 

Diving into this project, I was really drawn to the bright colors and the way shapes came together in those two images. It made me think about how sometimes less can be more. This idea isn’t new, but seeing it in action sparked something for me. I remembered those simple, yet catchy thumbnails on NoCopyright Sounds videos (Third Image) and wondered if I could apply the same principle. So, I decided to cut back on the clutter in my work, aiming for simplicity while still keeping it colorful and lively. It was a bit of a challenge, trying to find the right balance between too much and just enough. But in the end, it paid off. This approach helped me see my work in a new light, proving that you can make something stand out by stripping it down to its essentials. It was a great reminder that sometimes, the simplest approach can be the most effective.

A highlight of some code that you’re particularly proud of:

// Define a class for the Wiggly Circle
class WigglyCircle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.time = 0; // Time property for animation
  }

Embedded sketch:

Reflection and ideas for future work or improvements:

Reflection on this assignment I would have liked adds layer of engagement, transforming the viewer’s experience from passive observation to active participation. Even with my academic commitments, I managed to experiment freely with colors and shapes, which was a liberating process.

If I were to work on this again in the future improvements, I would consider either thickening the lines to give the shapes more definition or reducing the background’s opacity to allow for a clearer view of the action on the canvas. Both adjustments aim to enhance the visual impact and ensure that the vibrancy and movement I’m striving for are fully realized.

For this assignment, I wanted to further the idea I had for assignment #2, where I made (what I called) a inescapable prison and I wanted to further the exploration of how I would like to imagine the person who would stuck in it look like. I wanted the concept of how the harder the person would try to escape, the worse the prison got. I wanted to make it tortuous in a way. So I started experimenting with the push(); and pop(); functions and decided that it would look appealing to have the person gain speed, which is a concept I have implemented on the prison walls.

 

 

I think the most difficult part of making this was understanding how each function worked. However, I am proud of myself for figuring out how the pop and push mechanism worked because I had an issue with both of them and I was doing something very wrong with the arrays. I did end up only using one but at least I understand how they both could be implemented.

 // Add Square at the end of array every time mouse is pressed
  squares.push(interactiveSquare);
}
// Keyboard pressed = make the end of array fast
function keyPressed() {
  squares.push(interactiveSquare);
}

Reflection:

I would love to experiment with different shapes. I honestly considered making it Super Mario-related by having the rectangle be a Mario power star and have it make that effect, exactly how it is in the game but I wanted to make this one more. I will try to make the star in my free time.

 

Taking inspiration from a basic car drawing, I started what I thought was an easy assignment. But as the deadline got closer, I realized I had misunderstood the instructions. Even though I spent a lot of time on it, the final result wasn’t what it should’ve been. Still, I decided to include it in my work to show my effort. 🤣🤣🤣🤣🤣

Not giving up, I tried again. This time, I wanted to make something different. This time I created a random canvas, inspired by children’s drawings of random shapes. (since that was what my niece was doing right beside me when I was working on this assignment 🙂 ) 

where each time the mouse clicks a new shape, a new color appears on the place you have clicked. Although it was very simple, since I was rushing, I still managed to include arrays 

class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.diameter = random(30, 100);
    this.color = color(random(255), random(255), random(255));
  }
  
  move() {
    this.x += random(-3, 3);
    this.y += random(-3, 3);
  }
  
  draw() {
    fill(this.color);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

class Triangle {
  constructor(x, y) {
    let x2 = x + random(-50, 50);
    let y2 = y + random(-50, 50);
    let x3 = x + random(-50, 50);
    let y3 = y + random(-50, 50);
    
    this.points = [{x: x, y: y}, {x: x2, y: y2}, {x: x3, y: y3}];
    this.color = color(random(255), random(255), random(255));
  }

I had to use class, and the concept of randomness to create this abstract, and noise to create the jittering effect, that adds interactivity to this project, making it more interesting.

 

Looking back, even though I made the huge mistake of skimming through the instructions, I learned a lot from this project. It taught me to pay more attention to details and understand what I needed to do, and I was able to experiment and find a way to trigger the creation of a random object each time the mouse was clicked.

Concept:

The visual design that I created is reminiscent of waves moving. The inspiration for this design comes from the ‘Bees and Bomb’ design named cube wave . This effect is achieved by varying the height of each box according to a sine wave, with the wave’s phase offset by the box’s distance from the center of the canvas. This creates a harmonious, visually appealing pattern that continuously evolves. I came across this video on YouTube, that kind helped me with the basics of this design.

The choice to center the artwork, combined with the monochromatic color scheme (black boxes with white strokes), emphasizes the geometric shapes and the movement pattern, focusing the viewer’s attention on the fluidity of the motion rather than being distracted by color.

Code:

In this generative art project, I’ve merged Object-Oriented Programming (OOP) with arrays to manage dynamic 3D visualizations using p5.js. The core of the project is the Box class in box.js, which outlines the characteristics and behaviors of the 3D boxes, including their wave-like height adjustments and rendering on the canvas. Utilizing an array, I efficiently organize multiple Box instances, populating this structure in the setup function and iterating over it in the draw function to update and display each box according to a sine wave pattern. This setup leverages OOP for encapsulation and arrays for managing multiple objects, showcasing the project’s complexity through simple user interaction—a keypress initiates the animation, demonstrating a direct engagement with the artwork and highlighting the thoughtful integration of coding principles to bring interactive, dynamic art to life.

Box.js:

class Box {
    constructor(x, z, w, h) {
        this.x = x;
        this.z = z;
        this.w = w;
        this.h = h;
    }

    updateHeight(offset, offsetIncrement) {
        let d = dist(this.x, this.z, width / 2, height / 2);
        let a = offset + d * offsetIncrement;
        this.h = floor(map(sin(a), -1, 1, 100, 300));
    }

    show() {
        push();
        translate(this.x - width / 2, 0, this.z - height / 2);
        // stroke(255); // White stroke
        // noFill(); // No fill, or use fill(0) for a black fill
        // box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
        // pop();
      
        fill(0); // Fill with black color
        stroke(255); // White stroke
        box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
        pop();

    }
}

Sketch.js:

let boxes = []; // Array to store Box objects
let angle = 0;
let w = 24; // Width of the boxes
let ma; // Magic angle
let offsetIncrement;

function setup() {
  createCanvas(400, 400, WEBGL);
  ma = atan(1 / sqrt(2));
  offsetIncrement = TWO_PI / 30; // Adjust this for smoother or more rapid changes
  
  // Populate the array with Box objects
  for (let z = 0; z < height; z += w) {
    for (let x = 0; x < width; x += w) {
      // Adjust the initial height (h) as needed to fit your artistic vision
      boxes.push(new Box(x, z, w, 200)); // Using 200 as an example height
    }
  }
}

function draw() {
  background(0);
  ortho(-400, 400, 400, -400, 0, 1000);
  rotateX(-QUARTER_PI);
  rotateY(ma);

  // Update and display boxes from the array
  let offset = angle;
  boxes.forEach(box => {
    box.updateHeight(offset, 0.15); // Adjust the second parameter to change the wave's speed
    box.show();
    offset += offsetIncrement;
  });

  angle += 0.1; // Adjust this for faster or slower animation
}

Embedded Code:

Reflections and Improvement:

Reading chapter of ‘The Art of Interactive Design,’ made me think about my understanding of interactivity, where the author offered dynamic exchange of ideas to redefine what interactivity really is. This perspective pushes against the grain of conventional digital design, where interaction is often mistaken for simple user interface manipulations. Reflecting on this, one inference that came to my mind was the depth of our daily digital engagements—are we truly interacting, or just reacting? I believe that author’s argument that true interaction involves a meaningful exchange where both parties listen, think, and respond, gives us a different conceptual framework and also make us critically examine our roles as designers and users in the digital realm.

Another critique that’s presented in the reading stirs a debate of what we value in interactive experiences. Which also more seems to be like a call to action for creators and consumers alike to seek out and foster genuine connections within digital spaces. Reading through this chapter also has truly reshaped my understanding of what makes design genuinely impactful. It’s made me rethink my previous stance on what effective design truly means, guiding me towards valuing deeper, more meaningful interactions over just eye-catching or user-friendly interfaces. This new insight is quite enlightening; it opens up a whole new world of questions about how we can create digital experiences that foster real, two-way conversations with users. It’s not just about altering my viewpoint; it’s about sparking a curiosity to explore how these insights could revolutionize our interaction with technology, making it more immersive and interactive in truly meaningful ways.

Jihad Jammal

 

Intro to IM

 

Professor Aaron Sherwood

 

Reading Reflection Week 4

 

Feb. 12, 2024

 

 

Reimagining Interactivity in the Digital Age

After reading “The Art of Interactive Design,” I find that Crawford’s definition of interactivity has a significant impact on how we use technology in our daily lives. It forces us to reevaluate not just how we create technology but also how we interact with it in our daily lives. I agree with Crawford’s focus on the conversational, cyclical aspect of engagement, which draws attention to the contrast between the promise of digital technology to foster deep human connection and the transactional, often surface-level interactions they currently encourage (Crawford, 2003). This viewpoint calls for a more deliberate use of technology, pushing us to look for and produce really engaging experiences that promote sincere communication and comprehension.

Furthermore, Crawford’s research also poses important questions regarding the viability of this kind of in-depth communication in the framework of social media and mass media. In an age where algorithms are increasingly mediating digital connections, how do we create systems that facilitate meaningful discourse at scale? This motivates us to think of how users and designers might influence the direction of interactive design in the future (Crawford, 2003). Furthermore, it motivates users to seek out more deliberate technological engagement, moving from passive consumption to active involvement. It emphasizes the significance of promoting designs that value depth and quality of interaction, proposing a transition towards more human focused technology ecosystems, as someone who is interested in the larger effects of technology on society (Crawford, 2003).

Citations:

Crawford, C. (2003). The art of interactive design : a euphonious and illuminating guide to building successful software. San Francisco: No Starch Press.

Click on the art to interact and create your own flower garden!

//Define the Flower class to represent each flower in the garden
class Flower {
  constructor(x, y) {
    this.x = x; //X position of the flower on the canvas
    this.y = y; //Y position of the flower on the canvas
    this.size = 5; //Initial size of the flower, to be grown over time
    this.growthRate = random(0.05, 0.2); //Random growth rate for dynamic visuals
    this.fullSize = random(30, 70); //Target size of the flower when fully grown
    this.petals = floor(random(4, 9)); //Number of petals, randomly chosen for variety
    this.petalSize = this.fullSize / 2; //Determines the size of each petal
    this.color = [random(100, 255), random(100, 255), random(100, 255)]; //RGB color of the petals, chosen randomly for diversity
  }

  //Method to simulate the growth of the flower
  grow() {
    //Increase the size of the flower until it reaches its full size
    if (this.size < this.fullSize) {
      this.size += this.growthRate; //Grow based on the predefined rate
    }
  }

  //Method to display the flower on the canvas
  show() {
    push(); //Save the current drawing state
    translate(this.x, this.y); //Move the drawing origin to the flower's location
    noStroke(); //Petals and center will not have an outline
    fill(this.color[0], this.color[1], this.color[2]); //Set the color for the petals
    
    //Draw each petal around the center
    for (let i = 0; i < this.petals; i++) {
      rotate(TWO_PI / this.petals); //Rotate the drawing context to evenly space petals
      ellipse(0, this.size / 4, this.petalSize, this.size); //Draw an ellipse for each petal
    }
    
    //Draw the flower's center
    fill(255, 204, 0); //Color for the center of the flower
    ellipse(0, 0, this.size / 4, this.size / 4); //Draw the center as a smaller ellipse
    
    pop(); //Restore the original drawing state
  }
}

let flowers = []; //Array to hold all the flower objects

function setup() {
  createCanvas(800, 600); //Set up the canvas
  background(0); //Initial background color
}

function draw() {
  background(0); //Clear the canvas at each frame to redraw updated flowers
  //Iterate through each flower in the array to update and display it
  for (let flower of flowers) {
    flower.grow(); //Simulate growth
    flower.show(); //Draw the flower on the canvas
  }
}

function mousePressed() {
  //Create a new Flower object at the mouse position when the canvas is clicked
  let flower = new Flower(mouseX, mouseY);
  flowers.push(flower); //Add the new flower to the array
}

The title of this artwork is “The Flower Garden”. The overall concept of this generative art piece is to simulate a digital garden where flowers can spontaneously grow at locations chosen by the user. Each flower starts small and grows over time, with a unique number of petals and colors, creating a diverse and evolving garden scene. This interactive piece allows viewers to contribute to the creation of the artwork, making each experience unique.

Use of Arrays and Objects in OOP
Arrays: The flowers array is used to store multiple instances of the Flower class, showcasing how arrays can manage collections of objects in an OOP context.
Objects: Each flower is an instance of the Flower class, with its properties and behaviors encapsulated within the class. This demonstrates the use of objects to model real-world concepts (like flowers) with data (properties) and actions (methods).

I tried to create an interactive and visually appealing art, allowing both the creator and the viewer to explore the intersection of nature, art, and technology. The inspiration behind this artwork was the concept of similar virtual garden apps/games that allows users to have their garden, creating and nurturing the flowers in it. I tried to make a similar version of it with vivid colors and shapes. The part I most loved is how the flowers actually look – I think they’re very pretty and when they’re blooming it gives a calm and soothing feel to the viewer.

Here’s how it looks when the garden is full of flowers:

I made another one with some revisions(added stem and two leaves to each flower):

Full garden:

Here are some other designs I kinda played with: