canvas-sketch
canvas-sketch copied to clipboard
mattdesl
Web version
It would be kind of cool to have a version that could run and be edited on the web, either as it's own little editor thing or as something that could easily be used with things like codepen, etc.
I think imports and exporting would be the most challenging parts of that?
But otherwise, hi! I'm a web developer looking for things to build experience and my portfolio. I would love to help with canvas-sketch, especially for a project website :).
Hi @Pixelrobin. :wave:
A web version would definitely be cool, but I'm not sure the same thing would be possible.
Most of the main features of canvas-sketch that make it unique from other frameworks — print export, PNG sequences, git committing, file scaffolding, seamless import / require statements from npm — require it to be used alongside its CLI tool, so it's not easy to translate to the web or frontend.
I've designed this to be offline-first to provide the best possible developer experience, as I have not felt that web-based editors (CodePen etc) have the capacity to yet match this experience.
In the mean time, you can always use CodeSandbox to create new sketches, but you will lose a lot of the features of canvas-sketch.
Here's an example:
https://codesandbox.io/s/wqwznq5n57?module=%2Fsrc%2Findex.js
I brought this up because in my use case, I'm usually just messing around and don't plan on making large prints or anything fancy. It feels strange to need to set up a full npm environment with seperate packages for each individual sketch. Maybe I'm just not using it the way it was intended though.
Importing npm modules would be an issue, but perhaps there could be a few presets? Or maybe something like how CodePen does it where you could just supply some URLs of javascript files you wish to add. Most of the stuff sketches need would most likely have a version you could just pop into a script tag.
If this was its own little thing, git commiting could probably be handled via GitHub Gists via the API, which also means that there would be no need for user accounts or cloud storage.
Bigger stuff like PNG sequence exporting and large prints are a challenge, and I don't know if a web version would be a good place for that sort of thing, but it's not impossible, maybe even with the use of cloud functions?
This is something that I feel would be really useful and open up a lot of avenues! Has anyone done anymore work or have anymore thoughts on this topic before I start getting my hands dirty?
Hey @mattdesl so I've done something similar to the CodeSandbox link you provided. I've essentially got a create-react-app boilerplate, am importing canvas-sketch and canvas-sketch-util, and running canvasSketch(sketch, settings); after componentDidMount... I've set settings.parent to document.getElementById('canvas-sketch'); so the canvas is where I want it to be, and all works great!
However for me one of the main features is the hot reloading. I've had a rummage and have ended up here: https://github.com/mattdesl/budo/blob/master/docs/command-line-usage.md#hot-module-replacement ...
Do you know if it's possible to somehow integrate this into the CRA webpack dev build?
@danvoyce Since you aren't using the canvas-sketch CLI you won't be able to take advantage of its builtin features like hot reloading. If you're using webpack & CRA you will have to write your own module.hot.accept handlers to get something like hot reloading back — unloading the sketch and re-loading it with its previous state. I'm not too familiar with the module.hot stuff but in theory it should be possible.