Simple path extrusion Processing/Processing.js sketch

This is a first step in a multistep process towards an online CJK character building application. However, before we can build characters, we need to be able to define strokes. How? Why, by using paths of course! ... but of course paths are kind of thin and without substance, so they need a thickness. How? Why, by extruding the path! This sketch is an implementation of path extrusion in triplicate:

1. "point" and "bezier point" code objects, which you see as the vertices in the path you draw, and each point's "left" and "right" extrusion thickness, which you see as the coloured area around the path,
2. JSON path information, which represends the point objects, and
3. an SVG description of the extruded path.

Drawing a path is relatively straight-forward: click to place a linear point, or click-drag to place a (bezier) curved point. If you aren't happy with what you drew, right-clicking will remove the last-placed point.

Each point comes with a "left" and "right" scale control, which lets you play with the left/right extrusion thickness per point in the path. Obvious things to do is to set the start an end scales to 0, for pointed ends, or have one end at scales 0 and another at scales 2, for a bell-bottom effect. I'm sure you'll come up with some other combinations.

written by Mike "Pomax" Kamermans from nihongoresources. Interfacing between Processing and plain javascript achieved with this trick

Sketch source code:

• sketch.pde
• javascript interface code
• Point class
• BezierPoint class
• Processing class for JSON path strings
• Path class
• Polygon/polybezier class
• shape list
• SVG class