Author: Fatima Alsuwaidi

For my midterm I want to create a simple game inspired by the movie “Cloudy with a Chance of Meatballs”

where the avatar has to avoid the meatballs, each meatball avoided a point is gained. Using this catching game as a template I would have to change the code from catching the circles to gain a point to avoiding them.

Also I would like to have the player pick their avatar (the girl or boy) before starting. But I am worried that maybe I can’t do it because the collision between the ball and avatar might look off because different avatars means different sizes or shapes.

If everything goes well and I end up finishing faster than I think I could add levels to the game.

this is a rough sketch of what it will look like

The reading explains how computer vision, originally used in military and law enforcement, is now accessible to artists and designers. It discusses the challenges of making computer vision work effectively and suggests tools to help artists use it in their projects. Computer vision and human vision differ in a few ways. Human vision relies on the brain’s ability to understand complex scenes, recognize patterns, and adapt quickly, while computer vision is a set of algorithms that extracts data from digital images. Human vision is intuitive, recognizing objects in various lighting conditions and angles. Computers, however, require explicit programming to process pixels and identify patterns. While human eyes focus on the most relevant parts of a scene, computers process images as data without any true understanding of what they’re “seeing.” Human visual perception isn’t fully understood, so computer vision isn’t perfect.

In interactive art, computer vision allows artists to track movements and respond to viewers in real-time, making the experience more engaging and interactive. But because it can also be used for surveillance, it raises questions about privacy and control. This mix of being both creative and intrusive becomes a double edged sword.

Concept

After struggling to come up with a concept/ create something I decided to look at p5.js examples to help me. I found this interactive moving circle that uses the map() function. It reminded me of those Aura Circles and so I decided to do that.

This was the Inspo

Sketch

and this is what I created..

Move the mouse around and click

 

Highlight

I’m happy with the look of the Circle. I think it looks fairly similar to those Aura Circles. I like the effect it gives when it’s moved.

// drawing the outer circle
fill(circleHue, 20, 100);
circle(width/ 2, height/ 2, diameter);

// drawing the inner circle
fill(circleHue, 10, 200); // Lighter color for inner circle
circle(width/ 2, height/ 2, diameter * 0.5);

 

Reflection

I could’ve added a lot more words, or even the descriptions that is on the Inspo picture I attached.

Maybe I could’ve also added the “Move the mouse around and click” to be part of the sketch itself.

But honestly I struggled a lot with this assignment. I think it was because I wanted to include the most I could of everything we learned so far, make it interactive, etc. while also improving every assignment. That pressure couldn’t make me work the way I wanted to. So I opted to go for something simple.

 

 

 

Don Norman argues that poor design in everyday objects causes unnecessary frustration because they often prioritize aesthetics over functionality. One thing that annoys me is when the design does not align or make sense with the overall aesthetic or function of a website, app, power point, etc. It throws everything off and feels disjointed like the design and content are in two different worlds. It’s distracting. 

He introduces key concepts such as human centered design which emphasizes designing products to match users’ needs and abilities, making them intuitive and easy to use. He explains the importance of discoverability, understanding, affordances, signifiers, mapping, and feedback in creating user friendly designs. For applying Normans principles, I would focus on using signifiers in a subtle way. I want users to understand how to interact with the interface without me having to guide them or make it too obvious. The challenge here is creating an intuitive experience where signifiers are present but blend naturally into the design, guiding the user seamlessly without overwhelming them. Trying to be clear without being too in your face.

Concept

I aimed to build on my previous assignment by creating flowers using the lollipop example from class and crafting a bee inspired by the bouncing ball technique. Having already created a tree, I wanted to continue developing this theme.

Sketch

press to add bees

I chose the color of flowers to be this pink/magenta shade because there use to be a similar flower that would bloom very high we could never pick them as kids.

Highlight
My original bee looked like this. I couldn’t figure out how to get the bee to look like how I originally wanted it to. But then I remembered that I could -/+  this.x/this.y and it worked. I’m happy with the current bee especially since looking back, this one just looks weird.

show() {
  // bee's wing
  fill("#D5EBEE");
  stroke("#EBFAFC");
  ellipse(this.x - 3, this.y - 15, 15, 23);
  ellipse(this.x + 6, this.y - 15, 17, 24);

  // bee's body
  stroke("#E7D534");
  strokeWeight(3);
  fill("#FFEB3B");
  ellipse(this.x, this.y, 40, 30);
  
  // bee's stripes
  fill("rgb(15,15,15)");
  noStroke();
  ellipse(this.x, this.y, 3, 30);
  ellipse(this.x - 8, this.y, 3, 25);
  ellipse(this.x + 8, this.y, 3, 25);
  ellipse(this.x + 15, this.y, 3, 20);

  // bees' eye
  stroke(0);
  point(this.x - 15, this.y - 2);
}

I got the petals to rotate from Fasya Rahmadhani ‘s rotating strawberries.

Reflection

Overall I’m happy with the final piece. I did want to add the push/pop function to add/remove bee’s but they ended up just following each other. When I added the bee after the flowers the flowers shifted, I used chat gbt to figure out what went wrong, I ended up needing to add push(); and Pop(); to restore the transformation and style to isolate them from translate() and rotate().

For future improvements I wish to make It way more interactive. like adding (which I added after professor’s comments)or removing bees but also using the mouse pressed and key pressed function for visual changes.

 

I believe that interactivity comes from the use of our senses. Sight, touch, hearing, smell, and even balance. While not every interactive system needs to involve all of these senses, it must engage at least one. I agree with the idea that anything can be interactive because we can interact with everything around us. However, what’s crucial is distinguishing the level of interactivity (as he mentioned) whether it’s high, moderate, or low, since different forms of interaction have different impacts. 

When the author claimed that printed books aren’t interactive because they can’t “speak,” I would argue that interactivity can also be one-sided. For instance, I am reading this author’s views, which may or may not influence or challenge my own thinking. The author created the book, and I am engaging with it—how can that not be considered a form of interaction? The experience of reading may not be a conversation, but it’s an intellectual exchange, a dialogue between the creator’s ideas and the reader’s mind. 

Regarding Improving User Interaction in p5 Sketches I think allowing users more control over the artwork itself, such as changing colors, adding or removing elements, etc, could make the experience feel more personal and engaging. And offering users guidance on how to interact with the sketch, such as through on-screen prompts or hints, would help them understand how to navigate and manipulate the artwork more effectively. Also, adding sounds or auditory information. Though I haven’t seen any examples of that so I don’t know if It is possible. 

Concept:

I got my inspiration from this tree while watching my sisters play.

I wanted to create a tree that showcased the four seasons. And when you would move the mouse around the tree you would get to see the different seasons in each corner. Then when pressed, it would be dark (night). And just for visuals sake have the leaves fall automatically.

 

Sketch:

I couldn’t figure out how to include all 4 seasons without rewriting most of what I already did, so I moved on. I ended up adding apples, and when you move the mouse around the leaves they appear on the tree as well. When the sketch is pressed the autumn version appears; where instead of apples falling they are now leaves. 

Falling circles effect

Highlight:

There isn’t a code I’m proud of, I’m mainly happy that I was able to take something that I envisioned and was able to create it since I was worried about that.

But I am pleased with how easily I was able to incorporate the loop function.

//   leaves
  for (let x=0; x<=width; x+=35){
    for (let y=0; y<=height; y+=50){
      fill('#4CAF50');
      strokeWeight(5);
      stroke('#54AF4C');
      circle(x,y/2,40);
    }
  }

Improvements:

I think it would be cool to incorporate all four seasons instead of two. Also if I could actually recreate the game that originally inspired me; and be able to somehow catch the apples.

Casey Reas explored the interplay between order and chaos in art. The artworks he showed in the start intrigued me, it was simple but didn’t look like art created by code. It felt organic, having movement even through it was still. It maintained a sense of human touch and spontaneity despite its underlying systematic principles; the mix of chaos and order. 

I liked his approach and perspective. towards the end he says the graphics are underwhelming/simple. But he thinks it encourages you to look closer (his goal). I like the last art pieces he showed where it’s interactive in how the art piece ends. As you have control to create as well. He claims that each of these are algorithmically uninteresting. Except the idea of being able to expose the system, which he finds engaging. I think this explains art perfectly: the relationship between surface simplicity and underlying complexity. That the value of art lies not in its immediate visual impact but its capacity to reveal the deeper truth and meaning of it. That also viewing art and understanding the process/meaning of it gives you two very different perspectives.

For this self portrait I was inspired by the art style of Toca Boca, a mobile video game I used to play a lot as a kid. So I attempted to create myself in that art style.

 Highlighted Code:
I am proud of this code because I originally was worried with how I would create the hijab, but I ended up simply creating a circle and making the “head” above it. Even though it’s just 2 circles on top of each other, I’m glad I found a simply solution.

//hijab
fill('#523F2D');
circle(width/2,height/2,270);

Reflection:

I’m happy with the final result, when starting I thought I wouldn’t be able to create what I envisioned. I did want to add some hair, and I tried with arc using HALF_PI but with the hijab it didn’t work so I scratched that idea. I think for future assignments I want to try to make my work interactive.