Sketches are the pretty visualizations in heyo’s sidebar. The default ones were built using p5.js – a javascript library for creative coding.

Visualizations

For now, we have the following visualizations:

Sketch Description
Graph Cozy dots moving around to Perlin Noise
Digital Rain Falling symbols, Matrix style
Circles Drawing circles with a weird brush

Feel free to suggest or contribute new ones in heyo!

Setting up

Global Configurations

The sketch can be globally enabled by setting the param sketch in config.toml.

Param Description
sketch.enable controls if the sketch will appear on every page1
sketch.displayOptions controls if sketch settings will be displayed on hover
sketch.use selects which sketch will be displayed

Per Page Basis

Even with sketch.enable = false in config.toml you can still enable sketches on specific pages, all you need to do is set it up in page’s front-matter. That enables you to show different sketches on different pages.

Implement your own sketch

Using customJs you can import your own javascript code, so all you have to do to implement your own sketch is:

  1. Wrap up you sketch in a class
  2. Make sure that it implements the setup and draw methods (it can also implement mouseWheel, mouseClicked, and getSettings)
  3. Add your class to the SKETCHES object (SKETCHES['yourName'] = yourClass)
  4. Set sketch.use to yourName
  5. Consider sending a pull request in heyo to share your sketch ❤️

  1. The Table of Contents will override the sketch ↩︎