Week 2: Artwork

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.