Week 9-Analog Input & Output


As part of the 9th Assignment of Intro to IM, we were tasked with the objective of reading input from at least one analog sensor, and at least one digital sensor (switch). This data would then be used to control at least two LEDs, one in a digital fashion and the other in an analog fashion, in some creative way.

The core idea of my project is to create an interactive light experience using a combination of analog and digital inputs to control an RGB LED in a creative and visually appealing manner. Initially, the RGB LED displays a steady red color, which gradually transitions through a spectrum of colors, creating a calming and dynamic visual effect. This smooth color transition continues indefinitely, creating a mesmerizing ambient display.

The interaction becomes more engaging with the introduction of a user-controlled digital button and a light sensor. The button, when pressed, shifts the mode of the LED from its continuous color transition to a responsive blinking state. In this state, the color of the LED’s blinking is determined by the ambient light level measured by the sensor. Specifically:

  • Below 300 units: The LED blinks in red, indicating low light conditions.
  • Between 300 and 900 units: The LED blinks in blue, corresponding to moderate light levels.
  • Above 900 units: The LED blinks in green, signifying high light intensity.


Pictures of Circuit

With this, I produced the following circuit:

Demo Video

A demo video, in detail, can be seen here:


Difficulties & Improvements

While the concept of the color transition was straightforward, implementing it in Arduino presented significant challenges. Determining the correct method for transitioning from one color to another smoothly, without abrupt changes, was particularly tricky. This aspect of the project required careful tweaking of the code to ensure that the color shifts were visually pleasing.

void smoothColorTransition() {
  // Fade colors smoothly
  if (redValue > 0 && blueValue == 0) {
    redValue -= step;
    greenValue += step;
  if (greenValue > 0 && redValue == 0) {
    greenValue -= step;
    blueValue += step;
  if (blueValue > 0 && greenValue == 0) {
    blueValue -= step;
    redValue += step;

Despite these challenges, I thoroughly enjoyed this part of the project. It was rewarding to see the seamless color transitions come to life. Looking ahead, I plan to expand this project by adding an additional LED and another button to enhance interactivity and complexity, making the experience even more engaging.



The concept behind my Unusual Switch project is to transform a regular room door into an innovative electrical switch. This unconventional approach leverages the movement of the door to control the on and off state of an LED light.




I set up a simple circuit with a resistor and an LED. Starting with a ground wire connected to the LED, which then connects to a resistor. To integrate the door into this circuit, I attached one wire wrapped in aluminum foil to the door frame and another, connected to 5V, similarly wrapped and placed on the door. A long strip of aluminum foil on the door’s moving part completes the circuit when the door is closed, lighting up the LED. Open the door, and the circuit breaks, turning off the LED. It’s a neat little setup that turns the action of opening and closing a door into an on-off switch for the light.

Week 8 Response

The exploration of Margaret Hamilton’s contributions in “Her Code Got Humans on the Moon—And Invented Software Itself” and Donald A. Norman’s insights in “Emotion and Design” illuminate two profound yet interconnected realms of human ingenuity. Hamilton’s journey as a trailblazer in software engineering not only showcases the monumental role of software in space exploration but also reflects the broader implications of pioneering in technology. Her work, at a time when the term “software engineering” was not even coined, exemplifies the essence of innovation—venturing into the unknown with a blend of expertise, foresight, and courage. The narrative of Hamilton and her team meticulously crafting the software that would guide humans to the moon underlines the criticality of software in complex systems, a lesson that transcends industries and eras.

On the flip side, Norman’s discourse on the interplay between emotion and design serves as a philosophical counterpart to Hamilton’s empirical achievements. While Hamilton’s story underscores the technical precision and rigor necessary in engineering, Norman’s analysis delves into the subjective experience of interacting with technology. His argument that aesthetics and usability are not mutually exclusive but rather complementary forces offers a nuanced understanding of human interaction with technological products. Norman’s assertion that “attractive things work better” because they engender positive emotional responses, does not detract from usability but rather enhances it by acknowledging the human element in design.

In synthesizing insights from both readings, a critical reflection emerges on the symbiotic relationship between form and function, theory and practice, emotion and utility. Hamilton’s pioneering work in software engineering not only advanced our capabilities in space exploration but also laid the groundwork for considering how software interfaces—the very nexus between human and machine—need to be designed with both functionality and user experience in mind. This parallels Norman’s emphasis on the importance of emotional resonance in design, suggesting that the most effective designs are those that harmoniously blend aesthetic appeal with functional efficiency.

Furthermore, both narratives prompt a reflection on the role of diversity and interdisciplinary approaches in innovation. Hamilton, an outlier in her field, and Norman, bridging psychology and design, exemplify how bringing diverse perspectives to bear on challenges can lead to breakthrough solutions. This raises pertinent questions about how current and future innovations can benefit from integrating insights from seemingly disparate fields, fostering an environment where diversity of thought is not just encouraged but seen as essential to problem-solving.

Midterm Project: Greenhaven


I grew up in a village without a park, a place where families, friends, and pets gather to enjoy nature and each other’s company. To experience the joy of a park, I had to travel to nearby villages or cities. This sparked my love for parks and inspired my midterm project: creating a virtual park. My goal is to recreate the sense of community and fun found in a park, from children playing on swings to people walking their dogs and old friends catching up. This project is my way of bringing the park experience to those who, like me, have always admired it from afar.


My project begins with a start screen that warmly welcomes users to the virtual park experience, featuring a “Start” button that leads them into the park scene upon interaction. The journey into the virtual park commences with a meticulously designed background, setting the stage for the vibrant park life that unfolds.

Central to the park are two swings, each with figures seated and in motion, bringing a dynamic element of playfulness. These swings, animated to sway, add a lively atmosphere to the park scene. Adding to the ambiance is a bird, animated using a sprite sheet to simulate realistic motion. A click from the user sends the bird flying off the canvas, illustrating the interactive nature of this digital environment.

Music enriches the park experience through a jukebox feature. Clicking on the jukebox transitions the scene from the park to a Radio view, magnifying the jukebox and revealing its controls. The jukebox offers three buttons: one to stop the music, providing users control over the ambiance, and two others to navigate through the playlist, enhancing the immersive experience with auditory choices.

The park’s inhabitants include a sprite-sheet-based man, whom users can direct around the park. Movement is thoughtfully restricted, and the character is scaled dynamically to create a depth effect, simulating closer or further distance from the viewer as he moves vertically across the screen. This effect adds a layer of realism to the virtual exploration. A girl performing yoga serves as another point of interest. Her form transitions every 2 seconds.

Full Screen Canvas:


Code I’m Proud of:

This code is my favorite part of the project because it encapsulates a significant learning curve and represents a turning point in the development process. Mastering the use of the lerp function for scaling the swing wasn’t straightforward; it took a considerable amount of time and experimentation to get right. However, once I figured it out, everything else seemed to fall into place more easily.


// Oscillate the scale between 0.5 and 1.2 to simulate forward and backward motion
  this.swingScale = lerp(0.4, 0.7, (sin(this.angle) + 1) / 2);
  this.angle += this.angleVelocity;

display() {
  // Swing frame
  stroke(139, 69, 19); 
// Left side of the frame
  line(this.x -50, this.y - this.frameHeight, this.x -50, this.y); 
  // Right side of the frame
  line(this.x + 50, this.y - this.frameHeight, this.x+ 50, this.y); 
// Top of the frame
  line(this.x -50, this.y - this.frameHeight, this.x +50, this.y - this.frameHeight); 

// Start a new drawing state
// Translate to the position of the swing seat
  translate(this.x, this.y-15); 
// Apply scale transformation
  fill(160, 82, 45); 
// Seat
  rect(0, 0, this.width, this.height); 
// Swing ropes 
  stroke(160, 82, 45); 
// Scale the stroke weight to simulate depth
  strokeWeight(2 * this.swingScale); 
// Left rope
  line(this.x-20, this.y - this.frameHeight, this.x -20 * this.swingScale, this.y - this.height/2-10 * this.swingScale); 
 // Right rope
  line(this.x + this.width/2, this.y - this.frameHeight, this.x + this.width/2 * this.swingScale, this.y-10 - this.height/2 * this.swingScale);
  if (this.figure) {

Another piece of code that I take great pride in is the function for handling mouse interactions, specifically the logic that enables switching between scenes. Although the code now appears straightforward, reaching this level of simplicity and effectiveness was a journey marked by significant effort and learning. Here’s the code:

function mousePressed() {
  if (scene === 'start') {
    // Check if the Start button is clicked
    if (mouseX >= width / 2 - 50 && mouseX <= width / 2 + 50 &&
        mouseY >= height / 2+180 && mouseY <= height / 2 + 250) {
      scene = 'park'; // Change the scene to the park
  } else if (scene === 'park') {
    radio.click(mouseX, mouseY);
    // Check if the bird is clicked
    if (mouseX >= bird.x && mouseX <= bird.x + 64 && mouseY >= bird.y && mouseY <= bird.y + 64) {
      bird.fly(); // Make the bird fly
  } else if (scene === 'radio') {
    if (mouseX >= 10 && mouseX <= 110 && mouseY >= height - 60 && mouseY <= height - 10) {
      scene = 'park'; 
      radio.isClicked = false;
    if (mouseX > 523 && mouseX < 578 && mouseY > 372 && mouseY < 407) {

    if (mouseX > 611 && mouseX <667 &&
        mouseY > 372 && mouseY < 407) {

Key Challenges Faced 

  1. Swing Depth Effect: One of the initial challenges was to create a depth effect for the swings. My first approach involved altering the coordinates, which did not yield the desired outcome. Eventually, the use of the lerp function for scaling the swings provided the solution.
  2. Scene Transitions: Transitioning between scenes (start to park, park to radio) was difficult. It took numerous trials to manage application states effectively for smooth transitions.
  3. Jukebox Functionality: The jukebox component was a multifaceted challenge. Initially, assembling its structure and design was time-intensive, requiring attention to detail to accurately represent its features. Beyond its appearance, integrating interactive functions, such as changing songs and stopping playback through radio buttons, added another layer of complexity.
  4. Animating a Running Girl: I wanted to incorporate a running girl to the park. However I was not able to achieve smooth transitions between frames. The frames for the running motion changed too abruptly, leading to an unnatural appearance.

Future Aspects:

The journey of crafting the virtual park has been incredibly fulfilling, yet I see so much more potential for it. Right now, the park feels a bit too quiet for my liking; it’s missing the hustle and bustle of daily park life. I’m dreaming of adding animations of families spreading out picnic blankets, kids chasing each other around, and elderly couples enjoying quiet conversations on benches. These little touches, I believe, will truly breathe life into the park.

One of my initial ambitions was to animate a girl running through the park. Sadly, getting her movement just right turned out to be trickier than I expected, and I had to set that idea aside. But, it’s still something I’m passionate about tackling. Seeing the project come to life has been incredibly rewarding, and it’s only fueled my desire to dive back in and add even more depth and interaction to this virtual space. The feedback has been heartening, and honestly, I can’t wait to get started on bringing these new ideas to life. The virtual park project isn’t just a task for me; it’s a passion project that I’m excited to develop further.




Week 6 Reading Response

Diving into the article about computer vision for artists and designers felt like opening a door to a room where art meets science in the most fascinating way. I’ve always thought of computer vision as something you’d find in sci-fi movies or high-tech security systems, not something that could be part of creating art. The idea that artists are using this technology to make interactive pieces where the artwork changes based on how people move around it is pretty cool. It’s like the art is alive, reacting to us just as much as we react to it.

Reading about projects like Videoplace and Sorting Daemon really got me thinking. It’s one thing to look at a painting on a wall, but it’s something entirely different to be part of the art itself. The thought that my movements could influence an art piece, creating something unique each time, is both exciting and a bit mind-blowing. It’s not just about observing; it’s about participating, and that changes the whole experience of what art can be.

The technical side of things, like how computer vision can track movements and interpret them into visual changes in an art piece, was a bit complex but also intriguing. I didn’t realize so much went into making these installations work. It’s not just about having a good idea for an art piece; it’s also about solving problems, like making sure the lighting is right so the cameras can see what they need to. This made me appreciate the art even more, knowing the blend of creativity and technical skill that goes into it.

However, what stuck with me the most was thinking about the bigger picture—like what it means for a machine to watch us and then create art based on that. It’s a bit like the machine is an artist too, interpreting our actions in its own digital way. And while it’s amazing, it also raises questions about privacy and how much we’re comfortable with machines “seeing.”

Overall, the article was a peek into a future where art and technology blend in ways that make the audience a part of the artwork. It’s a reminder that creativity knows no bounds, especially when artists start playing around with tech to see what new forms of expression they can discover. It makes me wonder what other surprises the art world has in store as technology keeps advancing.

Midterm Progress


I grew up in a village without a park, a place where families, friends, and pets gather to enjoy nature and each other’s company. To experience the joy of a park, I had to travel to nearby villages or cities. This sparked my love for parks and inspired my midterm project: creating a virtual park. My goal is to recreate the sense of community and fun found in a park, from children playing on swings to people walking their dogs and old friends catching up. This project is my way of bringing the park experience to those who, like me, have always admired it from afar.


Building on the foundational inspiration, the core idea of my midterm project is to craft an immersive user experience that mimics the tranquility and community feel of a real park. To achieve this, I’ve begun by setting up a serene background image that serves as the canvas for the park’s life. Central to the scene are two swings, each with a figure that moves in harmony with the swing’s motion. To ensure these movements are as natural as possible, I’ve implemented the lerp() function, which allows for smooth transitions and adds a lifelike quality to the animations.

Adding another layer of interaction to the park, I’ve introduced a jukebox feature. This allows users to engage with the environment actively by selecting and controlling the music to suit their mood, enhancing the personal experience of the park. While the music feature is currently in development, with plans to enable song changes and stops, it promises to be a significant aspect of user engagement.

Looking ahead, I plan to enrich the park’s atmosphere with spritesheets for various people movements, creating a dynamic and bustling park scene. This will include groups of people sitting on the grass or on carpets, adding to the communal vibe. Additionally, to further the immersion, I intend to incorporate ambient sounds, such as birds chirping, which will be a constant backdrop to the park experience, not subject to user control. This sound layer aims to deepen the user’s connection with the virtual environment, making it feel alive and vibrant. Moreover, diversifying the playground equipment, especially with different swings, will offer a variety of interactions for the user, simulating the choice and freedom one finds in a real park. This expansion not only adds visual appeal but also invites users to explore and find their favorite corner of the virtual park.

Challenging Aspects

Drawing Complexities: The first significant challenge is the detailed drawing of park structures and objects using p5.js. Every element, from swings to human-structure, requires time-consuming manual drawing. This process demands a high level of precision and artistic skill to ensure the park’s visual appeal and thematic consistency.

Interactive Features: Introducing interactivity, such as clickable buttons and objects that respond to mouse hover, adds another layer of complexity. For example, making the jukebox highlight when hovered over involves sophisticated input detection and dynamic response coding, enhancing user engagement but also increasing development complexity.

Animating Characters with Spritesheet: Utilizing spritesheets for character movement presents a formidable challenge. Ensuring these animated figures navigate the park without colliding with objects or wandering off the grass involves intricate collision detection and boundary management.



Week 4-Assignment

In this assignment, my primary objective was to visualize data pertaining to different types of energy consumption spanning from 1900 to 2018. Given the diverse nature of energy sources and their consumption patterns, I decided to employ a line graph as the mode of visualization. However, due to the multitude of energy types and their varying magnitudes of consumption, presenting them all on a single graph would result in a cluttered and incomprehensible visualization. To address this issue, I opted to implement a dropdown menu using the createSelect() function. This feature allows users to select a specific energy type, and subsequently, the graph updates dynamically to display the consumption trend exclusively for the chosen energy source.

One of the prominent challenges encountered during the implementation phase was the disparate scales of energy consumption among different energy types. Some energy sources exhibited significantly higher consumption values compared to others. Consequently, if a uniform y-axis scale were to be applied across all energy types, it would lead to visual distortions, making the graph incomprehensible. To mitigate this challenge, I implemented a dynamic scaling mechanism. This involved calculating the maximum consumption value for the selected energy type and mapping the y-axis scale accordingly. By dynamically adjusting the scale based on the maximum consumption value of each energy type, the visualization maintains clarity and accuracy across all displayed data points.

My favorite part of the code is processData(). It extracts and organizes data for visualization. It initializes empty arrays xValues and yValues, then loops through each row of the dataset. It extracts year and energy consumption values based on the selected energy, storing them in the arrays. This function ensures accurate representation of energy consumption trends.

Completing this assignment was definitely challenging, but I persisted by referring to the p5.js documentation whenever I encountered difficulties. This helped me understand how to use different functions and techniques to achieve my goals. I also attempted to enhance the visualization by incorporating a background picture, but encountered some issues with how it interacted with other visual elements. I’m eager to continue exploring this project further. I see a lot of potential for adding more interactive elements to make the visualization even more engaging and informative.

Reading Response Week 4

After delving into the first chapter of Don Norman’s “The Design of Everyday Things,” I find myself resonating deeply with his emphasis on the significance of understanding human behavior and psychology in design. Norman’s argument about the importance of putting ourselves in the shoes of users resonates with my own approach to design. I firmly believe that creating anything without considering the end user’s perspective is futile. Design should always prioritize usability and functionality to ensure a seamless interaction between users, systems, and designers.

Norman’s discussion on the paradox of technology also caught my attention, particularly his insight into how experiences shape users’ perceptions of interactions. It serves as a reminder that even the most aesthetically pleasing designs must prioritize functionality and user experience above all else. This resonates with me as I reflect on instances where overly complex features have hindered rather than enhanced my experience with products.

Moreover, Norman’s critique challenges the prevailing notion that more features equate to better functionality. It prompts me to reconsider what truly defines a good design and the balance between form, complexity, simplicity, and functionality. As I continue to contemplate Norman’s insights, I aim to adopt a dual perspective—as both a user and a designer—to ensure that my designs are not only visually appealing but also intuitive and user-friendly. Norman’s work serves as a valuable guide for navigating the complexities of design and human interaction, prompting me to strive for designs that enhance users’ lives without adding unnecessary complexity.

Assignment 3


For this project, the goal was to apply the concepts learned in class, including loops, arrays, and Object-Oriented Programming (OOP), to create an interactive visual experience.  The initial goal was to create a dynamic piece where a single spiral would be generated with each mouse click. However, I wanted to enhance user engagement by adding a feature that allows spirals to change color when clicked inside. So, I decided to use mouseDragged function to generate spirals and mouseClicked for spirals to change colour. Therefore, the application now produces multiple spirals during a single drag action across the screen. Furthermore, if a spiral is clicked, it temporarily changes color before reverting to its original hue.

To make the application more visually appealing, I attempted to introduce a feature where waves are generated whenever two spirals collide. I added a trailing effect to these waves, aiming to create a mesmerizing interaction between the spirals and the waves produced. Additionally, I implemented a functionality to clear the screen by pressing the ‘c’ key, allowing users to reset the canvas and start anew.


Embedded Canvas

Drag your mouse and see the magic.


let spirals = [];

function setup() {
  createCanvas(800, 800);

function draw() {
  background(0, 25); // Semi-transparent background for a trail effect
  for (let i = 0; i < spirals.length; i++) {
    // Check for collision with other spirals
    for (let j = i + 1; j < spirals.length; j++) {
      if (spirals[i].collidesWith(spirals[j])) {
        createWaveBetween(spirals[i], spirals[j]);

function mouseDragged() {
  let newSpiral = new Spiral(mouseX, mouseY);

// Function to chnage colour of the spiral after mouse ci clicked inside the spiral
function mouseClicked() {
  for (let i = 0; i < spirals.length; i++) {
    if (dist(mouseX, mouseY, spirals[i].pos.x, spirals[i].pos.y) < spirals[i].radius) {

class Spiral {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.radius = random(5, 20);
    this.angle = 60;
    this.color = color(random(255), random(255), random(255), 100);
    this.transformed = false;
  update() {
    this.angle += 0.05;
    this.radius += 0.5;
  display() {
// Itsaves the current drawing style settings and transformations applied to the canvas
//   moves the origin to the position of the spiral
    translate(this.pos.x, this.pos.y);
    for (let i = 0; i < this.angle; i += 0.1) {
//  Calculate the x and y coordinates of each vertex of the spiral
      let x = this.radius * cos(i);
      let y = this.radius * sin(i);
//  This function adds a vertex to the shape of the spiral
      vertex(x, y);

  transform() {
    this.transformed = true;
    this.color = color(random(255), random(255), random(255), 100);

  collidesWith(other) {
    let d = dist(this.pos.x, this.pos.y, other.pos.x, other.pos.y);
    return d < this.radius + other.radius;

function createWaveBetween(spiral1, spiral2) {
// Calculates the start and end points of the line connecting the centers of the two spirals
  let startX = spiral1.pos.x + spiral1.radius * cos(spiral1.angle);
  let startY = spiral1.pos.y + spiral1.radius * sin(spiral1.angle);
  let endX = spiral2.pos.x + spiral2.radius * cos(spiral2.angle);
  let endY = spiral2.pos.y + spiral2.radius * sin(spiral2.angle);
  let wave = new HorizontalWave(startX, startY, endX, endY);

class HorizontalWave {
  constructor(x1, y1, x2, y2) {
    this.start = createVector(x1, y1);
    this.end = createVector(x2, y2);
    this.amplitude = 20;
    this.frequency = 0.1;
    this.color = color(255);
  display() {
    for (let x = this.start.x; x < this.end.x; x += 5) {
      let y = this.start.y + this.amplitude * sin(this.frequency * x);
      vertex(x, y);
// This function restores the drawing state that was saved with the most recent 

Challenges & Reflections:

One of the significant challenges I encountered was the implementation of the wave generation when two spirals collide. The vision was to have the spirals transform into waves upon collision, with the spirals disappearing and the waves remaining on screen. However, I faced difficulties in realizing this feature due to my current level of understanding and technical limitations. This project has not only been a fun exploration of interactive graphics but also a valuable learning opportunity. I look forward to revisiting this project in the future, armed with more knowledge and experience, to incorporate the envisioned features and further enhance its interactivity and visual appeal.


E. J. C. (2021, February 17). Excel – Adding and Graphing Sine Waves with Any Amplitude or Phase. YouTube. https://www.youtube.com/watch?v=2SdAtjoYEXo

Week 4 Reading Response

Chris Crawford’s elucidation on interactivity, particularly his analogy of it as a conversation between users and systems, introduces a profound reevaluation of our engagement with digital interfaces. This perspective challenges the traditional view of interactivity as mere binary exchanges—inputs and outputs—by imbuing it with a relational, almost human-like quality. The notion that interactivity could harbor the depth and dynamism of a conversation compels us to reconsider the essence of our digital interactions. It suggests that these exchanges are not just about the transmission of information but about building a relationship, a dialogue that evolves with each interaction.

However, while Crawford’s analogy enriches our understanding of interactivity, it also raises several questions about its applicability in the real world. The portrayal of interactivity as a seamless conversation glosses over the inherent complexities and frictions present in human-computer interaction. Real-world interactivity is fraught with misunderstandings, misinterpretations, and a lack of feedback that can disrupt the ideal flow of conversation Crawford imagines. This discrepancy between the ideal and the real prompts a deeper inquiry into how we can design interactive systems that truly embody the conversational model Crawford proposes. Can systems be designed to understand and adapt to the nuanced feedback of users? How do we account for the diverse ways individuals interact with technology?

Moreover, Crawford’s perspective invites us to explore the ethical dimensions of designing interactive systems. If we conceive of interactivity as a conversation, then we must also consider the responsibilities inherent in facilitating these dialogues. How do we ensure that these conversations are inclusive, respectful, and enriching for all participants? In what ways might our interactive systems impose upon, rather than enhance, the autonomy of users?

In reflecting on Crawford’s work, I am both intrigued and skeptical. His vision for interactivity as a conversation between users and systems offers a compelling framework for understanding and enhancing our digital interactions. Yet, it also underscores the need for a critical examination of the assumptions underlying this analogy and the practical challenges of implementing it. As we continue to navigate the evolving landscape of interactive design, Crawford’s insights serve as both inspiration and provocation, urging us to think more deeply about the nature of our digital conversations and the worlds they create.