picjs

constraint-based drawing and animation language

Use it like Mermaid. Draw what you want.

  • constraint-based positioning
  • build-in programming language
  • color palettes
  • animation
  • playground

~~~ picjs
// your imagination goes here...
~~~

Block Graphics 

box "Hello" -> box "World!"
HelloWorld!XQFM

With a Programming Language 

[0..359].steps(10, theta => {
  circle at 2*(sin(theta), cos(theta))
})
XQFM

And color manipulation:

petals = 17

start_color = oklch(70%, .3, 0)

petal = (color) => {
  4.times(=> {
    Arc stroke color
    Arc ccw stroke color.spin(10)
    Arc stroke color.spin(20)
  })
}

petals.times(n => {
  Face 360/petals*n 
  petal(start_color.spin(n*30))
})
XQFM

And Animation

XQFM

(press the ▶ button)

The code behind the Hanoi animation uses some interesting features of the language, so there's a page that describes it.