StickyLines (demo)
On 21/12/2022 by: junhang-y
Stickylines transforms guidelines into first-class objects.
More: https://ex-situ.lri.fr/projects/stickylines
Keywords:
Overview
User’s Goal:
To align the objects, tweak and reuse the alignment.
Command:
Alignment and distribution.
Focus:
slide
Aligning and distributing objects are cumbersome tasks for the graphical designers. By applying the generative theory, we reified the command of alignment into a persist instrument, Stickylines, so that user can directly manipulate with the persist relationship of alignment, and add more relationships such as distribution. Stickylines also support being appropriated by the user to create more complicated layout.
- Lo-Fi
- Hi-Fi
- Demos
Instrumental interaction
Interaction tip: Drag Stickyline to align the shapes
Stickylines reify the command of alignment into a persistent, directly-manipulatable line.
Interaction tip: Drag Stickyline to align different objects.
Stickylines apply the command of alignment to multiple types of objects.
Interaction tip: Duplicate Stickyline to align other group of shapes
Sticklyline can be duplicated and reused to apply the alignment command to another set of shapes.
Interaction tip: Drag Stickyline to move the aligned shapes together.
Stickylines reify the objects that hold the relationship of alignment into a persistent object as a substrate.
Interaction tip: Drag the blue rectangle away and see how the aligned shapes are redistributed.
Stickyline support various relationships such as alignment and distribution, and reify the objects that hold the relationships into a persistent object.
Interaction tip: Duplicate Stickyline with the aligned objects
The aligned objects can be copied and pasted together as one entire object.
- Lo-Fi
- Hi-Fi
- Demos
Human-Computer Partnership
Interaction tip: Drag the Stickyline to preview how the shapes can be aligned.
While approaching, Stickylines give user a preview of how the objects can be possibly affected with the command.
Interaction tip: Stretch the Stickyline to snap and align more shapes nearby.
Stickylines support user customisation, i.e. stretching to snap objects.
Interaction tip: tweak the Stickyline to align from geometric center to gravity center.
Stickylines support reifying user tweaks into objects that update the Stickyline.
Interaction tip: Select the substrate, and hover on other shape buttons to preview the new alignment.
Stickylines support a preview of the change of the shape of the line, while maintaining the relationships with the objects.
Interaction tip: Drag the middle handle to re-shape stickyline, and see how the Stickyline/Stickycurve the alignmnet.
Stickylines support user manipulation or modification while maintaining the relationship with the applied objects.
Interaction tip: tweak the words and draw curvy stickyline from the reified tweaks, extend the stickycurve by dupicating, and then drag the stickycurve to preview new patterns.
Stickylines support reifying user tweaks into objects and draw new stickyline to update the substrate accordingly.