honeycombs (aka h9) is a library for drawing things in the browser.

documentation ●くろまる examples ●くろまる code

Warning

The library is ready for early feedback, but please be aware that the interface is still far from stable during development. If you are using the library make sure to pin a specific version with npm/unpkg.

Key Ideas

honeycombs is named in part due to the way it uses geometries to provide structure to drawings. To make it easier to type, and to conform to market expectations, the library is imported as h9. h9 borrows ideas from p5.js, d3, and game engines.

It takes just a few minutes to get acquainted with the key ideas:

Layout

Sketches typically start with a layout , a division of the available screen space: a traditional square grid allows positioning independent of the actual dimensions of the page, or use hexagonal, triangular, or radial grids. You can always design your own layout too. One of the design goals of honeycombs is to take care of as many of the repetitive and/or math-intensive portions of creative coding-- leaving you more time to create.

Drawables

Building on the substrate of a layout, you will position one or more drawables . The built-in drawables represent the geometric primitives common to 2D computer graphics: points, lines, polygons, circles, arcs, curves.

Transformation

Drawables do not need to be drawn to be useful to laying out the final graphic. Through various transformation, combination, and selection methods it is possible to create complex geometries with minimal code and no complex math.

Animation

While still under active development, the goal is to also provide novel interfaces for creating different kinds of animation .

Utilities

With the goal of providing you with everything you need to quickly start creating, the library also comes with utilities for working with color, random numbers, noise, timers, and more.