Skip to content

funground User Guide

For learners and teachers. The guide teaches; the Quick Reference is for looking things up; the Examples Gallery shows every feature. Every complete example in this guide is tested: it runs exactly as printed.

Each chapter ends with a Try it section of two or three small exercises, easiest first. Do them. Changing a working sketch is the quickest way to learn.

A learning path

Read the chapters in order the first time. Later, jump to the part you need.

Start here

After this part you can write a sketch, run it and draw shapes on the canvas.

# Chapter
1 Getting started
2 The sketch: setup, draw and run
3 Shapes

Making pictures

After this part you can paint with colour, gradients, lines, text, transforms, paths, clips and pictures.

# Chapter
4 Colour
5 Fill, stroke and lines
6 Text
8 Transforms and saved_state
9 Paths, clipping and pictures

Motion and interaction

After this part you can make things move, react to the mouse and keyboard, add sliders and buttons, and use randomness, noise and a little maths.

# Chapter
7 Animation and time
10 Interaction: mouse, keyboard and controls
11 Randomness and noise
12 Useful maths

Files and print

After this part you can save PNG, PDF and SVG files, make a GIF or MP4, and build a document with several pages.

# Chapter
13 Saving your work

Sound and music

After this part you can play tones, tunes and files, draw what a sound looks like, listen with a microphone, and play ragas and talas.

# Chapter
16 Sound
17 Ragas and talas

Projects

After this part you have seen whole programs built from the pieces above.

# Chapter
18 Projects

Studios

After this part you can set up a page with margins and a grid, keep a drawing as a mark and place it, and compare and keep versions of your work.

# Chapter
19 Studios: the same picture, twice

Coming from p5 or DrawBot

After this part you can port a sketch you already know, and you know where funground differs on purpose.

# Chapter
14 Coming from p5.js and Processing
15 Coming from DrawBot

Reference

After this part you can find any function, understand any message and look up any word.

All chapters, in order

# Chapter
1 Getting started
2 The sketch: setup, draw and run
3 Shapes
4 Colour
5 Fill, stroke and lines
6 Text
7 Animation and time
8 Transforms and saved_state
9 Paths, clipping and pictures
10 Interaction: mouse, keyboard and controls
11 Randomness and noise
12 Useful maths
13 Saving your work
14 Coming from p5.js and Processing
15 Coming from DrawBot
16 Sound
17 Ragas and talas
18 Projects
19 Studios: the same picture, twice

Using the code. Every code example in this guide is free to copy, change and use in any way, with no conditions (CC0).