Author: Hessa Almarashda

Week 7: MIDTERM PROJECT

Ever wanted to be LeBron James for 30 seconds? Well, now you can! For my interactive media midterm, I created a LeBron James simulator, a humorous experience designed to help you unleash yout inner LeBron. Using computer vision and ml5.js, I made a virtual basketball track the player’s index finger to control the game instead of the usual keyboard and mouse. The aim of the game is for the player to shoot as many hoops as they can in 30 seconds while LeBron-inspired encouragements flash across the screen. I gave the game a gold and purple color scheme to match the Los Angeles Lakers. For background music i used the instrumental of Pat Benatar’s Hit Me with Your Best Shot which adds that classic arcade feel.

The game was built using p5.js and the ml5.js HandPose model. When the player starts the game, their webcam is activated to begin tracking their hand. The game tracks the player’s index finger, which updates the basketball’s coordinates on the canvas. The player scores points by moving the ball into a hoop on the right side of the screen. The scoring system uses the dist() function to measure the distance between the ball and the hoop, while a Boolean variable called wasInsideHoop prevents the player from continuously scoring points by keeping the ball inside the hoop. I also used a basketball class to store the ball’s properties, such as its position and size, while methods update its location and draw it on the canvas.

The game uses three different states: the main menu, gameplay, and game over. Pressing Space starts the game, giving the player 30 seconds to score as many points as possible. Their final score determines which LeBron-inspired message they receive on the ending screen. Pressing R after the game ends takes the player back to the main menu without restarting the entire sketch. I also included a fullscreen mode that can be activated by pressing F.

One part that I am particularly proud of is the different ending quotes displayed depending on the player’s score. I used conditional statements to determine which message appears based on how well the player performed. I wanted these messages to add humor to the experience and make the game feel more entertaining, even when the player doesn’t score many points.

hat I struggled with most during development was getting the hand tracking to work. p5.js had recently received an update that removed the preload() function, which I had initially tried to use to load the HandPose model. This caused some issues with my original code, and I eventually had to use an asynchronous setup() function to initialize the model instead.

I also ran into some problems with sound, although these were unrelated to p5.js itself. I only wanted to use around 30 seconds of the song, but when I tried trimming the audio in QuickTime Player, it exported the file in .mov format instead of MP3. I ended up using GarageBand to trim and export the song, although its interface was more confusing to navigate. After some trial and error, I managed to get the music working in the game.

For improvements, i’d say that i want to add more challenges in the future. A defense mode would be fun. i would also maybe like to make it a full body tracking gamw instead of just hand tracking. The game could serve as an exercise outlet by needing the player to get up and move their whole body.

 

 

References:

P5.Js

ML5.JS handpose library

Music; Hit Me with Your Best Shot instrumental. Originally by Pat Benatar https://youtu.be/Dxb3HZPb5-c?si=3cGfPgRrMRDmHqPB

Image: Lebron James

https://www.pinterest.com/pin/lebron-james-standing-png-image–552957660533717293/

Developmental assistance: AI-assisted troubleshooting and code development, with testing and modifications during implementation

Week 5 Midterm progress

For my midterm, I am planning to create an interactive game called “LeBron James Simulator.” The idea is to develop a humorous basketball experience where the player uses their webcam to complete a series of basketball challenges while gaining points based on how their performance is similar to LeBron James. The game will take advantage of computer vision to track the player’s hand in order to complete the challenges.

The experience will start with a starting screen which will instruct the player to stand in front of the webcam to start the game. I am currently planning a few challenges which they will have to go through, such as trying to shoot a ball into a hoop and defense. The player will gain points on their performance, which will count toward a final ‘LeBron Rating’ shown once the game is completed. After players see their rating, they will get a chance to restart the game to try redeeming their legacy.

For the code, I plan to separate each step into states. The start screen, the basketball challenges, and finally the ending screen. I will also use object-oriented programming to create a basketball class that will store their properties such as shape, size and speed.with methods to check interactivity with the hoop and player.

The part of the project that i was most uncertain about was the computer vision and tracking. I needed to perfect this part as it is the main backbone of my experience. Fortunately i used the ML5.JS HandPose liberary to create a small prototype which suceesfuly worked in tracking my hand. The prototype was able to access my webcam and used the x and y to detect my fingertip to draw a small red circle.

Since my test was sucessful, my next step would now be figuring out how I can create the interaction between the player and the basketball.

Week 5 reading response

Computer vision and human vision both involve looking at and analyzing objects, but how they execute that task is different. Humans mainly use their eyes and brain to perceive the image that is coming in while computers tend to have a more complicated process. Usually images are fed into a software which analyzes each numerical pixel and groups them by their attributes to recognize the image.

Some of the ways we can help a computer ‘see’ better is by using methods such as brightness detection. This helps a computer understand the boundaries of an object by measuring the brightness of each pixel and determining the shape of the object.

In my opinion, I believe that computer vision adds a whole new level of creativity and immersion to interactive art by opening up new possiblities for artists to immerse their audiences in an experience. I think that this is a positive outcome as nowadays artists can run wild with their ideas and not be limited by the laws of our reality.

Week 4 Generative Text

For this week’s project, I used arrays and the random() function to create a Resident Evil-inspired quote generator. The program pulls quotes from different characters stored in the array and randomly displays them as text on the canvas.

A part that I am proud of in this program is my array, which stores the quotes. I used objects as well to connect each character to their quote so the program wouldn’t randomly display the wrong character and quote.

// Array with random quotes
let quotes = [
{
character: “Leon”,
quote: “Where’s everyone going? Bingo?”,
},
{
character: “Leon”,
quote: “No thanks, bro!”,
},
{
character: “Jill”,
quote: “You want S.T.A.R.S.? I’ll give you S.T.A.R.S.”,
},
{
character: “Claire”,
quote: “Hey, it’s up to us to take out Umbrella.”,
},
{
character: “Wesker”,
quote: “7 minutes. 7 minutes is all I can spare to play with you.”,
},
{
character: “Jake Baker”,
quote: “Welcome to the family, son.”,
},
];

I created this by using an array to store my quotes and using objects to link each quote to its respective character. I then used the random() function to select an object when the user clicks anywhere on the canvas. The selected quote and character are stored in a variable and displayed using the text() function. I also used different text styles and colors to make it more visually appealing.

One thing that I would like to improve on in my program is using different fonts than the ones already stored in p5js. I feel that would make it more recognizable. I would also like to experiment more with the background and maybe add some images too.

Week 4 Reading Response

Something that I have discovered recently which drives me crazy is installing EditShare on a machine running MacOS. Installing it is a confusing process as it isn’t a straightforward download like any other application. The installer is usually inconsistant and doesn’t display weither you have completed a certain step or if it needs to restart. The lack of feedback is confusing and directly proves Norman’s point. Norman describes feedback as a way for a system to communicate the result of an action to a user. EditShare can improve on this by clearly showing the status of each step and giving specific error messages when something goes wrong. It could also make the installation steps more visible so the user knows what they are expected to do next.

I can apply these principles to interactive media and my projects by making it clear what the user needs to do to get interactivity. One of the main ways I could achieve that is by using signifiers such as changes in color, movement, text, or symbols to indicate interaction. Norman explains that signifiers communicate where an action should take place. I can also give immediate feedback by having an object change appearance to signify that the action has been successfully completed.

Week 3 OOP Artwork

For my artwork, I decided to take inspiration from the Avatar movies and try to replicate Pandora’s bioluminescent plants using arrays and interactive functions that follow the mouse. I tried to recreate the plant’s behaviour from the scene below, where Jake Sully (the main character) tries to interact with the plants, which change size depending on touch.

The part that I am most proud of is how I used a class that acts as a blueprint in my code and stores information about plant sizes and positions, which are all randomized due to nature’s unpredictable tendencies. Moreover, it also controls the reactions to the mouse and how the plants become larger when the it gets closer

class GlowPlant {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.originalSize = size;
this.blue = random(180, 255);
this.green = random(80, 200);
}
// makes plants react to mouse
react() {
let distance = dist(mouseX, mouseY, this.x, this.y);

if (distance < 80) {
this.size = 35;
} else {
this.size = this.originalSize;
}
}
// plant shapes
display() {
fill(30, 180, 255, 40);
ellipse(this.x, this.y – this.size / 2, this.size / 2, this.size);
ellipse(this.x, this.y + this.size / 2, this.size / 2, this.size);
ellipse(this.x – this.size / 2, this.y, this.size, this.size / 2);
ellipse(this.x + this.size / 2, this.y, this.size, this.size / 2);

circle(this.x, this.y, this.size / 2);
fill(30, 180, 255);
ellipse(this.x, this.y – this.size / 2, this.size / 2, this.size);
ellipse(this.x, this.y + this.size / 2, this.size / 2, this.size);
ellipse(this.x – this.size / 2, this.y, this.size, this.size / 2);
ellipse(this.x + this.size / 2, this.y, this.size, this.size / 2);

circle(this.x, this.y, this.size / 2);
}

I created this code using object-oriented programming. I made a glowPlant class which stores the position and size of the objects, then used an array and a for loop to generate 40 randomly positioned plants with different sizes. Each plant has a display method and a react method to track the mouse, making them bigger or smaller depending on its position.

What I would like to improve on in the future are my artistic skills in making more realistic objects. I would also like to improve my code labeling and organization skills while learning how to do more complicated interactions with arrays.

Week 3 Reading response

A system is strongly interactive when the user can change its outcome. Crawford simplified interactivity as listening, thinking, and speaking, which can also be understood as input, processing, and output. For example, take a storybook. A book is not interactive, as the reader cannot influence anything that happens in its narrative. A video game, however, is interactive because the player can control the character with an input, altering its journey. In my opinion, this is what makes a strong interactive system: the user’s input has a noticeable impact on the system’s response.

While making future sketches, I plan to incorporate interactivity by using functions on P5.JS such as mousePressed and mouseX/mouseY to give my projects more interactivity. I have already started this in my last artwork, as I used mousePressed and a boolean variable to change the color of the piece.

Week 2 Generative Art

For this assignment, I decided to create a Tron-inspired piece that is a digital environment resembling the Grid in the movie. At first, the sketch starts out with cyan perspective lines, which, when the user clicks, change to an orange color scheme inspired by Clu, who is the villain of the movie. I also added random particles to the top of the grid, which are supposed to give that computer-bit aspect. I wanted to experiment with what I heard in the Casey Reas talk and used randomness in my piece while still being in control.

 

The part which I am most proud of in my code is the color-changing toggle. Originally, I wanted to use only the mouseIsPressed function, but that wouldn’t work because it would only appear when the mouse is held down. This is why I created a boolean variable called cluMode, which solves that issue.

function mousePressed() {
cluMode = !cluMode;
}
if (cluMode === true) {
fill(255, 165, 0);
} else {
fill(176, 224, 230);

 

I started by creating a 700×700 canvas, then used two for() loops to crate the vertical and horizontal lines. After that, I used a global variable called gridMove to animate them by increasing its value inside draw(). This value is added to the y position of the horizontal lines, making them move down the screen but stopped by a conditional to make them repeat.

I used another for() loop to create the randomized particles by using random() in the coordinates of my circle code. Finally, I added the cluMode boolean and mousePressed() function so clicking the canvas cycles from cyan to orange.

My main references were the Grid and its color schemes from Tron. I also referenced the p5js concepts covered in class. Including loops, conditionals, animation, mouse interaction, and random()

I am happpy with how my final sketch turned out by using moving objects rather than static ones like last time. In the future, I would like to experiment more with arrays to give particles positions and try to make the animations smoother.

 

 

 

 

 

Reading Reflection Week 2

One way that I would like to incorporate randomness into my work is by allowing some visuals to change independently while keeping the main elements under my control. What interested me most about Reas’ talk was how some aspects of the composition can be left to the computer to randomly generate, resulting in the creation of distinctively unique artwork. For example, I could control the main shapes and structures while leaving other aspects like color and size to the computer. This would allow different versions of the artwork to emerge while keeping my original intentions.

 

For me, I believe that there needs to be an equal mix of artist input and randomness. Total randomness could produce interesting results but would tarnish the original intent of the artist and make it less meaningful. Complete control could also feel bland, as the human imagination can only go so far. Randomness can create new ideas and maybe set some new trends in the digital art world, though keeping it at bay is also important. I think the best balance is giving the computer enough freedom to create something unexpected while still allowing the creator to shape the general direction of the piece.

Week 1 Self Portrait

For this project, I created a portrait of myself wearing a raccoon onesie using basic primitive shapes in the p5.js editor.

The part that I am most proud of in my portrait is the raccoon tail, which I used many variations of ellipses to create. It was also one of the most challenging, as I had to experiment with the coordinates to get the proportions right.

// tail
fill(120, 125, 130);
ellipse(285, 330, 90, 40)
fill(65, 70, 75);
ellipse(275, 330, 15, 40)
ellipse(295, 330, 15, 40)
ellipse(315, 330, 10, 30)

How it was made. I used many shapes such as the ellipse, triangle, circle  rectangle, and arc to create the features of the person. I also messed around with the reference page in p5 and used AI for color accuracy.


>

What I would like to improve upon in the future are my proportion and shape variety skills. i would also like to learn how to use the translation and rotation commands to make my designs more life-like. Additionally, I would also like to strengthen my documentation on the blog.