Day 11: Introduction to p5.js

Entering Generative Design

Generative design introduces controlled randomness into your aesthetic toolkit. p5.js makes programming accessible to designers, allowing you to create visuals that would be impossible to draw manually. Today marks your transition from static design to dynamic, algorithmic creativity.

Understanding the Basics

Follow the official p5.js tutorial to understand setup(), draw(), and basic coordinate systems. Then watch Daniel Shiffman explain the difference between random() and noise() functions. Random creates chaotic, unpredictable values; noise creates organic, flowing variations. Both serve different aesthetic purposes.

Three Experiments

Create three simple experiments: first, use random() to generate a field of dots with varying positions, sizes, and colors. Notice how true randomness feels energetic but potentially harsh. Second, use noise() to create flowing lines or organic shapes that evolve smoothly over time. Third, combine both approaches - maybe use noise() for smooth movement and random() for color choices.

Essential p5.js Concepts:

• setup() - runs once at the beginning
• draw() - loops continuously
• random() - chaotic, unpredictable values
• noise() - organic, flowing variations
• Coordinate system (0,0 at top-left)
• Basic shapes and color functions

Discovering Algorithmic Beauty

Keep your code simple (under 50 lines) and focus on aesthetic discovery rather than technical complexity. Save screenshots of interesting moments - generative art often produces unexpected beauty. This introduction to algorithmic aesthetics opens entirely new creative possibilities beyond traditional design tools.