Scribble JS

Scribble JS


Scribble JS presents a collection of sophisticated tools for creating 2D topologies from sets of polylines. It can be used to implement things like vector paintbrushes and geometric collision detection and representation for games.

Click on the links or the pictures to see the example working on the internet. I invite you to have as much fun as possible with these examples.

You may find the source code on Github at: For your own, projects please look at the source code for the example projects. To use Scribble.JS in your own project, you will only need the latest build file, which may be found here, along with a knowledge of the functionalities provided by this project.


This project was developed concurrently with a centralized repository for my javascript data structures. This project therefore requires the Bryce Data Structures submodule. This means that after you clone the repository from github, you may have to run the following commands in your favorite terminal:

git submodule init
git submodule update
Running these commands fetches the Bryce Data Structures code.

Development Schedule

Please visit the following link to see a comprehensive development schedule for this project.


Line Splitting

Click here to see this working online. Code.

Line Splitting Example Image

Face Finding

Online! Code.

Face Finding Example Image.

Bounding Volume Hierarchy Formation

Online! Code.

Bounding Volume Hierarchy Example Image

Eraser Tool

Online! Code.

Eraser Tool Example Image

Automatic Coloring

Online! Code.

Line Drawing Example Image.

Polyline Additive Drawing Tool

Online! Code. Note: Self-intersections in lines are not yet supported. Try drawing a intersecting lines, like in a subway system.

Additional Line Drawing Tool Example Image.

Cubic Curves - Bezier and Hermite

Online! Code. I've implemented functionality for Bezier and Hermite Cubic curves. You can:

Bezier Curves Input / Output feature image.

Simple Holes

Online! Code. You can currently embed simple holes within faces.

Hole Embedding and Drawing Example Image.

Vector Graphics Editor

Online! Code. This Vector Graphics Editor Example supports the following features:

Editor Tool Screenshot.

Self Intersecting Lines

Online! Code. Users can now draw self intersecting lines using the line tool.

Editor Tool Screenshot. Editor Tool Screenshot. Editor Tool Screenshot. Editor Tool Screenshot.

Drag Line Tool

Online! Code. Users can now draw freeform polylines using the drag line tool.

Editor Tool Screenshot. Editor Tool Screenshot.


This will be a deeper dive into the capabilities of Scribble.JS, which will be written in the future, when I have some more free time.


Please visit the following link to see a comprehensive, more up to date development schedule for this project.