1/**
2 * ═══════════════════════════════════════════════════════════════════════════
3 *                  P5.JS GENERATIVE ART - BEST PRACTICES
4 * ═══════════════════════════════════════════════════════════════════════════
5 *
6 * This file shows STRUCTURE and PRINCIPLES for p5.js generative art.
7 * It does NOT prescribe what art you should create.
8 *
9 * Your algorithmic philosophy should guide what you build.
10 * These are just best practices for how to structure your code.
11 *
12 * ═══════════════════════════════════════════════════════════════════════════
13 */
14 
15// ============================================================================
16// 1. PARAMETER ORGANIZATION
17// ============================================================================
18// Keep all tunable parameters in one object
19// This makes it easy to:
20// - Connect to UI controls
21// - Reset to defaults
22// - Serialize/save configurations
23 
24let params = {
25    // Define parameters that match YOUR algorithm
26    // Examples (customize for your art):
27    // - Counts: how many elements (particles, circles, branches, etc.)
28    // - Scales: size, speed, spacing
29    // - Probabilities: likelihood of events
30    // - Angles: rotation, direction
31    // - Colors: palette arrays
32 
33    seed: 12345,
34    // define colorPalette as an array -- choose whatever colors you'd like ['#d97757', '#6a9bcc', '#788c5d', '#b0aea5']
35    // Add YOUR parameters here based on your algorithm
36};
37 
38// ============================================================================
39// 2. SEEDED RANDOMNESS (Critical for reproducibility)
40// ============================================================================
41// ALWAYS use seeded random for Art Blocks-style reproducible output
42 
43function initializeSeed(seed) {
44    randomSeed(seed);
45    noiseSeed(seed);
46    // Now all random() and noise() calls will be deterministic
47}
48 
49// ============================================================================
50// 3. P5.JS LIFECYCLE
51// ============================================================================
52 
53function setup() {
54    createCanvas(800, 800);
55 
56    // Initialize seed first
57    initializeSeed(params.seed);
58 
59    // Set up your generative system
60    // This is where you initialize:
61    // - Arrays of objects
62    // - Grid structures
63    // - Initial positions
64    // - Starting states
65 
66    // For static art: call noLoop() at the end of setup
67    // For animated art: let draw() keep running
68}
69 
70function draw() {
71    // Option 1: Static generation (runs once, then stops)
72    // - Generate everything in setup()
73    // - Call noLoop() in setup()
74    // - draw() doesn't do much or can be empty
75 
76    // Option 2: Animated generation (continuous)
77    // - Update your system each frame
78    // - Common patterns: particle movement, growth, evolution
79    // - Can optionally call noLoop() after N frames
80 
81    // Option 3: User-triggered regeneration
82    // - Use noLoop() by default
83    // - Call redraw() when parameters change
84}
85 
86// ============================================================================
87// 4. CLASS STRUCTURE (When you need objects)
88// ============================================================================
89// Use classes when your algorithm involves multiple entities
90// Examples: particles, agents, cells, nodes, etc.
91 
92class Entity {
93    constructor() {
94        // Initialize entity properties
95        // Use random() here - it will be seeded
96    }
97 
98    update() {
99        // Update entity state
100        // This might involve:
101        // - Physics calculations
102        // - Behavioral rules
103        // - Interactions with neighbors
104    }
105 
106    display() {
107        // Render the entity
108        // Keep rendering logic separate from update logic
109    }
110}
111 
112// ============================================================================
113// 5. PERFORMANCE CONSIDERATIONS
114// ============================================================================
115 
116// For large numbers of elements:
117// - Pre-calculate what you can
118// - Use simple collision detection (spatial hashing if needed)
119// - Limit expensive operations (sqrt, trig) when possible
120// - Consider using p5 vectors efficiently
121 
122// For smooth animation:
123// - Aim for 60fps
124// - Profile if things are slow
125// - Consider reducing particle counts or simplifying calculations
126 
127// ============================================================================
128// 6. UTILITY FUNCTIONS
129// ============================================================================
130 
131// Color utilities
132function hexToRgb(hex) {
133    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
134    return result ? {
135        r: parseInt(result[1], 16),
136        g: parseInt(result[2], 16),
137        b: parseInt(result[3], 16)
138    } : null;
139}
140 
141function colorFromPalette(index) {
142    return params.colorPalette[index % params.colorPalette.length];
143}
144 
145// Mapping and easing
146function mapRange(value, inMin, inMax, outMin, outMax) {
147    return outMin + (outMax - outMin) * ((value - inMin) / (inMax - inMin));
148}
149 
150function easeInOutCubic(t) {
151    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
152}
153 
154// Constrain to bounds
155function wrapAround(value, max) {
156    if (value < 0) return max;
157    if (value > max) return 0;
158    return value;
159}
160 
161// ============================================================================
162// 7. PARAMETER UPDATES (Connect to UI)
163// ============================================================================
164 
165function updateParameter(paramName, value) {
166    params[paramName] = value;
167    // Decide if you need to regenerate or just update
168    // Some params can update in real-time, others need full regeneration
169}
170 
171function regenerate() {
172    // Reinitialize your generative system
173    // Useful when parameters change significantly
174    initializeSeed(params.seed);
175    // Then regenerate your system
176}
177 
178// ============================================================================
179// 8. COMMON P5.JS PATTERNS
180// ============================================================================
181 
182// Drawing with transparency for trails/fading
183function fadeBackground(opacity) {
184    fill(250, 249, 245, opacity); // Anthropic light with alpha
185    noStroke();
186    rect(0, 0, width, height);
187}
188 
189// Using noise for organic variation
190function getNoiseValue(x, y, scale = 0.01) {
191    return noise(x * scale, y * scale);
192}
193 
194// Creating vectors from angles
195function vectorFromAngle(angle, magnitude = 1) {
196    return createVector(cos(angle), sin(angle)).mult(magnitude);
197}
198 
199// ============================================================================
200// 9. EXPORT FUNCTIONS
201// ============================================================================
202 
203function exportImage() {
204    saveCanvas('generative-art-' + params.seed, 'png');
205}
206 
207// ============================================================================
208// REMEMBER
209// ============================================================================
210//
211// These are TOOLS and PRINCIPLES, not a recipe.
212// Your algorithmic philosophy should guide WHAT you create.
213// This structure helps you create it WELL.
214//
215// Focus on:
216// - Clean, readable code
217// - Parameterized for exploration
218// - Seeded for reproducibility
219// - Performant execution
220//
221// The art itself is entirely up to you!
222//
223// ============================================================================