Author: Takudzwa

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.