Week 3 – GeneraTime (Generative)Art

Concept

I drew inspiration for this project from observing a wall clock. I saw an opportunity to apply what I had learned about arrays and classes by representing the minutes, hours, and clock arms as objects, classes, and arrays. However, I wanted to create something more dynamic and artistic. While searching online for inspiration, I came across several visuals that influenced my design.

Additionally, I used this project as an opportunity to improve my skills in color gradients. Implementing the desired background gradient took time, but it was a rewarding learning experience. One of the challenges I faced was not saving my work frequently, leading to lost progress and the need to start over. Another difficulty was choosing and balancing colors effectively.

Code Highlights

Below are some of the key sections of my code that I am particularly proud of, along with a brief explanation of their functionality:

class ClockArms {
  constructor() {
    this.p = 0;
    this.q = 0;
    this.angle = 0;
  }

  centreCircle() {
    fill(255, 0, 0);
    noStroke();
    circle(this.p, this.q, 30);
  }

  longarm() {
    let armLength = 150;
    let t = this.p + armLength * cos(this.angle);
    let s = this.q + armLength * sin(this.angle);
    let m = this.q + r * cos(this.angle);
    let n = this.q + r * sin(this.angle);
    stroke(255);
    strokeWeight(4);
    line(this.p, this.q, t, s);
    fill(255);
    noStroke();
    circle(m, n, 10);
  }

  update() {
    this.angle = map(frameCount % 360, 0, 360, 0, TWO_PI);
  }

In the code above, I created a class that implements the functionality of a clock, including the movement of the clock hand.

for (let i = 0; i < drawnMarkers.length; i++) {
  smallCircles(myCircles[drawnMarkers[i]].x, myCircles[drawnMarkers[i]].y);
}

In the code above, I used arrays to display the hour markers one by one.

Reflection and Future Improvements

Moving forward, I plan to utilize Perlin noise to create more visually interesting sketches. I also considered making this an actual working clock that tells time, but for now, that wasn’t my MVP (and I ran out of time!). Additionally, I aim to learn how to efficiently manage color schemes for accessibility, ensuring that my designs are not only visually appealing but also usable by a wider audience. By continuously experimenting with different color effects and combinations

Click to change the background image!