emberley.js

Animated, felt-tip drawings in the spirit of Ed Emberley's Make a World, for p5.js. Each item is built from the book's alphabet of circles, lines, triangles and dots. It draws itself one step at a time with a marker, then comes to life: wheels roll, legs walk, flags wave, smoke puffs and propellers spin.

One file, no dependencies beyond p5.js (1.x).

Live demo: https://mvandewettering.com/emberley/ (also the gallery, everything sheet and size line-up).

An unofficial homage: the drawings are original, made in the style of Ed Emberley's drawing books, and this project isn't affiliated with him or his publishers.

Files

File	What it is
emberley.js	The library
index.html	A whole world that draws itself; click to add more
gallery.html	The book's step-by-step strips, item by item
sheet.html	Every item at once, animating in place
sizes.html	Every item at its natural size, smallest to largest
dc.html	Washington, DC: a sunny day and a flag-waving crowd
about.md	Your own story, shown by the main page's About button
about.js	Loads about.md into that panel (tiny Markdown converter)

Browsers won't load the scripts from file:// in every case, so serve the folder:

python3 -m http.server 8000    # then open localhost:8000

About page

Write anything you like in about.md (plain Markdown: headings, paragraphs, italic, bold, links, pictures, lists, quotes). The main page loads it automatically: an About button appears in the toolbar and opens it in a side panel, and index.html#about links straight to it. While the file has nothing but comments the button stays hidden. Pictures can sit next to it, e.g. ![me](images/me.jpg).

Browsers won't let a page read about.md when it's opened as a file:// URL, so the button only shows on the live site or from a local server (python3 -m http.server).

Quick start

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script src="emberley.js"></script>
<script>
new p5((p) => {
  let world;
  p.setup = () => {
    p.createCanvas(800, 400);
    world = Emberley.createWorld(p, { palette: 'makeaworld' });
    world.add('house', { x: 200, y: 300 });
    world.add('car', { x: 100, y: 360, color: 'blue', delay: 3 });
    world.add('bird', { x: 500, y: 100, delay: 5 });
  };
  p.draw = () => world.frame();   // update + paper + items
});
</script>

In global mode call Emberley.createWorld() with no argument inside setup().

Items

Emberley.list() returns every name; Emberley.list('animals') filters by tag.

• people: person, girl, king, knight, soldier, cowboy, clown
• buildings: house, castle, windmill, lighthouse, tent, flag
• nature: tree, pine, flower, mushroom, grass, mountain, hill
• sky: sun, moon, star, cloud, airplane, helicopter, rocket, balloon
• vehicles: car, truck, bus, engine, coach, caboose, train (cars: 2, caboose: true)
• boats: sailboat, ship, submarine (under water)
• animals: bird, butterfly, fish, shark, cat, blackcat, elephant, trex, dog, horse, cow, pig, duck, snail, turtle, ladybug
• scenery: ground, road, track, water (take width, depth)

Ground items stand with their feet on y; sky items (birds, planes, sun) are centred on y.

Relative sizes

Each item knows its real height in metres (real in its definition), and is drawn at a natural size relative to a person, who is 100 px tall at scale 1. True scale would make a castle ten people tall and a ladybug invisible, so sizes are compressed the way a picture book's are:

size = 100 * (metres / 1.75) ^ sizeExponent     (default 0.45)

So a cat is about 45 px, a car 95, an elephant 130, a house 200 and a castle 290. scale multiplies that, so one scale for everything keeps them in proportion; use a smaller scale for things further away. sizeExponent: 1 gives true scale, 0 makes everything the same height, and sizes: false (or natural: false on one item) turns natural sizing off. sizes.html has a slider to compare.

world.add(name, options)

Option	Meaning
x, y	Position in canvas pixels
scale	Multiplies the natural size (a person = 100 px)
natural	false: ignore the natural size for this item
color	Main colour (palette name); some items take more,
	e.g. roof, sail, wings, hair, stripe
facing	1 / 'right' or -1 / 'left'
motion	still sway drive walk crawl fly flutter hover swim
	sail float drift launch, or a function (it, dt)
speed	Travel speed in px/second
delay	Seconds before the pen starts
drawTime	Seconds to draw it (default: from pen speed)
instant	Skip the drawing animation
steps	Only draw the first N book steps
animate	false freezes it once drawn
layer,z	Draw order (then by y)
seed	Fixes the hand-drawn wobble
onDrawn	Callback when the drawing is finished

It returns the item, whose fields (x, y, speed, facing, motion, scale...) can be changed at any time. item.redraw(delay) starts the drawing again.

This is the beginning of the README. Read the rest at the original. Read the full README ↗