Assignment 2 – Afra Binjerais

For this assignment, I drew inspiration from Bill Kolomjec’s artwork titled “Random Squares.” My initial concept involved an interactive scenario where squares responded dynamically to the mouse’s location, a concept realized in my first sketch.

Wanting to add an extra layer of complexity, I decided to explore the interaction with an object. This led me to create another sketch where the interactive background adjusted its size following the object’s location such as a ball, but I managed to do so without the ball, providing a unique twist to the overall concept.

As I continued to refine my project, I experimented with colors and various sizes. Introducing random markings within the framework, I enhanced the visual appeal of the interactive background. Through this exploration, I gained a deeper understanding of P5js, marking a notable achievement in my creative journey.

let x = 100;
let y = 100;
let dx = 2;
let dy = 3;
let length = [];
let scl = 0.1;

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);
  
//   fill(255);
//   ellipse(x, y, 30, 30);

  x = x + dx;
  y = y + dy;
  if (x > width || x < 0) {
    dx = dx * -1;
  }
  if (y > height || y < 0) {
    dy = dy * -1;
  }

  for (let i = 0; i < 600; i += 20) {
    for (let j = 0; j < 600; j += 20) {
      let distance = dist(x, y, i + 7.5, j + 7.5); // Center of the rectangle
      
      let rectSize = map(distance, 0, width, 5, 100); // Adjust these values for the desired size range

      fill(i / 3, j / 3, 300);
      rect(i, j, rectSize, rectSize);