Time Intertwined

by Daeinc
May 2022

An exploration into time and motion. Two linear timelines - structural and surficial - are intertwined. By weaving these timelines at different points in time, almost infinite variations can be made. The changing relationship between the two creates dynamic and unique compositions and challenges the visual perception.

Guide:

• Please note that the animation responds to window aspect ratio. This is an intentional behavior as part of interactivity. It reproduces the same outcome at the same ratio.
• To export image at specific size, use URL parameters as below.
• See browser console for more info.
• Tested on MacOS 12.3.1 with Chrome 101.0

Keyboard Interaction:

• [0] for exhibit. it switches to a different mode every 3 loops.
• [s] to export PNG image. use URL params for dimensions.
• [spacebar] to play/pause animation
• [1 ~ 5] for different play modes
• h to toggle hi-DPI mode. (for retina display)

URL Parameters:

• add parameters separated by ampersand to the URL ex. https://.../?fxhash=...&mode=exhibit&w=800&st=5.3
• [mode]: play mode (exhibit, all, surficial, constant, all-constant, structural)
• [st]: structural timecode. up to 2 decimals (ex. st=4.31)
• [su]: surficial timecode. up to 2 decimals (ex. su=15.04)
• [co]: constant offset. up to 2 decimals (ex. co=7.4)
• [pr]: pixel ratio. set it to 2 (or press h) for hi-DPI screens.

License

CC-BY-NC 4.0
Please refer to the included LICENSE.md for license information.
Libraries used: p5, canvas-sketch, canvas-sketch-util, keyframes, easing equations from easings.net