Introduction
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: https://github.com/Bryce-Summers/ScribbleJS 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.
Dependancies
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 updateRunning these commands fetches the Bryce Data Structures code.
Development Schedule
Please visit the following link to see a comprehensive development schedule for this project.
Demos
Line Splitting
Click here to see this working online. Code.
Face Finding
Bounding Volume Hierarchy Formation
Eraser Tool
Automatic Coloring
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.
Cubic Curves - Bezier and Hermite
Online! Code. I've implemented functionality for Bezier and Hermite Cubic curves. You can:
- Discretize them into polylines.
- Embed their associated discretized polylines using the polyline graph embedder.
- Convert Embedding faces back into curves.
- Draw them using the canvas or by drawing their discretized polylines.
Simple Holes
Online! Code. You can currently embed simple holes within faces.
- Automatically Embed complemented faces within the correct non-complemented face.
- Even - odd SVG path drawing.
Vector Graphics Editor
Online! Code. This Vector Graphics Editor Example supports the following features:
- Line Drawing
- Line Erasing
Self Intersecting Lines
Online! Code. Users can now draw self intersecting lines using the line tool.
- Supports non-crazy line drawing where the intersections are not close to each other.
- Numerical instabilities are still present. I really should get on to those...
- In a future update, nearby points will be combined into single points.
Drag Line Tool
Online! Code. Users can now draw freeform polylines using the drag line tool.
- Points are created by dragging the mouse along a path, rather than by clicking.
- I now see that my topological update functions are non-optimized for large faces of the type that may be easily formed with this tool.
- I would like to test the performance of my BVH's now.
Features
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.
Features
- Polyline Sets to HalfedgeMesh
- Halfedge Erasing, with deletion of lonely vertices.
- Not yet fully ported and tested: The removal of trivial area tails.
- Not yet fully tested and ported: Shallow Merging of faces.
- Automatic Coloring of Faces.
- Proper Handling of Interior continents.
- TODO: Proper handling of incredibly degenerate geometric positionings.