Duet

by Daeinc
Aug 2022

Duet explores generative+computational motion and creates an almost infinite sequence of visual compositions. Two groups of shapes transform, merge, and split randomly. What can be disorienting starts to make sense as every element is animated from one to the other. This transition animation is what connects random pieces and creates a relationship between them. Each element is mathematically interpolated, with its motion defined by an equation.

Although there are key moments, it is hard to summarize time-based work as a static image. As a constantly evolving generative motion piece, Duet invites viewers to form their impression by feeling the rhythm over time.

Guide:

• The animation responds to window aspect ratio. It reproduces the same outcome at the same ratio.
• For reliable playback, keep the window active and use IPFS view.
• See browser console for more info.
• Tested on MacOS 12.5.1 with Chromium 104.0

Keyboard Interaction

• [n] to play a new random loop.
• [spacebar] to play/pause.
• [s] to save PNG. use URL params for dimensions.
• [up] and [down] to change shape resolution.
• [left] and [right] to change BPM. only works while looping.
• [h] to toggle high DPI mode. off by default.
• [p] to toggle pixel snapping. off by default.

URL Parameters

• add parameters separated by ampersand to the URL ex. https://.../?fxhash=...&w=1200&h=600
• [w] and [h]: set width and height in pixels. (ex. w=1200&h=600)
• [s] and [e]: set starting and ending keyframes (inclusive) for loop. (ex. s=20&e=24)
• setting large values for start/end is not advised.
• [len]: instead of start/end, set a loop length between 1 and 16. (ex. len=4)
• [bpm]: beats per minute. (ex. bpm=80)
• [res]: shape resolution between 0 and 18. (ex. res=2)
• [pr]: pixel ratio. set it to 2 (or press [h]) for hi-DPI screens.
• [ar]: maximum aspect ratio. set to any value over 1. 1.2 by default.
• [snap]: add the param to snap to pixel grid.

License

CC BY-NC 4.0
Please refer to the included LICENSE.md for license information.
Libraries used: canvas-sketch, canvas-sketch-util, dom-events, hsv2rgb, keyframes, equations from easings.net, array shuffle from stackoverflow.