Refine and export original art
See this course’s project requirements
An original interactive geometric artwork with palette and spacing controls, optional motion, a text description, inspected PNG and runnable source.
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.
Want more background?
The idea in everyday life
Create Tile Garden, an original geometric artwork with optional motion and multiple control routes.
An exported image records one appearance; source files preserve the rules and interaction.
Refine and export original art — guided practice
Make documented design changes and deliver both a static image and runnable source.
Save index.html and sketch.js from the practice files in the same new folder. Open index.html in a modern browser while online; the page loads the free p5.js 2.3.3 library from the CDN URL listed by the official download page. No account is needed. If you need offline use, download that library as p5.min.js from the official page and change only the library script src to p5.min.js. Edit sketch.js with a plain-text code editor, save, and reload the page after code changes. Use browser developer tools Console to inspect errors. Restore the original constants after each changed case unless instructed otherwise.
1. Choose a composition
Keep a baseline copy. Change COLUMNS to 4 and ROWS to 4, and choose one original fill color. Save, reload and confirm 16 motifs fit.
You should see: Two design choices affect count/composition and color while controls still work.
Documented intentional changes make the outcome your own rather than an unexplained copy.
2. Set the final appearance
Choose a palette and spacing, start motion if wanted, then pause at a chosen moment. Record palette, spacing and paused state.
You should see: The intended frame stays still before export.
A named state makes the static result easier to interpret and recreate.
3. Export and inspect
Click Save PNG. Open the downloaded tile-garden image and check its 480×360 dimensions and visible composition.
You should see: The PNG contains the artwork as a static image; no buttons are embedded in it.
pixelDensity(1) fixes the pixel dimensions; the export still needs its own visual check.
4. Package the source
Keep index.html, sketch.js, artwork-notes.md and the exported PNG together. Test the source from a copied folder online; document the CDN dependency or supply a permitted local library copy with notices.
You should see: The recipient can view the PNG or rerun the interactive source with its stated dependency.
Sharing only the PNG loses the controls and generative rules.
What to finish
An original refined artwork, inspected PNG, complete source files and a short design/test note.
Watch for this
Promising that a PNG preserves clickable controls or that a CDN-linked project works offline without the library.
How can I tell I understand it?
Complete the changed case, explain your result, and pass the three application checks.
Quick knowledge check
Answer all 3 questions. Get at least 2 right and the lesson completes automatically.
You’ll get an explanation for each answer. Signed in? Your results save to your account.
Pass the check. We’ll save the progress.
Answer all 3 questions above and get at least 2 right. You can review the explanations and try again.
Go to the knowledge checkOptional course overview video · same video as Lesson 1
Creative Coding for Beginners with p5.js (1.1)
From The Coding Train. Watch here or open it on YouTube .
Optional course overview. Follow the written steps below at your own pace.Tools, templates, and lesson sources
Tools and templates
Tools open in a new tab so you can keep your place here.
Sources and further reading
Explore the references behind this lesson.
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.
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.
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.
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.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.