Repeat with parameters and loops
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.
A small rule can generate many related shapes; parameters expose the choices you want to vary.
Repeat with parameters and loops — guided practice
Use loop counts and spacing parameters to control a composition predictably.
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. Count the grid
Read COLUMNS 5 and ROWS 3 and both nested loops.
You should see: Five columns multiplied by three rows produce 15 motifs.
Each row runs through every column exactly once.
2. Check the last center
For col 4,row 2 and spacing 70, calculate x and y.
You should see: The last center is(340,220), within the 480×360 canvas.
Index bounds and shape size both matter for fitting a composition.
3. Change grid counts
In a temporary copy set COLUMNS 4 and ROWS 4, save and reload.
You should see: Sixteen motifs appear; the last row center is y300.
Changing count parameters tests that placement is generated rather than hand-copied.
4. Check fit and restore
Confirm the last square extends from y282 to 318 because its size is 36. Restore 5 columns and 3 rows.
You should see: All sixteen test motifs fit vertically; the baseline returns to 15.
A center inside the canvas does not alone prove the whole shape fits.
What to finish
Grid-count, last-center and edge-fit calculations with a changed-case screenshot.
Watch for this
Increasing row count indefinitely without checking whether later shapes leave the canvas.
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: 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.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.