We developed a framework in JavaScript for procedurally generating visual artworks and music. This framework specifies how drawing algorithms are structured to step-by-step create images. While images are being generated, drawing actions are (optionally) converted to sounds to create music. Drawing algorithms are treated as objects that carry a state that changes over time. The current state determines how the next drawing step adds to and manipulates the image canvas. Drawing algorithms can run independent of each other with a collection of premade functionalities such as initialize, start, pause, reset, and drawOneStep. Furthermore, drawing algorithms can be passed as input into functions allowing them to run under a variety of configurations and be connected to user interfaces and external applications.

Furthermore, using this framework, we present a particularly interesting example of a drawing algorithm that has a dual purpose for both visually representing solutions to an algorithmic problem and for creating unique artworks. This algorithmic problem is defined as follows. Given an m by n binary matrix, our task is to enumerate all rectangular blocks containing only 1 entries on the border and 0 entries within the interior. The authors previously developed a solution for this problem that runs in O(m n) time using O(n) space. We adapt this solution to create a drawing algorithm that draws visual artworks in the style of classical artist Piet Mondrian and contemporary artist Adam Lister.