Choose a palette and draw order
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.
Later drawing commands appear over earlier ones; style settings affect following shapes.
Choose a palette and draw order — guided practice
Explain fill, outline and layer order while making an intentional color choice.
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. Read the palette
Find the Night object in PALETTES. Identify background, frame and fill roles.
You should see: The background is dark, the square outline is light and the circle is teal.
Named roles are easier to change consistently than scattered color literals.
2. Trace the layers
Read background, square outline and circle drawing in that order.
You should see: The circle is drawn after its outline; background is drawn before all motifs.
A background drawn last would cover the earlier artwork.
3. Test the controls
Click Next palette three times from the original page. Record the labels.
You should see: Night→Clay→Leaf→Night.
The modulo expression wraps the index into the three valid choices.
4. Make one color choice
In a preserved copy change only Night’s fill color to #ffbf69, save and reload. Describe the warmer circle against the same outline.
You should see: Shape, count and spacing stay fixed while circle color changes.
One role change isolates the visual effect and preserves shape cues beyond color.
What to finish
A palette-cycle record and one explained original color change.
Watch for this
Calling background after drawing the motifs paints over the work.
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.