line-wobbler

Generate wobbly hand-drawn lines in Processing.
Save to SVG for clean pen plotter input.

Getting Started

📺 Video Walkthrough

Requirements

Processing 4
The LazyGUI library is required to run the GuiControl example sketch.

Installation

Copy the LineWobbler.pde file from the src folder into the folder for your Processing sketch.

Example Sketch

Create an instance of the LineWobbler class.
Use drawLine() or other drawing functions to create graphics with wobbly lines.

LineWobbler wob = new LineWobbler();

void setup() {
  size(300, 200);
}

void draw() {
  background(255);
  randomSeed(0);
  wob.drawLine(10, 20, 290, 20);
}

Usage

Instantiation

LineWobbler new LineWobbler( [ int frequency, float amplitude, float frequencyJitter ] )

Create an instance of the LineWobbler class.
frequency sets the frequency of subpoints (in pixels).
amplitude sets how much the subpoints can deviate from the line (in pixels).
frequencyJitter sets how much the subpoints can deviate parallel to the line (as a percentage of of frequency)

Drawing Lines

LineWobbler wob = new LineWobbler();
wob.drawLine(10, 20, 290, 20);

PVector[] drawLine( float x1, float y1, float x2, float y2 )

Draw a line between two points.
Returns the array of subpoints used to render the wobbly line.

PVector[] drawBrokenLine( float x1, float y1, float x2, float y2 )

Draw a broken line between two points. Returns the array of subpoints used to render the wobbly line.

Drawing Polylines

LineWobbler wob = new LineWobbler();
PVector[] points = {
  new PVector(0, 0), new PVector(100, 100), new PVector(200, 0)
};
wob.drawPolyline(points);

void drawPolyline( PVector[] vertices, [ boolean connectEnds ])

Draw a multi-segment line through an array of points.
connectEnds specifies whether or not the last point in the line should be connected back to the first to form a closed shape.

void drawBrokenPolyline( PVector[] vertices, [ boolean connectEnds ] )

Draw a broken multi-segment line through an array of points.
connectEnds specifies whether or not the last point in the line should be connected back to the first to form a closed shape.

Drawing Rectangles

LineWobbler wob = new LineWobbler();
wob.drawRect(20, 180, 370, 100);

void drawRect( float x, float y, float w, float h, [ boolean connectCorners])

Draw a rectangle with the given dimensions. x and y specify the top left corner of the rectangle. w and h set the width and height.
connectCorners determines whether the four line segments should be joined at the corners.

void drawBrokenRect( float x, float y, float w, float h, [ boolean connectCorners])

Draw a rectangle with the given dimensions using broken lines. x and y specify the top left corner of the rectangle. w and h set the width and height.
connectCorners determines whether the four line segments should be joined at the corners.

Drawing Circles

LineWobbler wob = new LineWobbler();
wob.drawCircle(210, 400, 100);

void drawCircle( float x, float y, float r, [ int numSegments ] )

Draw a circle with the given dimensions. x and y specify the center of the circle. r sets the radius.
Wobbly circles are rendered by breaking up the circle into many straight segments before adding subpoints. numSegments lets you specify how many segments should be used. In general, higher numbers of segments create smoother circles.

void drawBrokenCircle( float x, float y, float r, [ int numSegments ])

Draw a with the given dimensions using a broken line. x and y specify the center of the circle. r sets the radius.
Wobbly circles are rendered by breaking up the circle into many straight segments before adding subpoints. numSegments lets you specify how many segments should be used. In general, higher numbers of segments create smoother circles.

Drawing Shapes

LineWobbler wob = new LineWobbler();
PShape shape = loadShape("complexShape.svg");
wob.drawShape(shape);

Note

LineWobbler only extracts the shape's vertices and connects them with straight lines (no curves). Drawing shapes with large curves will most likely produce undesirable results unless those curves are first broken up by adding intermediate points.

void drawShape( PShape shape, [ float x, float y ] )

Draw a shape (such as a loaded SVG) with wobbly lines.

void drawBrokenShape( PShape shape, [ float x, float y ] )

Draw a shape (such as a loaded SVG) with wobbly broken lines.

Properties

int frequency = 10

The distance between subpoints in pixels.
Smaller values create a more jagged line, larger values create a smooth wobble.

float amplitude = 0.5

How much the subpoints can deviate from the line (in pixels).
Larger values create a rougher line, smaller values make the line straighter.

float frequencyJitter = 0.2

How much the subpoints can deviate parallel to the line (as a percentage of frequency).
A value of 0 creates equidistant subpoints. Larger values may cause subpoints to appear out of order, creating a line that doubles back on itself in places.

boolean wobbleEndPointAmplitude = true

Whether or not to wobble the end point positions perpendicular to the line.

boolean wobbleEndPointPosition = true

Whether or not to wobble the end point positions parallel to the line.

boolean drawGuides = false

Whether or not to draw the guides (useful for debugging).
When enabled, straight guide lines are drawn between points. Line vertices are highlighted with green dots and wobbly subpoints are drawn red.

float minBreakSize = 0.2

The minimum size of a break in a line (in pixels) when using the broken line drawing methods.

float maxBreakSize = 5

The maximum size of a break in a line (in pixels) when using the broken line drawing methods.

float minLineSegmentLength = 5

The minimum length of a broken line segment (in pixels).

float breakFrequency = 0.2

The frequency of breaks in a line when using the broken line drawing methods.

Randomization

LineWobbler lines are recalculated with random values every frame. This will cause the lines to constantly move in sketches that utitlize a draw() loop. Calling the randomSeed() function at the beginning of the draw loop will ensure that the same random values are used on each frame. Change the value sent to randomSeed() to calculate new random values.

Animation

LineWobbler performs many unoptimized calculations on each frame. It is not meant to be used for animated sketches, and will most likely cause performance slowdowns if used for animations.

Build from Source

The build script for this project (build.sh) simply copies the class from src into the example sketches in the examples folder.

cd [line-wobbler]
./build.sh

Support

This is a personal project and is mostly unsupported, but I'm happy to hear feedback or answer questions.

License

This project is licensed under the Unlicense - see the LICENSE file for details.

👨🏻‍🦲❤️🛠

cadin/line-wobbler