Month: September 2024

Concept

For this project, I created an interactive animation where the player controls Superman in his mission to save people. The gameplay is simple: Superman must avoid clouds (which act as obstacles) while rescuing a person from the bottom of the screen and flying them to the top. Players use the arrow keys to control Superman’s movement, and the background color changes dynamically when the mouse is clicked. The score updates every time Superman successfully saves a person, adding a sense of progress.

Code

The program begins by creating a 400×600 canvas and setting Superman’s initial position near the bottom of the screen. The person to be saved is randomly placed at the bottom of the screen. The background features a dynamic gradient that shifts colors when the player clicks the mouse, with animated stars moving across the sky to enhance the visual appeal.

For managing the positions of clouds, I used individual variables for each cloud’s position, speed, and size. However, managing stars in the same way proved to be challenging because I wanted to include a large number of them. Using individual variables for each star would have been cumbersome. Therefore, I used arrays to store the stars’ positions, sizes, and speeds, making it easier to manage and update their movement throughout the animation. This approach works well for handling many stars while still keeping the code organized.

Highlight

One part of the code that I’m particularly proud of is the interaction between Superman and the clouds. The clouds move across the screen, and Superman has to avoid them while rescuing the person. If he hits a cloud, his position resets, adding a challenge to the game. Here’s the code that handles cloud movement and collision detection:

//function to draw cloud and check collision
function drawCloud(x, y) {
  fill(255); // Cloud color (white)
  ellipse(x, y, 60, 40); // Draw cloud as an ellipse

  // Check if Superman collides with a cloud
  if (dist(supermanX, supermanY, x, y) < 50) {
    supermanX = width / 2;
    supermanY = height - 100; // Reset Superman's position
  }
}

Embedded Sketch

.

USE THE ARROW KEYS ON THE KEYBOARD TO CONTROL THE MOVEMENT OF SUPERMAN

Reflection and Ideas for Future Work

Overall, I’m satisfied with how the interactive elements of the animation came together, particularly the moving clouds and the dynamic background. These features make the scene feel more alive and add a layer of interest. However, I think I can improve the visual design of the characters. Adding more details to Superman and the person being saved would enhance the overall look.

One challenge I faced was managing multiple objects, particularly the stars. However, using arrays made it much easier to handle their positions and behaviors. This approach allowed for smoother animations and better organization of the code, simplifying the process of managing multiple stars at once.

In the future, I’d like to focus on refining the visuals, especially Superman’s appearance, and possibly add more animation to make the scene more engaging. For example, animating Superman’s cape or adding small interactions when he saves the person would be nice improvements.

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.

Concept

For this piece, I was inspired by Casey Reas’ Eyeo talk on chance operations. I wanted to explore randomness by creating a dynamic, ever-evolving spiral pattern of shapes, where both the number of sides and the colors are randomized. The randomness adds an element of surprise, making the artwork feel more organic and unpredictable. I also referenced this guide for parts of the code, particularly for drawing the shapes using vertex points.

Code Highlight

One part of my code that I’m particularly proud of is how I used the random() function to generate shapes with random sides and colors. This randomness brings variety and excitement to the piece:

// Randomize the number of sides for the shape (between 3 and 7)
let numsides = floor(random(3, 8));

// Randomize the color of the shape 
let shapeColor = color(random(255), random(255), random(255));
fill(shapeColor);  

This part ensures that each shape in the spiral is unique, giving the piece a playful and dynamic feel.

Embedded Sketch

Reflection and Future Improvements

While I’m happy with how the randomization and spiral pattern turned out, there are several ways I could improve this piece. For example, I could make the sketch more interactive by allowing users to control certain parameters, such as the speed of the spiral or the size of the shapes. Another potential improvement would be to add sound elements that react to the shapes or colors, making the piece more immersive.

My concept:

As I was thinking of what to draw making use of loops either (for or while), I decided to draw the Sky! I choose the sky because I thought drawing stars all over the sky manually one after another would be tiresome. So using loops would be the best option.

In order to make my art interactive I decided to make my sky dynamic, where by it would change mode from day mode to night mode or from night mode to day mode on clicking the mouse.
In the night mode, I used a for loop to populate the stars and in the day mode I used it to scatter the clouds.

Piece of code I am proud of: 

I am proud of how all the sketch has turned, however I am particularly proud of how I was able to finally create a piece of code to draw stars. I was able to achieve this by  using beginShape() and endShape() functions. Inside these, I used a for loop with two concentric circles with different radii. By altering the angle, spikes had vertexes on outer circle and other points on inner circle. Then the two pairs connected all the way from 0 – 360 degrees. Below  is that piece of code:

//Function to draw stars
function drawStar(x, y, radius1, radius2, npoints) 
{
// Angle between the outer points 
  let angle = TWO_PI / npoints;
// Angle inner points between the outer points
  let halfAngle = angle / 2.0;
// Start defining the shape
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
// x and y coordinates for the outer point
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
// x and y coordinates for the inner point
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

My Final sketch:

My final sketch (Dynamic Sky) can be seen here below:

Reflection for future work

Through this assignment, I have come to appreciate loops. Before using loops  I stared my manually drawing (hard coding) every location and size of the stars, but loops saved the work and made my sketch more artistic. In future I hope to incorporate loops in my sketches so I can create engaging and manageable sketches.

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.

One of the key takeaways for me from Casey Reas’ talk is the importance of a ruleset in creating beauty from randomness. I was impressed by the amount of time and effort Reas and his team dedicated to experimenting with shapes – they created more than 1,000 compositions to explore patterns (11:20) . They observed and connected the pieces, then determined which rules to apply to restrict randomness and create stronger compositions.

The idea of developing concepts on paper before writing code also stood out to me. I think the notion of “play” is more effectively expressed through physical materials first, and then translated into code. This approach helps prevent getting sidetracked by implementation details and allows for more focus on the idea itself.

However, I do question the meaning of relinquishing control when creating art. Artists usually have specific intentions – such as what tools to use or how to arrange shapes. Without a ruleset, I feel that randomness can obscure the meaning of a piece. In creating my own art, I want to maintain control over what is in the picture, but I can incorporate randomness by allowing a range of inputs. For example, instead of using a single fixed shape, I could introduce an array of shapes and leave the selection to chance. In general, I think randomness is an intriguing element I would like to attempt at integrating into user interaction.

REFLECTION

Casey Reas’ talk on randomness & chance revolutionized my own understanding of how art is composed, and what defines it as art. Before watching this video, I held a rigid view that randomness and art were mutually exclusive, believing that every artistic decision was deliberate, therefore, randomness is not possible. However, Reas’ discussion used the example of Dada’s artwork — which made me reflect on his time period. I am familiar with Dada, and his works. Like Reas mentioned, Dada shows his approach was to challenge the rational, as a reflection of the collapsing societies and turmoil post World War I.

He forges a link to art and the use of technology, by discussing the renowned John Cage. He was revolutionary in the field of Music Technology, as he was one of the first producers to use technology to compose music – utilizing the element of randomness  to determine pitch and length. As someone that has heard of John Cage, and is familiar with parts of his work,  I was surprised to see him featured here, as I had not considered his Book Of Music as ‘art’ — I had seen it as a strict use of splicing, impressing his audience of the time with the tools he was able to fine tune and take advantage of. Therefore, this got me to think, what kind of music did I consider as art? And what kind of technology makes art?

I also found Reas’ discussion on his concert compositions quite profound. He reveals how he found inspiration from previous pieces to make his composition, yet included an algorithm to sort of generate a randomness, limited by his requirement of the shapes being 90 degrees. This discussion has led me to question my own methods on inculcating this philosophy of randomness when I am making artworks and projects, and how I can draw a so-called ‘balance’ between the idea of randomness and other deliberate pieces.

Concept:  My interactive media class starts just at the end of the day and when I was sitting in the class, brainstorming what I do with loops, I randomly started to draw some simple flowers on P5.js to relieve some stress from having a long day. Then the idea came to my head that having a flower bouquet can make me feel so good, if I don’t have one, then why not create a virtual one? So, here it is!

Proud Moment: I initially sketched some basic flower-like shapes using circles in P5.js, but they didn’t turn out as expected. To achieve the variety and complexity I wanted, I decided to use loops directly as we discussed in class, as manually coding each flower would have been impractical. My main challenge was ensuring that all the flowers had distinct appearances. To address this, I designed each flower type, reusing a base code and adjusting parameters to create different flower variations.

Code Snippet:

function drawDaisy(x, y, size, rotation) {
  let petalCount = 9;
  let petalLength = size;
  let petalWidth = size / 3;
  
  stroke(0);
  fill('#D9E4E6');
  push();
  translate(x, y);
  rotate(rotation);
  for (let i = 0; i < petalCount; i++) {
    push();
    rotate(TWO_PI / petalCount * i);
    ellipse(0, -size / 2, petalWidth, petalLength);
    pop();
  }
  pop();
  
  fill('#F2F2F2');
  noStroke();
  ellipse(x, y, size / 2);
}


function drawTulip(x, y, size, rotation) {
  let petalCount = 6;
  let petalWidth = size / 2;
  
  stroke(0);
  fill('#AEB7FE');
  push();
  translate(x, y);
  rotate(rotation);
  for (let i = 0; i < petalCount; i++) {
    push();
    rotate(TWO_PI / petalCount * i);
    ellipse(0, -size / 2, petalWidth, size);
    pop();
  }
  pop();
  
  fill('#EDEAE6');
  noStroke();
  ellipse(x, y, size / 3);
}

It made the design part of my work easier, but I initially struggled with making the flowers continuously generate as the mouse cursor moves and ensuring they didn’t cluster in one spot. To address this, I turned to various YouTube videos on Mouse Trails, such as the p5.js | Mouse Trail (Quick Code) tutorial. However, I needed to adapt some parameters and functions to fit my specific goals, which differed slightly from those demonstrated in the videos. This aspect of the project was particularly challenging as I had to first grasp the underlying logic before implementing the necessary code to achieve the desired functionality.

In mouseMoved() Function, I’m implementing the logic to generate new flowers as the mouse moves across the canvas. Here’s a breakdown:

function mouseMoved() {
  let currentTime = millis();
  if (currentTime - lastGenerationTime > flowerGenerationInterval) {
    lastGenerationTime = currentTime;
    generateFlowers(mouseX, mouseY);
  }
}

function updateFlower(flower) {
  let dx = mouseX - flower.x;
  let dy = mouseY - flower.y;
  let distance = dist(flower.x, flower.y, mouseX, mouseY);
  
  if (distance > 1) {
    flower.x += (dx / distance) * followSpeed;
    flower.y += (dy / distance) * followSpeed;
  }
  
  flower.x += random(-0.5, 0.5);
  flower.y += random(-0.5, 0.5);
}

When the time condition is met, I update lastGenerationTime and call generateFlowers() with the current mouse position (mouseX, mouseY). This function creates flowers around the mouse cursor, adding to the visual interest as I move the mouse.

Then, I calculate the distance between the flower and the mouse cursor using dx and dy. If the distance is greater than 1 pixel, the flower moves towards the mouse position. The followSpeed controls how quickly the flower moves. By dividing dx and dy by the distance, I ensure that the flower moves in the correct direction and scales its speed relative to the distance. While there might be other efficient ways to implement this, I chose this manual approach by carefully considering the underlying logic.

After watching the video “Eyeo2012 – Casey Reas,” I decided to introduce some randomness into the flower movement. I added the last two lines of code to make the movement more natural and less mechanical by including a small random offset to the flower’s position. This randomness results in a more organic and unpredictable motion, enhancing the overall visual appeal.

However, I was confused about which version to use as my final submission because each offers a unique vibe that I find appealing. To showcase the contrast, I am also including my first draft as a media file. This allows for a comparison between the two iterations, each with its distinct style and feel.

First Draw: 

Reflection and Ideas for Future Work or Improvements:

By using loops and arrays, I was able to efficiently generate and manage an infinite number of flowers, ensuring that the animation remained dynamic and engaging. The code successfully used these loops to update the positions of the flowers and arrays to store and retrieve flower properties, which was crucial for managing the large number of elements and their interactions. Here is what I think can be done in the future:

Performance Optimization: I encountered performance issues when increasing the number of flowers. For instance, trying to use infinitely many flowers caused the webpage to lag, highlighting the need for optimization to handle more elements smoothly. Addressing this performance challenge would help in making the animation more fluid and responsive.

Color Combinations: The current color scheme for the flowers and background could be improved. Some color combinations might not be as visually appealing or harmonious as they could be. Experimenting with different palettes could enhance the overall aesthetic and make the animation more striking.

User Interface and Interactivity: I initially experimented with aligning flowers based on input words, but this approach did not work as intended. Consequently, I simplified the project to focus solely on basic typography and the interactive aspect of the flowers following the mouse cursor. Future iterations could benefit from refining this concept or incorporating new interactive features to give users more control.

Conclusion: Despite these areas for improvement, I am pleased with the overall vibe of the project. The use of rotation to animate the flowers adds a dynamic touch, enhancing the visual interest of the animation. I enjoy the lively and engaging feel it provides and look forward to further refining and expanding upon this project in the future.

By all means, what does ‘generative’ stand for? And what about ‘random’, ‘chaos’, ‘definitive’, ‘rules’, ‘control’, ‘freedom’, ‘certainty’, and so on?

Before getting into details in Reas’ presentation, these questions occupied my mind. I would say that this week’s production had already raised these questions for me, and Reas’ philosophy presented exactly resonates with them. Binary systems could be potentially hazardous in terms of oversimplification from time to time, while they are very much a preferable tool for us humans to reference the world and reality. That happens to the balance between art and artist (as I touched on a bit in the first week’s production), the balance between randomness and certainty, the balance between aesthetics and technicalities (I encountered as many roles like a guitarist, a mixing engineer, a calligrapher, and here as a coder-artist), etc.

One of the observations I made out of the examples is the human physicality in that Mondrian painting where presented is the well-known seeming (or actually, as intended) abstraction of objectiveness. It is very interesting to learn that boogie-woogie music played as an inspiration to it as a musician. However, the great representation of something objective merged exactly from the human strokes of incapability to reach definite control. In that paintng, the refined thoughts and emotions – are spiritual of the mind – instead of spiritual of the body. On the other hand, the common lack of spiritual physicality these days may encourage us to also gaze through the opposite perspective and harness that to-be-decided set of definitiveness to praise the chance in our physicalities. In simpler words (or actually, in this specific context), the rules of computation and programming are grounds for the flourishing randomness in arts or, in other words, the physicality we humans could imagine, appreciate, adapt to, and reiterate we could potentially pursue.

This can be seen in many other examples in the presentation. From the deconstruction and reconstruction of figurative, symbolic, representative fragments or captures of the architecture following definitive rules to music from the Book of Change, chances on the rules and rules on the chances intersect with each other. In fact, the much amusing and providential discovery I found there is the irony of Book of Change in this particular context. While being named the Book of Change (Yi Jing 易经), this ‘book’ is many times accused of superstition but essentially represents the ancient wisdom of finding patterns, trends, and rules of the world to make predictions and guide life. That being said, the juxtaposition of chance and rule has been, in a sense, ubiquitous ever since.

Chance that is always planned and always surprising.

I believe this quote earlier said by Raes goes perfectly with the latest examples demonstrated in the presentation. While we recognize the power of randomness in certainties and the certainties in randomness, to what extent it is random/certain may stretch our attention further – as my opening wonderings suggest, and the question ‘where is the optimum balance between total randomness and complete control?’ lies in this middle ground. That being said, there is no way to maneuver around the definition of randomness and control – or at least while maneuvering, the multiplicity of them should be adopted. For example, the increment of randomness was realized by introducing more ‘randomizeable parameters’ in their second-to-last current project. Regarding merely the result, the randomness was raised for sure to human perception; However, this result was achieved by adding more control (or more controllable codes) to the program. In this case, I would rather perceive this ‘conflict’ as a mutual succession from both sides – when our technical attempts grant ideological and artistic fruits.

To end this reflection, I’d like to leave a question on ‘randomness in isolation.’ To my current understanding, there is no such thing as isolation in this field of mutual interaction – whether which side we picked at the beginning. Eventually, they merge and serve under a broader intention, purpose, collective, etc., and this will probably become one of my rules of thumb in the future.

So, on top of that, isolation could stand where?