Lesson 02 – Grids and patterns
Schedule
| Time | Desc |
|---|---|
| 00:00 – 00:15 | Intro |
| 00:15 – 00:30 | Sharing |
| 00-30 - 01:00 | Work on assignement |
| 01:00 - 01:10 | Break |
| 01:15 - 02:00 | Work on assignement |
| 02:00 - 02:15 | Wrap up |
🎯 Focus
Structured generative systems.
Content
Brief
Write some code to generate tiling pattern or textural composition. Give consideration to aesthetic issues like symetry, rhythm, color, details at multiple scales; precise balance of form and the balance between organic and geometric forms. The pattern should be designed so that it is infinitely tiled or extended.
You must first sketch your idea on paper before working with the software.
Variations / Steps
- Make a grid
- Animate the elements in your grid
- Experiments with 2D graphic transformations (rotation, scaling, mirror, offset)
- Use nested iterations
- Add some easing
- Use a kaleidoscopic effect (you can introduce image or videos as source)
- Make it loop
- Export it as a GIF
- Add states
- Add noise / randomness
- Make it “sketchy”
- Take it to the 3rd dimension
Deliverables
- Code and documentation of your process, add some live example + gifs / images.
- Include a scan or photo of your drawings in the post
More on patterns
A pattern is a discernible regularity in the world or in a manmade design. As such, the elements of a pattern repeat in a predictable manner. A geometric pattern is a kind of pattern formed of geometric shapes and typically repeated like a wallpaper.
Try to experiment with different type of patterns, for example: Tessellations. Tessellation, or tiling in two dimensions, is a topic in geometry that studies how shapes, known as tiles, can be arranged to fill a plane without any gaps, according to a given set of rules. There are many forms of tesselation and you are invited to read some of the pages below to learn more about each of those tesselation technics:
✎ Ideas for experiments (1)
Try to recreate some of the patterns below, add interactivity. Start simple then complexify your system gradually.
You will find code examples in the book [Generative Gestaltung (P_21)](http://www.generative-gestaltung.de/2)
CheckPinterest pattern board
_(temp pinterest account: tmp.pin@gmail.com / TT4[bosses )
> Escher tesselations
✎ Ideas for experiments (2)
Let’s have a look at a fun little command line code originally written in Basic on the C64 in the early 80’s:
10 PRINT CHR$(205.5+RND(1)); : GOTO 10
Even though the code in itself is similar to the algorithms that generate patterns we explored before; With certain settings the visuals it produces are quite similar to outputs generated by intelligent agents programs.
Recreate a version of 10print in p5.js and create some variations
Wrap-Up & Homework
📂 Deliverables
- Summarize key learnings.
- Documentation and thoughts on today’s work
- Code and documentation, start writing about it in your journal.
- Include scan or photos of your drawings in the post(s).
📓 Journal Prompts
- How did your initial paper sketches influence your digital pattern? Did anything change in translation?
- What strategies did you use to balance order and randomness in your grid or pattern?
- Describe a moment when a mistake or unexpected result led to a new idea or direction.
- How did you approach making your pattern “infinite” or seamlessly tileable? What challenges did you face?
- How did working with code change your perception of artistic control compared to analog methods?
- What did you learn about the relationship between simple rules and complex outcomes?
🗒️ To-Do for Next Week
- 📕 Browse Vera Molnar’s journals
- ✅ Keep testing local p5.js setup on your machine (VS Code + Live Server or similar).
- ✅ Keep getting familiar with the journal workflow:
- Create more test entry in your
journal/branch. - Customise you code snippets, etc…
- Create more test entry in your
- ✅ Lear more about Github Pages
- ❓ Test different workflows / notebooks:
Resources