xxxxxxxxxx
let renderTarget;
const SEGMENTS = 16;
let timeOffsets = new Array(SEGMENTS).fill(0);
function setup() {
createCanvas(640, 640, WEBGL);
perspective(PI / 3.0, width / height, 0.1, 5000);
renderTarget = createGraphics(640, 640, WEBGL);
renderTarget.normalMaterial();
}
function draw() {
// Clicking with the mouse stores values into the offset table
if (mouseIsPressed) {
const segment = int(mouseY / height * SEGMENTS);
timeOffsets[segment] = (mouseX - width / 2) * 5 / 1000;
}
// Render scene as a series of slices, each with it's own offset from base time
const baseTime = millis() / 1000;
for (let i = 0; i < SEGMENTS; i++) {
const time = baseTime + timeOffsets[i];
const y0 = width / SEGMENTS * i;
const y1 = width / SEGMENTS * (i + 1);
// Render one segment
renderTarget.background(100)
renderTarget.push();
renderTarget.rotateX(time * 0.4);
renderTarget.rotateY(time * 0.3);
renderTarget.box(300); // or renderTarget.torus(250, 50);
renderTarget.pop();
// Copy to main screen buffer
image(renderTarget, -width/2, -height/2 + y0, width, y1 - y0, 0, y0, width, y1 - y0);
}
}