Author: Takudzwa

Concept

For this project, I wanted to explore something simple yet engaging with text. My initial idea involved allowing user input, where text would fall to the ground. While that was a good starting point, I felt it needed more interactivity. Then, inspiration struck while I was listening to music: why not create a lyric video? And that’s how this project took shape – a lyric video with the text fading in and out, synchronized to the music playing in the background.

 

Code I’m Particularly Proud Of

In this simple project, the code I’m most proud of is the part that handles the fade-in and fade-out effect of the text. Normally, this would require a loop, but since the draw() function in p5.js acts as a natural loop, I managed it using a simple if statement combined with a counter that gradually changes the opacity of the text until it fully fades out. Here’s the core code snippet:

// Display the current line with a fade-in effect
  fill(255, fadeValue);
  text(lyrics[currentLine], width / 2, lineY); // Display the current line of lyrics at the center of the canvas

  // Gradually make the text appear by decreasing its opacity
  fadeValue -= 1;

  // When the text is fully faded, move to the next line
  if (fadeValue <= 0) 
  {
    currentLine = (currentLine + 1) % lyrics.length; // Move to the next line, looping back to the start if at the end
    
    currentColor = (currentColor + 1) % colors.length; // Change to the next background color, looping through the array
    
    fadeValue = 255; // Reset the fade value to fully opaque
  }

 

Final Product

The final product is available to experience, and you can interact with it by pressing the mouse button to move the lyrics forward. Otherwise, you can simply watch it as a lyric video with music in the background. Just a heads-up: the video includes audio, so be mindful before playing it.

 

 

Final Thoughts and Reflection

Working on this project was both intriguing and challenging. It was a lesson in embracing simplicity, as my initial ideas were quite ambitious. However, I realized that there’s a unique power in crafting something straightforward yet effective. While I’m pleased with the outcome, there are a few areas for improvement: I would like to synchronize the lyrics with the music more precisely, enhance the background visuals, and add more interactive elements to make it more engaging. This project has sparked new ideas, and I look forward to applying these insights to something even bigger and better. Stay tuned!

Don Norman’s arguments on affordance, discoverability, and communication offer a compelling and analytical perspective on how interactive objects should be designed. Unlike readings such as “The Art of Interactive Design,” which tend to focus more on the finished product, Norman delves into the intricacies of poorly designed objects, analyzing the root causes and suggesting improvements. His credibility as an engineer strengthens his arguments, as he understands both the technical and human aspects of design. This raises an interesting question: if a professional fictional writer presented the same solutions, would they carry the same weight? This reflects the importance of practical experience in validating design solutions. I relate to Norman’s critique of poorly designed objects; for example, VR/AR goggles often suffer from an imbalance that makes them front-heavy. Redesigning them to be lighter would significantly enhance the immersive experience. This demonstrates how affordance and ergonomics directly impact the user experience.

In discussing the “Paradox of Technology,” Norman argues that as technology becomes more functional, it becomes harder to learn. I agree but question the extent to which this should be solely a designer’s responsibility. While Norman emphasizes that engineers should approach design from a non-logical, human perspective, this principle should also apply to the Paradox of Technology. Designers face limitations in simplifying complex functionality, suggesting that the solution lies in ensuring engineers design with the average human in mind, not just other engineers. This point is particularly relevant when considering advanced technologies like Artificial Super Intelligence (ASI). While intended to serve humanity, ASI must be designed to accommodate the everyday user, not just the logical thinker, ensuring it remains accessible and understandable.

Feedback, another of Norman’s key points, is essential in design, as humans are naturally impatient with technology. However, the expectation of rapid feedback, especially in digital interactions, can have unintended psychological consequences, such as increased anxiety and impatience in the extreme usage of  cellphones among young people. While Norman rightly argues that feedback should be provided correctly and appropriately, I contend that excessively fast responses can condition users to expect instant gratification, potentially harming mental well-being. Designers and engineers must be mindful of balancing efficiency with psychological impact, aligning with the principles of Human-Centered Design (HCD).  Norman’s insights on affordance, feedback, and human-centered design are not just applicable but essential in shaping interactive media. Especially in contexts like end-of-semester showcases, where media installations encounter a diverse audience, applying Norman’s principles ensures intuitive and meaningful human-machine interactions.

Concept

Imagine a universe where two planets exist on the same orbit. For many years, I’ve been working on fictional stories, and I wanted to bring one of these concepts to life using p5.js for this assignment. The idea emerged a while ago, and although it was inspired by sci-fi media, I can’t say I’m directly mimicking anyone else’s work. The concept for this project is to make the two planets move 180 degrees apart, as if they are locked in orbit, to prevent them from crashing into each other (I’m aware that real planets don’t behave like this). This is how the project began. During the planning stage, I used Adobe Photoshop to composite some images, which helped me visualize how I would approach the project.

The Procedure

First, I began by creating functions to generate the stars. I didn’t want the stars to move, but they needed to be positioned randomly. The following code snippet demonstrates how I randomly generated the stars and created another function to store their positions.

// Function to generate stars and store their positions, size, and color
function generateStars(numStars) {
  for (let i = 0; i < numStars; i++) {
    let x = random(0, width);  // Random x position
    let y = random(0, height);  // Random y position
    let size = random(1, 3); // Random size
    
    // Colors for stars (magenta, blue, yellow, and white)
    let colr = [color('magenta'), color('blue'), color('yellow'), color(255)];
    
    // Store each star's position, size, and color
    starPositions.push({
      x: x,
      y: y,
      size: size,
      colr: random(colr)
    });
  }
}

// Function to draw stars from stored positions
function drawStars() {
  for (let i = 0; i < starPositions.length; i++) {
    let star = starPositions[i];
    
    stroke(star.colr);  // Set color for each star
    strokeWeight(star.size); // Set size for each star
    point(star.x, star.y);   // Draw the star
  }
}

In this project, I used various functions, including one to detect comet collisions with planets and another for collisions with the sun. The comets were created using a class and stored in a dynamic array, making memory management simpler compared to other programming languages. The project involved a lot of mathematical concepts, especially for the comet class, and I drew inspiration from p5.js projects and AI-assisted planning. I experimented through trial and error to execute certain parts.

Code I’m most proud of:

The code I’m most proud of is the Planet class, which brings the entire concept to life using trigonometry. By applying cosine and sine functions to measure angles, I was able to make the planets behave as intended. This idea came from Google searches. Here’s a snippet of my Planet class:

class Planet {
  constructor(size, colr, strokecolor) {
    this.size = size;
    this.colr = color(colr);  // Fill color
    this.strokecolor = strokecolor;  // Outline color
    this.x = 0;  // X position (calculated later)
    this.y = 0;  // Y position (calculated later)
    
  }

  // Update the planet's position based on the angle and radius
  update(angle, radius) {
    this.x = width / 2 + cos(angle) * radius;  // X position
    this.y = height / 2 + sin(angle) * radius; // Y position
  }

  // Show the planet
  show() {
    stroke(this.strokecolor);  // Outline color
    strokeWeight(2)
    fill(this.colr);  // Fill color
    ellipse(this.x, this.y, this.size);  // Draw the planet
  }
}

In my draw function, I used the following code, utilizing the principles of Object Oriented Programming to bring this idea to fruition.

// Update and draw the planets
 planet1.update(angle, radius);
 planet1.show();
 
 planet2.update(angle + PI, radius);  // The PI angle ensures planets are always opposite each other
 planet2.show();
 
 // Increment the angle for continuous rotation
 angle += 0.01;

 

The Final Project:

 

Reflection:

For this project, I was a bit ambitious when I first started. I prioritized realism over functionality to give the viewer a great experience. However, I learned that this wasn’t necessary and settled for a simpler approach using Object-Oriented Programming. After reading The Art of Interactive Design, I realized my final project lacked key elements of interactivity, like even a simple mouse click. In my defense, I removed interactivity because, in the storyline, humans don’t have the power to move objects in space. However, I would improve the project by adding music, moving stars, mouse-click-generated comets, and perhaps better visuals. I faced challenges in ensuring the planets always rotated 180 degrees apart, but after solving this, I was amazed at what code can achieve. I’m excited to see what it can do with more advanced graphics in the future. For now, this is it.

 

There are two key questions that arise after reading Chapter 1 of ‘The Art of Interactive Design’. The first is: What are the characteristics of a strongly interactive system? For the second question, stay with me until the end of this response to find out; I promise it will be worth it. Before addressing these, I’d like to share my analysis of Chapter 1 and my thoughts after completing it.

Although the book was first published in 2002, its concepts remain relevant in 2024. I fully agree with the author’s argument that technology buzzwords are often overused and misunderstood. At the time of the book’s writing, “interactivity” was the buzzword in question. When we examine this closely, it becomes clear that this is largely driven by the capitalistic nature of the tech industry. Buzzwords are used because they help sell products, even if their meanings are diluted. This is equally true today with terms like “innovation” and “AI,” which are frequently misapplied to make a profit, often without a deep understanding of their implications.

This chapter offered insightful ideas, and I was particularly drawn to the concept of viewing interactivity as a conversation between two actors, where listening, speaking, and thinking all play critical roles in designing an interactive experience. The author’s approach is notable in that he shifts the definition of interactivity from a simple yes-or-no concept to a hierarchical structure, allowing us to assess interactivity from a subjective perspective. I personally agree that interactivity is subjective, given the diversity of the world’s population. What may be considered highly interactive in one part of the world might be seen as only moderately or minimally interactive elsewhere. The author strengthens his argument by clarifying what is not interactive, such as mere reaction or participation, and provides strong examples that are difficult to refute.

While the author’s arguments might seem somewhat biased towards interactive design, I find myself in agreement with most of them. He argues that a true interactive designer incorporates all three key elements—listening, speaking, and thinking—while a user interface designer typically excludes the thinking aspect, reducing interactivity. Many technologies that we use today, such as Spotify, smartphones, and gaming consoles, lack all three aspects of interactivity. For instance, while Siri can listen and speak, it doesn’t truly “think” independently yet. Despite this, humans continue to interact with these technologies frequently! This raises the question of whether these technologies were designed by user interface designers or whether these designers have somehow adopted the three key elements of interactivity. It also prompts a deeper examination of the author’s critique of designers who may have less expertise in the arts and humanities but are still creating interactive systems.

Now, the question you’ve been waiting for: What ideas do I have for improving user interaction in my p5 sketches? After reading this chapter, I plan to focus on integrating the elements of listening and speaking to make my sketches more interactive. Once I have mastered these two aspects, I will work on incorporating the third element—thinking. This will undoubtedly be a challenge, as figuring out how to make a p5 sketch “think” is no small task. However, it will be an exciting journey to explore how this can lead to truly interactive creations.

Project Concept

For this project, I spent considerable time thinking about a fun and interactive way to use loops, while keeping the task manageable. Eventually, I was inspired by the idea of creating water ripples, envisioning someone walking on a dark night and stepping into a puddle, triggering a ripple effect. This concept motivated me to explore a way for users to interact with the screen, allowing them to click anywhere to generate ripples. By varying the click speed, users could create randomized but controlled loops, which would enhance the experience. I decided to limit the ripple colors to red, green, and blue (RGB), as this simple palette would still make the effect visually appealing and enjoyable for users.

 

Code I’m Proud Of

In this project, I’m proud of how I utilized two for loops to bring the ripple effect to life. The loop that progressively grows the ripples is particularly noteworthy, as it effectively simulates the natural ripple motion. Additionally, I optimized the code by using an array to handle the data efficiently, avoiding the need for multiple data types as I had initially considered. Below is the section of code that I’m most proud of:

for (let i = 0; i < ripples.length; i++) 
  {
    let ripple = ripples[i];
    stroke(ripple.col);  // Set stroke color to ripple's assigned color
    
    // Draw a circle for each ripple
    ellipse(ripple.x, ripple.y, ripple.radius * 2);
    
    // Increase the radius to create the growing effect, adjusting the speed
    ripple.radius += expansionSpeed;  // Increase radius faster
  }

 

Final Outcome

You can try out the interactive ripple effect below. Simply click or tap on the screen, and watch the ripples form. Feel free to experiment by clicking multiple times to see how the loops overlap and interact.

Reflection and Future Improvements

This project was a rewarding challenge. It allowed me to transform an idea into a tangible, interactive experience using loops. While I’m pleased with the current result, there are several areas I would like to improve in the future. I envision adding more color variations, enhancing the background for greater interactivity, and introducing additional, smaller ripples beneath the main one for a smoother, more dynamic transition. These improvements would create more intricate, overlapping ripple patterns, making the experience even more engaging and visually captivating.

One of the most intriguing aspects of coding is how a few lines can produce unexpected creative outcomes. Casey Reas demonstrated this in his video by using minimal code to create compelling artwork. Initially, I saw coding as writing on a text editor and getting feedback through a simple console, but the idea that code could generate art opened a new perspective for me. Reas emphasized the importance of balancing randomness and order in art. Too much randomness leads to computer-generated results, while introducing structure creates something unique. I agree with his point that art can emerge from blending chaos with control, making it not just a product of machines but a collaboration between human creativity and computational processes.

The video also raised thought-provoking questions about the evolving definition of art in the age of technology, particularly with tools like text-to-image generation. Traditionally, artists have played a central role in shaping chaos into order, but as computers become more advanced, capable of simulating both chaos and structure, the lines between human and machine contributions blur. At what point does the creative process shift from being driven by human intention to being shaped by the algorithms and systems that generate these works? Reas touched on this when quoting Michael Noll, who suggested that computers are not just assistants but active participants in creating new artistic mediums. This is especially relevant today, with AI art becoming a legitimate form of expression, as machines are now generating images, music, and even literature with minimal human input.

This raises deeper questions about control and authorship in the creative process. If computers can generate artwork from chaotic prompts to what extent can we still claim that the final product is “human” art? Moreover, as AI systems evolve, there may come a time when they independently balance chaos and order, leading to entirely new forms of creativity without human intervention. This shifts the role of the artist from creator to curator, selecting and guiding the machine’s output rather than crafting the work directly. Reas’ observation about the natural world mirrors this dynamic: just as humans bring order to nature’s inherent chaos, AI could bring order to the randomness of creative prompts. This raises a paradox, where we attempt to control the chaos in our own creations, while simultaneously relying on machines to navigate the very chaos we introduce into the creative process. As AI art grows, this will continue to challenge traditional notions of what it means to be an artist, while finding balance between chaos and order.

Concept

For my self-portrait, I wanted to create something that represents who I am on the surface and who I sometimes become inside. Growing up, I was a huge fan of Dragon Ball Z, so for this project, I decided to make a portrait of myself that can transform into a ‘Super Saiyan.’ For this assignment, we were required to use p5.js to create the self-portrait using the shapes and lines we learned in our first week. Before getting started, I drew the following images to guide my code; let’s call this the R&D part of the process:

 

The Process

The process for this project was quite enjoyable. I had a lot of fun experimenting with different colors, shapes, and lines while creating the portrait. I started from scratch, using an ellipse to resemble the face, and other shapes as the building blocks for the body’s anatomy. Once the basic human figure was drawn in JavaScript, the hair surprisingly became the most time-consuming aspect. I had to use triangles to accurately represent how my hair looks to closely match my image. I used online resources like ‘Google Color Picker’ to find the unique color codes that created my desired effect. A simple if-else statement was also used to enable the switch from normal to Super Saiyan. Be sure to stick around to find out about my favorite part of the code that sells the entire effect.

if(keyIsPressed === true) // he turns 'Super Sayain' { background(174, 224, 235);

 

Code that I am Proud of:

The code that I’m particularly proud of is the one where I used a ‘for loop’. I started coding last fall, and during that time, I learned the basics, all the way up to classes and object-oriented programming. With this knowledge in mind, I wanted to experiment with how loops would function (no pun intended) in this self-portrait. The best way to integrate this was by using a for loop. It’s one thing to see your code run in a terminal, but it’s another glorious moment to see the visuals your code can produce. That’s exactly how I felt when I saw my code turn into something visually intriguing. The following code creates the energy around my transformed character to maximize the intended effect:

// The following loop is for the energy around our 'Sayain'
    for (let i = 0; i < 20; i++) 
    {
      let x1 = random(width);
      let y1 = random(height);
      let x2 = x1 + random(-30, 30); // Randomizing the length and direction of the lines
      let y2 = y1 + random(-30, 30);
      line(x1, y1, x2, y2);
    }

The final Outcome:

The moment you’ve all been waiting for! To turn Super Saiyan, press any key on your keyboard (for simplicity, try pressing the spacebar 😉)

Reflection:

I thoroughly enjoyed every part of creating this self-portrait, and it taught me how to visualize my code and think creatively while coding. Although I faced some challenges in aligning each shape with others, overall, this assignment helped me strengthen both my creative and coding skills. For future improvements, I’d like to implement more conditionals, variables, loops, and classes in this portrait and in my future projects. I’d also like to explore how these elements can be integrated with 3D models in p5.js to create something so interactive that people would become truly captivated by my work.