The Life Starter
Sign up
All courses/Create

Course 120 · Create course 12

Create Interactive Art with p5.js

Turn a complete small sketch into an original composition and make its controls, motion and export understandable.

Before you start

A modern browser, plain-text code editor and internet for the free library; no account is required. A permitted local library copy supports offline use.

See everything you’ll need

Practice materials and a worked example · Free download. Download the starter pack

What you’ll leave with

An original interactive geometric artwork with palette and spacing controls, optional motion, a text description, inspected PNG and runnable source.

Start course Start without an account. Sign in to save lesson progress across devices.

Your project

Start with the practice files. Build your project one lesson at a time.

Practice files are free without an account. Sign in to save your project record in My Proof: a description, checklist, and optional work link. Keep the original files in your own app or notebook; saving a project record does not upload them.

  1. Get your materialsDownload practice filesStart with the supplied materials, follow the lessons, and compare your work with the annotated example.
  2. Make your projectView the project checklist Work in your own notebook, document, or software. Use the supplied practice examples when you prefer.
  3. Keep a private recordSave a project record Sign in to save a description and checklist, then return to update them.
Optional course overview

Watch an introduction.

This overview from The Coding Train introduces ideas you’ll practice in the lessons.

Watch directly on YouTube
The Coding TrainCreative Coding for Beginners with p5.js (1.1)YouTube
Course handbook

Know the route before you begin.

Here’s what you’ll need and what you’ll make. You can return to this guide during any lesson.

Who this is for

Learners age 14+ who meet the stated prerequisites.

Prepare before lesson one
  • A modern browser, plain-text code editor and internet for the free library; no account is required. A permitted local library copy supports offline use.
  • Recognize basic JavaScript variables, functions and loops. The earlier JavaScript interactivity course is useful preparation.
  • Reading and core practice include the three checks. Initial software setup and optional video viewing take extra time.
Your final project

Finish with proof you can use.

An original interactive geometric artwork with palette and spacing controls, optional motion, a text description, inspected PNG and runnable source.

Save a project record in My Proof
See project checklist and review criteria

Keep your working files in your own notebook or software. Save a private description, checklist, and work link in My Proof.

What to include

  • Coordinate, grid-count and edge-fit calculations.
  • Two intentional original composition choices.
  • Equivalent pointer/button/keyboard controls with boundary tests.
  • Optional motion, pause and useful text support.
  • Inspected PNG plus complete source and dependency notes.

Review and revise

Use these criteria to check your work and choose what to improve.

  • The layout matches its calculations and fits the canvas.
  • Controls update bounded state consistently.
  • Motion and text support are usable and explained.
  • Image and source handoff are complete.
Three ideas to help you along the way
Three useful ideas

The rules behind the steps.

01

Expose useful parameters

Let a small number of named values control a coherent composition.

02

Offer motion as a choice

Start paused and preserve other controls during pause.

03

Deliver appearance and behavior

Inspect the PNG and keep runnable source with its dependencies.

What do these words mean?
Key words

Key terms worth knowing.

Canvas
A rectangular browser drawing surface.
Coordinate
A numeric position on the canvas.
Parameter
A named value that controls an aspect of the output.
Frame
One rendered state of an animation.
Text alternative
Words conveying meaningful visual information.
Your route

6 lessons.
One useful project.

Work in order the first time. Each lesson makes something the next lesson can use.

  1. 1
    Up next

    Draw and locate a motif

    Run a complete sketch and connect coordinates to a visible repeated shape.

  2. 2
    36 min

    Choose a palette and draw order

    Explain fill, outline and layer order while making an intentional color choice.

  3. 3
    36 min

    Repeat with parameters and loops

    Use loop counts and spacing parameters to control a composition predictably.

  4. 4
    36 min

    Add pointer and keyboard controls

    Trace input events to bounded state changes with equivalent visible controls.

  5. 5
    36 min

    Control motion and describe the artwork

    Add optional time-based change, a reliable pause and a useful text alternative.

  6. 6
    36 min

    Refine and export original art

    Make documented design changes and deliver both a static image and runnable source.

Use the tools

Tools to help you practice.

See all tools
ZIP · practice files

Create Interactive Art with p5.js practice files

Start with the supplied materials, follow the lessons, and compare your work with the annotated example.

Text worksheet

Your course project worksheet

A downloadable text worksheet with each lesson’s working output, space for your answers, and the shared final-project checklist. Save your own copy.

Source transparency

Sources and further study.

Explore the references behind the lessons and take your learning further. Source notes explain access and reuse.

p5.js: Get started
Source & access notes · checked 2026-09-12

Opened and inspected on 2026-09-12: Setup/draw, canvas and beginner editor workflow.

Access: Free public web page; no paid enrollment required.

Reuse: Public reference; link only. LifeStarter prose, exercises and files are independently authored.

p5.js: Variables and Change
Source & access notes · checked 2026-09-12

Opened and inspected on 2026-09-12: Using variables to change visual output.

Access: Free public web page; no paid enrollment required.

Reuse: Public reference; link only. LifeStarter prose, exercises and files are independently authored.

p5.js: describe() reference
Source & access notes · checked 2026-09-12

Opened and inspected on 2026-09-12: A text description of the canvas for accessibility.

Access: Free public web page; no paid enrollment required.

Reuse: Public reference; link only. LifeStarter prose, exercises and files are independently authored.

p5.js: Download
Source & access notes · checked 2026-09-12

Opened and inspected on 2026-09-12: Official download page lists the pinned 2.3.3 CDN library URL used by this original fixture.

Access: Free public web page; no paid enrollment required.

Reuse: Course code and prose are original. The third-party p5.js library is linked, not repackaged; preserve its license notices if saving a local copy.

p5.js: pixelDensity() reference
Source & access notes · checked 2026-09-12

Opened and inspected on 2026-09-12: Default density follows the display; explicit 1 fixes the intended export pixel dimensions.

Access: Free public web page; no paid enrollment required.

Reuse: Public reference; link only. LifeStarter prose, exercises and files are independently authored.

Creative Coding for Beginners with p5.js (1.1)
Source & access notes · checked 2026-09-12

Metadata retrieved and inspected on 2026-09-12: exact title and channel confirmed through YouTube oEmbed. Playback and full video content were not tested. Optional overview; the written lesson and supplied practice stand alone.

Access: Free public web page; no paid enrollment required.

Reuse: Link or provider embed only; do not copy video, audio or transcript.

Ready when you are

Start with the first useful move.

You’ll always know what to do, what to make, and where to go next.

Start lesson one