Author: Siyona

“Any idea worthy of my attention is probably too big and too complicated to be reduced to some schoolmarmish formula.”  I was quite shocked when I read this sentence. Not because I disagree, but because I feel like the whole world should read this sentence. I have always thought that society tries to package thought into neat definitions and slogans, which is not only convenient but, in my opinion, shallow. This line reminded me that oversimplification can actually strip an idea of its essence, turning something profound into something hollow. This reading overall was peppered with ideas that made me question most of what I knew about interactivity. Examples include the idea that many things typically labelled as ‘interactions’ are actually ‘reactions’, that interactivity could be a subjective concept that exists in the eye of the interactor, and that two strong factors cannot, in fact, outweigh the weakness of the third (a principle I personally used a lot).

All this combined, I think there are a few characteristics that would define a strongly interactive system. Firstly, I think the level of interactivity should be “high”. In terms of the metaphors used in the text, that would mean strong listening, speaking, and thinking simultaneously. Secondly, adaptability needs to work both ways. The system should be able to adapt to the user and the user to the system. Thirdly, I think it’s important that the user feel in control, rather than fighting the system, which is what happens when ‘interactive’ systems are built without proper understanding of what interactivity is. Finally, and this may sound vague, but a system is “strongly interactive” when the user’s “interaction” is so absorbing that it makes them not want to stop.  When the author brought up movies, it reminded me of the interactive story game apps that were popular a few years ago, where the user played a part in how the story moved forward. Maybe this is a “low” level of interaction, but it seemed to really have people hooked at the time. That said, I would agree with Crawford that interactivity is more of a spectrum, and it’s important to maintain its balance in artworks.

Through these ideas, I thought about how the user can have the chance to influence my p5js sketches. Maybe this could be through having a say in the color palette or the illustration style, or by having buttons that change the nature of the sketch completely. Maybe clicking on the canvas can add more of already existing elements, or cause different elements within the sketch to interact with each other. The possibilities are endless.

My Concept

I have a bunch of postcards stuck on the wall next to my bed. On Friday morning, this one caught my eye:

It immediately reminded me of Van Gogh’s paintings (and I think it’s meant to), and I decided that for this assignment I wanted to recreate one of his artworks using a different style. I chose his “Wheat Field with Cypresses” (“The Starry Night” is a tad bit overused), and sought to make it using tiny colored circles. Since for this assignment we had to use loops in some way, I knew I could create waves and spirals of dots to make the kind of “rolling” shapes Gogh used in his painting. I think more than the final result, what I wanted to emphasize in the artwork was the movement of the dots being generated and how that related to the windy, flowy effect in the original painting.

Code I’m proud of

function sky() {
  for (let i=0; i<6; i++){
    // generate circles for the current wave
    let waveY = currentWave * waveSpacing;
    if (waveY <= height * (2/3)) {
      
      // general formula of a wave
      // y = y_0 + sin(kx)*A
      let y = waveY + sin(x * frequency) * amplitude;
      let c = random(skyColors);

      // Store the circle 
      circles.push({x: x, y: y, color: c, wave: currentWave});
    }

    x += xIncrement;

    // Start the next wave after the current wave finishes
    if (x > width) {
      framesSinceLastWave++;

      if (framesSinceLastWave >= waveDelay) {
        currentWave++;
        x = 0;
        framesSinceLastWave = 0;

        // Fill two-thirds of the canvas with sky
        if (currentWave * waveSpacing > height * (2/3)) {
          skyFinished = true;
          stop();
        }
      }
    }
  }
}

I think this part was particularly fun (not really) because it forced me to go back to high-school physics and wave equations. I had to define constants like frequency, amplitude, and wave delay, and figure out their values through trial and error so that I get my desired shape, size, and speed of generation of the waves. There were a lot of new things I learnt through this assignment. For example, I had no idea how to make the trees. That’s when I discovered the beginShape() function, which lets me create any weird polygon I want. Then I realized that I had no idea how to generate the dots so that they stay inside the weird tree shape. Turns out there is some library that I can use for this, but after I decided that that was too much work, I found this code online https://editor.p5js.org/makio135/sketches/O9xQNN6Q  with a pointInPoly() function that was kind of similar to what I wanted. Using this along with Claude, I managed to have two functions that controlled the generation of dots only inside the tree shapes.

I had the most fun while picking out the colors for the different parts of the art piece. I simply used an online color picker (this one specifically) which let me upload the image of the painting, and would give me the hex code of whichever color I placed my cursor on. The hardest part was deciding the coordinates for every vertex of the tree polygons as well as the center points of the bushes and hills. It took a lot of trial and error.

Reflection

I think if I had more time, there are a lot of things I would like to try out with this artwork. For example, I would add an interactive aspect to it where the user could move their cursor around to temporarily jumble up the dots, but then they would float back to their original place and reform the painting. It would be very cool, but I guess complicated to implement as well. I would also like to do a better job in recreating the piece by adding more details, along with experimenting with other shapes beyond waves and spirals. Overall, I believe this assignment has really helped me appreciate how much planning and iteration goes into generative art. It wasn’t just about writing code that “worked,” but about understanding how mathematical ideas like waves or polygons could be translated into visual elements.

I was almost immediately confused as I started listening to Casey’s lecture. He mentioned that “order is what was brought by a God or Gods into the world.” I guess for a long time I assumed that humans were the ones trying to bring order into this chaotic world. But I just realized, it was only chaotic in our minds. All aspects of nature are, by themselves, so beautifully organized and fit together so perfectly; humans have only served to bring disorder. That’s also what makes this entire concept of “chance operations” interesting; if humans actually bring disorder to nature in the name of order, why are they trying to bring a sense of randomness into their art?

Looking at the various artworks Casey presented during his talk, I noticed that no artwork is truly completely random. Either they have some controlling criterion, for example, the artwork for which he stated, “putting the images wherever they wanted to be, with the constraint that they had to be at 90-degree angles”, or they appear to be random at the start and “order begins to emerge as they follow their behaviors”. That said, I don’t have a confident answer to what I feel is the optimum balance between total randomness and complete control, and I believe it’s a paradoxical statement for such artworks.

Casey provided the instructions for one of the pieces, which caught my eye:

Element 5

F2: Line

B1: Move in a straight line

B5: Enter from the opposite edge after moving off the surface

B6: Orient toward the direction of an Element that is touching

B7: Deviate from the current direction

I found it very interesting that it only took that one last step, and the ambiguity of the word ‘deviate’, to create the randomness in the artwork, because every other step is based on strict rules. 

In my work, I hope to incorporate random elements in the form of colors, shapes, and the way in which they interact with each other and the canvas. Particularly in this week’s assignment, I experimented with the randomness of colors. So while I did set my own array of colors that the program chooses from, the frequency with which the colors are chosen and where they are applied for each constituting element of the image are out of my control. For this artwork, I thought this was a nice balance between randomness and control, so that the final image still bears a certain resemblance to Van Gogh’s original piece, and yet comes out different every time.

My Concept

A self-portrait should show that part of you that makes you who you are, right? My concept was to depict myself ‘normally’, but when the user clicks on the canvas, they are shown a side of me that not many people know about. I am actually a HUGE ocean nerd: marine life, ocean sustainability, deep exploration, I’m a sucker for it all. Consequently, I also love diving!

So, clicking transports me with my diving gear under the water! My eye shape changes to depict how happy I am and I think the bubbles bubbling upwards is a cute touch.

Code I’m proud of

// bubbles
noStroke();
fill(255, 255, 255);
for (let b of bubbles) {
  ellipse(b.x, b.y, b.size);
  b.y -= b.speed;   // move bubble upward
  if (b.y < -20) {  // reset if off screen
    b.y = 145;
   }
}

I really like how I animated the bubbles to float upwards and out from the snorkel and continue to regenerate. I was already familiar to how to implement such a logic due to my previous coding experience, but it definitely took a bit of trial-and-error to figure out the initial placement, size, and speed of the bubbles.

 My Sketch

Reflection

For future improvement, I would really love to add a kind of gradient of different shades of blue to enhance the underwater effect. I also think it would be pretty cool to have more animations, such as tiny fishes swimming in the background (and maybe a shark).

I think this assignment was particularly fun because I got to use JavaScript in a different creative manner compared to what I am used to. I was able to see my idea come to life just through simple shapes and colors! Overall, this self-portrait is an expression of a space I really care about and hope to get other people to care about too. Help keep our oceans clean, thank you!