Month: February 2023

The Concept

My overall idea for this assignment was to make something futuristic with a robotic design. I started off with my color scheme of black and gold and went from there. I also wanted the drawing to have a certain aesthetic  where the image would appear very sharp but also get its visual appeal from the mathematics involved in the drawing process.

The Sketch

Link for sketch: https://editor.p5js.org/mhh410/full/v0Wqz7Ww6

Most of the code uses a combination of for loops and lines in order to create this effect.

To add more animation to the sketch, I also wanted to implement a way to make the color constantly change, starting from golden and then getting darker and darker. This is done by setting a color array globally, and then decrementing the numerical value of the elements of the color array at the end of each draw loop.

When the elements in the array drop to zero, the array values are reset and the sketch turns back to golden.

Improvement

One of the main elements that I would want to improve is the color shifting behavior of the sketch. I was expecting that the color would consistently change, as the color changes at the end of the draw loop, but as the sketch runs the performance of the sketch itself deprecates. Perhaps all the lines make it a heavy sketch to run, and the draw loop itself isn’t running at a consistent speed. I have added print statements at the end to test this. In the beginning, the color value drops by about 20-30 points by the time the print statement runs, but this consistently drops as the sketch keeps running and towards the end it slows down to just around 2-3 points per every print statement. At this point, the browser begins to lag heavily. I tried playing around with the frame rate but nothing really fixed this issue.

Concept

My art piece is a collection of white lines and squares on a black background. The lines and squares move around erratically. It was inspired by the movement of molecules in real life: quick, erratic, random.

Code highlight

I’d like to highlight my draw function.

function draw() {
  background(0, 0, 0, 130);
  
  // Update movers and draw them.
  for (let mover of movers) {
    // Add a line to the end of the mover.
    addLine(mover);
    
    // If the mover has more lines than allowed, remove the first line.
    if (mover.length > MOVER_LINE_COUNT) {
      removeLine(mover);
    }

    // Draw all lines.
    for (let l of mover) {
      line(l[0], l[1], l[2], l[3]);
    }
  }
  
  // Update squares and draw them.
  for (let square of squares) {
    moveSquare(square);
    rect(square[0], square[1], square[2], square[2]);
  }
}

Although the overall logic of my code is the most complex thing I’ve written so far in this course, the draw function, where everything actually happens, is very simple and straightforward. This is because I used functions (e.g. addLine, removeLine, moveSquare) to isolate unrelated, functional pieces of code.

The sketch

Reflection

I’m fairly happy with the final sketch. I went for minimalism and an old school digital style, so I only used black and white colors. Potential additions can be more shapes, for example circles or triangles. Another interesting addition could be to implement a simple physics system, with collision detection. This way, one could make the shapes bounce off each other.