This repo is based on "Creative Coding: Making Visuals with JavaScript" Domestika course.
raw-canvas.html is an example of usage raw canvas API including basic animation .
Links to additional resources:
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- https://www.w3schools.com/graphics/canvas_intro.asp
Tool: canvas-sketch and canvas-sketch-util
canvas-sketch is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.
- https://github.com/mattdesl/canvas-sketch
npm install canvas-sketch-cli --global
- Create new:
canvas-sketch canvas-sketch-demo.js --new --open - Run existed:
canvas-sketch canvas-sketch-demo.js --open - Build to website:
canvas-sketch canvas-sketch-demo.js --name canvas-sketch-demo-build --build --inline --no-compress
Utilities for generative art in Canvas, WebGL and JavaScript.
This is designed to be used alongside the canvas-sketch toolset, but it is generic enough to work for various Node.js/Browser use cases.
- npm install canvas-sketch-util --save
- https://github.com/mattdesl/canvas-sketch-util
- We can save anything we draw with
Ctrl + S. - By default export save in
~\Downloadsfolder. To set another folder, use--outputflag. - When you use
Ctrl + Shift + Sto export an animation, it will begin recording image frames as separate files and log progress in the browser console. You can hit this keystroke again to stop recording. - To save animation as video we need ffmpeg:
npm install @ffmpeg-installer/ffmpeg --global
- Run with video-export mode:
canvas-sketch canvas-sketch-demo.js --output=output/stream-demo --stream - Details: https://github.com/mattdesl/canvas-sketch/blob/master/docs/exporting-artwork.md#exporting-animations
Compact pane library for fine-tuning parameters and monitoring value changes.