shifting-blinds

100%

shifting-blinds

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Nov 21, 2015

A grid of forty multicolored horizontal slats forms a three-dimensional blind. Moving the mouse up and down rotates each slat, opening or closing the blind to reveal the space behind it. Built with Three.js and WebGL, the animation uses random colors for each slat and a trackball control system for camera rotation and zoom. The scene is rendered in a web browser with dynamic shadow mapping.

AI-generated description

Mouse up and down to look through blinds

Similar vizzes

Loading thumbnail…

rect-blinds

The visualization shows a sequence of vertical rectangles that continuously slide and expand across the screen, each with a random color, creating an ever-shifting mosaic. The code uses D3.js and lodash to generate a set of rectangles with random widths, then animates their width and horizontal position using `transition.attr` for smooth movement. The rectangles are drawn with SVG `rect` elements inside a full-window `<svg>`, with each cycle restarting every six seconds. The animation relies on custom timing delays and durations tied to rectangle width, while colors are randomly generated as RGB strings.

11wheel

73% match

Loading thumbnail…

sketch 02

A 3D block model rotates in a dark WebGL scene, its dimensions adjustable in real time through a dat.GUI control panel. The sketch uses Three.js with a perspective camera and OrbitControls, rendering both wireframe and flat-shaded materials to highlight the box’s edges and surfaces. Animate continuously rebuilds the geometry from parametric width, depth, and height inputs, while the directional and ambient lights define the form. The code does not load external data, relying instead on procedural geometry and interactive user sliders.

BBillyBHWong

65% match

Loading thumbnail…

Transform Transitions II

A grid of 1,200 small colored squares, each assigned a position via inline CSS `transform` and a hue from `d3.hsl`, reacts to mouseover by flying to the center of the viewport. The selected square scales up and rotates 180 degrees using D3’s `transition().style("transform")`, which interpolates the CSS transform string, then shrinks and removes itself. Built with d3.v4 and `d3.range`, the animation leverages D3’s transform interpolation to smoothly tween translate, scale, and rotate values, while `raise()` brings the active square to the front.

Mmbostock

65% match

Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel

63% match

Loading thumbnail…

Sol Lewitt - Wall Drawing #392

Inspired by Sol LeWitt's wall drawing, this visualization creates a grid of squares, each filled with one of four diagonal line patterns. Moving the mouse triggers a ripple effect, causing nearby grid cells to randomly reassign their line orientation with a smooth, animated fade. Built with D3.js and Lodash, it uses SVG selections and transitions, with mouse coordinates mapped to trigger `transition` and `styleTween` animations. The entire grid redraws on window resize, and the code is generated from a gist by 1wheel.

11wheel

63% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

63% match

Loading thumbnail…

Untitled

A grid of colored 3D cubes displays varying heights, with each cube's height labeled numerically on its top face. Users can click an "update" button to refresh the data, which generates new random height values for each cube. The visualization supports interactive rotation by dragging the mouse, allowing the entire cube arrangement to be viewed from different angles. The code uses the d3-3d library to project cube vertices, computing visible faces and sorting them for proper depth rendering, while handling mouse drag events to update the rotation angles and re-render the SVG paths and text labels accordingly.

Aanushaanumula

63% match

Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis

62% match