shaunlebron
commented
6 years ago For context, this is mary's demo video.
Thanks for doing this! I looked at this for a bit, and the method of cropping the ROI (region of interest) in OpenCV is restricted to an axis-aligned bounding box, so I'm guessing the picture of a rotated paper will always look something like this:
It might be easiest to provide users with a general utility function instead—to take a region from the camera image of the whole projection surface, and draw it to a target canvas context (paper or supporter):
drawFromCamera(
ctx, // canvas context to draw to
srcRegion, // source coordinates from camera image of whole projection surface
dstRegion // destination coordinates to draw to
)
// NOTE: a "region" can be an array of 3 or 4 vertices (triangle or quad for now)For example, the demo video could be achieved with something like:
const srcIds = [...]; // source animation papers
const dstId = ...; // draw animation to this paper
while (true) {
for (let srcId of srcIds) {
drawFromCamera(supporterCtx, papers[srcId].quadPoints, papers[dstId].quadPoints);
supporterCtx.commit();
await delay(250);
}
}For implementation, the hard work has already been done by patternPath, found in Three.js's canvas renderer. It seems to retrofit the simple canvas API with this arbitrary texture filling function that we need.
I'll try this out in an isolated environment to confirm if the implementation works as expected.
maryrosecook
janpaul123
pictureattribute of the program's entry in localStorage. (Alongsidepointsandnumber.)papers[paperNumber].picturectx.putImageData(papers[paperNumber].picture, 0, 0).