Author: Adilbek Tursynbek

Chris Crawford’s explanation of interactivity as a conversation between two actors really made me think differently about interactive systems. Before reading this, I thought any program that responded to user input was “interactive.” But Crawford’s idea that true interactivity needs both sides to listen, think, and speak challenged my assumptions.

Example of the refrigerator light made me laugh, but it also got me thinking – how much “thinking” does a system need to do to be truly interactive? I started looking at apps and websites I use daily in a new light. Many of them just react to clicks without really processing or responding thoughtfully. Are they really interactive by Crawford’s definition?

I found myself agreeing with Crawford’s point that good interactivity needs both actors to do all three steps – listen, think, speak – well. Based on those ideas I think the key characteristics of a strongly interactive system are: good listening, thoughtful processing, and clear communication. Those characteristics reminded me of frustrating customer service chatbots that clearly don’t understand what I’m saying. Even if they respond quickly, the interaction feels hollow because the “listening” and “thinking” parts are weak.

This reading has me wondering how I can make my own p5 sketches more deeply interactive. Instead of just reacting to mouse clicks, how can I build in more “thinking” to create a back-and-forth with the user? Maybe I could track user behavior over time to generate more thoughtful responses. Crawford’s ideas have inspired me to push beyond surface-level interactivity in my work.

Concept
For this project, I wanted to create something that felt alive and ever-changing. I’ve always been fascinated by fireworks and how they burst into these beautiful, fleeting patterns. So, I thought, why not bring that magic to the screen? That’s how I came up with this particle system where colorful dots zoom around and then explode into tiny fragments. It’s like having a never-ending fireworks show right on your computer!  The overall concept is to create a dynamic, self-sustaining system of particles that move, expire, and regenerate. Each particle has its own lifecycle, moving across the screen before exploding into smaller particles. This creates a constantly evolving visual experience that’s mesmerizing to watch.

Code snippet
The part of the code I’m most excited about is the explosion effect. It was tricky to get right, but when it finally worked, it felt amazing. Here’s the snippet with comments:

explode() {
  this.alive = false;
  for (let i = 0; i < 20; i++) {
    // Create 20 small particles for explosion effect
    this.explosionParticles.push({
      x: this.x,
      y: this.y,
      // Random x, y velocity and random size 
      vx: random(-2, 2),
      vy: random(-2, 2),
      size: random(1, 5),
    });
  }
}

This bit of code is where the magic happens. When a particle’s time is up, it bursts into 20 smaller particles, each with its own direction and size. It’s simple, but it creates this really cool effect of explosion.

Challenges
Getting the explosion effect to look good was probably the biggest challenge. At first, the explosions looked too uniform and boring. I had to play around with the random velocities and sizes to make them more interesting. Another tricky part was managing the lifecycle of particles and their explosions. I had to be careful about when to remove particles from the system to avoid memory leaks.

Sketch

Reflection and ideas for future improvements
Reflecting on this project, I have to admit it was really challenging from the get-go. Coming up with a creative idea was a struggle, as it often is for me. I spent a lot of time just staring at a blank screen, trying to think of something interesting and visually pleasant. Even after I finally settled on the exploding particles concept, making it look good was another hurdle. At first, it just looked like a bunch of circles moving randomly around the screen – nothing special. I had to really push myself to refine the visuals and add the explosion effect to make it more engaging.

Looking ahead, I’d like to explore and create more different explosion patterns. Maybe some particles could spiral out, or form shapes like hearts or stars when they explode.

I’ve always been curious about chance, ever since I was a kid thinking about fate. It made me wonder how much we can really predict in life, and how much is just random. I explored concepts like Laplace’s demon, the nature of pseudo-randomness, and even dived a little bit into quantum physics. trying to figure it out. Casey Reas’ talk at Eyeo was eye-opening for me. He showed how randomness can make art really interesting. It’s not just about throwing random stuff together, but setting up systems where chance can do cool things. This got me thinking about my own art differently. What stuck with me was how Casey uses simple rules to make complex stuff happen. It’s like he makes a playground for randomness and lets it go wild, but with some boundaries. I find this mix of control and chaos really cool.

For my sphere project after finishing it, I’m wondering how to use some of Casey’s ideas. Maybe I could make the sphere, which represent atoms, move randomly, or shift things around in unexpected ways. I’m not sure exactly what I’ll do yet, but I want to try something new. I think the right mix of randomness and control depends on what you’re making. Sometimes a bit of randomness makes things feel more real. Other times, you need more control. I usually start with a clear idea, then add some random elements to make it more interesting. Casey’s work has definitely made me want to experiment more with letting go of control and seeing what happens.

Concept
This work is inspired by how nature shows similar patterns at both tiny and huge scales. Think about how electrons circle around an atom’s nucleus, and how planets orbit stars or how galaxies spin. Even though these things are super different in size and controlled by different forces, they look kind of similar, “stuff moving around a center point”. It’s like nature has a favorite design that it uses over and over.

In this art work I tried to show this idea with a cool, spinning spherical shape that changes colors (It also reminded me of Tony Stark creating a new element). It is meant to make you think of both the super small world of atoms and the massive universe at the same time. The changing colors are supposed to represent the constant energy and movement in both atomic and space masses.

Code snippet
Here’s a bit of code I’m pretty happy with. It’s what creates the spherical shape using nested loops and some tricky math from geometry books:

for (let theta = 0; theta < 180; theta += 2) {
  for (let phy = 0; phy < 360; phy += 2) {
    let x = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * sin(1 * theta) * cos(phy);
    let y = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * sin(1 * theta) * sin(phy);
    let z = radius * (1 + settings[0] * sin(settings[1] * theta) * sin(settings[2] * phy)) * cos(1 * theta);
    
    stroke((hueShift + theta + phy) % 360, 80, 88);
    vertex(x, y, z);
  }
}

This code makes points on a sphere, but with some extra wiggles to create cool patterns. The ⁠ settings ⁠ array helps easily change how complex the shape is. The colors change based on where each point is and a shifting overall color, which makes it look vibrant and always changing.

Sketch

Reflection and ideas for future improvements
Working on this sketched helped to better understand 3D graphics and using math to create complex shapes. The hardest part was getting all the numbers just right to make it look good and match my idea.

For making it better next time, I have some ideas:

1.⁠ ⁠Let users change the ⁠ settings ⁠ array and add more interactive while it’s running to see how it changes the shape.
2. ⁠Put in some sliders or buttons to change colors, how fast it spins, and other stuff.
3.⁠ ⁠Try making multiple shapes that connect to each other, like a bunch of molecules or solar systems.

These changes would make it more fun to play with and give a better picture of how small and big things in nature can look similar.

Concept
For this project, I decided to create a more abstract, cartoonish self-portrait. The simplified shapes give the drawing a cute and playful look, which fits well with the style I am aiming for. The strawberry-shaped hat I featured in the portrait is an item I gave to my little sister for her birthday, which adds a personal touch to the project. (She made me wear this hat for days) The background is inspired by Astana, which has the most beautiful sky I’ve seen, which makes this project even more meaningful to me.

Code snippet
A piece of code that I’m particularly proud of is the implementation of eye blinking on the character. The eyes alternately open and close, creating a simple but effective animation. Here’s the relevant code snippet:

if (millis() - lastBlink > interval) {
  push()
  fill(0);
  stroke(0);
  strokeWeight(3);
  line(295, 400, 335, 400);
  line(355, 400, 405, 400);
  pop()

  if(millis() - lastBlink > interval + blinkDuration) {
    lastBlink = millis();
  }
  
} else {
    fill(0);
    circle(315, 400, 25)
    circle(385, 400, 25)
}

This block of code is responsible for the blinking logic, checking the elapsed time and switching between drawing closed eyes (lines) and open eyes (circles).

Sketch

Reflection and ideas for future improvements
Creating this project helped me get more familiar with p5.js, especially in terms of working with different forms and layers. The biggest challenge was figuring out how to draw curves correctly and how to handle time intervals in p5js. However, this project gave me the confidence to experiment further with p5.js and possibly add more complex animations or interactive elements in the future.

In the future I would like to add interactivity to the sketch, such as making the eyes follow the cursor, or adding background changes depending on the time of day. I also plan to refine the background, adding more details that more accurately convey the atmosphere of Astana.