To change image, drag-and-drop an image file over the canvas then update one of the controls
To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
From path
start
end
To path
start
end
Sync path cursors
Rendering
Path cursor loop
Animation
Select filter
Select method
Copy Starts ('n%')
X:
Y:
Copy Width
'n%'
n
Copy Starts (n)
X:
Y:
Copy Height
'n%'
n
Interference loops
Interference factor
Source expansion factor
X:
Test purpose
Create a Loom entity, using quadratic and bezier curve Shape entitys as its frame's struts
Display an image taken from Picture entity between the Loom entity frame's struts
Distort the frame using Wheel entitys acting as pivots for the Shape entitys' start, end and control points
Create controls for each frame's start and end points; manipulate the display using these controls
Create a control to switch between horizontal and vertical rendering of the image
Create a control to animate the image display along the frame (delta animation)
Create a control to test animation looping functionality
Create a control to swap between entity rendering methods
Create a control to apply filters to the Picture entity; check that the Loom entity responds immediately to any updates
Create controls for the Picture entity's copy start and dimensions values; check that the Loom entity responds immediately to any updates
Touch test: should work as expected. Known issue: moving the pins is inconsistent (because pins are too small on device screens?)