Code experiments on drawing
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist move menu button to left Apr 18, 2016
images organize folder Apr 12, 2016
src/js switch brush when background changes Apr 14, 2016
.gitignore project setup Sep 19, 2015
LICENSE Initial commit Sep 19, 2015 Update Apr 15, 2016
app.html update with GA Apr 14, 2016
gulpfile.js rename LineForm class Apr 12, 2016
index.html Update index.html Apr 14, 2016
line.html update icons Apr 18, 2016
package.json clean ups Apr 12, 2016

Taking a Line for a Walk

a drawing gif a drawing gif

This is a code experiment to study the expressions of an active line, inspired by Paul Klee's idea of "taking a line for a walk".

Try the interactive demos and read more about the concept.

Hope you like this! Please ping me @williamngan if you have questions and feedbacks.


Just simple prototype code in javascript ES6. Nothing fancy.

Take a look at LineForm.js which contains a set of functions to create lines.

Then check out BaseLine and its extended classes such as RestatedLine to see how a line is animated and drawn.

This uses Pt.js for drawing. Pt is an experimental library on point, form, and space. And roll.js which is a little library for scrolling slideshow.


Run gulp in Terminal, and take a look at gulpfile.

You may ask: where are the import xyz? why not use browserify/webpack/npm/what-not? The answer is that I can't be bothered ;-)