Draw and locate a motif
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.
Canvas coordinates measure position from the top-left corner; x increases right and y increases down.
Draw and locate a motif — guided practice
Run a complete sketch and connect coordinates to a visible repeated shape.
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. Open the sketch
Open the supplied index.html online. Read its controls and leave motion paused.
You should see: Fifteen circles inside square outlines appear on a480×360 canvas.
A known starting image makes later code changes interpretable.
2. Find the first center
Read x=60+col*spacing and y=60+row*80 in draw. For col 0,row 0, calculate the center.
You should see: The first motif is centered at(60,60).
The first loop indices are zero, not one.
3. Trace the next column
With spacing 70, calculate centers for col 0,1 and 2 in row 0.
You should see: The centers are(60,60),(130,60),(200,60).
A coordinate rule explains repeated placement without manually listing every position.
4. Move the origin
Temporarily change both leading 60 values in the x/y formulas to 70, save and reload. Inspect the shift, then restore 60.
You should see: Every motif moves 10 pixels right and 10 down.
Changing an origin shifts the whole composition while preserving spacing.
What to finish
A running sketch and three labeled coordinate calculations.
Watch for this
Treating y as upward-positive or forgetting that loop indices begin at zero.
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
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.
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.
Report a problem with this lesson
Tell us what went wrong. Please leave out personal information and private project contents.