Drawing from camera

[shaunlebron]

See #38 and #41

Usage:

const camera = await paper.get('camera');

paper.drawFromCamera(
  ctx,       // paper's ctx or supporterCtx
  camera,    // contains camera image and supporterCanvas->camera projection matrix
  srcPoints, // read from this camera region (supporterCanvas coords)
  dstPoints  // draw to this region (in ctx coords)
);

Internals:

• Projector page
  • now accesses camera to send images to programs
  • sends an image and a canvas->camera projection matrix to workers when requested
• Paper worker
  • now built with rollup, since we needed a way import matrix utils in a worker (couldn't figure out how to do this in webpack).

Working example:

// Camera Example

importScripts('paper.js');

(async () => {
  const canvas = await paper.get('supporterCanvas');
  const ctx = canvas.getContext('2d');

  const myNum = await paper.get('number');
  const portal = 1758; // paper to draw (any will do)

  const draw = async () => {
    const papers = await paper.get('papers');
    const camera = await paper.get('camera');
    if (papers[portal]) {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      paper.drawFromCamera(ctx, camera, papers[portal].points, papers[myNum].points);
    }
    ctx.commit();
    draw();
  };

  draw();
})();

I have a really bad projector at home, I'll try to take a better screenshot with our codepark setup sunday:

[shaunlebron]

Before Merging:

• Help? - maybe someone can get the web worker building in webpack instead of rollup?
• Docs - will add a note to api page for drawFromCamera

Future:

• I'm going to leave in a future PR the ability to draw a camera region relative to a given paper

[janpaul123]

This is awesome! Maybe just add the example from above to the API docs, or at least that would be a good start.

I'll try to get the web worker to build from Webpack! I should probably be able to get to that later this week.

Thanks so much for working on this, it's very cool. 😃

[shaunlebron]

Got some pictures of this feature from our session today!

The rubix cube is placed on a "portal" program, and its picture is drawn on another:

And we re-implemented @maryrosecook's animation demo:

Glitchy when stretching! stretching either the source or destination quad glitched the image :(

I'm confused about this last bug—I thought the geometry for the stretching was settled in this demo, so I'm not sure what's going on there. I'll need to debug this somehow. Let me know if you have any ideas!

[janpaul123]

Wow so cool! Yeah no idea what's going on with those glitches. 😮

[janpaul123]

Superseded by #54. Thanks so much, very cool feature. 💯