Skip to main content
SimilarExport ZIP
100%

Double Harmonic

✓ Published0🌍 Public
Wwgloss
Last edited Apr 30, 2021
Created on Apr 30, 2021

Two circles bounce between expanding and contracting in a loop, with one radius derived from a random integer and the other responding inversely to it. Built with D3 v6, the animation uses `setInterval` to regenerate data and update SVG circle attributes `r`, `cx`, and `cy` every 100 milliseconds. The `ball2radiusMaker` function toggles the second circle’s size based on whether the random value exceeds the midpoint, creating a visual counterpoint. The code reads as an algorithmic sketch inspired by Sol LeWitt’s geometric rules.

AI-generated description

Sol LeWitt Attemp with random Values

MIT Licensed

Similar vizzes

Loading thumbnail…

Double Harmonic

Two concentric pendulum arms trace a slowly evolving path. A large circle rotates around the center, and a smaller circle rotates around it, creating a complex harmonic motion. The visualization uses SVG elements, including circles and lines, and is updated at a fixed interval. The code employs D3’s `select`, `range`, and data join methods to render the animation, based on the `d3` library version 6.

Wwgloss
79% match
Loading thumbnail…

harmonic test

An animated double pendulum traces two connected line segments from a fixed center point, with a white ball at the endpoint whose radius oscillates with time. The tip alternates between white and black fills each time step, creating a strobe effect. Using D3 v6 selections, `range`, and `join`, the code updates SVG `line` and `circle` elements every 2 seconds, incrementing a time variable to drive cosine and sine positions for both arm segments.

DdvirRez
75% match
Loading thumbnail…

Fork of Double Harmonic

A double pendulum animation built with D3.js v6 renders a black tracing line and white ball in SVG. The code uses `select`, `range`, and `setInterval` to update circle and line positions at each tick, computing the pendulum’s path from cosine and sine functions with a fixed psi ratio. The full-screen SVG shows two connected rods and the swinging tip, with ball radius and arm lengths as constants.

Wwgloss
74% match
Loading thumbnail…

Bouncing Balls

Fifteen circles bounce in a sinusoidal wave across a dark background. Each ball follows a vertical, sine-based path at a fixed horizontal interval, with its vertical position shifting over time to create a flowing, animated pattern. The visualization uses D3.js version 7’s `select`, `range`, `scaleOrdinal`, and `schemePastel2` to generate a pastel color palette for the circles. The animation is driven by a JavaScript `setInterval` timer, updating the circles’ `cy` attributes at roughly 60 frames per second via D3’s `.join()` API.

EErik Sundahl
73% match
Loading thumbnail…

expanding-circles

Expanding circles continuously appear across the screen, growing from tiny dots to large rings with random fill and stroke colors. The animation generates a new batch of circles every second, each positioned on a grid spanning the full viewport. The code uses D3’s selection, data join, and chained transitions with `transition.attr('r')` to animate radius, while leveraging `d3.shuffle` to randomize drawing order. The SVG rendering relies on D3’s `append` and `translate` helpers from the d3-starterkit, with colors generated by a custom `randColor` function.

11wheel
73% match
Loading thumbnail…

Fork of Double Harmonic

This example shows a double pendulum animation, drawing a small ball as the endpoint of two connected, rotating line segments. The code uses d3.js v6 with a time-driven `setInterval` loop to update the pendulum's position based on a constant time step and a phase-shift ratio (`psi`). It renders the scene as SVG, creating the arm lines, a moving ball, and a large hollow circle marker at the endpoint. The visualization demonstrates the harmonic motion of the two-segment system.

Ggiulius540
73% match
Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil
72% match
Loading thumbnail…

Fork of Double Harmonic

A two-link pendulum traces a spherical path as two connected circles rotate around a fixed center point. The animation uses `setInterval` to update the positions every 50 milliseconds, with the second circle’s motion offset by a constant psi value that creates the harmonic fork effect. The SVG rendering uses `selectAll` and `join` to update circle and line elements, applying black strokes for the pendulum arms and a white circle with a black border for the joint. The visualization responds to browser window dimensions, setting its size based on `window.innerWidth` and `window.innerHeight`.

TTehran Mammadov
71% match