4 ms·

Same here, been wanting this for a long time. I even started a project called Hypermedia Canvas, but didn't have the skills or collaborators to get it started.

by brylie 7y ago

Same here, been wanting this for a long time. I even started a project called Hypermedia Canvas, but didn't have the skills or collaborators to get it started. I would be interested to give it another attempt, if I could find someone to help with some parts, like keyframing or tweening. The goal would be to create a fully open source studio to produce rich hypermedia productions using web standard technologies (HTML, CSS, JS, SVG) directly in a web browser. We would build on existing efforts and prior art where possible.

brylie 7y ago
E.g. the CreateJS toolkit might be a good basis: https://createjs.com/ https://createjs.com/ I'm not clear how to build a keyframe timeline or bezier graph for property tweening, nor am I sure whether shape tweening is possible with CSS or SVG.
- brylie 7y ago
  The Scene.js Timeline seems foundational to making keyframe animations using JS/CSS: https://github.com/daybrush/scenejs-timeline https://github.com/daybrush/scenejs-timeline Granted, Scene.js seems oriented towards short animations. Building a hypermedia studio, even with Scene.js as a component, that could produce something as elaborate as Homestar Runner would need considerable effort. The idea here is basically an open source, web standards-based alternative to Adobe Animate.
brylie 7y ago
Also, while Canvas, SVG, etc. imply 2D or 2.5D (excluding the timeline) there are a couple of WebGL projects that could serve as the basis for a Flash/Hypercard-esque web standards studio: https://github.com/jagenjo/webglstudio.js https://github.com/jagenjo/webglstudio.js https://github.com/tentone/nunuStudio https://github.com/tentone/nunuStudio
- brylie 7y ago
  WebGLStudio.js uses the litegui.js framework to build the UI https://github.com/jagenjo/litegui.js https://github.com/jagenjo/litegui.js It looks like litegui.js is capable of producing UI widgets similar to Adobe Animate, and other desktop animation software.

by brylie 7y ago

brylie 7y ago

E.g. the CreateJS toolkit might be a good basis: https://createjs.com/ https://createjs.com/ I'm not clear how to build a keyframe timeline or bezier graph for property tweening, nor am I sure whether shape tweening is possible with CSS or SVG.

brylie 7y ago
The Scene.js Timeline seems foundational to making keyframe animations using JS/CSS: https://github.com/daybrush/scenejs-timeline https://github.com/daybrush/scenejs-timeline Granted, Scene.js seems oriented towards short animations. Building a hypermedia studio, even with Scene.js as a component, that could produce something as elaborate as Homestar Runner would need considerable effort. The idea here is basically an open source, web standards-based alternative to Adobe Animate.

brylie 7y ago

Also, while Canvas, SVG, etc. imply 2D or 2.5D (excluding the timeline) there are a couple of WebGL projects that could serve as the basis for a Flash/Hypercard-esque web standards studio: https://github.com/jagenjo/webglstudio.js https://github.com/jagenjo/webglstudio.js https://github.com/tentone/nunuStudio https://github.com/tentone/nunuStudio

brylie 7y ago
WebGLStudio.js uses the litegui.js framework to build the UI https://github.com/jagenjo/litegui.js https://github.com/jagenjo/litegui.js It looks like litegui.js is capable of producing UI widgets similar to Adobe Animate, and other desktop animation software.