0
# Transform System
1

2
Coordinate transformations including translation, rotation, scaling, and matrix operations for advanced graphics positioning and animation effects.
3

4
## Capabilities
5

6
### Basic Transformations
7

8
Core transformation functions for repositioning and orienting graphics.
9

10
```javascript { .api }
11
/**
12
 * Move the coordinate system origin
13
 * @param {number} x - Horizontal translation
14
 * @param {number} y - Vertical translation
15
 * @param {number} [z] - Depth translation (3D mode only)
16
 */
17
function translate(x, y, z);
18

19
/**
20
 * Rotate the coordinate system
21
 * @param {number} angle - Rotation angle in current angle mode
22
 */
23
function rotate(angle);
24

25
/**
26
 * Rotate around X-axis (3D mode only)
27
 * @param {number} angle - Rotation angle in current angle mode
28
 */
29
function rotateX(angle);
30

31
/**
32
 * Rotate around Y-axis (3D mode only)
33
 * @param {number} angle - Rotation angle in current angle mode
34
 */
35
function rotateY(angle);
36

37
/**
38
 * Rotate around Z-axis (3D mode only)
39
 * @param {number} angle - Rotation angle in current angle mode
40
 */
41
function rotateZ(angle);
42

43
/**
44
 * Scale the coordinate system
45
 * @param {number} s - Uniform scale factor, or X-axis scale
46
 * @param {number} [y] - Y-axis scale factor
47
 * @param {number} [z] - Z-axis scale factor (3D mode only)
48
 */
49
function scale(s, y, z);
50

51
/**
52
 * Shear along the X-axis
53
 * @param {number} angle - Shear angle in current angle mode
54
 */
55
function shearX(angle);
56

57
/**
58
 * Shear along the Y-axis
59
 * @param {number} angle - Shear angle in current angle mode
60
 */
61
function shearY(angle);
62
```
63

64
### Matrix Operations
65

66
Advanced matrix operations for complex transformations.
67

68
```javascript { .api }
69
/**
70
 * Apply a transformation matrix directly
71
 * @param {number} a - Horizontal scaling
72
 * @param {number} b - Horizontal skewing
73
 * @param {number} c - Vertical skewing
74
 * @param {number} d - Vertical scaling
75
 * @param {number} e - Horizontal translation
76
 * @param {number} f - Vertical translation
77
 */
78
function applyMatrix(a, b, c, d, e, f);
79

80
/**
81
 * Reset the transformation matrix to identity
82
 * Removes all transformations
83
 */
84
function resetMatrix();
85
```
86

87
### Transform State Management
88

89
Functions to save and restore transformation states.
90

91
```javascript { .api }
92
/**
93
 * Save current transformation state and drawing styles
94
 * Must be paired with pop()
95
 */
96
function push();
97

98
/**
99
 * Restore previously saved transformation state and styles
100
 */
101
function pop();
102
```
103

104
## Usage Examples
105

106
**Basic Translation and Rotation:**
107
```javascript
108
function draw() {
109
  background(220);
110
  
111
  // Draw at origin (no transform)
112
  fill('red');
113
  rect(0, 0, 50, 50);
114
  
115
  // Translate and draw
116
  translate(100, 100);
117
  fill('blue');
118
  rect(0, 0, 50, 50); // This appears at (100, 100)
119
  
120
  // Rotate and draw
121
  rotate(PI / 4); // 45 degrees
122
  fill('green');
123
  rect(0, 0, 50, 50); // This is rotated
124
}
125
```
126

127
**Using Push and Pop for Isolated Transforms:**
128
```javascript
129
function draw() {
130
  background(220);
131
  
132
  // First shape - no transform
133
  fill('red');
134
  rect(50, 50, 40, 40);
135
  
136
  push(); // Save current state
137
  translate(150, 100);
138
  rotate(frameCount * 0.02);
139
  fill('blue');
140
  rect(-20, -20, 40, 40); // Centered on rotation point
141
  pop(); // Restore state
142
  
143
  // Third shape - back to no transform
144
  fill('green');
145
  rect(250, 50, 40, 40);
146
  
147
  push(); // Another isolated transform
148
  translate(300, 150);
149
  scale(sin(frameCount * 0.03) + 1.5);
150
  fill('purple');
151
  rect(-15, -15, 30, 30);
152
  pop();
153
}
154
```
155

156
**Scaling Animations:**
157
```javascript
158
function draw() {
159
  background(220);
160
  translate(width/2, height/2);
161
  
162
  // Pulsing scale effect
163
  let scaleAmount = map(sin(frameCount * 0.05), -1, 1, 0.5, 2);
164
  scale(scaleAmount);
165
  
166
  fill('orange');
167
  rect(-50, -50, 100, 100);
168
  
169
  // Draw smaller shapes that scale with the main shape
170
  fill('red');
171
  circle(-25, -25, 20);
172
  circle(25, -25, 20);
173
  circle(-25, 25, 20);
174
  circle(25, 25, 20);
175
}
176
```
177

178
**Hierarchical Transformations (Solar System):**
179
```javascript
180
function draw() {
181
  background(0);
182
  translate(width/2, height/2);
183
  
184
  // Sun
185
  fill('yellow');
186
  circle(0, 0, 60);
187
  
188
  // Earth orbit
189
  push();
190
  rotate(frameCount * 0.01); // Earth's orbit around sun
191
  translate(120, 0);
192
  
193
  fill('blue');
194
  circle(0, 0, 30); // Earth
195
  
196
  // Moon orbit (relative to Earth)
197
  push();
198
  rotate(frameCount * 0.05); // Moon's orbit around Earth
199
  translate(40, 0);
200
  
201
  fill('gray');
202
  circle(0, 0, 10); // Moon
203
  pop(); // End moon transform
204
  
205
  pop(); // End Earth transform
206
  
207
  // Mars orbit
208
  push();
209
  rotate(frameCount * 0.007); // Mars orbits slower
210
  translate(200, 0);
211
  
212
  fill('red');
213
  circle(0, 0, 25); // Mars
214
  pop();
215
}
216
```
217

218
**Complex Shearing and Skewing:**
219
```javascript
220
function draw() {
221
  background(220);
222
  
223
  // Normal rectangles for comparison
224
  fill('lightgray');
225
  rect(50, 50, 80, 60);
226
  rect(50, 150, 80, 60);
227
  rect(50, 250, 80, 60);
228
  
229
  // Shear X
230
  push();
231
  translate(200, 50);
232
  shearX(PI / 6); // 30 degrees
233
  fill('red');
234
  rect(0, 0, 80, 60);
235
  pop();
236
  
237
  // Shear Y
238
  push();
239
  translate(200, 150);
240
  shearY(PI / 8); // 22.5 degrees
241
  fill('blue');
242
  rect(0, 0, 80, 60);
243
  pop();
244
  
245
  // Combined shearing
246
  push();
247
  translate(200, 250);
248
  shearX(PI / 8);
249
  shearY(-PI / 12);
250
  fill('green');
251
  rect(0, 0, 80, 60);
252
  pop();
253
}
254
```
255

256
**Matrix Transformations:**
257
```javascript
258
function draw() {
259
  background(220);
260
  
261
  // Custom transformation matrix
262
  // This creates a combination of scale, rotation, and translation
263
  let angle = frameCount * 0.02;
264
  let scaleX = 1.5;
265
  let scaleY = 1.0;
266
  let cos_a = cos(angle) * scaleX;
267
  let sin_a = sin(angle) * scaleX;
268
  let cos_b = -sin(angle) * scaleY;
269
  let sin_b = cos(angle) * scaleY;
270
  let tx = width/2;
271
  let ty = height/2;
272
  
273
  applyMatrix(cos_a, sin_a, cos_b, sin_b, tx, ty);
274
  
275
  fill('purple');
276
  rect(-40, -30, 80, 60);
277
  
278
  // Reset matrix and draw comparison shape
279
  resetMatrix();
280
  fill('gray');
281
  rect(width/2 - 40, height/2 - 30, 80, 60);
282
}
283
```
284

285
**Nested Transformations with Multiple Objects:**
286
```javascript
287
let flowers = [];
288

289
function setup() {
290
  createCanvas(600, 400);
291
  
292
  // Create flower data
293
  for (let i = 0; i < 5; i++) {
294
    flowers.push({
295
      x: random(100, width - 100),
296
      y: random(100, height - 100),
297
      rotation: random(TWO_PI),
298
      petals: random(5, 9),
299
      size: random(0.5, 1.2)
300
    });
301
  }
302
}
303

304
function draw() {
305
  background(50, 100, 50); // Dark green background
306
  
307
  for (let flower of flowers) {
308
    drawFlower(flower);
309
  }
310
}
311

312
function drawFlower(flower) {
313
  push();
314
  translate(flower.x, flower.y);
315
  rotate(flower.rotation + frameCount * 0.002);
316
  scale(flower.size);
317
  
318
  // Draw petals
319
  fill('pink');
320
  for (let i = 0; i < flower.petals; i++) {
321
    push();
322
    rotate(TWO_PI / flower.petals * i);
323
    ellipse(0, -20, 15, 30);
324
    pop();
325
  }
326
  
327
  // Draw center
328
  fill('yellow');
329
  circle(0, 0, 20);
330
  
331
  pop();
332
}
333
```
334

335
**Transform-based Animation Patterns:**
336
```javascript
337
function draw() {
338
  background(20);
339
  
340
  // Grid of animated elements
341
  for (let x = 0; x < 6; x++) {
342
    for (let y = 0; y < 4; y++) {
343
      push();
344
      
345
      // Position in grid
346
      translate(50 + x * 80, 50 + y * 80);
347
      
348
      // Individual animation offset
349
      let offset = (x + y * 6) * 0.5;
350
      let time = frameCount * 0.03 + offset;
351
      
352
      // Rotation
353
      rotate(sin(time) * 0.5);
354
      
355
      // Scale pulsing
356
      let pulse = map(sin(time * 2), -1, 1, 0.7, 1.3);
357
      scale(pulse);
358
      
359
      // Color based on position and time
360
      let hue = map(x + y, 0, 9, 0, 360);
361
      colorMode(HSB);
362
      fill(hue, 80, 90);
363
      colorMode(RGB);
364
      
365
      // Draw shape
366
      rect(-15, -15, 30, 30);
367
      
368
      pop();
369
    }
370
  }
371
}
372
```
373

374
**3D Transformations (WebGL mode):**
375
```javascript
376
function setup() {
377
  createCanvas(400, 400, WEBGL);
378
}
379

380
function draw() {
381
  background(50);
382
  
383
  // Enable lighting
384
  ambientLight(60);
385
  directionalLight(255, 255, 255, -1, 0.5, -1);
386
  
387
  // Main rotation
388
  rotateY(frameCount * 0.01);
389
  rotateX(frameCount * 0.008);
390
  
391
  // Draw multiple boxes at different positions
392
  for (let i = 0; i < 5; i++) {
393
    push();
394
    
395
    // Position each box
396
    let angle = (TWO_PI / 5) * i;
397
    translate(cos(angle) * 100, sin(angle * 2) * 50, sin(angle) * 100);
398
    
399
    // Individual rotation
400
    rotateZ(frameCount * 0.02 + i);
401
    
402
    // Individual scale
403
    let scaleAmt = map(sin(frameCount * 0.03 + i), -1, 1, 0.5, 1.5);
404
    scale(scaleAmt);
405
    
406
    // Color
407
    fill(map(i, 0, 4, 100, 255), 100, 200);
408
    
409
    box(30);
410
    
411
    pop();
412
  }
413
}
414
```