solandra

Opionated, agile (code is easy to change) framework for algorithmic art. See my essays for research/plans that went into this!

Usage no npm install needed!

<script type="module">
  import solandra from 'https://cdn.skypack.dev/solandra';
</script>

README

Solandra

Principles

Opionated, agile (code is easy to change) framework for algorithmic art. See my essays for research/plans that went into this!

  • Sketches always have width 1, height depends on aspect ratio.
  • Angles in radians.
  • Points are [number, number].
  • Colours in hsl(a).
  • Leverage TypeScript: you shouldn't need to learn much, autocomplete and type checking should have your back.
  • Not for beginners.
  • Control flow at level of drawing (tiling, partitions etc).
  • Few dependencies/mostly from scratch.
  • Performance is not the goal.
  • Common algorthmic art things (e.g. randomness) should be easy.
  • Should feel fun/powerful.
  • Life is too short to compile things.
  • Rethink APIs e.g. standard bezier curve APIs make absolutely no sense
  • Declarative when possible (especially anything configuration-y), procedural when pragmatic; make it easy to explore/change your mind.

Examples

Get Started

Or if you want to play, install gatsby cli, clone this repo and start by

yarn
gatsby develop

Then open http://localhost:8000 and in your editor sketches.ts and try things out. It does things like the below

A simple example drawn with tiles

p.forTiling({ n: 20, margin: 0.1, type: "square" }, ([x, y], [dX, dY]) => {
  p.lineStyle = { cap: "round" }
  p.proportionately([
    [
      1,
      () => {
        p.setStrokeColour(120 + x * 120, 90 - 20 * y, 40)
        p.drawLine([x, y], [x + dX, y + dY])
      },
    ],
    [
      2,
      () => {
        p.setStrokeColour(120 + x * 120, 90 - 20 * y, 40)
        p.drawLine([x + dX, y], [x, y + dY])
      },
    ],
  ])
})

An example

An example

An example

An example