2D and 3D sketches for the web using Canvas, P5.js, and Three.js.
Branch: master
Clone or download
Latest commit 2f34835 Feb 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs better mp4 script, start animated-scales Feb 15, 2019
src start using matter-js Feb 21, 2019
templates/p5-template two file solution Jan 11, 2019
.editorconfig initial setup Jan 9, 2019
.eslintrc.json update linter Jan 31, 2019
.gitignore initial setup Jan 9, 2019
README.md draw ellipses Feb 21, 2019
package-lock.json start using matter-js Feb 21, 2019
package.json start using matter-js Feb 21, 2019



This is a repository to keep my standalone 2D and 3D drawings. I am using canvas-sketch which is a sort of boilerplate tool for projects using canvas, p5.js, and three.js. The reason I am choosing to use canvas-sketch is so that I spend more time focusing on development of the creative piece rather than the infrastructure surrounding.

Projects that are standalone drawings where only a still image, gif, or video is expected as output are good projects. Early experiments and prototyping are also good for this repo.

File Structure

Each sketch will have a directory in src/. The main script file will always be called index.js.

NPM Scripts

Create a new sketch with the given sketch name. Options for template name are: default (canvas), p5, three, regl, and penplot. You may also point to your own template file instead of one of the previously mentioned key words.


Run an existing sketch

npm run start SKETCH_NAME

Run an existing sketch with hot reloading

npm run hot SKETCH_NAME

Build the sketch into an html and js file

npm run build SKETCH_NAME

Run the built html and js on a webserver

npm run server SKETCH_NAME

Build a gif from files inside the ~/Downloads/ folder. First agument is sketch-name, second argument is output-filename (without extension), third agument is fps for the gif.

npm run gif blinking-eyeballs 2 24

Things to remember

  • For a while, do my best to not create a custom template. Focus on the content... or maybe not.
  • Use dat.gui for easy configs


  • Balloons (or hot air balloons) rising
    • Use a physics engine (matter.js?) to make them pop. I think they'll need to be made up of lines or particles to pop correctly... probably just lines will do fine.
  • Make tetris using rough.js... this should probably be its own repo. Maybe it should use TypeScript or ClojureScript.

To Do

  • noisy-shapes

    • rough.js implementation
      • Once roughShapesMirror() is mostly done, copy it and make roughShapesMirrorTetris() using tetris shapes. It could be animated.
      • Consider a sketch where there is a box. Inside the box use high roughness, outside use low roughness. Representing chaotic inside and calm outside.
      • Consider an animation because the roughness is a sort of randomness
    • custom implementation
  • wet-and-sharp

    • Look into more abstract reflections (check out out/cool-bug.png)
  • blinking-eyeballs

    • Optimize the pause
  • animated-scales

    • hypnotic evil eye
    • pointilism spiral hypnotic evil eye
    • wavy concentric circles
      • Consider using rough.js?
  • Create a customized html template (don't start from scratch but copy an already built example)

    • Needs dropdown or radio buttons to select between functions
    • Maybe a refresh button
    • Maybe a save button
  • Later

    • Figure out if I can speed up the reloading
    • Contribute to canvas-sketch repo... maybe tackle a simple issue
  • Frozen / stalled / lost interest

    • scales
      • Spirals
      • Other noise based graphics or designs... not necessarily constrained to ellipses and circles
      • Maybe I can actually make rainbow fish by doing more advanced constraints
        • Maybe I could even take an edge drawing, use canny edge detection, and use the resulting edges as border constraints... or just a svg. Maybe its easiest to create a svg using Gimp.