More integrations

[mifi]

• Full power of the HTML to create visuals and animations using HTML animation frameworks (maybe puppeteer)
• three.js
• ...

[chapmanjacobd]

I don't think puppeteer is the right tool (but maybe)

right now you are using the node canvas implementation, right? d3.js and three.js both work with canvas but then you probably need a way to interact with canvas like pan/zoom the space kind of like a motion-control camera ? is that why you want to use puppeteer ?

I don't think there needs to be specific integrations for every animation frameworks. Just a generic way to capture canvas (or DOM renders ?? I don't think using the DOM for video is very realistic) and have examples for three.js with THREE.PerspectiveCamera

[mifi]

The reason why I was thinking about puppeteer is just because HTML5/CSS has so much power when it comes to rendering and animating just about anything easily. For making custom title screens using HTML or whatnot. But I'm not sure how to control the "time" parameter in CSS and HTML transitions in order to correctly animate and record things from the web.

I think all clips with content from d3, three.js etc can be animated in the desired way with a mathematical function that takes in the variable progress (float from 0-1) where 0 is the start of the clip, and 1 is the end. The mathematical function will then return the desired parameters for whatever should be animated, like camera movement, pan, zoom etc (similar to what we are already doing with title, Ken Burns etc)

[chapmanjacobd]

aha... now I get it. that is an interesting problem.

I think doing it deterministically like the same way with the progress variable for each frame will be the best option.

https://medium.com/better-programming/how-to-restart-a-css-animation-with-javascript-and-what-is-the-dom-reflow-a86e8b6df00f

maybe we would need to convert all CSS units into fractions and record it one frame at a time....

var showPercent = window.setInterval(function() {
  if (currentPercent < 100) {
    currentPercent += 1;
  } else {
    currentPercent = 0;
  }
  // Updates a div that displays the current percent
  result.innerHTML = currentPercent;
}, 40);

https://css-tricks.com/controlling-css-animations-transitions-javascript/

[mifi]

With HTML we could use code like this 🤩 (#11)

[mifi]

I just found a project that does exactly this: https://www.remotion.dev/