HW2: Generative Loop Art

Motivation

The motivation behind this project was to create a simple generative artwork using the p5.js library. The goal was to combine elements of randomization, user interaction, and geometric shapes to create a unique and visually interesting piece.

Concept

The concept behind the artwork is a grid pattern of randomly colored rectangles and ellipses. The user can interact with the artwork by moving the mouse, causing the size of the shapes and the stroke weight of the outlines to change dynamically. This adds a layer of unpredictability to the artwork, making each viewing experience unique. Moving the mouse across the x axis changes the size of the shapes, while moving the mouse across the y axis, changes the strokewidth.

Process of Implementation

The process of implementing the generative art can be broken down into two primary steps:

Generating the grid pattern of shapes in the draw() function:

function draw() {
  // nested for loops to create a grid pattern
  for (let i = 0; i < width; i += s) { 
    for (let j = 0; j < height; j += s) {
      // randomize the color and shape of each square
      fill(random(255), random(255), random(255)); // randomly generate a color for each shape
      if (random(1) > 0.5) { // randomly choose between a rectangle or an ellipse
        rect(i, j, s, s); // draw a rectangle
      } else {
        ellipse(i + s / 2, j + s / 2, s, s); // draw an ellipse
      }
    }
  }
}

Implement the mouseMoved() function to add user interaction:

// function to change the size and stroke weight of the squares on mouse movement
function mouseMoved() {
  s = map(mouseX, 0, width, 10, 50); // map the size of the shapes to the x position of the mouse
  strokeW = map(mouseY, 0, height, 1, 10); // map the stroke weight to the y position of the mouse
  strokeWeight(strokeW); // update the stroke weight with the new mapped value
}

Challenges

One challenge in this project was understanding the map() function and how it works to map one range of values to another. It was important to understand the arguments passed to the map() function and how it affected the output.

Another challenge was getting the grid pattern of shapes to line up correctly, as the size of each shape needed to be adjusted to create a seamless grid.

Reflections

This project was a great opportunity to learn about generative art and how p5.js can be used to create unique and visually interesting pieces by using loops. By implementing randomization, user interaction, and geometric shapes, I was able to create a simple but impactful generative art piece.

Link to p5 sketch: https://editor.p5js.org/swostikpati/full/3W7yvJ3yo