Assignment 2 — Fishes in Colors

Concept:
I wanted to create an animated visual effect this time. I was trying to represent the fluid nature of water and fishes by capturing the randomness. I have used HSB color mode for vibrant, holographic colors of the small circles that represent the fishes. The program generates 1000 points with random positions, sizes, colors, and movement angles. Each frame, draws these points as ellipses, creating a trail effect with a semi-transparent background. Points move based on their angles, occasionally changing direction, and wrap around the canvas edges. The color of each point gradually changes, creating a dynamic display.

Code:

let pointCount = 1000;
let shapes = [];

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 255); // Use HSB color mode for the holographic effect
  noStroke();

  // Create initial points with random positions and properties
  for (let i = 0; i < pointCount; i++) {
    shapes.push({
      position: createVector(random(width), random(height)),
      size: random(1, 5),
      color: color(random(255), 200, 255, 100), // Holographic color with some transparency
      angle: random(TWO_PI),
      speed: random(0.005, 0.03), // Speed of change
    });
  }
}

function draw() {
  background(0, 0, 0, 25); // Semi-transparent background for a trail effect

  // Draw each point and update properties
  shapes.forEach((shape) => {
    fill(shape.color);
    ellipse(shape.position.x, shape.position.y, shape.size);

    // Update position
    shape.position.x += cos(shape.angle) * 2;
    shape.position.y += sin(shape.angle) * 2;

    // Randomly change the movement angle
    if (random(1) < 0.05) {
      shape.angle += random(-0.5, 0.5);
    }

    // Wrap around the edges of the canvas
    if (shape.position.x > width) shape.position.x = 0;
    if (shape.position.x < 0) shape.position.x = width;
    if (shape.position.y > height) shape.position.y = 0;
    if (shape.position.y < 0) shape.position.y = height;

    // Update color
    shape.color = color(frameCount % 255, 200, 255, 100);
  });
}

Embedded Version:

Reflection and Improvement:

I am happy that it finally worked in the end because I was having a hard time wrapping around the edges of the canvas. In the future, I would like to ensure that the randomness is affected by the user interaction through the mouse or keyboard. Maybe also integrate some shapes, so that the small circles are affected by them and then place them in a transparent grid.