Sketches são as visualizações na barra lateral do heyo. As disponíveis no momento foram construídas usando p5.js – uma biblioteca de javascript para programação criativa.

Visualizações

Por enquanto oferecemos as seguintes visualizações:

Sketch Descrição
Graph Pontinhos se movendo tranquilamente de acordo com Perlin Noise
Digital Rain Símbolos caindo, Matrix style
Circles Desenhando círculos com um pincel estranho

Sinta-se livre para sugerir ou contribuir novas visualizações em heyo!

Configuração

Global

A sketch pode ser habilitada globalmente pelo param sketch no config.toml.

Param Descrição
sketch.enable Controla se a sketch vai aparecer em todas as páginas 1
sketch.displayOptions Controla se as opções da sketch serão mostradas no hover
sketch.use Seleciona a sketch padrão

Por página

Mesmo com sketch.enable = false no config.toml, você ainda pode habilitar a sketch em páginas específicas. Tudo que precisa fazer é a congiguração no front-matter da página. Isso permite que você mostre sketches diferentes em páginas específicas.

Implementando sua própria sketch

Via customJs você pode importar seu próprio javascript, então tudo que precisa fazer é:

  1. Envelopar sua sketch em uma classe
  2. Sua classe deve implementar as funções de setup e draw (ela também pode implementar mouseWheel, mouseClicked e getSettings)
  3. Adicionar sua classe ao objeto SKETCHES (SKETCHES['yourName'] = yourClass)
  4. Colocar sketch.use = yourName
  5. Considere enviar pull request em heyo para compartilhar sua criação ❤️

  1. O índice, quando habilitado, vai sobrepor a sketch ↩︎