canvas-sketch

canvas-sketch copied to clipboard

I've got some examples so far, but most of them are more 'unit tests' to make sure it all works.

It would be great if the CLI could run a "Example Viewer" mode before generating a new sketch. Such as:

canvas-sketch --new --examples

The browser will list a thumbnail grid with examples, and clicking one will generate it from the template and start the server on that file.

Actually, thinking maybe this could be more generic, not just for examples but browsing an entire folder of sketches:

# Browse your 'sketches' folder
canvas-sketch --browse=sketches

# Browse examples, clicking one will launch it
canvas-sketch --browse

# Browse examples and generate a new file from the selected sketch
canvas-sketch --new --browse

# Browse your own folder, clicking one will generate a remix
canvas-sketch --new --browse=sketches

Not sure yet how to handle thumbnails. Maybe if a .thumb.png file exists with the same base path as the JS file, it will get shown in the browsing mode. It would be nice if it was somehow automated...

EDIT: After a bit more thinking, might just be better to publish all the examples online like ThreeJS does. This way users can browse them without having to install a tool.

I think an online gallery with examples would be the better idea, would lower the entry barrier, as one could just have a look at the examples online. But maybe the CLI could be able to fetch the code for an example, so you could start off by changing it 🤔?

Thanks!

I think the online Examples viewer will show code + result, but also a "Copy Code" button that simply copies it to clipboard.

The tool should already be ready to accept clipboard contents (and install any dependencies) like this:

# create a new folder to hold sketches
mkdir my-sketch
cd my-sketch

# generate a new sketch from clipboard contents
pbpaste | canvas-sketch -n

I've started stubbing out a very basic Preact frontend that holds some of the examples. The feature/website branch has some of that work-in-progress.

You can test it here: https://competent-beaver-2ad4cc.netlify.com/

I haven't bothered with any fancy design yet – will likely do a generative/interactive Canvas background using canvas-sketch itself.

While doing this, I'm realizing it's really awesome to have a "sketchbook" that can collect all the sketches in a single folder, and most of the code I'm writing for the website could be pulled into the canvas-sketch-cli tool as well. For example, canvas-sketch foo.js could run a single sketch, or canvas-sketchbook src/*.js could wrap all the sketches in src/ folder with a similar interface as in the website. The sketchbook (during dev) could easily have a "Add New Sketch" button (WebSockets that connect to node server) and some other handy features.

Still figuring out the best way to structure all that – ideally it should be re-usable enough that the canvas-sketch website itself can use the canvas-sketch-cli... :smile:

This is really awesome, I was actually just mulling something similar over today.

I was thinking it would be kind of neat to have a rolling blog of all the sketches I’ve made. Trying to think of a nice workflow for saving out PNG’s or MPEG’s for sharing on social media as well as just building a nice static site.

I’m going to take a peak at that website branch today. I think for the blog use case something that involves more static assets might be a little more practical.

I'd be curious to hear more about how you'd like to show the sketches – i.e. a single HTML for each sketch, and then iframes? Or a single page for all your sketches, each one contained in a separate DIV, and animating on/off depending on whether they are in view?

Yeah, I’m thinking probably single page with all sketches, possibly with pagination coming into play at some point (either infinite scrolling or actual pages). Kind of Tumblr or Instagram style.

The risograph example is 👌by the by.

I like the minimalistic appearance of the website a lot 😎 and the possibility of using the examples from within the CLI is super. As I'm a big fan of mini-convenience-functionality I'd suggest having a small button above of each example, that generates a command for executing the example on your local machine (maybe just copy-&-paste the command like canvas-skech --fetch random-circles or even using a websocket connection as you suggested). I like this idea of having a canvas-sketchbook command, too — wished for a such a functionality when I was browsing the examples for the first time. I could think of a generative index page, where all the sketch names from within the so called sketchbook folder are collectively presented and you can navigate to each simply by clicking on it 👍