Skip to content

Commit c684b76

Browse files
QianqianyeQianqianye
authored
Merge pull request #1412 from katlich112358/how-to-label-your-p5-canvas-tutorial
How to label your p5 canvas tutorial
2 parents 3c4cb83 + a614f6e commit c684b76

File tree

8 files changed

+1069
-0
lines changed

8 files changed

+1069
-0
lines changed

‎src/data/en.yml

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

‎src/data/es.yml

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

‎src/data/hi.yml

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

‎src/data/it.yml

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

‎src/data/ko.yml

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

‎src/data/learn/learn.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
{
2424
"name": "p5-screen-reader",
2525
"url": "p5-screen-reader.html"
26+
},
27+
{
28+
"name": "labeling-canvases",
29+
"url": "labeling-canvases.html"
2630
}
2731
],
2832
"connecting-p5js-title": [

‎src/data/zh-Hans.yml

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

‎src/templates/pages/learn/labeling-canvases.hbs

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
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 "labeling-canvases-title"}}{{/i18n}}</h1>
15+
16+
<p>{{#i18n "labeling-canvases-intro-1"}}{{/i18n}} <a class = "code" href="{{root}}/reference/#/p5/describe">describe()</a>,
17+
<a class = "code" href="{{root}}/reference/#/p5/describeElement">describeElement()</a>, <a class = "code" href="{{root}}/reference/#/p5/gridOutput">gridOutput()</a>,
18+
{{#i18n "labeling-canvases-intro-2"}}{{/i18n}} <a class = "code" href="{{root}}/reference/#/p5/textOutput">textOutput()</a> {{#i18n "labeling-canvases-intro-3"}}{{/i18n}}</p>
19+
20+
<h2>{{#i18n "labeling-canvases-what-is-labeling"}}{{/i18n}}</h2>
21+
<p>{{#i18n "labeling-canvases-what-is-labeling-1"}}{{/i18n}}</p>
22+
<p>{{#i18n "labeling-canvases-what-is-labeling-2"}}{{/i18n}}</p>
23+
<p>{{#i18n "labeling-canvases-what-is-labeling-3"}}{{/i18n}} <a href="{{root}}/learn/p5-screen-reader.html">Using p5 with a screen reader</a>.</p>
24+
25+
<h2>{{#i18n "labeling-canvases-available-labels"}}{{/i18n}}</h2>
26+
<p>{{#i18n "labeling-canvases-available-labels-1"}}{{/i18n}}:</p>
27+
<ul class="list_view">
28+
<li>{{#i18n "labeling-canvases-available-labels-li-1"}}{{/i18n}}</li>
29+
<li>{{#i18n "labeling-canvases-available-labels-li-2"}}{{/i18n}}</li>
30+
<li>{{#i18n "labeling-canvases-available-labels-li-3"}}{{/i18n}}</li>
31+
<li>{{#i18n "labeling-canvases-available-labels-li-4"}}{{/i18n}}</li>
32+
</ul>
33+
34+
<h2>{{#i18n "labeling-canvases-best-practices"}}{{/i18n}}</h2>
35+
36+
<h3>{{#i18n "labeling-canvases-best-practices-what-requires-labeling"}}{{/i18n}}</h3>
37+
<p>{{#i18n "labeling-canvases-best-practices-what-requires-labeling-1"}}{{/i18n}}</p>
38+
<p>{{#i18n "labeling-canvases-best-practices-what-requires-labeling-2"}}{{/i18n}}</p>
39+
40+
41+
<!-- Code example below copied from Reference page: https://p5js.org/reference/#/p5/describe-->
42+
43+
<script type="text/p5" data-p5-version="{{ version }}">
44+
function setup() {
45+
createCanvas(100, 100);
46+
}
47+
48+
function draw() {
49+
background(255,192,203);
50+
noStroke();
51+
fill(200,0,0);
52+
53+
describeElement("Heart","Red heart in the bottom right corner.");
54+
ellipse(67, 67, 20, 20);
55+
ellipse(83, 67, 20, 20);
56+
triangle(91, 73, 75, 95, 59, 73);
57+
}
58+
</script>
59+
60+
<p>{{#i18n "labeling-canvases-best-practices-what-requires-labeling-3"}}{{/i18n}}</p>
61+
<p>{{#i18n "labeling-canvases-best-practices-what-requires-labeling-4"}}{{/i18n}}</p>
62+
63+
<script type="text/p5" data-p5-version="{{ version }}">
64+
function setup() {
65+
createCanvas(100, 100);
66+
}
67+
68+
function draw() {
69+
background(255,192,203);
70+
noStroke();
71+
fill(200,0,0);
72+
73+
textSize(12);
74+
textStyle(NORMAL);
75+
describeElement("Text", "The text 'Hello world!' in the upper left corner of a pink canvas.'");
76+
text('Hello world!', 5, 30);
77+
}
78+
</script>
79+
80+
<p>{{#i18n "labeling-canvases-best-practices-what-requires-labeling-5"}}{{/i18n}}</p>
81+
82+
<h3>{{#i18n "labeling-canvases-best-practices-dont-label"}}{{/i18n}}</h3>
83+
<p>{{#i18n "labeling-canvases-best-practices-dont-label-1"}}{{/i18n}}</p>
84+
<p>{{#i18n "labeling-canvases-best-practices-dont-label-2"}}{{/i18n}}</p>
85+
86+
<h3>{{#i18n "labeling-canvases-best-practices-using-labels"}}{{/i18n}}</h3>
87+
88+
<h4>{{#i18n "labeling-canvases-best-practices-using-labels-all-canvases"}}{{/i18n}}</h4>
89+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-all-canvases-1"}}{{/i18n}}</p>
90+
91+
<script type="text/p5" data-p5-version="{{ version }}">
92+
function setup() {
93+
createCanvas(100, 100);
94+
}
95+
96+
function draw() {
97+
background(250);
98+
noStroke();
99+
100+
describe("Flower with red petals and a green stem on a white canvas.");
101+
102+
fill("#0DCC23");
103+
rect(48, 50, 5, 50);
104+
105+
fill(200,0,0);
106+
ellipse(40, 55, 18);
107+
ellipse(40, 45, 18);
108+
ellipse(50, 40, 18);
109+
ellipse(60, 55, 18);
110+
ellipse(60, 45, 18);
111+
ellipse(50, 60, 18);
112+
113+
fill("#FFE200");
114+
ellipse(50,50,15);
115+
}
116+
</script>
117+
118+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-all-canvases-2"}}{{/i18n}}</p>
119+
120+
<h4>{{#i18n "labeling-canvases-best-practices-using-labels-simple"}}{{/i18n}}</h4>
121+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-simple-1"}}{{/i18n}}</p>
122+
123+
<script type="text/p5" data-p5-version="{{ version }}">
124+
function setup() {
125+
createCanvas(100, 100);
126+
}
127+
128+
function draw() {
129+
background(250);
130+
noStroke();
131+
132+
textOutput(LABEL);
133+
134+
fill("#0DCC23");
135+
rect(48, 50, 5, 50);
136+
137+
fill(200,0,0);
138+
ellipse(40, 55, 18);
139+
ellipse(40, 45, 18);
140+
ellipse(50, 40, 18);
141+
ellipse(60, 55, 18);
142+
ellipse(60, 45, 18);
143+
ellipse(50, 60, 18);
144+
145+
fill("#FFE200");
146+
ellipse(50,50,15);
147+
}
148+
</script>
149+
150+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-simple-2"}}{{/i18n}}</p>
151+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-simple-3"}}{{/i18n}}</p>
152+
153+
<h4>{{#i18n "labeling-canvases-best-practices-using-labels-interactive"}}{{/i18n}}</h4>
154+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-interactive-1"}}{{/i18n}}</p>
155+
156+
<!-- Code example below copied from Reference page: https://p5js.org/reference/#/p5/describe-->
157+
158+
<script type="text/p5" data-p5-version="{{ version }}">
159+
let x = 0;
160+
161+
function setup() {
162+
createCanvas(100, 100);
163+
}
164+
165+
function draw() {
166+
if (x > 100) {
167+
x = 0;
168+
}
169+
background(220);
170+
fill(0, 255, 0);
171+
ellipse(x, 50, 40, 40);
172+
x = x + 0.1;
173+
describe('green circle at x pos ' + round(x) + ' moving to the right', LABEL);
174+
}
175+
</script>
176+
177+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-interactive-2"}}{{/i18n}}</p>
178+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-interactive-3"}}{{/i18n}}</p>
179+
180+
<h4>{{#i18n "labeling-canvases-best-practices-using-labels-complex"}}{{/i18n}}</h4>
181+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-complex-1"}}{{/i18n}}</p>
182+
183+
<ul class="list_view">
184+
<li>{{#i18n "labeling-canvases-best-practices-using-labels-complex-ul-1"}}{{/i18n}}</li>
185+
<li>{{#i18n "labeling-canvases-best-practices-using-labels-complex-ul-2"}}{{/i18n}}</li>
186+
<li>{{#i18n "labeling-canvases-best-practices-using-labels-complex-ul-3"}}{{/i18n}}</li>
187+
</ul>
188+
<p>{{#i18n "labeling-canvases-best-practices-using-labels-complex-2"}}{{/i18n}}</p>
189+
190+
<h3>{{#i18n "labeling-canvases-how-not-to-use-labels"}}{{/i18n}}</h3>
191+
192+
<h4>{{#i18n "labeling-canvases-how-not-to-use-labels-sub"}}{{/i18n}}</h4>
193+
<p>{{#i18n "labeling-canvases-how-not-to-use-labels-sub-1"}}{{/i18n}}</p>
194+
195+
<h4>{{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill"}}{{/i18n}}</h4>
196+
<p>{{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill-1"}}{{/i18n}}</p>
197+
<p>{{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill-2"}}{{/i18n}}</p>
198+
<p>{{#i18n "labeling-canvases-how-not-to-use-labels-info-overkill-3"}}{{/i18n}}</p>
199+
200+
<h2>{{#i18n "labeling-canvases-testing-labels"}}{{/i18n}}</h2>
201+
<p>{{#i18n "labeling-canvases-testing-labels-1"}}{{/i18n}}</p>
202+
203+
<script type="text/p5" data-p5-version="{{ version }}">
204+
function setup() {
205+
createCanvas(100, 100);
206+
}
207+
208+
function draw() {
209+
gridOutput(LABEL);
210+
211+
background(255,192,203);
212+
noStroke();
213+
fill(200,0,0);
214+
215+
ellipse(67, 67, 20, 20);
216+
ellipse(83, 67, 20, 20);
217+
triangle(91, 73, 75, 95, 59, 73);
218+
}
219+
</script>
220+
221+
<p>{{#i18n "labeling-canvases-testing-labels-2"}}{{/i18n}}</p>
222+
<p>{{#i18n "labeling-canvases-testing-labels-3"}}{{/i18n}}</p>
223+
<br>
224+
<p>{{#i18n "labeling-canvases-note"}}{{/i18n}}</p>
225+
226+
<!-- this script only needs to get added once even if there are multiple widget instances -->
227+
<script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
228+
229+
</main>
230+
231+
{{> footer}}
232+
233+
</div> <!-- end column-span -->
234+
235+
{{> asterisk}}
236+
237+
</div><!-- end id="get-started-page" -->

0 commit comments

Comments
 (0)