Skip to content

Commit 3b43f53

Browse files
AdityyaXAdityyaX
authored
Merge branch 'main' into spanish
2 parents 9d4976c + 5584416 commit 3b43f53

File tree

16 files changed

+2107
-1913
lines changed

16 files changed

+2107
-1913
lines changed

‎src/data/en.yml‎

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

‎src/data/es.yml‎

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

‎src/data/examples/en/09_Simulate/15_penrose_tiles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @name Penrose Tiles
33
* @arialabel A penrose tile pattern is created by white rhombi being drawn on a black background
44
* @frame 710,400
5-
* @description This is a port by David Blitz of the "Penrose Tile" example from processing.org/examples
5+
* @description This is a port by David Blitz of the "Penrose Tile" example from <a href="https://processing.org/examples/">processing.org/examples</a>
66
*/
77

88
let ds;

‎src/data/examples/en/10_Interaction/28_ArduinoSensor.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
* @description WebJack is a way to read data from an Arduino (and other sources)
44
* using audio -- it basically turns your Arduino into an audio modem.
55
*
6-
* https://github.com/publiclab/webjack
6+
* <a href = "https://github.com/publiclab/webjack">https://github.com/publiclab/webjack</a>
77
*
88
* Note: WebJack and p5-webjack libraries must be added to your index.html as follows:
99
* <pre><code class="language-markup">&lt;script src="https://webjack.io/dist/webjack.js">&lt;/script></code></pre>
1010
* <pre><code class="language-markup">&lt;script src="https://jywarren.github.io/p5-webjack/lib.js">&lt;/script></code></pre>
1111
*
12-
* Working example: https://editor.p5js.org/jywarren/sketches/rkztwSt8M
12+
* Working example: <a href = "https://editor.p5js.org/jywarren/sketches/rkztwSt8M">https://editor.p5js.org/jywarren/sketches/rkztwSt8M</a>
1313
*
14-
* Testing audio: https://www.youtube.com/watch?v=GtJW1Dlt3cg
14+
* Testing audio: <a href="https://www.youtube.com/watch?v=GtJW1Dlt3cg">https://www.youtube.com/watch?v=GtJW1Dlt3cg</a>
1515
* Load this sketch onto an Arduino:
16-
* https://create.arduino.cc/editor/jywarren/023158d8-be51-4c78-99ff-36c63126b554/preview
16+
* <a href="https://create.arduino.cc/editor/jywarren/023158d8-be51-4c78-99ff-36c63126b554/preview">https://create.arduino.cc/editor/jywarren/023158d8-be51-4c78-99ff-36c63126b554/preview</a>
1717
* Arduino will output audio from pin 3 + ground. Use microphone or an audio cable.
1818
*/
1919

‎src/data/hi.yml‎

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

‎src/data/it.yml‎

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

‎src/data/ko.yml‎

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

‎src/data/learn/learn.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
"url": "p5-screen-reader.html"
2626
},
2727
{
28-
"name": "labeling-canvases",
29-
"url": "labeling-canvases.html"
28+
"name": "accessible-labels",
29+
"url": "accessible-labels.html"
3030
}
3131
],
3232
"connecting-p5js-title": [

‎src/data/zh-Hans.yml‎

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

‎src/templates/pages/learn/accessible-labels.hbs‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
---
2+
title: learn
3+
slug: learn/
4+
---
5+
6+
<div id="learn-page">
7+
8+
{{> sidebar}}
9+
10+
<div class="column-span">
11+
12+
<main >
13+
14+
<h1>{{#i18n "accessible-labels-title"}}{{/i18n}}</h1>
15+
16+
<h2>{{#i18n "accessible-labels-intro"}}{{/i18n}}</h2>
17+
<p>{{#i18n "accessible-labels-intro-1"}}{{/i18n}}</p>
18+
19+
<h2>{{#i18n "accessible-labels-what-is-labeling"}}{{/i18n}}</h2>
20+
<p>{{#i18n "accessible-labels-what-is-labeling-1"}}{{/i18n}}</p>
21+
22+
<h2>{{#i18n "accessible-labels-why-labeling-matters"}}{{/i18n}}</h2>
23+
<p>{{#i18n "accessible-labels-why-labeling-matters-1"}}{{/i18n}}</p>
24+
<p>{{#i18n "accessible-labels-why-labeling-matters-2"}}{{/i18n}}</p>
25+
26+
<h2>{{#i18n "accessible-labels-available-labels"}}{{/i18n}}</h2>
27+
<p>{{#i18n "accessible-labels-available-labels-1"}}{{/i18n}}:</p>
28+
<ul class="list_view">
29+
<li>{{#i18n "accessible-labels-available-labels-li-1"}}{{/i18n}}</li>
30+
<li>{{#i18n "accessible-labels-available-labels-li-2"}}{{/i18n}}</li>
31+
<li>{{#i18n "accessible-labels-available-labels-li-3"}}{{/i18n}}</li>
32+
<li>{{#i18n "accessible-labels-available-labels-li-4"}}{{/i18n}}</li>
33+
</ul>
34+
35+
<h2>{{#i18n "accessible-labels-prerequisites"}}{{/i18n}}</h2>
36+
<p>{{#i18n "accessible-labels-prerequisites-1"}}{{/i18n}}</p>
37+
<p>{{#i18n "accessible-labels-prerequisites-2"}}{{/i18n}}</p>
38+
39+
<script type="text/p5" data-p5-version="{{ version }}">
40+
function setup() {
41+
createCanvas(100, 100);
42+
describe('A blue square in the center of a black canvas.');
43+
}
44+
45+
function draw() {
46+
background(250);
47+
noStroke();
48+
fill(200,0,0);
49+
50+
rect(67, 67, 20, 20);
51+
}
52+
</script>
53+
54+
<h2>{{#i18n "accessible-labels-steps-for-labeling"}}{{/i18n}}</h2>
55+
56+
<h3>{{#i18n "accessible-labels-steps-for-labeling-step-1"}}{{/i18n}}</h3>
57+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-1"}}{{/i18n}}</p>
58+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-2"}}{{/i18n}}</p>
59+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-3"}}{{/i18n}}</p>
60+
61+
<script type="text/p5" data-p5-version="{{ version }}">
62+
function setup() {
63+
createCanvas(100, 100);
64+
describe('A red heart in the bottom right corner of a white background.');
65+
}
66+
67+
function draw() {
68+
background(250);
69+
noStroke();
70+
fill(200,0,0);
71+
72+
ellipse(67, 67, 20, 20);
73+
ellipse(83, 67, 20, 20);
74+
triangle(91, 73, 75, 95, 59, 73);
75+
}
76+
</script>
77+
78+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-4"}}{{/i18n}}</p>
79+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-5"}}{{/i18n}}</p>
80+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-6"}}{{/i18n}}</p>
81+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-7"}}{{/i18n}}</p>
82+
83+
<h4>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex"}}{{/i18n}}</h4>
84+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex-1"}}{{/i18n}}</p>
85+
<ul class="list_view">
86+
<li>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-1"}}{{/i18n}}</li>
87+
<li>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-2"}}{{/i18n}}</li>
88+
<li>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-3"}}{{/i18n}}</li>
89+
<li>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex-li-4"}}{{/i18n}}</li>
90+
</ul>
91+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-1-complex-2"}}{{/i18n}}</p>
92+
93+
<h3>{{#i18n "accessible-labels-steps-for-labeling-step-2"}}{{/i18n}}</h3>
94+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-1"}}{{/i18n}}</p>
95+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-2"}}{{/i18n}}</p>
96+
<h4>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-de"}}{{/i18n}}</h4>
97+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-1"}}{{/i18n}}</p>
98+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-2"}}{{/i18n}}</p>
99+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-3"}}{{/i18n}}</p>
100+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-4"}}{{/i18n}}</p>
101+
102+
<script type="text/p5" data-p5-version="{{ version }}">
103+
function setup() {
104+
createCanvas(100, 100);
105+
// Provides an overall description of the canvas.
106+
describe('Text in the top right corner with red heart in the bottom right corner on a white background.');
107+
}
108+
109+
function draw() {
110+
background(250);
111+
noStroke();
112+
fill(200, 0, 0);
113+
114+
textSize(12);
115+
textStyle(NORMAL);
116+
// Specific label for text.
117+
describeElement('Text', 'The text "Hello world!" in the upper left corner of a white canvas.');
118+
text('Hello world!', 5, 30);
119+
120+
// Specific label for the heart.
121+
describeElement('Heart', 'A red heart in the bottom right corner.');
122+
ellipse(67, 67, 20, 20);
123+
ellipse(83, 67, 20, 20);
124+
triangle(91, 73, 75, 95, 59, 73);
125+
126+
}
127+
</script>
128+
129+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-de-5"}}{{/i18n}}</p>
130+
<h4>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-go-to"}}{{/i18n}}</h4>
131+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-using-go-to-1"}}{{/i18n}}</p>
132+
<h4>{{#i18n "accessible-labels-steps-for-labeling-step-2-animated"}}{{/i18n}}</h4>
133+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-animated-1"}}{{/i18n}}</p>
134+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-animated-2"}}{{/i18n}}</p>
135+
136+
<script type="text/p5" data-p5-version="{{ version }}">
137+
let x = 0;
138+
139+
function setup() {
140+
createCanvas(100, 100);
141+
}
142+
143+
function draw() {
144+
if (x > 100) {
145+
x = 0;
146+
}
147+
background(220);
148+
fill(0, 255, 0);
149+
ellipse(x, 50, 40, 40);
150+
x = x + 0.1;
151+
// Label updates with shape’s translation.
152+
describe(`A green circle at x position ${round(x)}, moving to the right.`, LABEL);
153+
}
154+
</script>
155+
156+
<h4>{{#i18n "accessible-labels-steps-for-labeling-step-2-do-donts"}}{{/i18n}}</h4>
157+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-do-donts-1"}}{{/i18n}}</p>
158+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-2-do-donts-2"}}{{/i18n}}</p>
159+
160+
<h3>{{#i18n "accessible-labels-steps-for-labeling-step-3"}}{{/i18n}}</h3>
161+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-3-1"}}{{/i18n}}</p>
162+
163+
<script type="text/p5" data-p5-version="{{ version }}">
164+
function setup() {
165+
createCanvas(100, 100);
166+
}
167+
168+
function draw() {
169+
170+
// LABEL shows the label next to the canvas.
171+
gridOutput(LABEL);
172+
173+
background(250);
174+
noStroke();
175+
fill(200, 0, 0);
176+
177+
ellipse(67, 67, 20, 20);
178+
ellipse(83, 67, 20, 20);
179+
triangle(91, 73, 75, 95, 59, 73);
180+
}
181+
</script>
182+
183+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-3-2"}}{{/i18n}}</p>
184+
<ul class="list_view">
185+
<li>{{#i18n "accessible-labels-steps-for-labeling-step-3-2-li-1"}}{{/i18n}}</li>
186+
<li>{{#i18n "accessible-labels-steps-for-labeling-step-3-2-li-2"}}{{/i18n}}</li>
187+
</ul>
188+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-3-3"}}{{/i18n}}</p>
189+
<p>{{#i18n "accessible-labels-steps-for-labeling-step-3-4"}}{{/i18n}}</p>
190+
191+
<h2>{{#i18n "accessible-labels-conclusion"}}{{/i18n}}</h2>
192+
<p>{{#i18n "accessible-labels-conclusion-1"}}{{/i18n}}</p>
193+
<p>{{#i18n "accessible-labels-conclusion-2"}}{{/i18n}}</p>
194+
<p>{{#i18n "accessible-labels-conclusion-3"}}{{/i18n}}</p>
195+
196+
<!-- this script only needs to get added once even if there are multiple widget instances -->
197+
<script src= "//toolness.github.io/p5.js-widget/p5-widget.js"></script>
198+
199+
</main>
200+
201+
{{> footer}}
202+
203+
</div> <!-- end column-span -->
204+
205+
{{> asterisk}}
206+
207+
</div><!-- end id="get-started-page" -->

0 commit comments

Comments
 (0)