Author: Mariam Aljunaibi

Link to Sketch: https://editor.p5js.org/ma9331/full/ZSQDV21v5

Concept

For my midterm project, I decided to make it Star Wars-themed. The main character of the game is Luke Skywalker, who is on a mission to defeat the Galactic Empire. Luke is on the Death Star (the enemy’s base), where he encounters countless Stormtroopers whom he needs to defeat.

Instead of having a main objective to achieve, I made it a score-based game. In this one-player game, the user plays as Luke Skywalker and slashes as many Stormtroopers (enemies) on the ship before the timer runs out and gets their score at the end.

 

Process

This is my initial sketch which ended up being pretty similar to the final game’s outcome. The Stormtroopers emerge from the far right side of the screen and move towards the other end of the screen. Luke moves using the arrow keys and attacks by holding the “e” key.

I made two separate classes: one for Luke (the player) and one for the Stormtroopers (NPC enemies). Luke has a constant speed but the Stormtroopers have a random speed to make it a bit more challenging.

 

Code I’m Proud of

//initial/starter enemies
  new Stormtroopers(windowWidth, windowHeight * 1.2, scale, enemies);
stormtroopers.push(
  new Stormtroopers(windowWidth + 200, windowHeight * 1.2, scale, enemies)
);

function spawnEnemies() { //respawn function
  stormtroopers.push(
    new Stormtroopers(windowWidth, windowHeight * 0.8, scale, enemies)
  );
  stormtroopers.push(
    new Stormtroopers(windowWidth - 10, windowHeight * 0.8, scale, enemies)
  );
}

if (stormtroopers[i].x < -10) { // enemies go offscreen
  stormtroopers.splice(i, 1); // remove from array once offscreen
  
  if(score>0){
    score -=10; // decrease score, keep >= 08
  }

I had a lot of issues with the enemies spawning and positioning. At first, only a few enemies would spawn at the start of the game but would not respawn. This was because i set the Stormtroopers to stop walking at x=0, so they could never reach less than x=-10 and trigger the respawn function. I had to experiment with different values because the first enemies spawn as soon as you click run (because they’re in the function setup), so their positioning in fullscreen was different from the ones that respawn after. Ultimately, the Y-positioning for the initial enemies had to be windowHeight*1.2, and for the respawns it had to be set to windowHeight*0.8 in order for it work on fullscreen, and to be in the same Y-position as the initial enemies.

 

Design

For the end screen in my game, I took inspiration from the title screen at the start of every Star Wars movie.

This is what my end screen looks like:

And this is the title screen from Star Wars films:

I thought it would be a really cool but simple nod to the movies.

Areas of Improvement

If I had more time, I would’ve experimented more with the Stormtroopers’ abilities and gave them their own attacks: one attack could be that they shoot the player from their guns and deal damage to the player. Also, I had the thought of adding a health bar for both Luke and the enemies to make the game a bit harder (killing the enemies would require more than just one slash) and not time-based.

In this reading, Levin argues that the tools, techniques, and physical setups required for basic computer vision are no longer exclusive to only specialists, they can now be used by students and artists. Reading this article really got me thinking about how different human vision is from computer vision.

One way computer vision differs from human vision is that computers don’t have a built-in understanding; they just see pixels and values. They need algorithms to interpret color, brightness, motion, etc. Humans, on the other hand, have an innate understanding.

Some techniques we can use to help the computer see and track what we’re interested in include frame differencing (detecting motion by looking at changes between frames), background subtraction (using a static background and removing it to isolate objects), and brightness thresholding (using contrast to separate what you want from what you don’t).

Computer vision’s capacity for tracking and surveillance has its pros and cons. On the positive side, tracking allows for more responsive, immersive, and personal interactive art. On the downside, issues like surveillance, privacy and consent arise. If art is tracking people, there’s always a risk of misuse and discomfort.

Concept

For my midterm project, I’ve decided to make a Star Wars-themed game, where the user plays as Luke Skywalker. The aim of the game is to defeat the Stormtroopers on the spaceship. The aesthetic of my game is going to look similar to the image below. I want to go for the pixel-style simple game.

I got the inspiration for my game’s mechanics from Street Fighter. But instead of two players fighting against each other, I’ll make it a one-player game fighting against NPC enemies.

I’m thinking of making my game look something like this:

Design and User Interaction

• The player (Luke) will be able to move and attack.
• The Stormtroopers will spawn on the opposite side of the screen and run towards Luke.
• The game will include a time-limit (which goes on until all his lives/HP is gone, or to maximize points within the time-limit).

Challenges and Risks

The most complex part is probably figuring out how Stormtroopers attack. I’m probably going to program them in a single class, which will spawn all of the enemies and their attack patterns. I’m also uncertain about the point system. I’m not sure whether to go for an HP/lives system, or a points system where he gains points for killing each enemy. But either way I’ll include a time limit.

To minimize the risk, I’m planning to divide the player and NPCs into two separate classes. I’ll also experiment with a simple collision detection test to confirm that Luke’s attacks properly register against enemies.

 

This is what my sketch looks like so far:

 

I have always thought some things could’ve been simpler. At times, I have had the thought that I was “dumb” for not being able to figure out how to use everyday appliances, but that’s not true. In this reading, Don Norman explains how the fault isn’t in the user, but in the design of things.

Something that drives me crazy is the variety of shower controls. Every time I go to a hotel or a friend’s house, the shower is always different from the one I’m used to. Some showers have two buttons for an overhead shower and a handheld one, but it’s not always clear which button controls which. I’ve even ended up soaked once because I accidentally turned on the overhead shower. You basically have to figure it out through trial and error, since there are rarely any instructions. This could be improved by creating a more universal design for shower controls, or by adding clear markings so it’s obvious what each button does.

Norman mentions feedback as a key principle of design, which is especially important in interactive media. Feedback lets users know their actions have been recognized by producing clear results. For example, an elevator button lights up when it’s pressed to show the action has been registered. In interactive media, feedback can be shown in many ways: a button changing color when clicked, a sound confirming an action, etc. Without feedback, users would feel lost or even think the system isn’t working.

Concept

For this project, I decided to make a data visualization using a dataset of Disney movies. Instead of showing the numbers in a typical bar chart, I wanted something more fun. I represented each genre as a balloon: the bigger the balloon, the more money that genre grossed overall. I also color coded the balloons: pink for drama, purple for musical, green for adventure and yellow for comedy, so each genre is easy to distinguish.

Favorite Code

I’m especially happy with the part where I drew the balloons. The shapes and colors turned out really cute, and combining the ellipse with the string image really tied it all together! This section of the code really brought the visualization to life:

//visuals
 stroke("rgba(255,255,255,0.75)");
 imageMode(CENTER);

 //drama genre balloon
 fill("#F8BCBC");
 image(squiggle, 68, 150, 20, 110);
 ellipse(70, 110, sDrama, sDrama);

 //musical genre balloon
 fill("#9194CF");
 image(squiggle, 130, 150, 20, 110);
 ellipse(130, 110, sMusical, sMusical);

 //adventure genre balloon
 fill("#66B6B6");
 image(squiggle, 225, 180, 20, 120);
 ellipse(225, 110, sAdventure, sAdventure);

 //comedy genre balloon
 fill("#EBF1AB");
 image(squiggle, 320, 150, 20, 110);
 ellipse(320, 110, sComedy, sComedy);

Here’s my sketch:

Reflection and Future Improvements

One challenge I had was calculating the total gross for each genre. I couldn’t figure out how to get the program to add everything automatically from the dataset, so I just did the math myself and typed in the totals. I know there’s probably a way to loop through the data and calculate those sums directly, but I couldn’t figure out how to write it.

For future improvements, I’d like to fix that so the totals are generated by the code itself. I also think it would be fun to add more genres (with more balloons), or even animate the balloons so they float around the screen like real ones. That would make the visualization more dynamic and interactive.

 

Chris Crawford compares interactivity to two people holding a conversation, where each listens and responds, and that back and forth creates something dynamic. Before reading this, I hadn’t really thought deeply about what makes a system truly interactive, and Crawford’s explanation really clarified it for me. I agree with him because a strongly interactive system is one where the user’s input can meaningfully change the outcome, rather than just triggering a predictable or surface-level reaction. That’s when interaction feels real.

For my own p5 sketches, I’ve thought about ways I could improve the interactivity in them. Instead of just clicking to trigger something to happen, the sketch could react differently depending on the type of input, like how long you hold a key or how fast your mouse is moving. This would make the artwork/program feel less like a machine following certain orders and more like an actual conversation between the user and the program.

Concept

When I thought about what to do for this assignment, I started brainstorming and eventually decided to create a simple simulation of rainfall. I always found rain both calming and visually appealing, so I wanted to capture that feeling in my artwork.

Code I’m Proud Of

I’m proud of this code because I figured out how to make the raindrops disappear at the bottom of the canvas (when they reach the sea). At first, I used pop(), but it didn’t work the way I wanted it to: it would randomly delete all the droplets in the middle of the page. So I researched a bit and instead, used splice(), it deletes the droplets when they reach the bottom of the page and works perfectly!

//deletes raindrops after they reach the sea
if (raindrops[i].disappear()) {
  raindrops.splice(i,1);
  //splice removes/deletes the disappeared raindrops 
}

Here’s the artwork I created:

Reflection and Future Improvements

Overall, I’m happy with the way my rainfall artwork turned out. I especially liked learning how to use arrays with objects because it made me think more carefully about organization and how each part of the code connects.

If I were to improve this piece in the future, I’d probably add sound effects of rain falling, or even experiment with lightning and thunder for a more dramatic atmosphere. Another idea I had is to adapt the same logic to create snow instead, using different PNGs for different snowflake shapes. That way, the piece could feel more unique while still using the same object-oriented structure I implemented here.

Concept

For this assignment, I decided to create a simple artwork inspired by the portal in the movie Coraline. I’ve always loved how layered and colorful it looks in the film, so I used it as inspiration for my own piece.

Here’s a picture of the portal from Coraline:

Code I’m Proud Of

It took a lot of trial and error to get the loop working properly. Once I figured out how to write the condition correctly, the rings appeared just how I wanted them. I also added randomized colors of blue, purple, and pink to the rings to make them feel closer to the portal from Coraline. I also adjusted the frame rate to create more of a portal effect.

// circles size increase by an increment as it loops
 for (let i = 0; i < ring1; i += 1) {
   let s = minsize + i * increment;
   ellipse(centerX, centerY, s, s);

   // random colors from the list for each ring
   stroke(random(colors));
 }

Here’s the work of art I created:

Reflections and Improvements

Overall, I’m happy with how it turned out. I wasn’t trying to recreate the portal exactly, but instead capture the beauty of its colors and layers. However, I noticed it took me a really long time to figure everything out, and at one point the program kept crashing. I’d like to improve in understanding loops in general to be more efficient in future projects. I’d also love to add animation to this artwork, like making the rings spiral and swirl so it feels more like an actual magical portal.

In his talk, Casey Reas explores how generative art uses code, rules, and chance operations to create dynamic and unpredictable visuals, showing that creativity comes from both structure and chance. I found it particularly interesting when Reas explained that generative art is a space where structured rules interact with randomness, because when people generally think of coding, they assume there’s always a “right” way to do it, but I don’t necessarily think that’s true. I agree with Reas on this point about how chaos and order thrive together in generative art. But at first, I was one of the people who thought coding was strict and bound by certain rules to follow,  now I see that it can be more playful and freeing.

When I was coding my artwork assignment, I decided to add randomized colors to my code to make it more exciting every time I run the code. The outcome always comes out as different and unique from the one before it, and I enjoyed the unpredictability of it. At the same time, I wonder if too much randomness could take away from the artist’s control. Reas seems to always see randomness in a positive way, but I’m not sure I fully agree with that. Personally, I think it works best when theres a balance, where the structure I write in the code guides the randomness so that the results are still under my control to some extent.

Concept

For my self-portrait, I decided to base it on my Animal Crossing Avatar. I thought it would be a fun way to represent myself since my character in the game feels like a version of me. Also, the cartoon style of the avatar fits perfectly for this kind of assignment!

Here’s my character for reference:

Favorite Code

Although I didn’t do anything super complex, I’m especially proud of how the eyes turned out. I think they gave the portrait a lot of personality and helped bring the whole thing together.

//left eye
  fill("black");
  ellipse(175, 225, 38, 50);

  fill("white");
  ellipse(174, 213, 18, 12);
  ellipse(182, 235, 6, 10);

  fill("black");
  triangle(158, 220, 152, 200, 163, 210);

  //right eye
  fill("black");
  ellipse(265, 225, 38, 50);

  fill("white");
  ellipse(265, 213, 18, 12);
  ellipse(274, 235, 6, 10);

  fill("black");
  triangle(248, 220, 241, 200, 251, 210);

Here’s the self-portrait I created:

Reflection and Future Improvements

While working on the portrait, I experimented with different shapes for the mouth and lashes. I tried using curves and Bezier functions, but they didn’t turn out the way I had hoped. In the end, I used an arc for the mouth and a triangle for the lashes, which worked better for the style I was going for.

I also used a semicircle arc for the bangs, but it stuck out a little awkwardly. To fix it, I placed a triangle in the same color as the background on top of the part that was sticking out, but I’m sure there’s probably a cleaner way to handle this.

In the future, I’d like to practice more shapes and figure out better techniques for handling these things.

Overall, this project was a fun way to explore coding and experiment with shapes. I’m excited to keep practicing and see how much more expressive I can make my sketches in the future!