Source of: p5.js Generative Art Template, by DeepSeek V4 Pro 0813
151 lines, 19 of them comments ยท 1,327 tokens, written in 16 seconds for $0.0039
1 /* p5.js Generative Art Template
2 * --------------------------------
3 * - Canvas resizes with window
4 * - Mouse click to randomize colors and shapes
5 * - Mouse move influences drawing positions
6 * - S key to save current frame as PNG
7 */
8
9 let seed = 42;
10 let bgColor;
11 let palette = [];
12 let numShapes = 30;
13 let shapes = [];
14
15 function setup() {
16 createCanvas(windowWidth, windowHeight);
17 noStroke();
18 randomizePalette();
19 generateShapes();
20 }
21
22 function draw() {
23 background(bgColor);
24
25 // Draw connecting lines based on mouse position
26 stroke(255, 30);
27 strokeWeight(1);
28 for (let i = 0; i < shapes.length; i++) {
29 let d = dist(mouseX, mouseY, shapes[i].x, shapes[i].y);
30 if (d < 200) {
31 line(mouseX, mouseY, shapes[i].x, shapes[i].y);
32 }
33 }
34 noStroke();
35
36 // Update and draw shapes
37 for (let shape of shapes) {
38 shape.update();
39 shape.display();
40 }
41
42 // Draw cursor circle
43 fill(255, 200);
44 ellipse(mouseX, mouseY, 20, 20);
45 fill(0);
46 ellipse(mouseX, mouseY, 5, 5);
47 }
48
49 function generateShapes() {
50 shapes = [];
51 for (let i = 0; i < numShapes; i++) {
52 shapes.push(new Shape(random(width), random(height)));
53 }
54 }
55
56 function randomizePalette() {
57 randomSeed(seed);
58 bgColor = color(random(255), random(255), random(255), 200);
59 palette = [];
60 for (let i = 0; i < 5; i++) {
61 palette.push(color(random(255), random(255), random(255)));
62 }
63 // Make background darker for contrast
64 bgColor = lerpColor(bgColor, color(0), 0.7);
65 }
66
67 class Shape {
68 constructor(x, y) {
69 this.x = x;
70 this.y = y;
71 this.size = random(10, 50);
72 this.color = random(palette);
73 this.angle = random(TWO_PI);
74 this.speed = random(0.01, 0.05);
75 this.type = floor(random(3)); // 0=circle, 1=rect, 2=triangle
76 this.offsetX = random(50, 150);
77 this.offsetY = random(50, 150);
78 }
79
80 update() {
81 this.angle += this.speed;
82 // Gentle floating motion
83 this.x += sin(this.angle) * 0.3;
84 this.y += cos(this.angle) * 0.3;
85
86 // Wrap around edges
87 if (this.x < -50) this.x = width + 50;
88 if (this.x > width + 50) this.x = -50;
89 if (this.y < -50) this.y = height + 50;
90 if (this.y > height + 50) this.y = -50;
91
92 // Mouse interaction - shapes drift away from cursor
93 let d = dist(mouseX, mouseY, this.x, this.y);
94 if (d < 100) {
95 let angle = atan2(this.y - mouseY, this.x - mouseX);
96 this.x += cos(angle) * 2;
97 this.y += sin(angle) * 2;
98 }
99 }
100
101 display() {
102 push();
103 translate(this.x, this.y);
104 rotate(this.angle);
105 fill(this.color);
106
107 if (this.type === 0) {
108 // Circle
109 ellipse(0, 0, this.size, this.size);
110 } else if (this.type === 1) {
111 // Rectangle
112 rectMode(CENTER);
113 rect(0, 0, this.size, this.size * 0.7);
114 } else {
115 // Triangle
116 triangle(
117 -this.size/2, this.size/2,
118 this.size/2, this.size/2,
119 0, -this.size/2
120 );
121 }
122 pop();
123 }
124 }
125
126 function mousePressed() {
127 // New random seed and regenerate
128 seed = floor(random(10000));
129 randomizePalette();
130 for (let shape of shapes) {
131 shape.color = random(palette);
132 shape.size = random(10, 50);
133 shape.type = floor(random(3));
134 }
135 }
136
137 function keyPressed() {
138 if (key === 's' || key === 'S') {
139 saveCanvas('generative-art', 'png');
140 }
141 if (key === 'r' || key === 'R') {
142 seed = floor(random(10000));
143 randomizePalette();
144 generateShapes();
145 }
146 }
147
148 function windowResized() {
149 resizeCanvas(windowWidth, windowHeight);
150 generateShapes();
151 }