Canvas-sketch – A framework for making generative artwork | Hacker News Reader

Canvas-sketch – A framework for making generative artwork

github.com

90 pointshunvreus18 comments

Hello! Cool to see my framework here on HN frontpage.

I’ve been using this for some time now for all my production work — including generative art (prints, laser cuts, 3D printed models, plotter art, etc) and client work (interactive Canvas and WebGL productions). I’ve run a couple workshops with it and smoothed out most of the kinks, but it’s still fairly experimental so please open an issue if you run into any problems. :)

I am glad this made it to HN frontpage, otherwise, I might have missed it; and I bet others are on the same page. Anyway, just wanted to say thank you :). This is very good stuff!

A suggestion: Include a gallery of images produced by canvas-sketch. From the readme and documentation, it's pretty hard to tell what canvas-sketch is capable of.

Matt has a really great course on Frontend Masters [0] where he shows you how to use canvas-sketch and make generative art.

[0]: https://frontendmasters.com/courses/canvas-webgl/

A running example would be really nice. I'd be much more likely to try it out if it was one click rather than a bunch of node stuff.

There is one demo linked to in this issue: https://github.com/mattdesl/canvas-sketch/issues/36

The issue expands on your suggestion as well.

https://circle-packing.surge.sh/

`canvas-sketch` is pretty great... I've been having a lot of fun making generative doodles using just the canvas API, but of course you can also use p5.js and other frameworks if you like. it's just nice to have the easy hot reloading and outputting to png and svg and gifs or movies all set up for you already.

Are there business use cases for canvas other than drawing? Just curious if there are companies actually using canvas to do something...

I'm creating an in-browser design tool that's using canvas. TBH I kind of hate the API, but that's because it's geared more towards drawing.

It's used for rendering graphics of any kind that don't lend themselves well to the DOM. I worked on a project where we used the canvas element as a video player, rendering one frame at a time on it.

I’d like to hear more about that project. Can you share a URL if it’s public? I’ve imagined making something like that for showing a version of a super-8 film at 18 frames per second.

Like games? https://diep.io uses the canvas api, not webgl

Does this do much else than exposing the canvas context to you with some extra element options?

it handles hot reloading, high resolution raster output, animation and gif output, and has some handy features to help you keep track of code when you're quickly iterating while sketching.

why preact?

Just to clarify: preact isn’t currently used in the current library/dist on npm, just in some unused source code (which I need to clean up). At some point I will try to add GUI hence the need for preact.

understood thanks. I've used preact before, but I think the latest versions are very bad.

Reply on news.ycombinator.com