Skip to main content

Dot and Box

what and what for?​

dot and box allows drawing dots and boxes and do simple step based animations making it easy to visualise some algorithms or your raw ideas e.g. show event flow in a distributed system.

But hey, you can use it for whatever you like!

visualise algorithms​

Let's assume you want to explain how the bubble sort works. It can be done writing dot and box code like one below:

  title: sort with bubble sort
  box id: win at: [-6, 0] size: [2, 1] color: rgba(254,193,7,0.6) visible: false
  dots ids: 2 1 5 3 4 at: [-3,0] radius: 20
  step: '(1) select first two numbers' duration: 0.8s
  win <- visible: true, win -> +[3,0]
  step: '(2) swap if left bigger than right'
  2 <-> 1 // swap dot 2 with 1
  step: '(3) select next two numbers'
  win -> +[1,0] // move window by 1 cell right
  step: 'ignore if left is smaller and select next'
  win -> +[1,0]
  step: 'again swap if left bigger'
  5 <-> 3
  step: 'and again'
  win -> +[1,0]
  5 <-> 4
  step: 'repeat from start'
  win -> -[3,0]

and see dot and box visualization result:

Play with control buttons, to see what happens.

Live Editor​

You can play with dot and box code on the live editor page.

How it works ?​

Technically dot and box is an HTML5 custom element. You can add dot-and-box tag (just like normal div tag) to your page with code attribute defining controls and animation steps. On the next page [getting started] page to see how to use it.