Author: Buernortey Buer

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.

Reflection:

Casey Reas’ video shows how structure and randomness blend together in digital art. He explains that with the use of software, artists can combine strict rules with random elements to create pieces that are both unique and unpredictable. This approach challenges the traditional view of art, where the artist had full control over every detail. Now, algorithms can introduce unexpected outcomes, making the process less about direct control and more about exploring the balance between order and chance. This new way of creating art mirrors life itself, where both structure and unpredictability constantly interact.

Watching this video made me reflect on how creativity is evolving. Reas shows that creativity is no longer just about human control or intention; it can also come from the interaction between the artist and the machine. This got me thinking about whether using randomness and algorithms might make the art less personal or if it actually enhances the creative process by introducing new possibilities that an artist might not think of alone. I’m curious to discuss these ideas with others and hear different perspectives on whether this shift in the role of the artist adds value to art or takes away from it. The questions Reas raises make me wonder how much of creativity comes from us and how much can come from machines, and I believe exploring this could change the way we understand the art of the future.

Concept

For this self-portrait, I wanted to create something that shows who I am but also adds some fun, interactive elements. I focused on making my hair, face, and upper body look as close to real as I could. I also added cool features like changing the background color when you click the mouse and making the eyes follow the cursor. Plus, there is a custom wand that moves with your mouse, adding a playful touch to the whole thing.

Code

The code begins by setting up a canvas that is 400×400 pixels in size and gives it a light blue background. The default mouse cursor is hidden to make the custom wand cursor more prominent.

The draw() function runs continuously, which allows the portrait to update in real-time. The background color changes to a random color when the mouse is pressed and resets to the original blue when released.

The main features of the face—head, eyes, nose, mouth, ears, and hair—are drawn using basic shapes like ellipses, rectangles, and triangles. The pupils are interactive and follow the mouse cursor, giving the eyes a dynamic effect. The shoulders and chest area are represented with curves and rectangles to add more detail to the portrait.

Finally, a custom wand cursor is drawn at the mouse position, with a black handle and a yellow tip, adding a playful touch to the sketch.

Highlight

One part of my code that I’m really happy with is the way the pupils of the eyes move. I made it so that the pupils follow the mouse as you move it around. This makes the eyes look like they’re actually looking at the cursor, which brings the portrait to life. Here’s the code that does this:

 

// Interactive Pupils Movement
fill(0);  // Sets the fill color to black for the pupils
let leftPupilX = map(mouseX, 0, width, 165, 175);  // Maps mouseX to move the left pupil within the eye
let rightPupilX = map(mouseX, 0, width, 225, 235);  // Maps mouseX to move the right pupil within the eye
ellipse(leftPupilX, 180, 10, 10);  // Left pupil
ellipse(rightPupilX, 180, 10, 10);  // Right pupil

This part of the code lets the pupils move depending on where the mouse is. It’s a small detail, but it makes the portrait feel more interactive and real.

 

Embedded Sketch

.

 

Reflection and Ideas for Future Work

Looking back, I’m happy with how the interactive features turned out, especially the moving pupils and the changing background color. These parts make the portrait more fun to play with. But, I think I could improve the details of the hair and the face to make them look better. In the future, I would like to work on shading and maybe add more interactive features, like changing facial expressions. I also want to get the proportions of the head and face just right to make the portrait even more realistic.