Assignment 1

Concept

For this assignment, just like the description suggested, I combined:

• • LIST 1: Random walker with motion experimentation
  • LIST 2: Walking through RGB color space

My sketch features a simple random walker that moves in four directions (up, down, left, right) across the canvas. Instead of being a fixed color, the walker’s color is determined by its position in space, creating a direct mapping between XY coordinates and RGB color values:

Red channel = X position (left edge = 0, right edge = 255)
Green channel = Y position (top edge = 0, bottom edge = 255)
Blue channel = Distance from center (center = 255, edges = 0)

As the walker moves randomly, it paints a trail of colors that visualize its journey through both physical space and color space simultaneously.

Code Highlight

Throughout my code, I am most proud of this snippet where I map the walker’s position to RGB values.

// Map position to RGB color
let r = map(x, 0, width, 0, 255);
let g = map(y, 0, height, 0, 255);

// Blue based on distance from center
let centerX = width / 2;
let centerY = height / 2;
let distFromCenter = dist(x, y, centerX, centerY);
let maximumDist = dist(0, 0, centerX, centerY);  // Changed from maxDist
let b = map(distFromCenter, 0, maximumDist, 255, 0);

// Set the color and draw
fill(r, g, b);
noStroke();
circle(x, y, 10);

In the code, the map() function translates position into color. The blue channel calculation is especially interesting because it uses the Pythagorean distance from the center, creating a radial gradient effect. When the walker is near the center, it’s more blue; when it’s at the edges, it loses blue and becomes more red/green/yellow.

Embedded Sketch

Reflection and Future Work

This project was a great way to visualize the connection between position and color. Watching the walker create organic, colorful patterns by pure randomness is mesmerizing! The RGB color space creates interesting gradients naturally – reds in the upper right, greens in the lower right, blues in the center. Ideas for future improvements:

1. Add diagonal movement – Currently limited to 4 directions; adding diagonals would create smoother, more varied paths.
2. Implement Gaussian random walk – Instead of equal probability in all directions, use a normal distribution for step sizes to create more organic movement patterns.
3. Try HSB color mode – Experiment with Hue-Saturation-Brightness instead of RGB for different color relationships.
4. Multiple walkers – Have several walkers moving simultaneously, each leaving their own colored trail.
5. Fade trail effect – Instead of permanent marks, make older circles fade away over time for a ghostly trail effect.
6. Add 50% mouse attraction – Implement the probability-based walker that has a 50% chance of moving toward the mouse (combining two LIST 1 options).
7. Step size control – Add a slider to adjust how fast/far the walker moves.