Patterns

Loop Patterns

Brief Description and Concept:  After learning how to write loop functions in Week 4 Creative Coding class, we were given the exercise to create nine still images. The conditions were that the generative visuals consisted of repeating visual elements. The goal of this exercise is for us to explore methods for utilizing loops in p5.js.

Demo/Visual Documentation:

1. Pattern 1 (Code)
2. Pattern 2 (Code)
3. Pattern 3 (Code)
4. Pattern 4 (Code)
5. Pattern 5 (Code)
6. Pattern 6 (Code)
7. Pattern 7 (Code)
8. Pattern 8 (Code)
9. Pattern 9 (Code)

Coding:

Reflection/Lessons Question:

• How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?
• What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.
• What makes a good generative pattern?

Response:

It is faster to draw by hand from observation than from programming the computer to draw for you. When drawing by hand, we have the flexibility and freedom to draw lines and curves based on our feelings. On the other hand, the computer needs functions to build accurate shapes. It requires exact commands. Despite the differences, both styles require the drawer to conceptualize an idea and how to produce this idea.
For my nine images, I primarily used the repetition function to manipulate the location and size of the objects. Most of the time, the shapes enlarged as they strayed away from the center or corner of the canvas.
A good generative pattern can be reproduced. The image itself tells us how to create it by observing its structure.