0
# 2D Drawing & Shapes
1

2
Complete 2D drawing capabilities including primitive shapes, curves, custom shapes, and drawing attributes for creating visual art and graphics.
3

4
## Capabilities
5

6
### Basic Shapes
7

8
Fundamental geometric shapes for drawing graphics.
9

10
```javascript { .api }
11
/**
12
 * Draw a circle
13
 * @param {number} x - X coordinate of center
14
 * @param {number} y - Y coordinate of center  
15
 * @param {number} diameter - Circle diameter
16
 */
17
function circle(x, y, diameter);
18

19
/**
20
 * Draw an ellipse
21
 * @param {number} x - X coordinate of center
22
 * @param {number} y - Y coordinate of center
23
 * @param {number} w - Width of ellipse
24
 * @param {number} h - Height of ellipse
25
 * @param {number} [detail] - Number of segments (WebGL only)
26
 */
27
function ellipse(x, y, w, h, detail);
28

29
/**
30
 * Draw a rectangle
31
 * @param {number} x - X coordinate
32
 * @param {number} y - Y coordinate
33
 * @param {number} w - Width
34
 * @param {number} h - Height
35
 * @param {number} [tl] - Top-left corner radius
36
 * @param {number} [tr] - Top-right corner radius
37
 * @param {number} [br] - Bottom-right corner radius
38
 * @param {number} [bl] - Bottom-left corner radius
39
 */
40
function rect(x, y, w, h, tl, tr, br, bl);
41

42
/**
43
 * Draw a square
44
 * @param {number} x - X coordinate
45
 * @param {number} y - Y coordinate
46
 * @param {number} s - Side length
47
 * @param {number} [tl] - Top-left corner radius
48
 * @param {number} [tr] - Top-right corner radius
49
 * @param {number} [br] - Bottom-right corner radius  
50
 * @param {number} [bl] - Bottom-left corner radius
51
 */
52
function square(x, y, s, tl, tr, br, bl);
53

54
/**
55
 * Draw a triangle
56
 * @param {number} x1 - X coordinate of first vertex
57
 * @param {number} y1 - Y coordinate of first vertex
58
 * @param {number} x2 - X coordinate of second vertex
59
 * @param {number} y2 - Y coordinate of second vertex
60
 * @param {number} x3 - X coordinate of third vertex
61
 * @param {number} y3 - Y coordinate of third vertex
62
 */
63
function triangle(x1, y1, x2, y2, x3, y3);
64

65
/**
66
 * Draw a quadrilateral
67
 * @param {number} x1 - X coordinate of first vertex
68
 * @param {number} y1 - Y coordinate of first vertex
69
 * @param {number} x2 - X coordinate of second vertex
70
 * @param {number} y2 - Y coordinate of second vertex
71
 * @param {number} x3 - X coordinate of third vertex
72
 * @param {number} y3 - Y coordinate of third vertex
73
 * @param {number} x4 - X coordinate of fourth vertex
74
 * @param {number} y4 - Y coordinate of fourth vertex
75
 */
76
function quad(x1, y1, x2, y2, x3, y3, x4, y4);
77
```
78

79
### Lines and Points
80

81
Basic line and point drawing functions.
82

83
```javascript { .api }
84
/**
85
 * Draw a line between two points
86
 * @param {number} x1 - X coordinate of first point
87
 * @param {number} y1 - Y coordinate of first point
88
 * @param {number} x2 - X coordinate of second point
89
 * @param {number} y2 - Y coordinate of second point
90
 */
91
function line(x1, y1, x2, y2);
92

93
/**
94
 * Draw a single point (pixel)
95
 * @param {number} x - X coordinate
96
 * @param {number} y - Y coordinate
97
 */
98
function point(x, y);
99

100
/**
101
 * Draw an arc or pie slice
102
 * @param {number} x - X coordinate of center
103
 * @param {number} y - Y coordinate of center
104
 * @param {number} w - Width of arc's ellipse
105
 * @param {number} h - Height of arc's ellipse
106
 * @param {number} start - Start angle in radians
107
 * @param {number} stop - Stop angle in radians
108
 * @param {string} [mode] - OPEN, CHORD, or PIE
109
 * @param {number} [detail] - Number of segments (WebGL only)
110
 */
111
function arc(x, y, w, h, start, stop, mode, detail);
112
```
113

114
### Curves
115

116
Bezier curves and spline curves for smooth organic shapes.
117

118
```javascript { .api }
119
/**
120
 * Draw a cubic Bezier curve
121
 * @param {number} x1 - X coordinate of first anchor point
122
 * @param {number} y1 - Y coordinate of first anchor point
123
 * @param {number} x2 - X coordinate of first control point
124
 * @param {number} y2 - Y coordinate of first control point
125
 * @param {number} x3 - X coordinate of second control point
126
 * @param {number} y3 - Y coordinate of second control point
127
 * @param {number} x4 - X coordinate of second anchor point
128
 * @param {number} y4 - Y coordinate of second anchor point
129
 */
130
function bezier(x1, y1, x2, y2, x3, y3, x4, y4);
131

132
/**
133
 * Draw a Catmull-Rom spline curve
134
 * @param {number} x1 - X coordinate of first control point
135
 * @param {number} y1 - Y coordinate of first control point
136
 * @param {number} x2 - X coordinate of first anchor point
137
 * @param {number} y2 - Y coordinate of first anchor point
138
 * @param {number} x3 - X coordinate of second anchor point
139
 * @param {number} y3 - Y coordinate of second anchor point
140
 * @param {number} x4 - X coordinate of second control point
141
 * @param {number} y4 - Y coordinate of second control point
142
 */
143
function curve(x1, y1, x2, y2, x3, y3, x4, y4);
144

145
/**
146
 * Set the level of detail for Bezier curves
147
 * @param {number} detail - Number of segments
148
 */
149
function bezierDetail(detail);
150

151
/**
152
 * Set the level of detail for spline curves
153
 * @param {number} detail - Number of segments
154
 */
155
function curveDetail(detail);
156

157
/**
158
 * Set the tightness of spline curves
159
 * @param {number} amount - Tightness amount (0-1)
160
 */
161
function curveTightness(amount);
162
```
163

164
### Curve Mathematics
165

166
Functions for calculating points and tangents on curves.
167

168
```javascript { .api }
169
/**
170
 * Get a point on a Bezier curve
171
 * @param {number} a - First anchor point
172
 * @param {number} b - First control point
173
 * @param {number} c - Second control point
174
 * @param {number} d - Second anchor point
175
 * @param {number} t - Parameter value (0-1)
176
 * @returns {number} Coordinate value at parameter t
177
 */
178
function bezierPoint(a, b, c, d, t);
179

180
/**
181
 * Get a tangent on a Bezier curve
182
 * @param {number} a - First anchor point
183
 * @param {number} b - First control point
184
 * @param {number} c - Second control point
185
 * @param {number} d - Second anchor point
186
 * @param {number} t - Parameter value (0-1)
187
 * @returns {number} Tangent value at parameter t
188
 */
189
function bezierTangent(a, b, c, d, t);
190

191
/**
192
 * Get a point on a spline curve
193
 * @param {number} a - First control point
194
 * @param {number} b - First anchor point
195
 * @param {number} c - Second anchor point
196
 * @param {number} d - Second control point
197
 * @param {number} t - Parameter value (0-1)
198
 * @returns {number} Coordinate value at parameter t
199
 */
200
function curvePoint(a, b, c, d, t);
201

202
/**
203
 * Get a tangent on a spline curve
204
 * @param {number} a - First control point
205
 * @param {number} b - First anchor point
206
 * @param {number} c - Second anchor point
207
 * @param {number} d - Second control point
208
 * @param {number} t - Parameter value (0-1)
209
 * @returns {number} Tangent value at parameter t
210
 */
211
function curveTangent(a, b, c, d, t);
212
```
213

214
### Custom Shapes with Vertices
215

216
System for creating complex custom shapes using vertices.
217

218
```javascript { .api }
219
/**
220
 * Begin creating a custom shape
221
 * @param {string} [kind] - Shape kind (POINTS, LINES, TRIANGLES, etc.)
222
 */
223
function beginShape(kind);
224

225
/**
226
 * End the current custom shape
227
 * @param {string} [mode] - CLOSE to connect last vertex to first
228
 */
229
function endShape(mode);
230

231
/**
232
 * Add a vertex to the current shape
233
 * @param {number} x - X coordinate
234
 * @param {number} y - Y coordinate
235
 */
236
function vertex(x, y);
237

238
/**
239
 * Add a Bezier curve vertex to the current shape
240
 * @param {number} x2 - X coordinate of first control point
241
 * @param {number} y2 - Y coordinate of first control point
242
 * @param {number} x3 - X coordinate of second control point
243
 * @param {number} y3 - Y coordinate of second control point
244
 * @param {number} x4 - X coordinate of anchor point
245
 * @param {number} y4 - Y coordinate of anchor point
246
 */
247
function bezierVertex(x2, y2, x3, y3, x4, y4);
248

249
/**
250
 * Add a quadratic curve vertex to the current shape
251
 * @param {number} cx - X coordinate of control point
252
 * @param {number} cy - Y coordinate of control point
253
 * @param {number} x3 - X coordinate of anchor point
254
 * @param {number} y3 - Y coordinate of anchor point
255
 */
256
function quadraticVertex(cx, cy, x3, y3);
257

258
/**
259
 * Add a curve vertex to the current shape
260
 * @param {number} x - X coordinate
261
 * @param {number} y - Y coordinate
262
 */
263
function curveVertex(x, y);
264

265
/**
266
 * Begin a contour (hole) within a shape
267
 */
268
function beginContour();
269

270
/**
271
 * End the current contour
272
 */
273
function endContour();
274
```
275

276
### Fill and Stroke Settings
277

278
Functions for controlling how shapes are filled and outlined.
279

280
```javascript { .api }
281
/**
282
 * Set the fill color for shapes
283
 * @param {...(number|string|p5.Color)} args - Color value(s)
284
 */
285
function fill(...args);
286

287
/**
288
 * Disable fill for shapes (transparent fill)
289
 */
290
function noFill();
291

292
/**
293
 * Set the stroke color for shape outlines
294
 * @param {...(number|string|p5.Color)} args - Color value(s)
295
 */
296
function stroke(...args);
297

298
/**
299
 * Disable stroke for shapes (no outline)
300
 */
301
function noStroke();
302

303
/**
304
 * Set the thickness of stroke lines
305
 * @param {number} weight - Stroke thickness in pixels
306
 */
307
function strokeWeight(weight);
308

309
/**
310
 * Set the style of line endpoints
311
 * @param {string} cap - ROUND, SQUARE, or PROJECT
312
 */
313
function strokeCap(cap);
314

315
/**
316
 * Set the style of line joints
317
 * @param {string} join - MITER, BEVEL, or ROUND
318
 */
319
function strokeJoin(join);
320
```
321

322
### Shape Drawing Modes
323

324
Functions for controlling how shape coordinates are interpreted.
325

326
```javascript { .api }
327
/**
328
 * Set the mode for interpreting rectangle coordinates
329
 * @param {string} mode - CORNER, CORNERS, CENTER, or RADIUS
330
 */
331
function rectMode(mode);
332

333
/**
334
 * Set the mode for interpreting ellipse coordinates
335
 * @param {string} mode - CENTER, RADIUS, CORNER, or CORNERS
336
 */
337
function ellipseMode(mode);
338
```
339

340
### Advanced Drawing Features
341

342
Special drawing modes and effects.
343

344
```javascript { .api }
345
/**
346
 * Switch to eraser mode - subsequent drawing removes pixels
347
 * @param {number} [fillOpacity] - Opacity for fill erasing (0-255)
348
 * @param {number} [strokeOpacity] - Opacity for stroke erasing (0-255)
349
 */
350
function erase(fillOpacity, strokeOpacity);
351

352
/**
353
 * Exit eraser mode and return to normal drawing
354
 */
355
function noErase();
356

357
/**
358
 * Begin a clipping mask - subsequent drawing will be clipped
359
 * @param {object} [options] - Clipping options
360
 */
361
function beginClip(options);
362

363
/**
364
 * End the current clipping mask
365
 */
366
function endClip();
367

368
/**
369
 * Apply a clipping mask using a callback function
370
 * @param {function} callback - Function that draws the clipping shape
371
 * @param {object} [options] - Clipping options
372
 */
373
function clip(callback, options);
374
```
375

376
## Usage Examples
377

378
**Basic Shapes:**
379
```javascript
380
function draw() {
381
  background(220);
382
  
383
  // Set drawing attributes
384
  fill('red');
385
  stroke('blue');
386
  strokeWeight(3);
387
  
388
  // Draw basic shapes
389
  circle(100, 100, 80);
390
  rect(200, 60, 80, 80, 10); // Rounded corners
391
  triangle(350, 60, 320, 140, 380, 140);
392
  
393
  // Shape without fill
394
  noFill();
395
  stroke('green');
396
  ellipse(100, 250, 120, 60);
397
}
398
```
399

400
**Custom Shape with Vertices:**
401
```javascript
402
function draw() {
403
  background(220);
404
  
405
  fill('purple');
406
  stroke('black');
407
  
408
  // Create a star shape
409
  beginShape();
410
  vertex(200, 50);
411
  vertex(220, 100);
412
  vertex(270, 100);
413
  vertex(235, 130);
414
  vertex(250, 180);
415
  vertex(200, 150);
416
  vertex(150, 180);
417
  vertex(165, 130);
418
  vertex(130, 100);
419
  vertex(180, 100);
420
  endShape(CLOSE);
421
}
422
```
423

424
**Bezier Curves:**
425
```javascript
426
function draw() {
427
  background(220);
428
  
429
  stroke('red');
430
  strokeWeight(2);
431
  noFill();
432
  
433
  // Draw a smooth curve
434
  bezier(85, 20, 10, 10, 90, 90, 15, 80);
435
  
436
  // Show control points
437
  stroke('blue');
438
  strokeWeight(5);
439
  point(85, 20); // First anchor
440
  point(15, 80); // Second anchor
441
  
442
  stroke('gray');
443
  strokeWeight(1);
444
  line(85, 20, 10, 10); // First control line
445
  line(15, 80, 90, 90); // Second control line
446
}
447
```
448

449
**Shape Modes:**
450
```javascript
451
function draw() {
452
  background(220);
453
  
454
  fill('orange');
455
  
456
  // Different rectangle modes
457
  rectMode(CORNER);
458
  rect(50, 50, 80, 60); // x, y, width, height
459
  
460
  rectMode(CENTER);
461
  rect(200, 80, 80, 60); // centerX, centerY, width, height
462
  
463
  rectMode(CORNERS);
464
  rect(300, 50, 380, 110); // x1, y1, x2, y2
465
}
466
```
467

468
**Eraser Mode:**
469
```javascript
470
let shapes = [];
471

472
function setup() {
473
  createCanvas(400, 300);
474
  
475
  // Create some shapes to erase
476
  for (let i = 0; i < 10; i++) {
477
    shapes.push({
478
      x: random(width),
479
      y: random(height),
480
      size: random(30, 80)
481
    });
482
  }
483
}
484

485
function draw() {
486
  background(100);
487
  
488
  // Draw shapes
489
  fill('yellow');
490
  noStroke();
491
  for (let shape of shapes) {
492
    circle(shape.x, shape.y, shape.size);
493
  }
494
  
495
  // Erase where mouse is
496
  if (mouseIsPressed) {
497
    erase();
498
    circle(mouseX, mouseY, 50);
499
    noErase();
500
  }
501
}
502
```