week 8: reading response

The idea that attractive things work better made me think about how much design affects the way I interact with everyday objects. I realized that when something looks nice or well-designed, I’m more likely to enjoy using it, even if it’s not perfect. It made me think about my phone apps some are so easy to use just because they look clean and simple. I don’t know if I fully agree that looks always make something work better, but I do see how a good design can change my mood and make me more patient. It also made me wonder if we sometimes value appearance too much and overlook function. Shouldn’t something work well even if it’s not pretty?

Reading about Margaret Hamilton really opened my eyes to how important her work was in getting humans to the moon. I had never thought about the software behind the mission, or that a woman played such a huge role. It made me question why we don’t hear about people like her more often. It also made me think about how women in tech are often seen as exceptions rather than just part of the team. I liked how the article highlighted her focus on preventing errors it reminded me how important it is to think ahead in problem-solving. It made me want to learn more about other hidden figures in science and tech who made big changes but didn’t always get the credit.

My Unusual Switch Project

I created a simple but fun circuit using one LED light, three wires, a resistor, and copper tape. My goal was to make an unusual switch that doesn’t use hands. Instead, I used my little brother’s legs to complete the circuit!

I wrapped copper tape around both of his leg. When he touches his legs together, the copper tape connects, and the circuit closes, lighting up the LED. When he separates his legs, the circuit opens and the light turns off. It was really funny to see it work—it felt like he had leg powers!

https://drive.google.com/drive/u/0/folders/1Kk2lkQgoAyybXSYWVmY2Dog9uQVX_DMq

This project taught me how the human body can become part of an electronic switch. It also made me think about how switches don’t always need buttons or hands—they can be playful and interactive in unexpected ways.

In the future, I want to add sound effects using a buzzer so that it not only lights up but also makes a sound when the legs touch. I think that will make the experience even more surprising and fun!

Midterm-gardens of butterflies

For this midterm project I chose to create a game of a garden filled with butterflies, nature-inspired environment where colorful butterflies flutter randomly across the screen. I used the spacebar to control a net that follows the cursor, to catch the butterflies making the gameplay intuitive and engaging.

The goal of the game is to catch as many butterflies as possible . Each butterfly has different colors and sizes, . I also added gentle ambient sounds, like a net sound, to create a soothing experience.

in conclusion , I aimed to create a beautiful digital garden that tests hand-eye coordination while offering a calming escape.

Future Improvements:
I believe the game could be further enhanced by adding different levels of difficulty. For example, introducing obstacles or making some butterflies faster and more evasive would add a layer of challenge. I also think that implementing a scoring system with a timer could increase replayability. Another idea is to introduce special butterflies that grant power-ups, like slowing down all butterflies or extending the catch radius of the net. Additionally, I would explore adding dynamic weather effects, such as changing skies or light rain, to create a more immersive environment. Ultimately, my goal is to refine the game by incorporating feedback and exploring new ways to engage players through both gameplay and visuals.

code im proud of:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class GameMenuDisplay {
show() {
butterflyMenu.move();
butterflyMenu.show();
noStroke();
fill(255, 255, 255, 200);
rect(420, 20, 360, 560);
// How To Play Text
textSize(32);
textAlign(CENTER, CENTER);
fill(0);
text("Catch The Butterfly", 600, 60);
textSize(20);
text("Game Instruction: ", 600, 220);
textSize(14);
text("Move the net with your mouse and\npress SPACE BAR to catch the butterflies.", 600, 280);
textAlign(CENTER, CENTER);
text("Click anywhere to start the game.", 600, 520);
}
}
class GameMenuDisplay { show() { butterflyMenu.move(); butterflyMenu.show(); noStroke(); fill(255, 255, 255, 200); rect(420, 20, 360, 560); // How To Play Text textSize(32); textAlign(CENTER, CENTER); fill(0); text("Catch The Butterfly", 600, 60); textSize(20); text("Game Instruction: ", 600, 220); textSize(14); text("Move the net with your mouse and\npress SPACE BAR to catch the butterflies.", 600, 280); textAlign(CENTER, CENTER); text("Click anywhere to start the game.", 600, 520); } }
class GameMenuDisplay {
    show() {
        butterflyMenu.move();
        butterflyMenu.show();

        noStroke();
        fill(255, 255, 255, 200);
        rect(420, 20, 360, 560);

        // How To Play Text
        textSize(32);
        textAlign(CENTER, CENTER);
        fill(0);
        text("Catch The Butterfly", 600, 60);
        
        textSize(20);
        text("Game Instruction: ", 600, 220);
        
        textSize(14);
        text("Move the net with your mouse and\npress SPACE BAR to catch the butterflies.", 600, 280);

        textAlign(CENTER, CENTER);
        text("Click anywhere to start the game.", 600, 520);
    }
}

 

Week5-reading response

Reading  Computer Vision for Artists and Designers made me think about the stark differences between how humans and computers perceive the world. Human vision is incredibly contextual—we naturally filter out distractions, infer meaning, and recognize objects even when they are partially obscured. In contrast, computer vision relies on algorithms and mathematical models to process images. It doesn’t “see” in the way we do; instead, it detects patterns, edges, and contrasts based on pixel values. I found it fascinating how much work goes into making computers interpret images in ways that feel natural to us.

One of the key techniques for improving computer vision’s ability to track what we’re interested in is feature detection—using algorithms like edge detection, motion tracking, and machine learning models trained on labeled datasets. I also noticed how lighting, contrast, and background control play huge roles in making computer vision more accurate. This made me reflect on its implications for interactive art. I think computer vision’s capacity for tracking and surveillance creates an interesting tension in artistic practice—it allows for dynamic, responsive installations, but it also brings ethical concerns. I felt a bit unsettled thinking about how the same technology that enables playful, immersive experiences can also be used for surveillance. It makes me wonder how artists can challenge or subvert these systems in creative ways.

midterm proggres

I’ve been working on my Maze Garden project, and while it’s not finished yet, I’m excited about where it’s headed. So far, I’ve built the foundation of a maze that blends the intricate paths of a traditional labyrinth with the natural beauty of a garden. I used a procedural maze generation algorithm to create varied layouts, and I experimented with adding hidden clues and mini-puzzles along the way to keep things interesting.

I’ve focused on making the visuals as engaging as possible by using p5.js to draw lush hedges, vibrant flower beds, and subtle garden ornaments. I even integrated soft ambient sounds like birds chirping and leaves rustling to create a calming, immersive atmosphere. I think I worked like that, refining the design through multiple iterations to capture the right balance of mystery and tranquility. or maybe I make it catch the butterflies in the garden instead I’ve also got the idea of instead of the maze I will intgraite more on the idea of making the game catching the butterflies instead because it may be simpler

In the future, I plan to expand on these ideas further. I will be refining the user controls and adding more interactive elements to make the experience even more engaging. There are still plenty of features and tweaks I want to implement, and I’m looking forward to continuing this creative journey until the project truly feels complete.

Challenges :

I think the most challenging part would be capturing that realistic, natural feel purely through code. For instance, creating organic textures for hedges, bushes, and ornamental patches much like those in the Versailles gardens—requires careful use of noise functions and gradients. Additionally, animating butterflies to move in a lifelike manner without looking too mechanical can be quite tricky. Balancing all these visual details while keeping the sketch performant is a significant challenge, especially i you layer on more elements.also making the butterfly catching moment very realistic

week4- reading response

Reading Reflection – Week 5

One thing that annoys me is faulty elevator button designs such as the “Door Close” button that doesn’t work or when floors are numbered in a way that makes no sense. Some others make you swipe a keycard first before you press a floor, but you can’t tell that you’re meant to do that, so you just keep pressing the button and can’t figure out why it’s not working. The easy fix is more obvious signifiers, such as a little light or message that says, “Swipe card first.” This is Norman’s guideline that good design must make things obvious so users won’t need to guess. As for interactive media, I believe Norman’s principles can be applied there too.

For example, in VR, buttons and menus need to behave in intuitive ways—like grabbing objects in the same way you would in the real world instead of using awkward button presses. And feedback is crucial as well. If I tap at something within an application or a game, I expect to feel the effect of the tap in some way, with sound, graphical feedback, or vibration. Norman speaks quite extensively about human-centered design, and my favourites kinds of interactive experience are when things just naturally work the way you think you can do with them—they feel intuitive and do not require interrupting flow for working out what you are meant to be doing.

week4-text display

Concept & Reflections

Visual Metaphor:
When I created this piece, I envisioned the soft, drifting clouds as a metaphor for the ever-changing nature of our thoughts and emotions. Like clouds that pass through our skies, our feelings are transient and beautiful in their subtlety. The kind words dripping from them represent those gentle, uplifting messages that, although they may seem small at first, eventually leave a lasting impression on our hearts.

Interactive Design:
I designed the clouds to continuously emit letters—a dynamic, ever-changing canvas that mirrors life itself. It feels like these tiny bursts of positivity, dropping down from above, gradually build up over time. It’s a reminder that even the smallest kind words can accumulate and transform our mood, much like a few gentle raindrops can eventually water a parched garden.

Further Exploration:
Working on this project made me realize that there’s so much more to explore. What if, by simply clicking on a cloud, you could change the words, or adjust the drip speed, almost as if you were altering the course of your own thoughts? Experimenting with different color schemes or fonts could also deepen the emotional resonance of the piece, evoking the exact mood you need on a tough day.

For me, this project wasn’t just about code it was about capturing the delicate interplay between fleeting thoughts and the lasting impact of kind words. I hope it inspires you to see how even the softest whispers of positivity can make a profound difference in our lives.

Code im proud of :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Return the next letter of the word, or null if finished
getNextLetter() {
if (this.letterIndex < this.word.length) {
let letter = this.word.charAt(this.letterIndex);
this.letterIndex++;
return letter;
} else {
// Option: reset to loop the word
// this.letterIndex = 0;
// return this.word.charAt(this.letterIndex++);
return null;
}
}
update() {
// Slow horizontal drift
this.x += this.driftSpeed;
if (this.x > width + this.size) {
this.x = -this.size;
}
// Optionally, add slight vertical oscillation for more life
this.y += sin(frameCount * 0.005) * 0.5;
}
// Return the next letter of the word, or null if finished getNextLetter() { if (this.letterIndex < this.word.length) { let letter = this.word.charAt(this.letterIndex); this.letterIndex++; return letter; } else { // Option: reset to loop the word // this.letterIndex = 0; // return this.word.charAt(this.letterIndex++); return null; } } update() { // Slow horizontal drift this.x += this.driftSpeed; if (this.x > width + this.size) { this.x = -this.size; } // Optionally, add slight vertical oscillation for more life this.y += sin(frameCount * 0.005) * 0.5; }
// Return the next letter of the word, or null if finished
  getNextLetter() {
    if (this.letterIndex < this.word.length) {
      let letter = this.word.charAt(this.letterIndex);
      this.letterIndex++;
      return letter;
    } else {
      // Option: reset to loop the word
      // this.letterIndex = 0;
      // return this.word.charAt(this.letterIndex++);
      return null;
    }
  }
  
  update() {
    // Slow horizontal drift
    this.x += this.driftSpeed;
    if (this.x > width + this.size) {
      this.x = -this.size;
    }
    // Optionally, add slight vertical oscillation for more life
    this.y += sin(frameCount * 0.005) * 0.5;
  }

 

Week 3- reading

A strongly interactive system is one that supports an ongoing exchange between the user and the system, rather than a simple cause-and-effect response. , Crawford emphasizes that true interactivity requires a two-way conversation where the system not only responds to user input but does so in a way that is meaningful, engaging, and adaptable. It should be responsive, intuitive, and immersive; the users should have a good feeling about their actions being effective and that the system responds organically. One of the most critical aspects of interactivity is real-time feedback. When users interact with a system, they should immediately see or feel the consequences of their actions. This could be through visual changes, such as color shifts, animations, or movement, or through sensory feedback like sound effects and vibrations. The more immediate and natural the response, the more engaging the experience becomes.

To enhance the degree of user interaction in my p5.js sketches, I’d like to further develop more dynamic and reactive elements. For example, objects could be made to react to cursor movement through changes in shape, speed, or transparency, making it more alive. Another idea could be to utilize randomness to provide variety, where each interaction results in slightly different outcomes, allowing the artwork to feel organic instead of predictable.

I am interested in the use of multi-layered interactions where, with one input from a user, a chain reaction occurs rather than a single event. For instance, the click of one element may cause another object to move, change color, or fire off another animation sequence. Incorporating this will allow for a richer experience where users can be drawn into the artwork and experiment with how they interact with it.

My long-term aim is to create interactive sketches that are alive and responsive, creating an encouragement to experiment and discover unexpected outcomes. This refinement of how the system responds to the input provided smoothes out the interaction, thus making it much more immersive and engaging rather than just a number of responses with my generative artwork.

 

Week 3- car

Concept
This will be a generative artwork of a dynamic cityscape in which cars move along a busy street; the colors of buildings will change over time. The rhythmic movement within an urban setting will be simulated using programmed randomness and structured object-oriented programming. It also lets users interact with the scene-for instance, causing the cars to crash by clicking on them. A bright yellow flash to mark the moment of collision adds engagement and surprise.

Development Process.

This project deals with the work of OOP principles on such elements as cars, buildings, and road features.Arrays are used to hold these objects and then manipulated for flexibility in animation. The cars move continuously across the screen, resetting at their edges, and the buildings keep slight variations in height and color to give it a more organic feel as if from a real city. Introduction of clickability on the cars introduces user interaction, an important aspect of making the artwork from a simple, passive, visual display into an active system. Challenges and Refinements Among these, one major problem was getting the cars to glide smoothly across the road, which kept floating above it, out of alignment with the street. Changing some positions and managing more realistic layering helped improve that aspect. The second aspect was embedding the collision effect impressively while managing the aesthetics of the overall scene. The crash effect turned out much better with just fine-tuned timing and changes in opacity of the yellow flash, not to overwhelm it.

Future Improvements
There are several possible ways to take this project even further. One could add in environmental elements such as weather effects, changing times of day, or a richer soundscape for added realism and interaction. Implementing more complex behaviors for the cars, like random stops or variable speeds, would also increase the depth of the simulation. Finally, making the user be able to reset or change the scene dynamically within the artwork will make it far more engaging and replayable.

Code im am proud of is this specially

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
}
crash() {
this.isCrashed = true; // Car stops moving
this.speed = 0; // Set speed to 0 for a realistic stop
}
}
} crash() { this.isCrashed = true; // Car stops moving this.speed = 0; // Set speed to 0 for a realistic stop } }
 }

  crash() {
    this.isCrashed = true; // Car stops moving
    this.speed = 0; // Set speed to 0 for a realistic stop
  }
}

where I figured out how to make the car stop to seem like it crashed

week-2 reading response

For this week’s reading reflection for Casey Reas’ lecture about chance operations, I have considered how randomness can be utilized in my work. In my current work in VR, I have seen that randomness could introduce an added level of immersive experience in my work. For example, having unpredictable environment shifts and interactions could generate a sensation of uncertainty, amplify the level of engagement for the user, and make them even more engaged in the experience. Nevertheless, a delicate balancing act must take place between randomness and control, for excessive randomness could disorient, and a lack of randomness could make the experience too rigid and lifeless. In my work, I’d like to experiment with randomness in bounded structures—generating a level of surprise but not compromising purpose and clarity of the experience.

The lecture challenged my thinking about randomness in my work. As I have liked having a level of control over my work, having calculated unpredictability in my work opens doors for new avenues for investigation and inquiry. It’s posed questions for me about an excessive level of randomness and whether an ideal sweet spot can stimulate and maintain a level of creativity and an involved level of user experience. Can excessive randomness destroy the narrative and emotional impact of a VR experience, or can it generate new dimensions of meaning? I’m interested in exploring these questions in my continued development of my work.