Category: Spring 2024 – Aaron (Section 001)

Concept:

For this assignment, I honestly had no clue what to create, at first, I wanted to create generative text data; however, I couldn’t think of a sketch, so I decided to do visualization data instead. My concept was straightforward as I was still trying to understand the codes, so I decided to do a simple solar system, but the data wasn’t accurate it was just for the sketch and the placements in p5. I first started with a blank black background with the planets orbiting, which was too basic, so I decided to use the Lerp function, which I got my inspiration from Jheel’s assignment last week, to change the color to blue gradually. Furthermore, I added shooting stars and normal starts, to make it look more appealing.

Highlight:

The highlight of my code is the animation of the planets and setting the planets, as it was the hardest to figure out. However, the PowerPoint and previous in-class work helped a lot, and without them, I would still be trying to make it work.

// Draw and animate planets orbiting the sun
 for (let i = 0; i < planets.length; i++) {
   let planet = planets[i];

   // planet position based on orbit
   angles[i] += planet.speed;
   let x = sun.x + cos(angles[i]) * planet.distance;
   let y = sun.y + sin(angles[i]) * planet.distance;

   // Draw the orbit path
   stroke(255, 255, 255, 50);
   noFill();
   ellipse(sun.x, sun.y, planet.distance * 2);

   // Draw the planet
   noStroke();
   fill(planet.color);
   ellipse(x, y, planet.diameter);

   // Display planet name
   fill(255);
   textSize(12);
   text(planet.name, x + planet.diameter / 2 + 5, y);
 }

Reflection:

For improvements , as you can see the planet, are going out of the canavs, i tried fixing it by making the orbit smaller, but then everything look tight, so i left it as it is. Also I believe some user interaction would’ve been a great addition, as of now there isn’t any interaction, I should’ve maybe allowed the users to control the orbiting of the planets using the mouse, or maybe the shooting stars.

My design:

In Norman’s text, he argues for having a human-centered design, focusing on creating products that are simple and straightforward to use by aligning the design with what users need and can do. In context to that, one thing that drove me crazy (probably because I was really hungry) is how confusing digital appliances can be—like the air fryer I tried to use in the dorm. I expected it to be super easy, but instead, both me and Amna my sister, had to spend ages trying to figure out the functions because the instructions were just vague images and the digital display wasn’t clear. For someone who doesn’t cook often, it was frustrating to the point where I had to search TikTok to find out how to use it, and still it took ages to figure out as I had to find a similar Air fryer. To fix this, I think appliances like this should have built-in, interactive tutorials. Imagine turning on the air fryer for the first time and having it guide you step-by-step on the screen, showing you exactly how to use it. That way, you wouldn’t have to guess or waste time searching for help online.

In terms of applying Norman’s principles to interactive media, his ideas about affordances and signifiers would be super helpful. For example, in apps or websites, using clear icons or buttons that naturally show what they do would make everything easier to navigate. Also, feedback is key, like when you press a button, having a small animation or sound that lets you know the app is working on your request. It’s those little things that make the user experience smoother. Plus, having a simple design that allows users to quickly figure out how everything works without needing a tutorial, would make interactive media way more intuitive, kind of like how appliances should work right out of the box without you needing to look up instructions.

Concept:

For this assignment my main inspiration came from my niece, actually, during family lunch, she was playing around with a kaleidoscope, and i remembered how as a kid, I was so intrigued by them. I searched up inspirations and patterns online and i definitely wanted to try and create a design similar to a kaleidoscope. So i created jittery, dot shape that turns into this, flowy dot when you click on the mouse, just as how the shapes change when you rotate a kaleidoscope.

Reflection:

Honestly the code wasn’t as complex and was made up of mostly arrays, OOPS what we did in class mostly, and maybe next time i should try and be more complex with it and try new codes not taken in class, but I’m still very proud of the outcome. However, I did try sin and cos to create the waviness and jitter movements with the shape , which i got inspired from Amna’s previous code last week, and I’d say that’s the code I’m most proud of as it was something new to me that took some time to get right, but after reading about it on the P5 website, I figured it out, turns out it was just coordinates and using the function random to create those flowy movements, and this is the code that allows for the dots to then turn into wavy dots so it can then look like those squares when u click/toggle on the mouse, hence if I remove it the dots would just flow up and down or side to side instead of creating the square trail.

here is code im most proud of:

// Function to move the dot
move() {
  // Create two different movement patterns based on `flowDirection`
  if (flowDirection === 0) {
    this.x += random(-2, 2); // Random jitter in the x direction
    this.y += random(-2, 2); // Random jitter in the y direction
  } else {
    this.x += sin(this.y * 0.05) * 2; // Wavy movement based on the y-coordinate
    this.y += cos(this.x * 0.05) * 2; // Wavy movement based on the x-coordinate
  }

here is my sketch:

After reading the article “The Art of Interactive Designs,” I kept thinking about what makes something truly interactive. The author does point out that a good interactive system feels almost like a conversation, like there’s this back-and-forth where the system responds to what you’re doing in real time. It made me realize that a lot of systems or designs we think are “interactive” really aren’t, especially when they don’t actually engage with the user in a meaningful way. If something just sits there and doesn’t respond, it’s basically dead weight, no matter how fancy it looks.

In my opinion, it was interesting how the writer claims that interaction isn’t just about cool or flashy videos. its about making the user feel like there in control and that their input to that piece is important. Sometimes, I would see designs that look amazing but don’t actually respond well to the user. This means that I most likely overlooked my previous artwork I created in p5.js.  Yes, I’m proud that I was able to create art that looks cool, but if it’s not responsive or doesn’t react to what the user does, it’s not really interactive in the way it should be.

This article really pushed me into thinking about how I could improve my p5.js sketches to make them more interactive. Right now, for the assignment I’m doing this week, I feel like its a little bit flat, but they respond, but not in a way that feels satisfying. For instance, you can click a cube and it pops out, but that’s about it. I want to bring in smoother transitions, add more control options, and maybe even layer multiple interactions on top of each other. For example, what if clicking a cube changed its color, or if dragging across the screen triggered more than one animation? That’s the kind of engaging interaction the article talks about, and it’s the direction I want to head in. I really believe that real interaction should be immersive, and I think the article agrees on that too . I mean, from what I understood, its not about one thing happening at a time; its about creating a system that is consistently reacting to the user. In the future, I want my own projects to feel like they are alive and responding, not just a list of functions that don’t change.

CONCEPT:

For this art work, I’m going with a concept similar to my previous one and continuing the Velnor Molnar grid art. I was on the lookout for art pieces made with artists who used P5.js, and I found myself inspired by two standout visuals. I was really drawn to this vibrant 3D cube grid. It has so much depth and layers that it just stands out.

The next source of inspiration is a straightforward yet powerful idea known as the “Fading Grid.” The color changes are truly captivating, producing a gentle fading effect that evolves within the user interaction.

I’m thinking of combining both concepts. I’ll incorporate the 3D cube design and introduce some interactive color fading, drawing from both sources of inspiration. When you click on the mouse, the cubes shift, with the color changing within the user interaction to create movement in a way that feels interactive.I’m really looking forward to seeing how blending these two concepts will influence my final piece of art.

EMBEDDED SKETCH:

Click on the cubes!

HIGHLIGHT OF THE CODE:

One part of my piece where I’m really proud is how I changed the lighting of the cubes based on how the user moved their mouse. As the mouse moves toward a cube, it gets brighter. As the mouse moves away, it gets darker. This makes the background look smooth, which makes the cubes seem to be reacting to the user being there.

Continue reading “Assignment #3”

A strongly interactive system, as described in The Art of Interactive Design, goes beyond just reacting to user input; it creates an ongoing back-and-forth between the user and the system. Crawford talks about the system as “listening, thinking, and speaking,” meaning it responds in meaningful ways to what the user does. In my p5.js sketches, I want to improve user interaction by giving more immediate feedback and making the system react in a way that feels more real or personalized if that makes sense. For example, much like how in Minecraft your actions (building or destroying) immediately affects the world around you, like destroying the wrong block could lead to a flood, same with my designs, I want to make my sketches change and evolve with user input. Furthermore, instead of having a single click trigger a known/set action, I want the system to adapt and change based on the actions similar to how Spotify creates personalized playlists based on previous songs you’ve listened to. So basically, the previous user inputs influence the sketch’s future outcomes. I can also add depth by layering interactions, like having multiple variables such as colors, shapes, or movement change in response to user input, which I am implementing right now to my sketches and giving it a go, as I do believe it gives a more appealing look to the system. I also just found out, that you can add sound effects on P5, which I hope we get to learn that, during the semester, as I’m sure everyone can agree sound enhances any type of design. Hence, by incorporating these elements into my sketches and designs, I aim to create more interactive and engaging sketches that feel alive and responsive, aligning with Crawford’s vision of true interactivity.