Kaleidoscope Object-Oriented Design Specification

This document defines the evolving design of the Kaleidoscope JavaScript class used for GPU-accelerated, double-buffered rendering of kaleidoscopic visual effects.

Design Goals

• Encapsulate rendering logic inside a modern class
• Support double-buffering with imageA/imageB logic
• Manage all user-modifiable parameters as class properties
• Enable educational, modular, and maintainable codebase

Object Specification: Kaleidoscope

Constructor

new Kaleidoscope({
  canvas: HTMLCanvasElement,
  resolution: { width, height }
})

Properties

• canvas, gl
• resolution
• imageA, imageB
• startingSquareA, startingSquareB
• targetSquareA, targetSquareB
• angle, wedges, radius, refractionIndex
• showSpherize, reverseLayers, alphaA

Methods

• loadImageA(file), loadImageB(file)
• updateResolution(w, h)
• setAngle(deg), setSpherize(bool)
• draw(), capturePNG(filename)
• renderTargetFromSource(src, angle, opts)

Private Helpers

• _compileShaders()
• _createBuffers()
• _renderToTexture()
• _createFramebuffer()

Sample Usage

const kaleido = new Kaleidoscope({
  canvas: document.getElementById('display'),
  resolution: { width: 3840, height: 3840 }
});
kaleido.loadImageA('flower.png');
kaleido.setAngle(0.3);
kaleido.setSpherize(true);
kaleido.draw();

This public specification will evolve with implementation.