@@ -12,15 +12,13 @@ slug: learn/
12
12
.additionalInformation {
13
13
width : 100% ;
14
14
background-color : #dedeff ;
15
- font-size : 17px ;
16
15
padding : 10px ;
17
16
margin : 30px 0 ;
18
17
}
19
18
20
19
.toc {
21
20
width : 100% ;
22
21
background-color : #eee ;
23
- font-size : 17px ;
24
22
padding : 10px ;
25
23
margin : 30px 0 ;
26
24
}
@@ -55,12 +53,17 @@ slug: learn/
55
53
<div class =" toc" >
56
54
<h3 >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc-title" }} {{ /i18n }} </h3 >
57
55
<ol >
58
- <li ><a href =" #what_is_webgl" >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc1" }} {{ /i18n }} </a ></li >
59
- <li ><a href =" #coordinate_space" >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc2" }} {{ /i18n }} </a ></li >
60
- <li ><a href =" #transformations" >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc3" }} {{ /i18n }} </a ></li >
61
- <li ><a href =" #order" >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc4" }} {{ /i18n }} </a ></li >
62
- <li ><a href =" #basic_shapes" >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc5" }} {{ /i18n }} </a ></li >
63
- <li ><a href =" #conclusion" >{{ #i18n " getting-started-in-webgl-coords-and-transform-toc6" }} {{ /i18n }} </a ></li >
56
+ <li ><a href =" #what_is_webgl" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading1" }} {{ /i18n }} </a >
57
+ </li >
58
+ <li ><a href =" #coordinate_space" >{{ #i18n
59
+ " getting-started-in-webgl-coords-and-transform-heading2" }} {{ /i18n }} </a ></li >
60
+ <li ><a href =" #transformations" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading3" }} {{ /i18n }} </a >
61
+ </li >
62
+ <li ><a href =" #order" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading4" }} {{ /i18n }} </a ></li >
63
+ <li ><a href =" #basic_shapes" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading5" }} {{ /i18n }} </a >
64
+ </li >
65
+ <li ><a href =" #conclusion" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading6" }} {{ /i18n }} </a ></li >
66
+ <li ><a href =" #glossary" >{{ #i18n " getting-started-in-webgl-glossary-title" }} {{ /i18n }} </a ></li >
64
67
</ol >
65
68
</div >
66
69
@@ -87,7 +90,9 @@ slug: learn/
87
90
88
91
<h2 id =" coordinate_space" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading2" }} {{ /i18n }} </h2 >
89
92
90
- <div class =" additionalInformation" >{{ #i18n " getting-started-in-webgl-coords-and-transform-info1x1" }} {{ /i18n }} </div >
93
+ <div class =" additionalInformation" >{{ #i18n " getting-started-in-webgl-coords-and-transform-info1x1" }} {{ /i18n }} <a
94
+ href =" {{ root }} /learn/coordinate-system-and-shapes.html" >{{ #i18n
95
+ " getting-started-in-webgl-coords-and-transform-info1x2" }} {{ /i18n }} </a >.</div >
91
96
92
97
<p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p5x1" }} {{ /i18n }} </p >
93
98
@@ -98,15 +103,21 @@ slug: learn/
98
103
99
104
<h2 id =" transformations" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading3" }} {{ /i18n }} </h2 >
100
105
101
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p7x1" }} {{ /i18n }} </p >
106
+ <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p7x1" }} {{ /i18n }} <a class =" code"
107
+ href =" {{ root }} /reference/#/p5/translate" >translate()</a >, <a class =" code"
108
+ href =" {{ root }} /reference/#/p5/rotate" >rotate()</a >, {{ #i18n
109
+ " getting-started-in-webgl-coords-and-transform-p7x2" }} {{ /i18n }} <a class =" code"
110
+ href =" {{ root }} /reference/#/p5/scale" >scale()</a >, {{ #i18n
111
+ " getting-started-in-webgl-coords-and-transform-p7x3" }} {{ /i18n }} </p >
102
112
103
113
<h3 >{{ #i18n " getting-started-in-webgl-coords-and-transform-subheading1" }} {{ /i18n }} </h3 >
104
114
105
115
{{!-- sketch illustrating translation of geometry --}}
106
116
<iframe src =" {{ assets }} /learn/basic3D/translateExample.html" width =" 720" height =" 350" >
107
117
</iframe >
108
118
109
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p8x1" }} {{ /i18n }} </p >
119
+ <p ><a class =" code" href =" {{ root }} /reference/#/p5/translate" >translate()</a > {{ #i18n
120
+ " getting-started-in-webgl-coords-and-transform-p8x1" }} {{ /i18n }} </p >
110
121
111
122
<pre ><code class =" language-javascript" >
112
123
...
@@ -122,9 +133,15 @@ slug: learn/
122
133
<iframe src =" {{ assets }} /learn/basic3D/rotateExample.html" width =" 720" height =" 350" >
123
134
</iframe >
124
135
125
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p9x1" }} {{ /i18n }} </p >
136
+ <p ><a class =" code" href =" {{ root }} /reference/#/p5/rotate" >rotate()</a > {{ #i18n
137
+ " getting-started-in-webgl-coords-and-transform-p9x1" }} {{ /i18n }} </p >
126
138
127
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p10x1" }} {{ /i18n }} </p >
139
+ <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p10x1" }} {{ /i18n }} <a class =" code"
140
+ href =" {{ root }} /reference/#/p5/rotateX" >rotateX()</a >, <a class =" code"
141
+ href =" {{ root }} /reference/#/p5/rotateY" >rotateY()</a >, {{ #i18n
142
+ " getting-started-in-webgl-coords-and-transform-p10x2" }} {{ /i18n }} <a class =" code"
143
+ href =" {{ root }} /reference/#/p5/rotateZ" >rotateZ()</a > {{ #i18n
144
+ " getting-started-in-webgl-coords-and-transform-p10x3" }} {{ /i18n }} </p >
128
145
129
146
<pre ><code class =" language-javascript" >
130
147
...
@@ -151,7 +168,9 @@ slug: learn/
151
168
</code ></pre >
152
169
153
170
<div class =" additionalInformation" >
154
- {{ #i18n " getting-started-in-webgl-coords-and-transform-info2x1" }} {{ /i18n }}
171
+ <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-info2x1" }} {{ /i18n }} <a class =" code"
172
+ href =" {{ root }} /reference/#/p5/rotate" >rotate()</a > {{ #i18n
173
+ " getting-started-in-webgl-coords-and-transform-info2x2" }} {{ /i18n }} </p >
155
174
</div >
156
175
157
176
<h3 >{{ #i18n " getting-started-in-webgl-coords-and-transform-subheading3" }} {{ /i18n }} </h3 >
@@ -160,7 +179,8 @@ slug: learn/
160
179
<iframe src =" {{ assets }} /learn/basic3D/scaleExample.html" width =" 720" height =" 350" >
161
180
</iframe >
162
181
163
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p12x1" }} {{ /i18n }} </p >
182
+ <p ><a class =" code" href =" {{ root }} /reference/#/p5/scale" >scale()</a > {{ #i18n
183
+ " getting-started-in-webgl-coords-and-transform-p12x1" }} {{ /i18n }} </p >
164
184
165
185
<h2 id =" order" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading4" }} {{ /i18n }} </h2 >
166
186
@@ -174,7 +194,7 @@ slug: learn/
174
194
function setup () {
175
195
createCanvas (150 , 216 , WEBGL );
176
196
debugMode ();
177
- describe (' a white box with a number of transformations applied' );
197
+ describe (' a white box in front of a reference 3D axis and grid, illustrating the applied transforms ' );
178
198
}
179
199
180
200
function draw (){
@@ -189,7 +209,11 @@ function draw(){
189
209
}
190
210
</script >
191
211
192
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p16x1" }} {{ /i18n }} </p >
212
+ <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p16x1" }} {{ /i18n }} <a class =" code"
213
+ href =" {{ root }} /reference/#/p5/push" >push()</a > {{ #i18n
214
+ " getting-started-in-webgl-coords-and-transform-p16x2" }} {{ /i18n }} <a class =" code"
215
+ href =" {{ root }} /reference/#/p5/pop" >pop()</a > {{ #i18n
216
+ " getting-started-in-webgl-coords-and-transform-p16x3" }} {{ /i18n }} </p >
193
217
194
218
<pre ><code class =" language-javascript" >
195
219
// draw a box 100 units to the right
@@ -256,29 +280,43 @@ function draw() {
256
280
257
281
<p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p19x1" }} {{ /i18n }} </p >
258
282
259
- <img style =" padding:60px;" src =' {{ assets }} /learn/basic3D/images/primitives_example.png'
283
+ <img style =" padding:60px;" src =' {{ assets }} /learn/basic3D/images/primitives_example.png'
260
284
alt =" an illustration showing each of the available primitives in p5.js" >
261
285
262
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p20x1" }} {{ /i18n }} </p >
286
+ <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p20x1" }} {{ /i18n }} <a class =" code"
287
+ href =" {{ root }} /reference/#/p5/box" >box()</a >, <a class =" code" href =" {{ root }} /reference/#/p5/plane" >plane()</a >,
288
+ <a class =" code" href =" {{ root }} /reference/#/p5/sphere" >sphere()</a >,
289
+ <a class =" code" href =" {{ root }} /reference/#/p5/ellipsoid" >ellipsoid()</a >,
290
+ <a class =" code" href =" {{ root }} /reference/#/p5/cone" >cone()</a >,
291
+ <a class =" code" href =" {{ root }} /reference/#/p5/cylinder" >cylinder()</a >, {{ #i18n
292
+ " getting-started-in-webgl-coords-and-transform-p20x2" }} {{ /i18n }} <a class =" code"
293
+ href =" {{ root }} /reference/#/p5/torus" >torus()</a >.
294
+ </p >
263
295
264
- <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p21x1" }} {{ /i18n }} </p >
296
+ <p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p21x1" }} {{ /i18n }} <a
297
+ href =" {{ root }} /learn/getting-started-in-webgl-custom-geometry.html" >{{ #i18n
298
+ " getting-started-in-webgl-coords-and-transform-p21x2" }} {{ /i18n }} </a >.</p >
265
299
266
300
<h2 id =" conclusion" >{{ #i18n " getting-started-in-webgl-coords-and-transform-heading6" }} {{ /i18n }} </h2 >
267
301
268
302
<p >{{ #i18n " getting-started-in-webgl-coords-and-transform-p22x1" }} {{ /i18n }} </p >
269
303
270
304
<h3 >{{ #i18n " getting-started-in-webgl-other-tutorials-title" }} {{ /i18n }} </h3 >
271
-
305
+
272
306
<p >{{ #i18n " getting-started-in-webgl-other-tutorials-p" }} {{ /i18n }} </p >
273
307
274
308
<ul class =" indexList" >
275
- <li >{{ #i18n " getting-started-in-webgl-other-tutorials-tut1" }} {{ /i18n }} {{ #i18n " getting-started-in-webgl-other-tutorials-you-are-here" }} {{ /i18n }} </li >
276
- <li ><a href =" {{ root }} /learn/getting-started-in-webgl-custom-geometry.html" >{{ #i18n " getting-started-in-webgl-other-tutorials-tut2" }} {{ /i18n }} </a ></li >
277
- <li ><a href =" {{ root }} /learn/getting-started-in-webgl-appearance.html" >{{ #i18n " getting-started-in-webgl-other-tutorials-tut3" }} {{ /i18n }} </a ></li >
278
- <li ><a href =" {{ root }} /learn/getting-started-in-webgl-shaders.html" >{{ #i18n " getting-started-in-webgl-other-tutorials-tut4" }} {{ /i18n }} </a ></li >
309
+ <li >{{ #i18n " getting-started-in-webgl-other-tutorials-tut1" }} {{ /i18n }} {{ #i18n
310
+ " getting-started-in-webgl-other-tutorials-you-are-here" }} {{ /i18n }} </li >
311
+ <li ><a href =" {{ root }} /learn/getting-started-in-webgl-custom-geometry.html" >{{ #i18n
312
+ " getting-started-in-webgl-other-tutorials-tut2" }} {{ /i18n }} </a ></li >
313
+ <li ><a href =" {{ root }} /learn/getting-started-in-webgl-appearance.html" >{{ #i18n
314
+ " getting-started-in-webgl-other-tutorials-tut3" }} {{ /i18n }} </a ></li >
315
+ <li ><a href =" {{ root }} /learn/getting-started-in-webgl-shaders.html" >{{ #i18n
316
+ " getting-started-in-webgl-other-tutorials-tut4" }} {{ /i18n }} </a ></li >
279
317
</ul >
280
318
281
- <h2 id =" glossary" >{{ #i18n " getting-started-in-webgl-coords-and-transform- glossary-title" }} {{ /i18n }} </h2 >
319
+ <h2 id =" glossary" >{{ #i18n " getting-started-in-webgl-glossary-title" }} {{ /i18n }} </h2 >
282
320
283
321
<h3 >{{ #i18n " getting-started-in-webgl-coords-and-transform-glossary-term1-title" }} {{ /i18n }} </h3 >
284
322
<p >{{ #i18n " getting-started-in-webgl-coords-and-transform-glossary-term1-definition" }} {{ /i18n }} </p >
0 commit comments