Week 3: Generative Art

Concept

One of my goals for this week’s project was to incorporate live movement as my previous sketches were all static. I also found Tuesday’s in-class exercise on bouncing balls and collisions interesting, so I wanted to incorporate collision into my sketch as well.

I got inspiration from Casey Reas’ CENTURY piece to work with lines– specifically exploring randomness in lines in terms of coordinates, speed and strokes.

When I think of lines in classical art, Piet Mondrian’s artworks are the first that come to my mind. I decided to take ideas from both of these artworks, each representing the digital and physical world, to create my generative artwork piece.

Process

This sketch consists of a class for drawing a moving line across the canvas. Each line is randomly sized (length & stroke weight), located and colored; it can either move towards the top or the bottom of the screen and at randomly selected speeds. Each line moves across the canvas and when it goes out of the canvas bounds, it wraps around and appears again from where it originally started. When two lines intersect, the color of both temporarily changes to white. The colors used in the sketch are inspired by Mondrian’s color palette and a black border is drawn around the canvas to give the sketch a more traditional art feeling.

Most of the line attributes (speed, stroke weight, line count etc) are chosen randomly within two sets of boundaries and I plugged in various different values for each bound before settling on certain values to ensure that the movements are not too quick and pleasant to the eyes.

Challenges

Detecting the intersection between two lines was the trickiest part of this project and had to get mathematical. I referred to a StackOverflow comment to write the function to check for intersection between two lines, which I later found was based on Cramer’s rule.

intersects(other) {
  // function to detect line-line intersection
  // reference: https://stackoverflow.com/a/55598451
  let det = (this.x2 - this.x1) * (other.y2 - other.y1) - (this.y2 - this.y1) * (other.x2 - other.x1);
  
  // lines are parallel so will never intersect
  if (det === 0) return false;

  let s = ((other.x1 - this.x1) * (other.y2 - other.y1) - (other.y1 - this.y1) * (other.x2 - other.x1)) / det;
  let t = ((other.x1 - this.x1) * (this.y2 - this.y1) - (other.y1 - this.y1) * (this.x2 - this.x1)) / det;
  
  // intersection occurs if both s and t are in the range (0, 1)
  return s >= 0 && s <= 1 && t >= 0 && t <= 1;
}

The update function for moving the lines according to their gradients and wrapping them around the canvas was also a bit time-consuming as the code had to change depending on which direction the lines were going. When it got confusing, I did lots of testing with slowed up line speeds to debug and figure out why things were drawing incorrectly.

update() {
  this.x1 += this.speed;
  this.x2 += this.speed;
  
  this.y1 = this.computeY(this.x1, this.initial_x1, this.initial_y1);
  this.y2 = this.computeY(this.x2, this.initial_x2, this.initial_y2);
  
  if (this.go_up) {
    // check if the line has went beyond the top or left boundary
    if (this.x2 <= 0 || this.y2 <= 0) {
      // reset the line so that it appears from the bottom
      this.x1 = width;
      this.y1 = this.computeY(this.x1, this.initial_x1, this.initial_y1);
      this.x2 = this.x1 + this.delta_x;
      this.y2 = this.y2 + this.delta_y;
    }
  
  } else {
    // check if the line has went beyond the bottom or right boundary
    if (this.x1 >= width || this.y1 >= height) {
      // reset the line so that it appears from the top
      this.x2 = 0;
      this.y2 = this.computeY(this.x2, this.initial_x2, this.initial_y2);
      this.x1 = this.x2 - this.delta_x;
      this.y1 = this.y2 - this.delta_y;
    }
  }
}

Reflections & Improvements for Future Work

I spent a considerable amount of time deciding on this week’s project and struggled to settle on one, but once I found an artwork I liked, I was able to seek and find more sources of inspiration. The actual implementation process, though with some challenges, went considerably smoothly once the idea was set, thanks to StackOverflow and repeated slow testing. In the next assignments, I hope to continue seeking inspiration from not only the digital world, but also from the physical world and from what I see with my eyes everyday.