This sketch was inspired by Quantum Cloud by Antoney Gormley
Sources utilized: (514) Coding Challenge #112: 3D Rendering with Rotation and Projection – YouTube
Concept
I was talking to my friend Youssab William about decision trees, specifically binary decision trees and the thought lingered in my head for a little bit. Then when I started reading the assignment prompt, I read about the 3D walk and say Quantum Cloud. I got an idea of merging the logarithmic growth of binary trees with the random walk on a 3D plane in quadrantal angles. This is where QU4NT0M W4LK was born.
Also, im a big big fan of glitching and RGB offsets as a motion designer and video editor. I include RGB offsets (appropriately) in almost all my projects, so I also loved to add it here.
function draw() {
background(255);
// track rotation changes from dragging
if (mouseIsPressed) {
let deltaX = mouseX - pmouseX; // built in coords
let deltaY = mouseY - pmouseY;
rotY += deltaX * 0.01; // have to manually track rotation cus its not built in
rotX += deltaY * 0.01;
}
// calculate rotation delta for RGB offset
let deltaRotX = rotX - prevRotX;
let deltaRotY = rotY - prevRotY;
let deltaZoom = zoom - prevZoom;
// update RGB offsets based on camera rotation and zoom
blueOffset = lerp(blueOffset, deltaRotY * 500, 0.15); // horizontal drag -> Blue
greenOffset = lerp(greenOffset, deltaRotX * 500, 0.15); // vertical drag -> Green
redOffset = lerp(redOffset, deltaZoom * 100, 0.15); // zoom -> Red
// decay offsets back to zero when not moving
blueOffset *= 0.92;
greenOffset *= 0.92;
redOffset *= 0.92;
// store previous values
prevRotX = rotX;
prevRotY = rotY;
prevZoom = zoom;
// apply camera transformations
scale(zoom);
rotateX(rotX);
rotateY(rotY);
I am particularly proud of this segment of the code as everything else was something I have done before. But this camera movement was something I thought was extremely complex. What motivated me to embark on this idea is my recent project in motion graphics with camera movements that I genuinely was proud of, so I wanted to make camera movements I’m proud of using P5 as well. Both instances were something I was dreading before but once I started working on them they turned out to be much much simpler than I thought.
Future considerations would optimization. because of the fast growth of the segments, I had to decrease the number of segments. it looks much cooler with more segments, but I assume, i dont know yet, but I assume that the RGB channels are always drawn which technically *3’s the amount of processing. Another thing I wanna try but i’m dreading ins implementing dynamic 3d lighting with shadows and highlights, but maybe in future assignments.