Skip to main content
SimilarExport ZIP
100%

Stream of Consciousness

✓ Published1🌍 Public
NNita
Last edited May 27, 2025
Created on May 27, 2025
Forked from HTML Starter

Animated bubbles labeled with words like “Awareness” and “Perception” drift and bounce within a dark container, simulating the continuous flow of thoughts. Each bubble represents a discrete thought, and the visualization uses D3.js’s `d3.forceSimulation` with charge and collision forces alongside a custom `requestAnimationFrame` loop to move them. Users can add new thoughts, click bubbles to focus them, pause the flow, or clear all bubbles. The SVG rendering includes gradient-styled circles and text, with a physics-based boundary bounce and random velocity jitter driving the motion.

AI-generated description

Stream of Consciousness Visualization

This interactive visualization represents the flow of thoughts within consciousness and awareness.

Features

  • Animated thought bubbles that flow organically through the visualization
  • Add your own thoughts to see how they join the stream of consciousness
  • Click on thoughts to focus on them
  • Pause the flow to observe specific states of mind
  • Clear thoughts to restart the flow

How It Works

The visualization uses physics-based animation to simulate how thoughts move, interact, and flow through consciousness. Each bubble represents a discrete thought or awareness that affects and is affected by other thoughts in the mental space.

Psychological Concept

This visualization is inspired by the psychological concept of "stream of consciousness" - the continuous flow of thoughts, perceptions, and mental processes that make up our awareness. William James, the father of American psychology, first described consciousness not as a series of discrete states but as a continuous "stream" or "river."

Interaction

  • Add a thought: Type in the input box and press Enter or click "Add Thought"
  • Focus a thought: Click on any thought bubble
  • Pause/resume: Click the "Pause Flow" button
  • Reset: Click "Clear All" to return to the initial state
MIT Licensed

Similar vizzes

Loading thumbnail…

Arbitrary Visualization

Clicking on the canvas generates a cluster of blue-tinted, gradient-filled SVG shapes that grow, fade, and dissolve over time. Each click creates a new group of nodes connected by closed basis curves, which are then simulated through a force-directed layout using `d3.forceSimulation` with charge, collision, and Y-position forces. The nodes and links are drawn as SVG `path` elements, with a radial gradient fill and animated opacity transitions that remove each shape after a 60-second delay. The code uses d3 v4 and a custom `d3.line` with `curveBasisClosed` to define the bubble edges.

MMTClass
73% match
Loading thumbnail…

D3 JS BUBLES

This visualization displays a set of fifteen animated bubbles moving vertically in a sinusoidal wave pattern, with their radii oscillating as they travel across the screen. The circles are rendered as SVG elements using D3 v7, with the data generated procedurally through a sine function that updates each frame. A `setInterval` timer drives the animation at approximately 60 frames per second, recalculating each bubble's `cx`, `cy`, and `r` attributes continuously. The example demonstrates basic D3 data joins and transitions without interaction.

TTehran Mammadov
72% match
Loading thumbnail…

Fork of Consciousness

This canvas-based visualization simulates an emergent consciousness through a neural network, displaying neurons as glowing nodes that activate and form new connections over time. The animation uses Canvas gradients for neuron glow effects and alpha-blended strokes for connection strength. Mouse movement subtly activates nearby neurons, while buttons trigger stimuli and philosophical prompts that generate text responses in a thought stream. Interactive sliders control energy and complexity parameters, which influence the network's activity and learning rate.

NNita
70% match
Loading thumbnail…

Consciousness

A neural-network simulation renders emergent consciousness on an HTML5 Canvas using JavaScript, with neurons as glowing nodes and connections as animated lines. The system responds to mouse movement and clicks, while buttons trigger stimuli or self-reflection questions that generate text in a thought stream. A consciousness level indicator and sliders for energy and complexity control the simulation’s behavior. The canvas API draws the network in real time, with neurons activating and connections strengthening or decaying based on interaction.

NNita
69% match
Loading thumbnail…

Moving Bubble Tutorial

This example demonstrates a full-screen, animated view where a custom message is displayed prominently over a dark, space-themed background. The visualization is built using D3.js to select and update the text of a message element, while CSS styles imported from Google Fonts and a custom stylesheet control the layout and appearance. The rendering relies on standard HTML and JavaScript modules, showcasing a minimal setup for dynamic text-based visualization.

Mmegakappaman
68% match
Loading thumbnail…

Untitled

This example demonstrates a full-screen, animated visualization built with SVG, showcasing a dynamic network of connected particles. The scene uses D3.js’s `d3.forceSimulation` to compute particle positions and link forces, while SVG circle and line elements render the nodes and edges. The simulation runs continuously, with the nodes gently drifting and repelling each other against a dark background. The code relies on standard SVG attributes and D3’s selection methods, with the `overflow: hidden` CSS rule ensuring the canvas remains edge-to-edge without scrollbars.

MMelissa Prax
68% match
Loading thumbnail…

Mind Impurities

An animated composition scatters random circles across the canvas, their positions, radii, and colors derived from D3’s `scaleLinear` and `scaleOrdinal` functions, producing a chaotic spread of translucent, overlapping shapes. The visualization also draws a complex SVG path, likely a stylized central curve, while each circle’s fill and stroke use random RGB values. Built with D3 v5, the example loads the library via UNPKG and imports `select`, `scaleLinear`, and `scaleOrdinal` from `'d3'`, using SVG rendering with no external data source.

NNita
68% match
Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani
68% match