Scrollgraph

Create high res images by scrolling around at low res in video.

============

Options

debug: show debug comments in the log
annotations: display markers in the canvas to help debugging
vignette: draw to the canvas in an edge-blurred circle, to improve image compositing and look awesome (reduces field of view of image, though)
goodMatchesMin: default 8; frames must have this many good matches to be displayed
keyframeThreshold: default 2; keyframes must have 2x number of good matches
keyframeDistanceThreshold: default 1/3; keyframes must be this far off of last keyframe origin
num_train_levels: default 4; keypoint finder at different zoom levels; not needed if no resizing happens (as in microscopy)
trainingMargin: default 0.1, // the width of the margin we discard when training a pattern, to improve matching; as a proportion from 0 to 1
width: default 1000; width of canvas
height: default 1000; width of canvas
srcWidth: default 640; width of video source (bigger may degrade performance)
srcHeight: default 480; height of video source

scrollgraph.train(img1)
scrollgraph.match(img2) returns a results object with the following parameters and functions:
- results.good_matches
- results.num_matches
- results.num_corners
- results.projected_corners
- results.annotate(ctx, offset)
scrollgraph.setOption(key, value): change options dynamically, i.e. turn on annotations

each image placed on the canvas is called a frame
each image "good enough" to establish a new local origin point is called a keyframe, and is used to train our matcher against for subsequent matches

from the original image (our first keyframe), we train our matcher to look in the incoming video feed for a similar "constellation" of points, regardless of rotation
when enough "good matches" are found in a video frame, we place that frame on the canvas at the estimated position (using the findTransform method from jsfeat)
we repeat as fast as we can!
if an image is really good, and ALSO far enough away from the last keyframe, and enough time has passed (500ms), we

A range of tweaks and optimizations have been added to create a more responsive experience (which gets "stuck" less often).

we relax thresholds for both frames and keyframes if no recent matches have been made (500ms)
we reject frames that are > ~15 degrees different rotation than the last keyframe
we reject frames that are > 1.5x displaced from the last keyframe

OFFSET FOUND!!! (0 || 0.1) evaluates to 0.1, so we had never ditched the 0.1 margin and were offsetting..
fix this....
- try removing keypoint scaling/margin code?? no, it seems critical to getting enough matches
- 0.1 stays stationary but 0.2 does not...???
- 0 works but not as well as 0.1?
also our tracking circle is offset to the right

// notice: training does more: resamples, blurs... is it all necessary?

detect landscape/portrait (done but needs testing)
- doesn't work - video seems OK but canvas is not
scale images according to points 1 and 2
- scaling works, but keyframes then would need to be scaled too? do we need to track scale?
- turned scaling off, can re-enable as an option to fix it

try placing perspectivally, using WebGL/glfx.js: https://github.com/jywarren/webgl-distort/blob/main/dist/webgl-distort.js
- render_pattern_shape in handleImage
bump some work to another thread? Web Workers?
focus knockout - higher sharpness images overwrite lower sharpness images
refactor jsfeat-based resize/resample to use canvas?
make multi-level training toggle-able, and use it in LDI matching if 2 images are different sizes?
- we're now only doing this if you set num_train_levels to > 1