https://editor.p5js.org/Yurriii/sketches/Xq-u2txvE

Interactive 3D Walker in p5.js

Concept

Building an Interactive 3D Walker in p5.js

For my latest p5.js project, I set out to create a dynamic “walker” that moves through a 3D space in a visually interesting way. My original intention was to explore dynamic acceleration—using Perlin noise to create a smooth, organic movement—and to integrate interactive controls so users could modify parameters on the fly.

The Concept

I began with a simple sketch where I stored positions as individual x, y, and z variables. Inspired by the idea of vector math, I refactored my code to use createVector() for positions, velocities, and accelerations. This not only simplified the code but also opened the door to more natural movement physics. The walker’s acceleration was determined by Perlin noise, which allowed for a “random acceleration walk” that wasn’t entirely erratic but instead had an appealing, fluid quality.

The Process

1. Refactoring with Vectors:

   I started by converting my original x, y, and z variables into p5.js vectors. This change made it easier to apply operations like addition, scaling, and limiting velocity, which are common in physics simulations.

2. Dynamic Acceleration:

   I implemented dynamic acceleration using Perlin noise. By mapping the noise output to a configurable acceleration range, the walker now has a smooth and natural wandering behavior. I experimented with different noise scales until I found a setting that produced the desired effect.

3. Creature Design:

   Drawing inspiration from Zannah Marsh’s creature design guide, I added a simple creature-like appearance to the walker. The design includes a body, head, and eyes—elements that lend character to the moving object.

4. Interactivity with Sliders:

   To allow real-time control over key parameters, I added several sliders. These sliders adjust:

   • Acceleration Range: How strong the acceleration can be.
   • Velocity Limit: The maximum speed of the walker.
   • Noise Scale: How quickly the Perlin noise changes.
   • Trail Length: How many previous positions are displayed as a visual trail.

   I also ensured that the slider labels are white to stand out against the dark background, and I removed the stroke from all shapes for a cleaner look.

Resources and Inspirations

• The Nature of Code:

  Daniel Shiffman’s work on physics-based animation and vector math was invaluable. The examples in the book provided clear insights into how to implement natural movement using vectors.

• Zannah Marsh’s Creature Design:

  Her guide helped me think creatively about how to design a creature in code. I appreciated the balance between functionality and aesthetics in her work.

• p5.js Examples and Documentation:

  The interactive examples on the p5.js website and the extensive documentation helped me figure out details like positioning sliders and configuring the WEBGL renderer.

Challenges and Discoveries

• Integrating 3D and UI:

  One challenge was managing the layout in a WEBGL environment. Positioning the sliders outside the 3D canvas so they remained readable required some experimentation with p5.js’s DOM functions.