https://editor.p5js.org/Yurriii/sketches/MZ2Df3g3h

What did you originally intend to create?

I originally intended to build a 3D visualization where a shape (like a sphere or cone) would move randomly in three dimensions. My goal was to see an evolving trail of shapes that I could rotate around, making it feel dynamic and immersive.

Narrate the process of creating your sketch.

1. Starting with 2D Concepts

   I first looked at random walker examples in 2D—where a point moves on the canvas by taking small random steps. This gave me the idea of storing each new position in an array, so I could draw multiple shapes from previous locations and create a “trail.”

2. Transitioning to 3D

   Next, I switched to WEBGL mode in p5.js and used orbitControl() to allow easy rotation of the scene. This immediately made the sketch feel more interactive and obviously 3D.

3. Experimenting with Shapes and Sizes

   Initially, I used small spheres that moved around, but then I started experimenting with different sizes. At one point, I tried extremely large spheres (sphere(1000)) to fill the screen, which created interesting visuals. I also tried box(), cone(), or torus() just to see the different geometry effects.

4. Adjusting Color and Lighting

   This was a turning point. I’d used fill(hueVal, 80, 80) to color shapes in 2D sketches, but in a 3D environment with lighting, fill() alone doesn’t always produce visible colors. After some trial and error (and reading documentation/watching videos), I discovered that using material functions like emissiveMaterial() or ambientMaterial() was needed for better color rendering with 3D lights in p5.js.

What resources and examples did you draw on to create your sketch? What was most helpful / least helpful from this week’s materials?

• Daniel Shiffman’s “Coding Train” YouTube Videos

https://www.youtube.com/watch?v=k2FguXvqp60

• p5.js ReferenceI also used the p5.js reference for quick lookups of functions like createVector(), emissiveMaterial(), and directionalLight().
• Most Helpful: The explanation of how emissiveMaterial(), ambientMaterial(), and specularMaterial() differ, and how lighting interacts with them.

What problems/discoveries did you encounter along the way?

Color Issue with 3D and Lights

• Problem: I tried fill() for coloring spheres in 3D, but they mostly stayed dark or default colored (often showing up as red or gray). 3D lighting, fill() alone doesn’t automatically display the intended color—shapes need a material that responds to or emits light. Specifically:
• emissiveMaterial(hueVal, 80, 80) makes the shape glow with that color, so it’s not entirely reliant on the light source.