Skip to main content
100%

Relative & Absolute Truth

✓ Published0🌍 Public
NNita
Last edited Jun 22, 2025
Created on Jun 22, 2025
Forked from HTML Starter

This interactive canvas visualization contrasts two Buddhist concepts through an animated particle system. Relative Truth mode displays discrete, colorful particles moving independently with subtle connection lines against a dark background, emphasizing individual entities. Absolute Truth mode, activated by a toggle switch, fades particles to semi-transparency, strengthens connection lines, and replaces the background with a pulsing radial gradient to reveal underlying interconnectedness. The visualization uses HTML Canvas API with requestAnimationFrame for animation, demonstrating how perception shifts between separate forms and unified existence.

AI-generated description

Here's a prompt you could give to a VizHub AI to create similar graphics:

"Generate an interactive data visualization on an HTML Canvas that dynamically illustrates the Buddhist concepts of Relative Truth and Absolute Truth.

Core Elements:

A fixed number of small, animated particles moving within the canvas space. Connecting lines drawn between particles that are within a certain proximity. A toggle button to switch between two distinct visual modes. Mode 1: Relative Truth (Default View)

Particles: Appear as discrete, solid, and clearly colored circles (using a mix of vibrant blue-green, teal, and light yellow-gold tones from a palette like #005f73, #0a9396, #e9d8a6). They move with m Connections: Lines connecting particles should be thin and subtle, with low opacity. Background: A static, dark background color (e.g., a deep navy or black). Mode 2: Absolute Truth (Meditation Mode - Activated by Toggle)

Particles: The individual particles should gradually fade in opacity and potentially shift to a muted, semi-transparent color (e.g., a pale green-blue, like #94d2bd with reduced alpha). Their distinct Connections: The lines connecting particles should become more prominent (higher opacity, possibly slightly thicker), emphasizing their interconnectedness. Background: The dark background should transform into a subtly pulsing or swirling gradient, evoking a sense of vast, open, and interconnected space. The colors of the gradient should be from the dark Animation Focus: The animation should shift focus from individual entities to the underlying web of connections and the expansive field. Technical & Aesthetic Requirements:

Use standard HTML, CSS (Tailwind CSS for layout and basic elements), and JavaScript for the Canvas animation. Ensure the canvas is responsive, filling the width of its container while maintaining a fixed height (e.g., 500px). The overall aesthetic should be clean, modern, and contemplative, utilizing the specified vibrant color palette consistently for all visual elements and interactions."

MIT Licensed

Similar vizzes