4 ms·
Canvas-sketch – A framework for making generative artwork
- andybak 8y agoA 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.
- beardicus 8y ago`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.
- grenoire 8y agoDoes this do much else than exposing the canvas context to you with some extra element options?
- beardicus 8y agoit 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.
- wsdfsayy 8y agoAre there business use cases for canvas other than drawing? Just curious if there are companies actually using canvas to do something...
- tenaciousDaniel 8y agoI'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.
- ralusek 8y agoIt'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.
- SimonDorfman 8y agoI’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.
- Matheus28 8y agoLike games? https://diep.io https://diep.io uses the canvas api, not webgl
- billdybas 8y agoMatt 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/ https://frontendmasters.com/courses/canvas-webgl/
- pictur 8y agowhy preact?
- mattdesl 8y agoJust 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.
- pictur 8y agounderstood thanks. I've used preact before, but I think the latest versions are very bad.
- mattdesl 8y agoHello! 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. :)
- amartya916 8y agoI 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!
- mkl 8y agoA 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.