Skip to content

Commit cd4abed

Browse files
committed
added miscellaneous fixes, including corrected links for i18n
1 parent dc44ed4 commit cd4abed

File tree

7 files changed

+540
-491
lines changed

7 files changed

+540
-491
lines changed

i18n-tracking.yml

Lines changed: 324 additions & 304 deletions
Large diffs are not rendered by default.

src/assets/learn/basic3d/titleExample.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function preload() {
88
function setup() {
99
createCanvas(window.innerWidth, window.innerHeight, WEBGL);
1010
debugMode();
11-
describe("a basic 3d scene with animation and webgl");
11+
describe("3D pink text that reads: p5.js getting started with 3D, with swirling 3D p5.js asterisk logo and coordinate system illustration");
1212
}
1313

1414
function draw() {

src/data/en.yml

Lines changed: 81 additions & 81 deletions
Large diffs are not rendered by default.

src/templates/pages/learn/getting-started-in-webgl-appearance.hbs

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,18 @@ slug: learn/
66
<style>
77
.methodsList {
88
font-family: monospace;
9-
/*white-space: pre;*/
109
}
1110
1211
.additionalInformation {
1312
width: 100%;
1413
background-color: #dedeff;
15-
font-size: 15px;
1614
padding: 10px;
1715
margin: 30px 0;
1816
}
1917
2018
.toc {
2119
width: 100%;
2220
background-color: #eee;
23-
font-size: 15px;
2421
padding: 10px;
2522
margin: 30px 0;
2623
}
@@ -53,17 +50,18 @@ slug: learn/
5350
<div class="toc">
5451
<h3>{{#i18n "getting-started-in-webgl-appearance-toc-title"}}{{/i18n}}</h3>
5552
<ol>
56-
<li><a href="#camera">{{#i18n "getting-started-in-webgl-appearance-toc1"}}{{/i18n}}</a></li>
57-
<li><a href="#lighting">{{#i18n "getting-started-in-webgl-appearance-toc2"}}{{/i18n}}</a></li>
58-
<li><a href="#materials">{{#i18n "getting-started-in-webgl-appearance-toc3"}}{{/i18n}}</a></li>
59-
<li><a href="#conclusion">{{#i18n "getting-started-in-webgl-appearance-toc4"}}{{/i18n}}</a></li>
60-
<li><a href="#glossary">{{#i18n "getting-started-in-webgl-appearance-toc5"}}{{/i18n}}</a></li>
53+
<li><a href="#camera">{{#i18n "getting-started-in-webgl-appearance-heading1"}}{{/i18n}}</a></li>
54+
<li><a href="#lighting">{{#i18n "getting-started-in-webgl-appearance-heading2"}}{{/i18n}}</a></li>
55+
<li><a href="#materials">{{#i18n "getting-started-in-webgl-appearance-heading3"}}{{/i18n}}</a></li>
56+
<li><a href="#conclusion">{{#i18n "getting-started-in-webgl-appearance-heading4"}}{{/i18n}}</a></li>
57+
<li><a href="#glossary">{{#i18n "getting-started-in-webgl-glossary-title"}}{{/i18n}}</a></li>
6158
</ol>
6259
</div>
6360

6461
<h2 id="camera">{{#i18n "getting-started-in-webgl-appearance-heading1"}}{{/i18n}}</h2>
6562

66-
<p>{{#i18n "getting-started-in-webgl-appearance-p1x1"}}{{/i18n}}</p>
63+
<p>{{#i18n "getting-started-in-webgl-appearance-p1x1"}}{{/i18n}} <a class="code" href="{{root}}/reference/#/p5/perspective">perspective()</a> {{#i18n "getting-started-in-webgl-appearance-p1x2"}}{{/i18n}} <a
64+
class="code" href="{{root}}/reference/#/p5/ortho">ortho()</a>.</p>
6765

6866
<img style="padding:60px;" src='{{assets}}/learn/basic3D/images/cameraTypeIllustration.png'
6967
alt="an illustration showing the difference between perspective and orthographic camera types">
@@ -80,10 +78,12 @@ slug: learn/
8078

8179
<div style="display:flex; align-items:center; justify-content: center;">
8280
<img style="width:50%;" src='{{assets}}/learn/basic3D/images/frustum_example.png'
83-
alt="an illustration showing the the camera frustum, near plane, and far plane">
81+
alt="an illustration showing the the camera frustum in purple, the near plane represented by a
82+
yellow rectangle near the camera, and far plane as a green rectangle on the opposite end of the frustum volume.">
8483
</div>
8584

86-
<p>{{#i18n "getting-started-in-webgl-appearance-p5x1"}}{{/i18n}}</p>
85+
<p>{{#i18n "getting-started-in-webgl-appearance-p5x1"}}{{/i18n}}<a class="code"
86+
href="{{root}}/reference/#/p5/orbitControl">orbitControl()</a>{{#i18n "getting-started-in-webgl-appearance-p5x2"}}{{/i18n}}</p>
8787

8888
<p>{{#i18n "getting-started-in-webgl-appearance-p6x1"}}{{/i18n}}</p>
8989

@@ -140,33 +140,18 @@ function draw() {
140140

141141
<p>{{#i18n "getting-started-in-webgl-appearance-p7x1"}}{{/i18n}}</p>
142142

143-
<ul>
144-
<li><h3><a class="code" href="{{root}}/reference/#/p5/ambientLight">ambientLight()</a></h3>
145-
<ul style="margin-left:15px;">
146-
<li>{{#i18n "getting-started-in-webgl-appearance-lighting-list1"}}{{/i18n}}</li>
147-
</ul>
148-
</li>
149-
<li><h3><a class="code" href="{{root}}/reference/#/p5/directionalLight">directionalLight()</a></h3>
150-
<ul style="margin-left:15px;">
151-
<li>{{#i18n "getting-started-in-webgl-appearance-lighting-list2"}}{{/i18n}}</li>
152-
</ul>
153-
</li>
154-
<li><h3><a class="code" href="{{root}}/reference/#/p5/pointLight">pointLight()</a></h3>
155-
<ul style="margin-left:15px;">
156-
<li>{{#i18n "getting-started-in-webgl-appearance-lighting-list3"}}{{/i18n}}</li>
157-
</ul>
158-
</li>
159-
<li><h3><a class="code" href="{{root}}/reference/#/p5/spotLight">spotLight()</a></h3>
160-
<ul style="margin-left:15px;">
161-
<li>{{#i18n "getting-started-in-webgl-appearance-lighting-list4"}}{{/i18n}}</li>
162-
</ul>
163-
</li>
164-
<li><h3><a class="code" href="{{root}}/reference/#/p5/noLights">noLights()</a></h3>
165-
<ul style="margin-left:15px;">
166-
<li>{{#i18n "getting-started-in-webgl-appearance-lighting-list5"}}{{/i18n}}</li>
167-
</ul>
168-
</li>
169-
</ul>
143+
<dl>
144+
<dt><a class="code" href="{{root}}/reference/#/p5/ambientLight">ambientLight()</a></dt>
145+
<dd>{{#i18n "getting-started-in-webgl-appearance-lighting-list1"}}{{/i18n}}</dd>
146+
<dt><a class="code" href="{{root}}/reference/#/p5/directionalLight">directionalLight()</a></dt>
147+
<dd>{{#i18n "getting-started-in-webgl-appearance-lighting-list2"}}{{/i18n}}</dd>
148+
<dt><a class="code" href="{{root}}/reference/#/p5/pointLight">pointLight()</a></dt>
149+
<dd>{{#i18n "getting-started-in-webgl-appearance-lighting-list3"}}{{/i18n}}</dd>
150+
<dt><a class="code" href="{{root}}/reference/#/p5/spotLight">spotLight()</a></dt>
151+
<dd>{{#i18n "getting-started-in-webgl-appearance-lighting-list4"}}{{/i18n}}</dd>
152+
<dt><a class="code" href="{{root}}/reference/#/p5/noLights">noLights()</a></dt>
153+
<dd>{{#i18n "getting-started-in-webgl-appearance-lighting-list5"}}{{/i18n}}</dd>
154+
</dl>
170155

171156
<p>
172157
{{#i18n "getting-started-in-webgl-appearance-p8x1"}}{{/i18n}}
@@ -311,7 +296,7 @@ function draw() {
311296

312297
<div class="additionalInformation">
313298
<p>
314-
{{#i18n "getting-started-in-webgl-appearance-info1x1"}}{{/i18n}}
299+
{{#i18n "getting-started-in-webgl-appearance-info1x1"}}{{/i18n}} <a href="{{root}}/learn/getting-started-in-webgl-shaders.html">{{#i18n "getting-started-in-webgl-appearance-info1x2"}}{{/i18n}}</a> {{#i18n "getting-started-in-webgl-appearance-info1x3"}}{{/i18n}}
315300
</p>
316301
</div>
317302

@@ -328,7 +313,7 @@ function draw() {
328313
<li><a href="{{root}}/learn/getting-started-in-webgl-shaders.html">{{#i18n "getting-started-in-webgl-other-tutorials-tut4"}}{{/i18n}}</a></li>
329314
</ul>
330315

331-
<h2 id="glossary">{{#i18n "getting-started-in-webgl-appearance-glossary-title"}}{{/i18n}}</h2>
316+
<h2 id="glossary">{{#i18n "getting-started-in-webgl-glossary-title"}}{{/i18n}}</h2>
332317

333318
<h3>{{#i18n "getting-started-in-webgl-appearance-glossary-term1-title"}}{{/i18n}}</h3>
334319
<p>{{#i18n "getting-started-in-webgl-appearance-glossary-term1-definition"}}{{/i18n}}</p>

src/templates/pages/learn/getting-started-in-webgl-coords-and-transform.hbs

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,13 @@ slug: learn/
1212
.additionalInformation {
1313
width: 100%;
1414
background-color: #dedeff;
15-
font-size: 17px;
1615
padding: 10px;
1716
margin: 30px 0;
1817
}
1918
2019
.toc {
2120
width: 100%;
2221
background-color: #eee;
23-
font-size: 17px;
2422
padding: 10px;
2523
margin: 30px 0;
2624
}
@@ -55,12 +53,17 @@ slug: learn/
5553
<div class="toc">
5654
<h3>{{#i18n "getting-started-in-webgl-coords-and-transform-toc-title"}}{{/i18n}}</h3>
5755
<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>
6467
</ol>
6568
</div>
6669

@@ -87,7 +90,9 @@ slug: learn/
8790

8891
<h2 id="coordinate_space">{{#i18n "getting-started-in-webgl-coords-and-transform-heading2"}}{{/i18n}}</h2>
8992

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>
9196

9297
<p>{{#i18n "getting-started-in-webgl-coords-and-transform-p5x1"}}{{/i18n}}</p>
9398

@@ -98,15 +103,21 @@ slug: learn/
98103

99104
<h2 id="transformations">{{#i18n "getting-started-in-webgl-coords-and-transform-heading3"}}{{/i18n}}</h2>
100105

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>
102112

103113
<h3>{{#i18n "getting-started-in-webgl-coords-and-transform-subheading1"}}{{/i18n}}</h3>
104114

105115
{{!-- sketch illustrating translation of geometry --}}
106116
<iframe src="{{assets}}/learn/basic3D/translateExample.html" width="720" height="350">
107117
</iframe>
108118

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>
110121

111122
<pre><code class="language-javascript">
112123
...
@@ -122,9 +133,15 @@ slug: learn/
122133
<iframe src="{{assets}}/learn/basic3D/rotateExample.html" width="720" height="350">
123134
</iframe>
124135

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>
126138

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>
128145

129146
<pre><code class="language-javascript">
130147
...
@@ -151,7 +168,9 @@ slug: learn/
151168
</code></pre>
152169

153170
<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>
155174
</div>
156175

157176
<h3>{{#i18n "getting-started-in-webgl-coords-and-transform-subheading3"}}{{/i18n}}</h3>
@@ -160,7 +179,8 @@ slug: learn/
160179
<iframe src="{{assets}}/learn/basic3D/scaleExample.html" width="720" height="350">
161180
</iframe>
162181

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>
164184

165185
<h2 id="order">{{#i18n "getting-started-in-webgl-coords-and-transform-heading4"}}{{/i18n}}</h2>
166186

@@ -174,7 +194,7 @@ slug: learn/
174194
function setup() {
175195
createCanvas(150, 216, WEBGL);
176196
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');
178198
}
179199
180200
function draw(){
@@ -189,7 +209,11 @@ function draw(){
189209
}
190210
</script>
191211

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>
193217

194218
<pre><code class="language-javascript">
195219
// draw a box 100 units to the right
@@ -256,29 +280,43 @@ function draw() {
256280

257281
<p>{{#i18n "getting-started-in-webgl-coords-and-transform-p19x1"}}{{/i18n}}</p>
258282

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'
260284
alt="an illustration showing each of the available primitives in p5.js">
261285

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>
263295

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>
265299

266300
<h2 id="conclusion">{{#i18n "getting-started-in-webgl-coords-and-transform-heading6"}}{{/i18n}}</h2>
267301

268302
<p>{{#i18n "getting-started-in-webgl-coords-and-transform-p22x1"}}{{/i18n}}</p>
269303

270304
<h3>{{#i18n "getting-started-in-webgl-other-tutorials-title"}}{{/i18n}}</h3>
271-
305+
272306
<p>{{#i18n "getting-started-in-webgl-other-tutorials-p"}}{{/i18n}}</p>
273307

274308
<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>
279317
</ul>
280318

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>
282320

283321
<h3>{{#i18n "getting-started-in-webgl-coords-and-transform-glossary-term1-title"}}{{/i18n}}</h3>
284322
<p>{{#i18n "getting-started-in-webgl-coords-and-transform-glossary-term1-definition"}}{{/i18n}}</p>

0 commit comments

Comments
 (0)