{{ store.width }} x {{ store.height }}
upload Upload
upload Full crop Thumbnail arrow_selector_tool Start Photographer arrow_selector_tool Slow 1s/page: {{ store.photographerSlow ? 'On' : 'Off' }}
{{ store.uploading ? 'Uploading...' : (store.complete ? 'Done' : '') }} {{ store.photographerRunning ? 'Photographer running...' : '' }}
upload Digitize

{{ store.filename || 'Drop an image onto the page.' }}

Drag the frame to move, corners to resize, top handle to rotate.

upload Choose image
Digitize reference

Locked Joint

{{ item.title }}

{{ definition.value }}
Create joints with angular limits by constraining point rotation within a defined cone.
{{ store.loading ? 'Thinking...' : store.response }}

A point cannot exceed the rotation around a point to a maxmium angle value, relative to the origin point zero.

Meaning if we have a point (origin), and another point (knee). The position of the knee may not lye outside a cone projected from the center of origin,

Rotating the origin will slide the position around the origin center Moving the knee will lock at the edges of the projected cone.

distance is handled by another element, and is optional here.

This demo uses two constraints together:

  1. cone() limits the angle of the child around its parent.
  2. track() keeps the child at a fixed distance from its parent.

So the cone decides where the point may rotate, while track decides how far away it stays. Combining them gives a simple joint with angular limits.

Meta Data
title Locked Joint
imports ()
files ('../point_src/core/head.js', '../point_src/pointpen.js', '../point_src/pointdraw.js', '../point_src/pointlist.js', '../point_src/point-content.js', '../point_src/point.js', '../point_src/events.js', '../point_src/automouse.js', '../point_src/distances.js', '../point_src/dragging.js', '../point_src/functions/clamp.js', '../point_src/stage.js', '../point_src/cone.js', '../point_src/constrain-distance.js')
unused_keys ()
unknown_keys ()
filepath_exists True
path locked-joints
filepath locked-joints.js
clean_files ('../point_src/core/head.js', '../point_src/pointpen.js', '../point_src/pointdraw.js', '../point_src/pointlistdraw.js', '../point_src/pointlistgradient.js', '../point_src/pointlistshape.js', '../point_src/pointlistgenerator.js', '../point_src/unpack.js', '../point_src/pointlist.js', '../point_src/compass.js', '../point_src/center.js', '../point_src/point-content.js', '../point_src/relative-xy.js', '../point_src/pointcast.js', '../point_src/point.js', '../point_src/events.js', '../point_src/automouse.js', '../point_src/distances.js', '../point_src/protractor.js', '../point_src/text/beta.js', '../point_src/dragging.js', '../point_src/functions/clamp.js', '../point_src/stage-hooks.js', '../point_src/functions/resolve.js', '../point_src/stage.js', '../point_src/cone.js', '../point_src/constrain-distance.js')
Logger Install Logger {{ store.words }}
{{ store.errorText.message }}
{{ store.errorText.stackText }}