NOC Week 1: Random Walker

// NOTES ON MOVEMENT
// rotate around the look-at point (it will feel like the object is moving)

// mouse: left-click and drag
// touch: one-finger drag
// pan the scene

// mouse: middle-click and drag 
// touch: two-finger drag
// zoom out/in

// mouse: right-click drag down/up
// touch: pinch/spread
// reset to the starting state

// mouse: double-click
// touch: double-tap

//SLIDERS
//1st slider on the left changes color variation
//2nd Slider changes cube opacity

The first of our Nature of Code class we had to try to make a random walker. I was really interested in trying to make a random walker that would exist and move around in simulated three-dimensional space. I was initially inspired by the old Windows pipes screensaver, and I knew that many people have recreated them in the past, so I set out to try something similar using p5.js and you can see what I came up with above.

What Didn't Work:

I didn't have any trouble necessarily incorporating randomness into the movement of the 3d cube shapes. Where I ran into trouble, however was in working with the lighting, background colors and camera movements in p5.js. I was have a lot of trouble getting the camera and background color and lighting to work they way I wanted it to in HSB mode. I ended up porting my sketch over the OpenProcessing because they had a library called "easycam" that sets up the camera movements for you p5.js and allows for easy, intuitive mouse and touch controls.

For some reason when changing the background to white using HSB colors, it makes the lighting color cyan. But when I change the lighting color white, the cubes fail to show up at all. I just need to spend a bit more time understand how light reflects and affects colored 3d objects in p5.js. I also didn't establish a default material, so that may be contributing to the issue.

I originally wanted to have many more cubes moving throughout the sketch, similar to the pipes but I felt it might be a bit overwhelming with color and opacity thrown into the mix so I decided to keep it to just one cube walking about.

What Worked:

I'm pretty impressed with how well p5.js can render transparency in the 3D objects because I really wanted to play around with that. I knew that I wasn't able to program a self-avoiding walker, and knew that the cubes would overlap at times. I was hoping I could show that in the sketch by adding transparency so that stacked cubes would show up as more opaque, which is a better visualization of the cube movement.

Having the cyan lighting issue actually gave the cubes a nice pastel effect when translucent, which was honestly a happy accident and I kept it for the final sketch.

What I Learned

This was a great refresher for an object oriented approach to programming, although I still feel quite rusty with p5.js as a whole and had to use the reference to look up the syntax for some functions, especially colorMode, which I think I'm even more confused about than I was before. I came up with a few other variations/ideas for random walkers in the future and would like to explore this idea more.

Below are some of the preliminary sketches when I was working on this one. The first sketch was trying to see how I could work with 2D points in a 3D space - which has an interesting effect, but not exactly what I was going for. The second is the first iteration of the final walker sketch.