Week 9: Unusual Switch (LED Bookmark)


When I was sitting on my desk thinking of ideas for this assignment, the first thing that came to mind was a book I saw right in front of me (which I’m relying on the most lately for my another class).

Then, I realized I actually don’t have a bookmark and every time I’m reading a book, I just write the page on my phone. So I decided to create kind of a “bookmark” that turn on the LED every time I close the book.


  • 1 green LED light
  • 1 330 ohm resistor
  • A breadboard
  • An Arduino board with the 5V and Ground outputs
  • 1 red, 1 black, and 1 blue jumper wires
  • USB cable
  • Tape
  • My book



The process of this circuit is really simple. Basically, I connected two jumper wires in the 5 V and Ground outputs of the Arduino. However, instead of connecting the 5 V directly into the breadboard, I pasted in one of the pages of the book. Then I used another jumper wire to do the connection between the resistor and the 5 V output.



I’m really satisfied with the outcome of the assignment, especially because I think experimenting is one of the best ways to learn Arduino. So, I’m getting more familiar with the logic and the process itself. When it comes to areas of improvement, I intend to explore more other materials, as well as other ways of connecting the circuit.

Week 8a – Reading Response

Norman,“Emotion & Design: Attractive things work better”

While reading the article, I found really interesting how the author explores the relationship between usability, aesthetics, affect, and cognition in design. However, it also made me think of an alternative perspective that prioritizing one aspect over another could lead to more effective outcomes in certain contexts. For example, in industries where functionality and efficiency are essential, such as industrial machinery or medical devices, usability might take precedence over aesthetics and affect. In these cases, a minimalist and utilitarian design approach could enhance user performance and safety without being encumbered by unnecessary visual features. Moreover, some users may prioritize practicality over emotional engagement, particularly in professional or utilitarian settings where efficiency and productivity are the primary concerns. Thus, while the reading advocates for a holistic approach to design, acknowledging differing priorities and contexts is essential for making designs to specific user needs and preferences.

Her Code Got Humans on the Moon

Personally, I think Margaret’s strong commitment to following her passion, despite societal pressures, is truly inspiring. In today’s tech scene, where gender gaps persist, her story serves as a stark reminder of the importance of diversity and inclusivity. Examples of gender bias and the need for inclusivity in tech still persist, ranging from disparities in leadership roles to obstacles hindering the progress of women and other minorities. Hamilton’s legacy, from her pioneering days at NASA to her leadership in software firms, highlights the transformative impact of inclusivity and the crucial role she played in shaping the tech landscape. Her narrative also pushes us to continue striving for a tech world that’s more fair and diverse, where everyone, regardless of gender or background, has the chance to make their mark, just like her.

Midterm Project: Runner Game

Introduction and Concept:

For my midterm project, I decided to create an endless runner game, drawing inspiration from the classic “dinosaur game” featured in Google Chrome when there’s no internet connection.

The core objective of the game is to navigate a player-controlled square through various obstacles, aiming to achieve the highest score possible. The design aesthetic is inspired from interplanetary and retro themes, with background music carefully selected to complement the game’s dynamic pace.

Full screen: https://editor.p5js.org/hazieloli/full/D7t8p9wFx

Failed Attempts:

Initially, I drew inspiration from the movie “Rio” and envisioned developing a game reminiscent of “Angry Birds,” incorporating characters and music from the film. Despite following tutorials and exploring libraries for implementing physics, my attempts led to a demo showcasing the initial stage of the game without the desired physics effects.

Subsequently, as I progressed with implementing physics into the game, I encountered complexities in defining game conditions, such as winning and losing.

Finally, I changed my idea towards developing my current endless runner game for a more manageable project.

Sound and Music:

For the music, I used the instrumental version of the song “Mas que nada”:


For the sound effects, both the jump and gameover sound, I downloaded from Pixabay:





For the background images, I used Canva to create the start page:

And the second background image was downloaded from Freepik:


A part of the code that I’m particularly proud of, even though it is simple, is the draw function:

function draw() {
    if (!gameStarted) {
        // Don't run the game if it hasn't started yet

    // Draw background image
    image(backgroundImage, 0, 0, width, height);

    score += 0.05;
    text(round(score), 10, 32);


    if (random(1) < 0.03) {
        if (score > minScore) {
            blobs.push(new Blob());
            minScore = score + 2 + random(1);

    for (let i = blobs.length - 1; i >= 0; i--) {
        blobs[i].setSpeed(8 + sqrt(score) / 5);

        if (player.hits(blobs[i])) {
            print("GAME OVER");
            // blobs.x = width;
            // startGame();

        if (blobs[i].getX() < -50) {
            blobs.splice(i, 1);

Challenges faced:

I believe one of the most challenging parts of building this project was to think of something new in such a limited time, after spending days working on my failed attempts. Also, it was quite difficult for me to implement the restart function on the game in order to reset the position of everything when it’s game over.

Areas of Improvement:

Reflecting on the project’s development, I acknowledge areas with potential for enhancement:

  1. Design: Addressing glitches on the starting page and creating an additional background image and message for the game-over screen to ensure a seamless and visually engaging user experience. Also, work on the alignment of the pages.
  2. Level of Complexity: Introducing different levels of difficulty to offer players varying challenges and experiences. For example, gradually increasing obstacle speed as the player achieves specific score milestones to heighten the game’s intensity and replay value.

Tutorials: https://youtu.be/TDQzoe9nslY?si=w9yKP0toDZrD_I3thttps://www.youtube.com/live/FHXDywq69v4?si=sFEaLB8_rZKxWNyq

Week 5 – Reading Response: Vision for All (From Art to Security)

I found the reading really interesting, especially because it made me think and do research about real world applications, as well as examples in which we can use computer vision technology. Moreover, the democratization of computer vision technology has indeed paved the way for innovative applications across different sectors, not only arts. For instance, in the field of healthcare, computer vision algorithms are being used to assist radiologists in analyzing medical images such as X-rays and MRIs. By automating the process of identifying anomalies or patterns indicative of diseases, these algorithms not only enhance diagnostic accuracy but also expedite patient care, especially in regions with limited access to healthcare professionals.

Furthermore, the integration of computer vision techniques into home automation systems presents another compelling example of its democratization. Home security systems equipped with computer vision capabilities can analyze live video feeds to detect suspicious activities or unauthorized entries, alerting homeowners and authorities in real-time. Moreover, these systems can be programmed to differentiate between pets, family members, and intruders, thereby minimizing false alarms and optimizing security measures. By harnessing computer vision in this context, even individuals without extensive technical expertise can create sophisticated home security solutions, underscoring the democratizing impact of accessible tools and resources in transforming everyday environments.

Assignment 5 – Midterm Progress: Real (Rio) Angry Birds


For the midterm project, I plan to create the classic Angry Birds game. In addition, I got inspiration from the movie Rio, so I plan to join both universes and incorporate elements from the movie such as characters, settings, and storyline. In this game, players will use a slingshot mechanism to launch birds towards targets (e.g., enemy characters or objects) to progress through levels.

Code design:

When it comes to the code design, I will define functions for launching birds, detecting collisions, scoring points, and advancing through levels. I will also use classes for birds, targets, obstacles, and any other interactive elements I plan to implement in the game. Then, the user input mechanisms will be added for controlling the slingshot, aiming, and launching birds against the enemies.

Example of a class structure from my code:

class Bird {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector();
    this.acceleration = createVector();
    this.r = 20;
    this.released = false;

  display() {
    fill(255, 255, 0);
    ellipse(this.position.x, this.position.y, this.r * 2);
  update() {
    if (this.released) {
      this.acceleration.mult(0); // Reset acceleration
      this.velocity.mult(0.99); // Air resistance


One of the most challenging aspects of my project would be implementing realistic physics for bird movement and collision detection. To minimize this risk, I will start by writing code to simulate basic projectile motion and collision detection. I also plan to use existing libraries or frameworks for physics simulations, which can help for the structure of the game.


In conclusion, there are several additional elements that I plan to incorporate to improve the overall gameplay experience. Beyond the existing mechanics of slingshot aiming and bird launching, future iterations of the game will feature dynamic sound effects to accompany actions such as bird launches and target destruction. Furthermore, I aim to enhance the visual elements of the game by incorporating more detailed character sprites, vibrant backgrounds, and visually appealing animations. The current sketch provides a foundational framework for the game, and that’s how it looks like so far:


Week 4 – Reading Response: Every day’s Life Design | Haziel

I found the reading really interesting and relatable as it provides a thought-provoking exploration of design principles and their application to everyday life, particularly focusing on the challenges posed by modern design complexity. Don Norman’s concept of “Norman Doors” highlights a common frustration experienced by many individuals, including me, when interacting with poorly designed products, such as doors with ambiguous instructions.

The reading also made me think of other trivial daily life examples. For instance, the design of a smartphone interfaces often reflects the principles discussed in the reading, particularly regarding feedback and conceptual models. When typing a message on the smartphone keyboard, the visual feedback of each keystroke appearing on the screen provides immediate confirmation of input, enhancing the user’s understanding of their actions. This feedback loop is crucial for users to feel confident and engaged with the device.

Assignment 4 – Lyrics Video | Haziel

For this assignment, I got inspiration from one of my favorite Brazilian songs, Wave by Antonio Carlos Jobim. The objective of this project is to display a Canva that looks like a YouTube lyrics video. Using generative text, I have created a CSV file with the translation of the lyrics. Then, it is loaded in the main sketch along with the background image and the instrumental of the song.

Rather than just displaying the lyrics on the screen, I added a bit of interactivity as the user gets to choose when to read the next sentences. So, if we click on the screen, we load one sentence at a time, following the order of the song. Additionally, I added some animation to the sentences, as they move in a wave format to match the concept of the song. It also allows the user to immerse themselves in the project and read the (I would say) beautiful and romantic lyrics.

When coding this assignment, I also got references from the text() function.

function draw() {
  // Display the background image
  image(bgImage, 0, 0, width, height);

  // Sets the text alignment to center
  // Calculate y-coordinate with a sinusoidal function for wave animation
  let y = height - 20 + sin(frameCount * 0.05) * 10; // Adjust the amplitude (10) for desired wave height
                                                     // Adjust the frequency (0.05) for wave speed

  // Draw the current sentence at the bottom center with animated wave effect
  drawWords(width / 2, y);

function drawWords(x, y) {
  // Text color

  // Display the current sentence at the specified position on the canvas
  text(sentences[currentSentenceIndex], x, y);

Reflection: One area I could still improve is to make the Canva more animated and dynamic. Currently, the animation is limited to the wave effect applied to the text as it moves on the screen. However, there are several ways we can enhance the animation to make the canvas more engaging, such as background animations and transitions between the sentences.

Week 3 – Reading Response: The Depth of Interactivity | Haziel

Chris Crawford’s analysis of interactivity in his article offers a thought-provoking perspective that challenged my traditional notion of what it means to interact with something or someone. His assertion that true interactivity encompasses listening, thinking, and speaking as key components highlights the depth and complexity of human engagement. The analogy of a conversation between the two people Fredegund and Gomer effectively illustrates the dynamics of these elements, emphasizing the importance of active participation and mutual understanding when we are creating a meaningful interaction.

Before reading Crawford’s insights, my understanding of interactivity was rather simplistic, limited to the idea of reacting or engaging with external stimuli. However, his examination reveals that interactivity is far more intricate, existing along a spectrum with different degrees of engagement. Inspired by this perspective, I can also see a connection between human behavior and design, as he underscores the need for designers and creators to consider the diverse levels of interactivity in their work, recognizing that each level offers unique opportunities for communication.

However, I also find myself wondering the extent to which his framework fully captures the richness of interactive experiences. Are there additional dimensions or elements of interactivity that deserve consideration? Furthermore, while the example of conversation illuminates certain aspects of interactivity, it may overlook other forms of interaction that occur in non-verbal or non-linear contexts.

Assignment 3 – Spinning Symphony | Haziel

My inspiration for this assignment was basically the forms and shapes we usually find around us. Whether it be through the whirlwind or even a simple whirlpool we see in the sink when draining the water, I wanted to created something related to spirals. Moreover, spirals are also inspired by one of my favorite astronomical objects: spiral galaxies. The beautiful spiral arms of these galaxies, stretching outward in what it seems to be a delicate movement, caught completely my attention and evoke a sense of wonder. Drawing from these natural phenomena, I aimed to create an interactive artwork that celebrates the harmony of spirals.

Keep clicking on the screen to create your Spiral Galaxy 🙂

In this project, when the mouse button is pressed, a new spiral centered around the cursor position is drawn on the canvas. The spirals consist of a series of connected points, creating a spiral pattern as they move outward. Each spiral has a random color and speed, creating a dynamic and varied composition. The spirals continue to evolve and interact with each other as the user interacts with the canvas. To create this effect, I challenge myself in creating new patterns, supported by tutorial videos on how to create the spiral effect, like this one.

class Spiral {
  // Constructor function to initialize a new spiral object with specified parameters
  constructor(x, y, radius, color, speed) {
    // Initialize object properties based on input parameters
    this.x = x; // X-coordinate of the center of the spiral
    this.y = y; // Y-coordinate of the center of the spiral
    this.radius = radius; // Radius of the spiral
    this.color = color; // Color of the spiral (as an array [R, G, B])
    this.angle = 0; // Initial angle of the spiral
    this.speed = speed; // Speed of rotation for the spiral

  // Display function to draw the spiral on the canvas
  display() {
    noStroke(); // Disable stroke (outline)
    fill(this.color); // Set fill color based on the color property
    let spiralSize = this.radius * this.angle; // Calculate the size of the spiral
    // Draw a small ellipse at a point on the spiral determined by the current angle
    ellipse(this.x + cos(this.angle) * spiralSize, this.y + sin(this.angle) * spiralSize, 5, 5);

  // Move function to update the angle of the spiral, causing it to rotate
  move() {
    this.angle += this.speed; // Increment the angle by the rotation speed

For future assignments, I would like to improve my understanding of object-oriented programming concepts and explore more advanced techniques for creating dynamic and interactive visual experiences. Additionally, I aim to delve deeper into the principles of design and incorporate more sophisticated visual elements into my projects, as well as sound and music to enhance the immersive experience of my projects. 

Week 2 – Reading Response: Redefining Creativity | Haziel

I found Casey Reas’ talk about Chance Operations quite intriguing, as it reminded me of my old beliefs regarding art and its concept. Before, I had a completely different perspective about what art is and what defines artistic expression. As someone who is interested in visiting museums and art exhibitions as much as I can, my understanding of art was limited to human expressions through hand made artworks. However, as I had more contact with the digital world, I started changing this conception and appreciate the digital art, as it is showcased in the talk for example.

During his talk, Reas displays different examples of art generated by computers and algorithms. In my current understanding, it also represents art since we can use code to create different angles, shapes, colors and several other characteristics to represent feelings, emotions, and other expressions. At the same time, Reas’ talk inspired a reflection on the role of technology in shaping the contemporary art. The integration of algorithms and computational processes in art creation blurs the lines between human and machine, making me to reconsider what it means to be creative in the digital age. However, I believe it also raises concerns about the potential loss of human “touch” in art when relying too heavily on algorithms. How can we strike a balance between increasing the power of technology and preserving the essence of human creativity in art?