Author: Ivan Sidorenko

The Concept

I created an interactive implementation of Conway’s Game of Life with customizable rules and real-time editing capabilities. What makes this version special is its focus on experimentation and accessibility – users can modify the simulation rules while it’s running or pause to edit patterns directly. The interface is designed to be intuitive while offering deep customization options.

Code Highlight

I’m particularly proud of the updateGrid() function, which handles the core cellular automaton logic:

This code is elegant in its simplicity while being highly flexible. Instead of hardcoding Conway’s traditional rules (birth on 3 neighbors, survival on 2 or 3), it uses variables for birth and survival conditions. This allows users to experiment with different rule sets and discover new patterns. The clean separation between rule checking and grid updating also makes it easy to modify or extend the behavior.

The Sketch

The sketch provides a full-featured cellular automata playground with:

• Real-time rule modification
• Custom color selection
• Variable brush sizes for drawing
• Grid visualization when paused
• Clear and random pattern generation
• A reset button to restore default settings
• Numerical feedback for all parameters

Reflections and Future Improvements

Working on this project revealed several interesting possibilities for future enhancements:

1. Pattern Library
   • Add ability to save and load interesting patterns
   • Include a collection of classic Game of Life patterns (gliders, spaceships, etc.)
   • Allow users to share patterns with others
2. Enhanced Visualization
   • Add cell age visualization (cells could change color based on how long they’ve been alive)
   • Include heat maps showing areas of high activity
   • Add trail effects to show pattern movement
3. Extended Controls
   • Add speed control for the simulation
   • Implement step-by-step mode for analyzing pattern evolution
   • Add undo/redo functionality for drawing
   • Allow custom grid sizes
4. Analysis Features
   • Add population graphs showing cell count over time
   • Include pattern detection to identify common structures
   • Add statistics about pattern stability and periodicity

The current implementation provides a solid foundation for exploring cellular automata, but there’s still much room for expansion. The modular design makes it easy to add these features incrementally while maintaining the core functionality.

The most interesting potential improvement would be adding pattern analysis tools. Being able to track population changes and identify stable structures could help users understand how different rules affect pattern evolution. This could make the sketch not just a creative tool, but also a valuable educational resource for studying emergent behavior in cellular automata.

For my latest coding project, I combined the p5.js and Matter.js libraries to create an interactive game where the player controls a windmill to catch falling particles. The objective is simple yet addictive: catch as many particles in the moving goal as possible, aiming to reach 30 points before the timer runs out. The game features an interactive timer, a scoring system, and a dynamic win screen that displays the final time. Let’s take a closer look at the concept, code, and potential future improvements.

Concept

This project was inspired by classic arcade games, where the focus is on timing and precision. I wanted to create something that required player control and had a clear objective, so I added a rotating windmill controlled by the arrow keys and a particle-spawning system. The goal moves across the bottom of the screen, and every particle that lands inside scores a point. If the player scores 20 points, they win the game! After winning, the player can restart the game by clicking anywhere on the screen.

Embedded Sketch

https://editor.p5js.org/is2431/sketches/oE836dc9v

Reflection and Future Work

Reflecting on the process, I enjoyed exploring how Matter.js could be used to create physics-based interactions in a p5.js sketch. The windmill mechanism, in particular, felt satisfying to code as it introduced realistic physics to the player’s actions. However, one challenge was balancing interactivity and performance, especially when handling a high number of particles on-screen.

Ideas for Future Improvements

For future iterations, I’d like to explore the following improvements:

1. Enhanced Visuals: Adding particle effects or animations when a particle hits the goal could add visual excitement to the game.
2. Power-Ups and Obstacles: Introducing occasional power-ups that temporarily increase the windmill’s rotation speed or make the particles larger, as well as obstacles that reduce the score, could add depth and strategy.
3. Difficulty Levels: Implementing levels with progressively faster-moving goals or smaller particle sizes would increase the challenge and extend playability.
4. Mobile Compatibility: Adapting the game for mobile by adding touch-based controls for the windmill could open it up to more users.

I hope you enjoyed this walkthrough of my proje

The Concept

I wanted to create a system that goes beyond traditional boid flocking behavior. The goal was to craft a visual experience that tells a story through motion, tension, and release. The system transitions between free-flowing states and complex mathematical formations, all while maintaining the organic feel of natural flocking behavior.

The particles move through several distinct phases:

1. Free-flowing exploration
2. Lissajous curve formations
3. Logarithmic spiral patterns
4. Mandala-like circular arrangements
5. A parametric heart shape with controlled chaos

Each phase has its own character, with carefully tuned parameters for alignment, cohesion, and separation that give it a unique feel while maintaining visual coherence with the whole piece.

Technical Highlight

One of the most challenging aspects was creating smooth transitions when particles wrap around screen edges. Traditional edge wrapping creates jarring visual artifacts – straight lines cutting across the screen. The solution involves calculating the closest position between two particles, considering wrapped positions around screen edges. This ensures smooth flocking behavior even when some particles are on opposite sides of the screen. When combined with history clearing during wrapping, it eliminates the visual artifacts that often plague edge-wrapping systems.

Color and Visual Design

The visual design draws inspiration from natural phenomena – deep sea bioluminescence, sunset plasma, and aurora borealis. Each color scheme transitions smoothly into the next, creating a constantly evolving palette that complements the movement patterns.

The particle trails add a sense of history to the motion, creating organic flowing lines that help viewers understand the system’s evolution. The trail length and opacity are carefully tuned to create a balance between showing motion history and maintaining visual clarity.

Reflections and Future Work

While I’m pleased with the current state of the project, there are several exciting directions for future development:

1. 3D Extensions: Expanding the system into three dimensions would open up possibilities for more complex formations and viewpoint changes.
2. Interactive Elements: Adding user interaction through mouse movement or touch could create interesting disruptions in the flocking patterns.
3. Performance Optimization: While the current system handles 150 particles smoothly, optimizing the spatial partitioning could allow for thousands of particles, creating even more complex emergent patterns.

The most interesting aspect of this project has been finding the sweet spot between chaos and order – allowing enough randomness to keep the system feeling organic while maintaining the mathematical beauty of the formations. It’s a delicate balance that mirrors many natural systems, where simple rules give rise to complex, beautiful behaviors.

Project Concept and Design

The goal of this project was to create an interactive Voronoi diagram that responds dynamically to user input and produces aesthetically compelling outputs by adding generative noise. The idea stemmed from the desire to visualize Voronoi patterns, which are generated by partitioning a canvas into regions based on the distance to a set of given points. Each point acts as a “cell center,” and the area around it forms its own unique region.

The primary objectives of the project were to:

1. Develop an interactive tool that allows users to generate and explore Voronoi diagrams.
2. Implement different visual variations using color noise and dynamic borders.
3. Introduce a mechanism for rendering high-quality SVG exports, so users can save and share their creations.

https://photos.app.goo.gl/9BCq82kGNhyzQprz9

Click the screen to put down a cell. WARNING: Cell generation takes time.

Key Components and Design Decisions

1. Concept of Voronoi Diagrams: Voronoi diagrams divide a plane into cells based on the distance to a set of points. Each point is the “seed” of a cell, and the cell comprises all the points closer to that seed than to any other. By using the Euclidean distance between each point on the canvas and each seed, I determined which cell a given pixel belonged to. This was implemented in the code using nested loops iterating over every pixel on the canvas.
2. User Interactivity: To make the program interactive, I incorporated mouse-based interaction. Users can click anywhere on the canvas to add new cell centers, which dynamically redraws the entire Voronoi diagram. This way, users can create and explore different patterns based on the arrangement of cell centers.
3. Generative Art Techniques: Instead of filling each Voronoi cell with a solid color, I wanted to experiment with visual noise to give a more organic feel. I used Perlin noise (noise()) to create outlines reminiscent of a height map. This produces a grainy texture that adds depth and uniqueness to each cell while retaining the overall Voronoi structure.
4. Border Detection: One of the most critical visual elements in Voronoi diagrams is the border between cells. I implemented a pixel-based edge detection by comparing each pixel’s color with its right and lower neighbors. If the colors differed, it indicated a boundary, and I set that pixel’s color to black to create crisp, clear borders.

Project Development and Challenges

1. Implementing Voronoi Calculations Efficiently: The first major hurdle was the efficiency of the Voronoi generation. Each pixel needs to be classified based on its distance to all cell centers, which scales poorly as more cells are added. I attempted optimizations, such as limiting the range of cells to check based on a maximum radius, but these did not yield significant performance improvements.
2. Handling Color Transitions with Noise: Initially, I experimented with applying noise to the entire canvas indiscriminately, but this made it difficult to distinguish cell boundaries. I resolved this by using a lower noise scale and blending the cell color with a base color (white) to reduce visual clutter while retaining a natural texture.
3. Anti-Aliasing and Edge Smoothing: A key issue was achieving smooth edges, especially along cell borders. I attempted to implement anti-aliasing by blending pixel colors based on their distance to the border, but this proved difficult within p5.js’s pixel-based drawing environment. Ultimately, I increased the pixelDensity() to minimize aliasing artifacts.

The Most Complex and Frightening Part

The most daunting part of this project was optimizing the Voronoi generation algorithm. Due to the pixelwise nature of the computation, the performance dropped rapidly as the number of cells increased. To minimize this risk, I conducted experiments with various distance calculation optimizations, such as bounding box checks and region partitioning, but none provided a breakthrough solution. Ultimately, I accepted that the current implementation, while not perfectly optimized, is still effective for typical canvas sizes and cell counts.

What I Would Do Differently

If I had more time, I would:

1. Implement a more efficient Voronoi generation using a Fortune’s Algorithm, which scales better than pixel-based methods.
2. Experiment with different visualizations, such as using curves or gradient fills for cell interiors.
3. Create a more advanced edge detection algorithm that produces smoother, anti-aliased borders without compromising on performance.

Final Thoughts

This project pushed my understanding of generative art and computational geometry. By exploring different variations and solving various challenges, I was able to produce a compelling, interactive system that not only generates Voronoi diagrams but also serves as a tool for artistic exploration. Though there are areas for improvement, I am satisfied with the current state of the program and look forward to iterating on it further in the future.

https://editor.p5js.org/is2431/sketches/FM0-hjygj

Description of the Code

This p5.js sketch creates a 3D cube grid with a dynamic ripple effect. Each cube’s vertical position oscillates based on its distance from the center, while its color changes according to its depth (z coordinate). The concept is inspired by natural wave patterns, where the ripple effect imitates waves traveling through the surface, and color gradients add depth perception to the 3D space. The visual result is a dynamic, pulsating cube, creating an engaging, hypnotic effect.

Functions and Organization

The program organizes the core logic in the draw() function, which is responsible for rendering each frame of the sketch. The ripple effect is achieved through a combination of sin() and dist() functions to compute the oscillation offsets, and the color fill is managed by mapping the z values to RGB values.

Variable and Function Naming

• w stands for the width of each cube, ensuring the ripple and grid are proportional.
• rippleHeight controls the amplitude of the waves.
• cols and rows are used for calculating how many cubes fill the canvas based on the grid spacing.

Reflection and Future Improvements

I’m proud of how well the ripple effect integrates with the 3D rendering and color mapping. However, future improvements could involve adding user interactivity, allowing control over ripple speed, amplitude, or even camera rotation. Another potential idea could be integrating sound, where the ripple responds to external audio input or ambient sounds, enhancing the immersive experience.

The sketch could also evolve into more complex 3D shapes, expanding from simple cubes to spheres or even irregular polygons, to add variety and depth to the visual.

Concept and Inspiration:

Clifford attractors are fascinating mathematical objects that produce intricate patterns when iteratively calculated. I was inspired by the work of Paul Bourke who uses similar concepts to create mesmerizing visuals.

Code Breakdown:

class Attractor {
  constructor() {
    // Generate random parameters for the attractor equation
    this.a = random(-2, 2);
    this.b = random(-2, 2);
    this.c = random(0.5, 2);
    this.d = random(0.5, 2);
    this.pos = createVector(0, 0); // Initial position

    // Assign two random colors for interpolation
    this.color1 = color(random(255), random(255), random(255));
    this.color2 = color(random(255), random(255), random(255));
  }

  update() {
    // Calculate the next position based on the attractor equation
    let xNext = sin(this.a * this.pos.y) + this.c * cos(this.a * this.pos.x);
    let yNext = sin(this.b * this.pos.x) + this.d * cos(this.b * this.pos.y);
    this.pos.set(xNext, yNext);
  }

  show() {
    // Map the attractor's position to screen coordinates
    let xScreen = map(this.pos.x, -3, 3, 0, width);
    let yScreen = map(this.pos.y, -3, 3, 0, height);

    // Interpolate between the two colors based on position magnitude
    let lerpAmount = map(this.pos.mag(), 0, 5, 0, 1);
    let lerpedColor = lerpColor(this.color1, this.color2, lerpAmount);

    stroke(lerpedColor); // Set the stroke color
    point(xScreen, yScreen); // Draw a point at the calculated position
  }
}

let attractors = [];

function setup() {
  createCanvas(400, 400);
  background(220);

  // Create an array of attractors
  for (let i = 0; i < 5; i++) {
    attractors.push(new Attractor());
  }
}

function draw() {
  background(220, 10); // Fade the background slightly

  for (let attractor of attractors) {
    for (let i = 0; i < 100; i++) {
      attractor.update();
      attractor.show();
    }
  }
}

function mousePressed() {
  if (mouseButton === LEFT) {
    attractors = []; // Clear existing attractors
    for (let i = 0; i < 5; i++) {
      attractors.push(new Attractor());
    }
  }
}

Highlight:

I’m particularly proud of the show() function, which handles the color interpolation based on the attractor’s position. This creates a smooth transition between two randomly generated colors, adding depth and visual interest to the patterns.

Embedded Sketch: (click screen to render new art)

Reflection and Future Work:

This project was a fun exploration of generative art and p5.js.

Future improvements:

• User Interaction: Allow users to interact with the sketch by changing parameters or adding new attractors.

• Animation: Introduce animation to the attractors, making them move or change over time.

Problems Encountered:

• Visual Fidelity: Finding a good balance of colors was challenging. As well, when rendering, the images come out very grainy. I must experiment further to see if that can be improved

• Performance: With a large number of attractors, the sketch can become slow. I might explore optimization techniques to improve performance.

Overall, this project was a rewarding experience that allowed me to learn more about generative art and p5.js.

Works cited:

Clifford Attractors : r/p5js (reddit.com)

Clifford Attractors (paulbourke.net)

Concept:

I recently took on the challenge of simulating the motion of a falling feather in nature using p5.js. The goal was to go beyond a simple straight-down fall and imbue the feather with a sense of personality through its movement, all while controlling it solely through acceleration. I envisioned a feather that gently drifts and rocks side to side as it descends, mimicking the playful dance of a real feather caught in a gentle breeze.

Code Highlight:

One of the aspects I’m particularly proud of is how I implemented the rocking motion coupled with a horizontal boost:

// Apply wind force (horizontal acceleration) with Perlin noise and angle influence
let windDirection = noise(noiseOffset) * 2 - 1; // -1 to 1
featherAx = windForce * windDirection + abs(sin(featherAngle)) * 0.5 * windDirection;

This snippet shows how the feather’s horizontal acceleration (featherAx) is influenced not just by random wind (using Perlin noise) but also by its current angle (featherAngle). The abs(sin(featherAngle)) term provides a boost in the direction of the rotation, making the feather sway more pronouncedly as it rocks. This simple addition significantly enhances the visual appeal and realism of the motion.

Embedded Sketch:

Reflection and Future Work:

I’m quite pleased with how this simulation turned out. The feather’s motion feels natural and captures the essence of its lightness and susceptibility to air currents. However, there’s always room for improvement! Here are some ideas for future exploration:

• More Realistic Feather Shape: The current U-shape is a simplification. Implementing a more detailed feather shape, perhaps with multiple segments, could add visual interest.

• Interaction with Wind: It would be interesting to allow the user to interact with the wind, perhaps by blowing on the feather through a microphone or using the mouse to create gusts.

• 3D Simulation: Extending the simulation to 3D space could open up new possibilities for exploring the feather’s movement in a more immersive environment.

• Multiple Feathers: Simulating multiple feathers interacting with each other and the wind could create a mesmerizing visual experience.

Concept

The concept behind this code revolves around generating a dynamic and visually engaging animation using Bézier curves. Bézier curves, often used in computer graphics to model smooth curves, provide an ideal foundation for creating a path that an animated object can follow. In this program, a “walker” moves along a Bézier curve defined by a set of fluctuating control points. The movement along the curve is complemented by changing colors, creating a lively and evolving visual pattern. This approach allows for the exploration of procedural animation techniques, where randomness and mathematical functions are used to produce aesthetically pleasing, unpredictable outcomes.

Reflections for the Future

Looking forward, there are several enhancements and extensions that could be made to this project. One possible improvement is to introduce user interactivity, allowing viewers to influence the motion, control points, or colors in real-time. Another idea is to experiment with more complex curve types, such as cubic or quadratic Bézier curves, to see how they impact the animation’s aesthetics. Furthermore, adding sound that reacts to the movement or colors could create a multisensory experience, deepening the engagement with the artwork.

Flake’s introduction to “The Computational Beauty of Nature” really got me thinking about how we approach understanding the world around us. I’ve always been drawn to the reductionist approach, dissecting things down to their smallest parts to see how they work. But Flake’s argument for considering interactions and the emergent properties of complex systems is really compelling. The ant colony example is a perfect illustration – a single ant is pretty simple, but a whole colony exhibits incredibly sophisticated behaviors you wouldn’t predict just by studying individual ants.

I’m left with a lot of questions though. Flake mentions the “frugal” nature of the rules governing interactions – is there a way to quantify this frugality? And how exactly do we go about describing these interactions in a computational way? The idea of “nature’s program” is intriguing, but I wonder how far that metaphor can be stretched. What I found most interesting was the connection between computation and natural phenomena like fractals and chaos. It’s mind-blowing to think that simple iterative processes can generate such intricate and seemingly unpredictable patterns. I’m definitely looking forward to diving deeper into these topics in the following chapters.