Author: Haziel de Oliveira Soares

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”:

https://youtu.be/aLR5DikAvUc?si=6J-CDS4vQdfAavDE

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

https://pixabay.com/sound-effects/search/jump/

https://pixabay.com/sound-effects/search/game-over/

Design:

 

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

And the second background image was downloaded from Freepik:
https://www.freepik.com/free-vector/night-ocean-landscape-full-moon-stars-shine_17740155.htm#query=game%20background&position=1&from_view=keyword&track=ais&uuid=0b2c3375-e893-4fd3-961d-793b1389a916

Code:

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
        return;
    }

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

    score += 0.05;
    fill(255);
    textSize(30);
    text(round(score), 10, 32);

    player.show();
    player.move();

    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);
        blobs[i].move();
        blobs[i].show();

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

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

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_I3t & https://www.youtube.com/live/FHXDywq69v4?si=sFEaLB8_rZKxWNyq

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.

Concept:

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.velocity.add(this.acceleration);
      this.position.add(this.velocity);
      this.acceleration.mult(0); // Reset acceleration
      this.velocity.mult(0.99); // Air resistance
    }
  }

Challenges:

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.

Conclusion:

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:

 

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.

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
  textAlign(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
  fill('gold');

  // 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.

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.

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. 

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?

For this assignment, I aimed to create an artwork based on geometric shapes, especially squares and rectangles. For that, I searched for famous artists that use this kind of technique and found the work of Piet Mondrian, which became the inspiration for this project. At first, my goal was to create a Canva of size 1920, 1080 composed by several squares that give the sensation of overlapping colors, as you can see in the following image:

For this I used for loops, constants, and the full screen option when the mouse is pressed, following this tutorial.

However, I was not satisfied with the result, so I decided to modify it and create something more visually appealing. That’s when I thought of the tesseract concept we have in movies, such as Interstellar, that also illustrate this kind of chaos and order composed by geometric shapes. That’s when I worked to add some animation and make the squares revolve in an elliptical orbit.

For that, I used variables to determine the number of squares, the speed factor, square size, etc. And I’m particularly proud of the following snippet code, as it allowed me to add a bit of interactivity because when the user clicks on the screen, it increases the speed of the squares, giving a cool motion effect as you can see in my sketch as well:

// Increase speed factor if mouse is pressed, otherwise reset speed factor
  if (mouseIsPressed) {
    speedFactor = 0.5; 
  } else {
    speedFactor = 0.05; 
  }
  
  // Loop through each square
  for (let i = 0; i < numSquares; i++) {
    // Calculate x and y positions based on sine and cosine functions
    let x = map(sin(frameCount * speedFactor + i), -1, 1, 0, width - squareSize);
    let y = map(cos(frameCount * speedFactor + i), -1, 1, 0, height - squareSize);

Reflection: While I successfully implemented for loops, constants, and mouse interactions, exploring additional programming techniques and functionalities could enhance the depth and complexity of future projects. This could involve delving into advanced animation techniques or incorporating other libraries for more intricate visual effects.

 

For this assignment, I decided to create a simple 2D portrait using primitive shapes and a few of my favorite colors. The concept and objective was to represent key characteristics of my appearance, which became quite challenging as I don’t have much experience with p5. So, I drew my current black hair (Emphasizing this because I used to change my hair color really often :D) and a Brazilian t-shirt. Additionally, I used green for the background, since it’s my favorite color and the tone also gave a good contrast with my drawing.

In portrait itself, I used basic geometric shapes. Ellipse to create the face and eyes; Arc for the hair, mouth, eyebrows, and the t-shirt; and triangle for the nose.

When it comes to the reflection, I believe there are some areas where I could improve to enhance the representation of my identity in the portrait. One key aspect would be to add more details, such as incorporating more complex shapes or finer lines to capture the nuances of my appearance. For example, my curly hair could be depicted with a more diverse range of shapes and textures.

Looking ahead, I’m excited to learn more advanced skills and techniques using p5. Exploring new methods for digital art and honing my abilities with the software will enable me to create more dynamic and expressive projects in the future. So, I’m really looking forward to experimenting with different styles and approaches to further develop my artistic side.

Here’s my code:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background('#59A65C');
  
  // Face
  fill(255, 204, 153);
  ellipse(200, 200, 200, 250);
  
  // Hair 
  fill(0);
  arc(200, 140, 180, 130, PI, TWO_PI);
  
  // Eyes
  fill(0);
  ellipse(160, 180, 30, 30);
  ellipse(240, 180, 30, 30);
  
  // Eyebrows
  noFill();
  strokeWeight(3);
  arc(160, 170, 40, 10, PI, TWO_PI);
  arc(240, 170, 40, 10, PI, TWO_PI);
  
  // Mouth
  fill(255);
  strokeWeight(1);
  arc(200, 220, 50, 50, 0, PI);
  
  // Nose
  fill(255, 204, 153);
  triangle(200, 200, 190, 230, 210, 230);
  
  // Brazilian T-shirt
  fill('yellow');
  arc(200, 380, 200, 160, 0, PI);
  fill('green');
  arc(200, 380, 200, 160, PI, TWO_PI);
}