forked from processing/p5.js-website-legacy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
i18n-tracking.yml
5502 lines (5502 loc) · 282 KB
/
i18n-tracking.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
es:
src/data/en.yml:
line 1123: ' book-6-title'
line 1124: ' book-6-authors'
line 1125: ' book-6-publisher'
line 1126: ' book-6-pages'
line 1127: ' book-6-type'
line 1128: ' book-6-description'
line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
line 1130: ' of aesthetic programming, engaging with learning to program as a way to '
line 1131: ' understand and question existing technological objects and paradigms, '
line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
line 1133: ' book-6-order-a'
line 1134: ' book-6-order-b'
line 162: ' library in your html. To learn more visit '
line 163: ' library in your html. To learn more visit '
line 164: ' your-first-sketch7'
line 97: ' get-started-button'
line 96: ' get-started7'
line 114: ' environment15'
line 113: ' environment14'
line 115: ' environment16'
line 102: ' download8'
line 103: ' download9'
line 104: ' download10'
line 105: ' download11'
line 256: ' , the organization that supports p5.js.'
line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
line 269: ' Your donation supports software development for p5.js, education resources'
line 265: ' and inclusive as possible. You can support this work by making a donation to'
line 266: ' the '
line 267: ' support-2'
line 268: ' , the organization that supports p5.js. We need your help!'
line 275: ' support-3'
line 276: ' support-4'
line 277: ' support-5'
line 37: Editor
line 55: footer5
line 123: ' p3xh2'
line 41: Reference
line 118: ' p2x3'
line 128: ' p3xp5'
line 59: tagline4
line 136: ' p4xp6'
line 243: ' settingUp-title'
line 62: tagline7
line 45: Books
line 34: Language-Settings
line 35: Sidebar-Title
line 36: Home
line 38: Download
line 39: Donate
line 40: Start
line 42: Libraries
line 43: Learn
line 56: tagline1
line 60: tagline5
line 61: tagline6
line 111: ' identity and expression, sexual orientation, race, ethnicity, language,'
line 112: ' neuro-type, size, disability, class, religion, culture, subculture,'
line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.'
line 117: ' p2x2'
line 119: ' p2x4'
line 120: ' p2x5'
line 121: ' p2x6'
line 122: ' p2x7'
line 124: ' p3xp1'
line 125: ' p3xp2'
line 126: ' p3xp3'
line 127: ' p3xp4'
line 137: ' sketch_credits'
line 138: ' sketch_info'
line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
line 272: ' that your html and js files are located in. On the left sidebar, you should'
line 273: ' find the folder name at the top, with a list of the files contained in the'
line 282: ' environment12'
line 283: ' environment13'
line 284: ' your-first-sketch-title'
line 285: ' your-first-sketch-intro1'
line 286: ' your-first-sketch-intro2'
line 287: ' your-first-sketch-intro3'
line 288: ' your-first-sketch-intro4'
line 289: ' your-first-sketch1'
line 290: ' your-first-sketch2'
line 291: ' your-first-sketch3'
line 292: ' your-first-sketch4'
line 293: ' The line you just added draws an ellipse, with its center 50 pixels over'
line 294: ' from the left and 50 pixels down from the top, with a width and height of 80'
line 295: ' pixels.'
line 296: ' your-first-sketch5'
line 297: ' your-first-sketch6'
line 298: ' If you are using a screen reader, you must turn on the accessible outputs in'
line 299: ' the p5 online editor, outside the editor you must add the accessibility'
line 300: ' library in your html. To learn more visit'
line 301: ' your-first-sketch7'
line 302: ' your-first-sketch8'
line 303: ' If you''ve typed everything correctly, this will appear in the display'
line 304: ' window'
line 305: ' your-first-sketch9'
line 306: ' your-first-sketch10'
line 307: ' If nothing appears, the editor may be having trouble understanding what'
line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
line 309: ' exactly'
line 310: ' between each of them, the line should end with a semicolon, and ellipse has'
line 311: ' to be spelled correctly.'
line 312: ' your-first-sketch11'
line 313: ' One of the most difficult things about getting started with programming is'
line 314: ' that you have to be very specific about the syntax. The browser isn''t always'
line 315: ' smart enough to know what you mean, and can be quite fussy about the'
line 316: ' placement of punctuation. You''ll get used to it with a little practice. In'
line 317: ' the bottom left of the editor you will find the console section. Here, you'
line 318: ' can find messages from the editor with details about any errors it'
line 319: ' encounters.'
line 320: ' your-first-sketch12'
line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
line 322: ' last example to try this'
line 323: ' your-first-sketch13'
line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
line 325: ' and then starts drawing white circles at the position of the mouse. When a'
line 326: ' mouse button is pressed, the circle color changes to black. Run the code,'
line 327: ' move the mouse, and click to experience it.'
line 328: ' your-first-sketch14'
line 329: ' first-sketch-heading1'
line 330: ' first-sketch-heading2'
line 331: ' first-sketch-heading3'
line 332: ' what-next-title'
line 333: ' learn1'
line 334: ' learn2'
line 335: ' learn3'
line 336: ' learn4'
line 337: ' learn5'
line 338: ' learn6'
line 339: ' learn7'
line 340: ' learn8'
line 341: ' learn9'
line 342: ' learn10'
line 343: ' reference1'
line 344: ' reference2'
line 345: ' reference3'
line 346: ' learn11'
line 347: ' learn12'
line 348: ' processing-transition1'
line 349: ' processing-transition2'
line 350: ' processing-transition3'
line 351: ' processing-transition4'
line 352: ' book1'
line 353: ' Parts of this tutorial were adapted from the book, Getting Started with'
line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
line 356: ' Contributors Conference.'
line 44: Examples
line 57: tagline2
line 146: ' copyright-title'
line 231: ' get-started-title'
line 240: ' . If you would like to work on the the desktop version of p5.js you can'
line 258: ' download7'
line 281: ' file manager or type'
line 54: footer4
line 110: ' We are a community of, and in solidarity with, people from every gender'
line 239: ' get-started6'
line 259: ' environment-title'
line 274: ' folder directly below.'
line 875: ' writing-a-tutorial-iframe-4'
line 233: ' This page walks you through setting up a p5.js project and making your first'
line 234: ' sketch.'
line 244: ' download-title'
line 245: ' hosted-title'
line 50: footerxh1
line 98: ' p1x1'
line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making'
line 100: ' coding accessible and inclusive for artists, designers, educators,'
line 109: ' p2x1'
line 129: ' p3xp6'
line 148: ' The p5.js library is free software; you can redistribute it and/or modify it'
line 46: Community
line 133: ' p4xp3'
line 134: ' p4xp4'
line 141: ' project-a-2-5-phuong'
line 144: ' project-a-2-7-phuong'
line 64: ' color-p3x3'
line 70: ' color-rgb-p1x1'
line 87: ' color-custom-ranges-p2x1'
line 24: footer1
line 25: footer2
line 26: footer3
line 27: footer4
line 77: ' color-rgb-p2x1'
line 82: ' color-transparency-p2x1'
line 139: ' project-a-2-7-phuong'
line 76: ' color-transparency-p1x1'
line 31: tagline7
line 63: ' hosted-title'
line 75: ' download9'
line 140: ' learn5'
line 142: ' learn7'
line 143: ' learn8'
line 145: ' learn10'
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
line 357: ' link-2-chung'
line 358: ' link-3-chung'
line 359: ' project-a-1-1-chung'
line 360: ' project-a-1-2-chung'
line 361: ' project-a-1-3-chung'
line 362: ' project-a-2-1-chung'
line 363: ' dan-shiffman-matterjs-tutorial'
line 364: ' project-a-2-2-chung'
line 365: ' project-a-3-1-chung'
line 366: ' project-a-3-2-chung'
line 367: ' project-a-4-1-chung'
line 368: ' project-a-4-2-chung'
line 369: ' project-a-4-3-chung'
line 370: ' project-a-5-1-chung'
line 371: ' project-a-5-2-chung'
line 372: ''
line 373: ' creator-from-casey-louise'
line 374: ' project-a-1-1-casey-louise'
line 375: ' project-a-1-2-casey-louise'
line 376: ' project-a-1-3-casey-louise'
line 377: ' project-a-1-4-casey-louise'
line 378: ' project-a-1-5-casey-louise'
line 379: ' project-a-2-1-casey-louise'
line 380: ' project-a-2-2-casey-louise'
line 381: ' project-a-3-1-casey-louise'
line 382: ' project-a-3-2-casey-louise'
line 383: ' project-a-3-3-casey-louise'
line 384: ' project-a-3-4-casey-louise'
line 385: ' project-a-3-5-casey-louise'
line 386: ' project-a-4-1-casey-louise'
line 387: ' adam-ferris-repo-casey-louise'
line 388: ' project-a-4-2-casey-louise'
line 389: ' project-a-4-3-casey-louise'
line 390: ' project-a-4-4-casey-louise'
line 391: ' webgl-casey-louise'
line 392: ' project-a-4-5-casey-louise'
line 393: ' project-a-4-6-casey-louise'
line 394: ' openframeworks-book-casey-louise'
line 395: ' project-a-4-7-casey-louise'
line 396: ' project-a-5-1-casey-louise'
line 397: ' project-a-5-2-casey-louise'
line 398: ''
line 399: ' pronouns-nonbinary'
line 400: ' creator-from-moon'
line 401: ' posters-by'
line 402: ' project-a-1-1-moon'
line 403: ' project-a-1-2-moon'
line 404: ' project-a-1-3-moon'
line 405: ' project-a-1-4-moon'
line 406: ' pcd-la-moon'
line 407: ' project-a-1-5-moon'
line 408: ' project-a-2-1-moon'
line 409: ' codetrain-moon'
line 410: ' project-a-2-2-moon'
line 411: ' p5-reference-moon'
line 412: ' project-a-2-3-moon'
line 413: ' project-a-3-1-moon'
line 414: ' project-a-3-2-moon'
line 415: ' project-a-3-3-moon'
line 416: ' project-a-3-4-moon'
line 417: ' project-a-4-1-moon'
line 418: ' project-a-5-1-moon'
line 419: ' project-a-5-2-moon'
line 79: ' environment1'
line 88: ' environment8'
line 173: ' complete-library-intro1'
line 182: ' learn3'
line 191: ' writing-a-tutorial-embedding-7'
line 197: ' writing-a-tutorial-iframe-1'
line 204: ' writing-a-tutorial-iframe-7'
line 213: ' color-description1'
line 222: ' coordinate-system-description3'
line 69: ' download5'
line 74: ' download8'
line 78: ' environment1'
line 157: ' learn11'
line 172: ' complete-library-intro1'
line 181: ' learn3'
line 190: ' writing-a-tutorial-embedding-7'
line 196: ' writing-a-tutorial-iframe-1'
line 203: ' writing-a-tutorial-iframe-7'
line 212: ' color-description1'
line 221: ' coordinate-system-description3'
line 230: ' coordinate-system-simple-shapes-p1x1'
line 66: ' sketch_credits'
line 67: ' sketch_info'
line 22: footer1
line 23: footer2
line 32: ' download-intro'
line 65: ' color-rgb-p1x1'
line 72: ' color-rgb-p2x1'
line 85: ' color-custom-ranges-p4x1'
line 28: footer5
line 81: ' color-transparency-p1x1'
line 90: ' color-custom-ranges-p4x1'
line 153: ' project-a-4-7-casey-louise'
line 33: Skip-To-Content
line 47: Contribute
line 48: Forum
line 49: Showcase
line 51: footer1
line 52: footer2
line 53: footer3
line 58: tagline3
line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe'
line 106: ' think of your whole browser page as your sketch, including HTML5 objects for'
line 107: ' text, input, video, webcam, and sound.'
line 108: ' p2xh2'
line 130: ' p4xh2'
line 131: ' p4xp1'
line 132: ' p4xp2'
line 135: ' p4xp5'
line 147: ' copyright1'
line 149: ' under the terms of the'
line 150: ' copyright2'
line 151: ' copyright3'
line 152: ' copyright4'
line 232: ' get-started1'
line 235: ' get-started2'
line 236: ' get-started3'
line 237: ' get-started4'
line 238: ' get-started5'
line 241: ' scroll down to'
line 242: ' get-started7'
line 246: ' download1'
line 247: ' download2'
line 248: ' download3'
line 249: ' download4'
line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
line 252: ' loading), change the link to p5.min.js.'
line 253: ' download5'
line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
line 257: ' download6'
line 260: ' environment1'
line 261: ' environmentlink'
line 262: ' environment2'
line 263: ' environment3'
line 264: ' environment4'
line 270: ' environment8'
line 278: ' environment10'
line 279: ' environment11'
line 280: ' Open the index.html file in your browser by double clicking on it in your'
line 436: ' Download'
line 437: ' download-intro'
line 438: ' Welcome! While titled "Download" this page actually contains a collection of'
line 439: ' links to either download the library or begin working with it online. We''ve'
line 440: ' tried to order things to reflect what a beginner might want first, to'
line 441: ' resources that more experienced programmers may be looking for.'
line 442: ' editor-title'
line 443: ' p5.js-editor'
line 444: ' p5.js-editor-intro'
line 445: ' This link redirects you to the p5.js Editor online so you can begin using'
line 446: ' p5.js immediately.'
line 447: ' editor-includes'
line 448: ' complete-library-title'
line 449: ' complete-library-intro1'
line 450: ' This is a download containing the p5.js library file, the p5.sound addon,'
line 451: ' and an example project. It does not contain an editor. Visit'
line 452: ' complete-library-intro2'
line 453: ' complete-library-intro3'
line 454: ' p5.js-complete'
line 455: ' includes-1'
line 456: ' includes-2'
line 457: ' includes-3'
line 458: ' single-files-title'
line 459: ' single-files-intro'
line 460: ' These are downloads or links to the p5.js library file. No additional'
line 461: ' contents are included.'
line 462: ' single-file'
line 463: ' p5.js-uncompressed'
line 464: ' compressed'
line 465: ' link'
line 466: ' statically-hosted-file'
line 467: ' etc-title'
line 468: ' older-releases'
line 469: ' github-repository'
line 470: ' report-bugs'
line 471: ' supported-browsers'
line 472: ' support-title'
line 473: ' support-options'
line 474: ' support-1'
line 475: ' p5.js is free, open-source software. We want to make our community as open'
line 476: ' and inclusive as possible. You can support this work by'
line 477: ' support-2'
line 478: ' support-3'
line 479: ' support-4'
line 480: ' support-5'
line 481: ' support-6'
line 482: ' support-7'
line 483: ' support-8'
line 484: ' support-9'
line 485: ' support-10'
line 486: ' support-11'
line 487: ' support-12'
line 488: ' Your membership supports software development (for p5.js, Processing,'
line 489: ' Processing.py, Processing for Android and ARM devices, education resources'
line 490: ' like code examples and tutorials,'
line 491: ' support-13'
line 492: ' support-14'
line 493: ' support-15'
line 494: ' support-16'
line 495: ' support-17'
line 496: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
line 497: ' Pittsburgh (Image credit'
line 498: ' support-18'
line 499: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
line 500: ' workshops in London (Image credit'
line 501: ' support-19'
line 502: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
line 503: ' Kira Simon-Kennedy)'
line 504: ' support-20'
line 505: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
line 506: ' (Image credit'
line 507: ' support-21'
line 508: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
line 509: ' credit'
line 510: ' support-22'
line 511: ' support-23'
line 512: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
line 513: ' (Image credit'
line 514: ' support-24'
line 515: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
line 516: ' workshop led by Taeyoon Choi (Image credit'
line 517: ' support-25'
line 518: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
line 519: ' Pittsburgh (Image credit'
line 520: ' support-26'
line 521: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
line 522: ' International Center of Photography (Image credit'
line 523: ' Photography)'
line 524: ' support-27'
line 525: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
line 526: ' Montoya-Moraga (Image credit'
line 527: ' support-28'
line 528: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
line 529: ' led by Taeyoon Choi (Image credit'
line 530: ' support-29'
line 531: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
line 532: ' Angeles (Image credit'
line 533: ' support-30'
line 534: ' support-31'
line 535: ' support-32'
line 536: ' support-33'
line 537: ' support-17-alt'
line 538: ' support-18-alt'
line 539: ' support-19-alt'
line 540: ' support-20-alt'
line 541: ' support-21-alt'
line 542: ' support-22-alt'
line 543: ' support-23-alt'
line 544: ' support-24-alt'
line 545: ' support-25-alt'
line 546: ' support-26-alt'
line 547: ' support-27-alt'
line 548: ' support-28-alt'
line 549: ' support-29-alt'
line 550: ' support-30-alt'
line 551: ' support-31-alt'
line 729: ' learn-title'
line 730: ' teach-title2'
line 731: ' learn1'
line 732: ' These tutorials provide more in-depth or step-by-step overviews of'
line 733: ' particular topics. Check out the '
line 734: ' learn2'
line 735: ' learn3'
line 736: ' introduction-to-p5js-title'
line 737: ' hello-p5js-title'
line 738: ' hello-p5js'
line 739: ' This short video will introduce you to the library and what you can do with'
line 740: ' it.'
line 741: ' getting-started-title'
line 742: ' getting-started'
line 743: ' Welcome to p5.js! <br> This introduction covers the basics of setting up a'
line 744: ' p5.js project.'
line 745: ' p5js-overview-title'
line 746: ' p5js-overview'
line 747: ' p5js-processing-title'
line 748: ' p5js-processing'
line 749: ' The main differences between the two, and how to convert from one to the'
line 750: ' other.'
line 751: ' p5-screen-reader-title'
line 752: ' p5-screen-reader'
line 753: ' using-local-server-title'
line 754: ' using-local-server'
line 755: ' p5js-wiki-title'
line 756: ' p5js-wiki'
line 757: ' connecting-p5js-title'
line 758: ' creating-libraries-title'
line 759: ' creating-libraries'
line 760: ' nodejs-and-socketio-title'
line 761: ' nodejs-and-socketio'
line 762: ' programming-topics-title'
line 763: ' beyond-the-canvas-title'
line 764: ' beyond-the-canvas'
line 765: ' 3d-webgl-title'
line 766: ' 3d-webgl'
line 767: ' color-title'
line 768: ' color'
line 769: ' coordinate-system-and-shapes-title'
line 770: ' coordinate-system-and-shapes'
line 771: ' interactivity-title'
line 772: ' interactivity'
line 773: ' program-flow-title'
line 774: ' program-flow'
line 775: ' curves-title'
line 776: ' curves'
line 777: ' An introduction to the three types of curves in p5.js'
line 778: ' and Bézier curves.'
line 779: ' becoming-a-better-programmer-title'
line 780: ' debugging-title'
line 781: ' debugging'
line 782: ' optimizing-title'
line 783: ' optimizing'
line 784: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
line 785: ' and smoother.'
line 786: ' test-driven-development-title'
line 787: ' test-driven-development'
line 788: ' Save yourself from agony on install day. What is unit testing and how to use'
line 789: ' it? By Andy Timmons.'
line 790: ' contributing-to-the-community-title'
line 791: ' development-title'
line 792: ' development'
line 793: ' looking-inside-title'
line 794: ' looking-inside'
line 795: ' A friendly intro to the file structure and tools for p5.js development, by'
line 796: ' Luisa Pereira.'
line 797: ' writing-tutorial-title'
line 798: ' writing-tutorial'
line 799: ' writing-a-tutorial-title'
line 800: ' writing-a-tutorial-author'
line 801: ' writing-a-tutorial-1'
line 802: ' We invite educators, contributors and general enthusiasts to contribute p5js'
line 803: ' tutorials. The p5js project makes creative coding and open source'
line 804: ' development more accessible to a diverse community and we are excited to'
line 805: ' publish tutorials on all aspects of the development process. Our learning'
line 806: ' materials so far include guides on learning p5, programming technique and'
line 807: ' how to contribute to an open source project.'
line 808: ' writing-a-tutorial-2'
line 809: ' We welcome new written tutorial contributions and this guide outlines the'
line 810: ' steps of how to propose, prepare and contribute.'
line 811: ' writing-a-tutorial-how-start-title'
line 812: ' writing-a-tutorial-how-start-1'
line 813: ' writing-a-tutorial-how-start-2'
line 814: ' writing-a-tutorial-how-start-3'
line 815: ' that outlines in progress tutorials. If your topic is listed as in progress,'
line 816: ' perhaps you can add to work being done and contribute to preparing existing'
line 817: ' work for publication so please reach out to us.'
line 818: ' writing-a-tutorial-how-start-4'
line 819: ' If your topic is not already covered and is not listed as in progress,'
line 820: ' please write a few sentences on what you propose to cover and email us this'
line 821: ' description at education@p5js.org.'
line 822: ' writing-a-tutorial-how-prepare-title'
line 823: ' writing-a-tutorial-how-prepare-1'
line 824: ' When your tutorial is ready for publication, please follow these steps to'
line 825: ' prepare your content for the p5js website.'
line 826: ' writing-a-tutorial-how-prepare-2'
line 827: ' writing-a-tutorial-how-prepare-3'
line 828: ' writing-a-tutorial-how-prepare-4'
line 829: ' writing-a-tutorial-how-prepare-5'
line 830: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
line 831: ' of the p5js site. The file called index.hbs is the '
line 832: ' writing-a-tutorial-how-prepare-6'
line 833: ' writing-a-tutorial-how-prepare-7'
line 834: ' writing-a-tutorial-how-prepare-8'
line 835: ' writing-a-tutorial-how-prepare-9'
line 836: ' tags on the page, with formatting defined by the <h1> and <h2>'
line 837: ' tags, the <p> paragraph tags as is done shown on the'
line 838: ' writing-a-tutorial-how-prepare-10'
line 839: ' writing-a-tutorial-how-prepare-11'
line 840: ' If your tutorial contains images, they are to be placed in the assets folder'
line 841: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
line 842: ' shown below.'
line 843: ' writing-a-tutorial-how-prepare-12'
line 844: ' writing-a-tutorial-embedding-title'
line 845: ' writing-a-tutorial-embedding-1'
line 846: ' Using p5js means you can illustrate your tutorial with animated, interactive'
line 847: ' or editable code examples to demonstrate programming concepts. Your examples'
line 848: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
line 849: ' in two ways.'
line 850: ' writing-a-tutorial-embedding-2'
line 851: ' writing-a-tutorial-embedding-3'
line 852: ' writing-a-tutorial-embedding-4'
line 853: ' writing-a-tutorial-embedding-5'
line 854: ' writing-a-tutorial-embedding-6'
line 855: ' writing-a-tutorial-embedding-7'
line 856: ' writing-a-tutorial-embedding-8'
line 857: ' writing-a-tutorial-embedding-9'
line 858: ' writing-a-tutorial-embedding-10'
line 859: ' If the example is to be animated and/or interactive but not editable. The'
line 860: ' p5.js sketch should be embedded into the page as an iframe as described'
line 861: ' below.'
line 862: ' writing-a-tutorial-iframe-title'
line 863: ' writing-a-tutorial-iframe-1'
line 864: ' An iframe is like creating a window through which you can explore another'
line 865: ' page, sandboxed from the rest of your page. In this case it will be a window'
line 866: ' to the index.html containing your p5.js sketch. '
line 867: ' writing-a-tutorial-iframe-2'
line 868: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
line 869: ' folder labelled with the name of your sketch as shown in the screenshot.'
line 870: ' This is where all the images and p5 sketches linked by iframe should be'
line 871: ' stored.'
line 872: ' writing-a-tutorial-iframe-3'
line 873: ' In the subfolders containing your p5 examples there should be a sketch.js'
line 874: ' file and the embed.html file for the sketch. '
line 876: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
line 877: ' the site. If your file structure is the same as above, the path to the p5.js'
line 878: ' library should be "../../../js/p5.min.js".'
line 879: ' writing-a-tutorial-iframe-5'
line 880: ' You can then embed the p5js index files as iframes in the .hbs file that'
line 881: ' contains your tutorial content. The embed code for the iframe would then'
line 882: ' be'
line 883: ' writing-a-tutorial-iframe-6'
line 884: ' Styling for the iframe (this could directly into the post or in a'
line 885: ' stylesheet)'
line 886: ' writing-a-tutorial-iframe-7'
line 887: ' writing-a-tutorial-iframe-8'
line 888: ' writing-a-tutorial-iframe-9'
line 889: ' One thing to note is that you need to manually set the size of the iframe,'
line 890: ' so it works best if things are a standard size.'
line 891: ' writing-a-tutorial-iframe-10'
line 892: ' Also note that the links to the p5.js library files do not happen from the'
line 893: ' .eps page with all the tutorial content. Instead they will be located in the'
line 894: ' html page that is rendering your sketch (in this case, called embed.html).'
line 895: ' writing-a-tutorial-iframe-11'
line 896: ' writing-a-tutorial-embed-iframe-12'
line 897: ' writing-a-tutorial-finishing-title'
line 898: ' writing-a-tutorial-finishing-1'
line 899: ' Once your have finished writing your tutorial and your content has been'
line 900: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
line 901: ' as described above and then issue a pull request to the p5.js website'
line 902: ' repository so we can publish your contribution!'
line 903: ' writing-a-tutorial-finishing-2'
line 904: ' color-description1'
line 905: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
line 906: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
line 907: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
line 908: ' color-description2'
line 909: ' color-p1x1'
line 910: ' In the digital world, when we want to talk about a color, precision is'
line 911: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
line 912: ' Color, rather, is defined as a range of numbers. Let''s start with the'
line 913: ' simplest case'
line 914: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
line 915: ' gray ranging from black to white.'
line 916: ' color-p2x1'
line 917: ' color-p2x2'
line 918: ' color-p2x3'
line 919: ' color-p2x4'
line 920: ' color-code1'
line 921: ' background(255); // Setting the background to white '
line 922: ' stroke(0); // Setting the outline (stroke) to black '
line 923: ' fill(150); // Setting the interior of a shape (fill) to grey '
line 924: ' rect(50,50,75,100); // Drawing the rectangle'
line 925: ' color-p3x1'
line 926: ' color-p3x2'
line 927: ' color-p3x3'
line 928: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
line 929: ' important to remember that 0 is not "nothing", but rather denotes the color'
line 930: ' black. Also, remember not to eliminate both—with '
line 931: ' color-p3x4'
line 932: ' color-p3x5'
line 933: ' color-p4x1'
line 934: ' In addition, if we draw two shapes, p5.js will always use the most recently'
line 935: ' specified stroke and fill, reading the code from top to bottom.'
line 936: ' color-rgb-title'
line 937: ' color-rgb-p1x1'
line 938: ' Remember finger painting? By mixing three "primary" colors, any color could'
line 939: ' be generated. Swirling all colors together resulted in a muddy brown. The'
line 940: ' more paint you added, the darker it got. Digital colors are also constructed'
line 941: ' by mixing three primary colors, but it works differently from paint. First,'
line 942: ' the primaries are different'
line 943: ' with color on the screen, you are mixing light, not paint, so the mixing'
line 944: ' rules are different as well.'
line 945: ' color-rgb-li1'
line 946: ' color-rgb-li2'
line 947: ' color-rgb-li3'
line 948: ' color-rgb-li4'
line 949: ' color-rgb-li5'
line 950: ' color-rgb-p2x1'
line 951: ' This assumes that the colors are all as bright as possible, but of course,'
line 952: ' you have a range of color available, so some red plus some green plus some'
line 953: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
line 954: ' While this may take some getting used to, the more you program and'
line 955: ' experiment with RGB color, the more it will become instinctive, much like'
line 956: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
line 958: ' the individual color elements are expressed as ranges from 0 (none of that'
line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
line 960: ' and B. You will get the hang of RGB color mixing through experimentation,'
line 961: ' but next we will cover some code using some common colors.'
line 962: ' color-transparency-title'
line 963: ' color-transparency-p1x1'
line 964: ' In addition to the red, green, and blue components of each color, there is'
line 965: ' an additional optional fourth component, referred to as the color''s "alpha".'
line 966: ' Alpha means transparency and is particularly useful when you want to draw'
line 967: ' elements that appear partially see-through on top of one another. The alpha'
line 968: ' values for an image are sometimes referred to collectively as the "alpha'
line 969: ' channel" of an image.'
line 970: ' color-transparency-p2x1'
line 971: ' It is important to realize that pixels are not literally transparent, this'
line 972: ' is simply a convenient illusion that is accomplished by blending colors.'
line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
line 974: ' one to a percentage of another, creating the optical perception of blending.'
line 975: ' (If you are interested in programming "rose-colored" glasses, this is where'
line 976: ' you would begin.)'
line 977: ' color-transparency-p3x1'
line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
line 980: ' color-custom-ranges-title'
line 981: ' color-custom-ranges-p1x1'
line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For'
line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
line 985: ' percentage). You can do this by specifying a custom '
line 986: ' color-custom-ranges-p2x1'
line 987: ' The above function says'
line 988: ' green, and blue. The range of RGB values will be from 0 to 100."'
line 989: ' color-custom-ranges-p3x1'
line 990: ' Although it is rarely convenient to do so, you can also have different'
line 991: ' ranges for each color component'
line 992: ' color-custom-ranges-p4x1'
line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
line 994: ' from 0 to 10, and alpha from 0 to 255."'
line 995: ' color-custom-ranges-p5x1'
line 996: ' Finally, while you will likely only need RGB color for all of your'
line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
line 998: ' and brightness) mode. Without getting into too much detail, HSB color works'
line 999: ' as follows'
line 1000: ' color-custom-ranges-li1x1'
line 1001: ' color-custom-ranges-li1x2'
line 1002: ' color-custom-ranges-li2x1'
line 1003: ' color-custom-ranges-li2x2'
line 1004: ' color-custom-ranges-li3x1'
line 1005: ' color-custom-ranges-li3x2'
line 1006: ' color-custom-ranges-p6x1'
line 1007: ' color-custom-ranges-p6x2'
line 1008: ' coordinate-system-description1'
line 1009: ' coordinate-system-description2'
line 1010: ' coordinate-system-description3'
line 1011: ' coordinate-system-description4'
line 1012: ' coordinate-system-description5'
line 1013: ' coordinate-system-description-title'
line 1014: ' coordinate-system-description-p1x1'
line 1015: ' Before we begin programming with p5, we must first channel our eighth grade'
line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
line 1017: ' distance between two points is a good old fashioned line, and this is where'
line 1018: ' we begin, with two points on that graph paper.'
line 1019: ' coordinate-system-description-p2x1'
line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
line 1021: ' you wanted to direct a friend of yours to draw that same line, you would'
line 1022: ' give them a shout and say "draw a line from the point one-zero to the point'
line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer'
line 1024: ' and you wanted to instruct this digital pal to display that same line on its'
line 1025: ' screen. The same command applies (only this time you can skip the'
line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,'
line 1027: ' the instruction will look like this'
line 1028: ' coordinate-system-description-p3x1'
line 1029: ' Even without having studied the syntax of writing code, the above statement'
line 1030: ' should make a fair amount of sense. We are providing a command (which we'
line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In'
line 1032: ' addition, we are specifying some arguments for how that line should be'
line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
line 1034: ' code as a sentence, the function is a verb and the arguments are the objects'
line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a'
line 1036: ' period.'
line 1037: ' coordinate-system-description-p4x1'
line 1038: ' The key here is to realize that the computer screen is nothing more than a'
line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
line 1041: ' location of a point in space. And it is our job to specify what shapes and'
line 1042: ' colors should appear at these pixel coordinates.'
line 1043: ' coordinate-system-description-p5x1'
line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,'
line 1047: ' negative down and to the left). The coordinate system for pixels in a'
line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
line 1049: ' at the top left with the positive direction to the right horizontally and'
line 1050: ' down vertically.'
line 1051: ' coordinate-system-simple-shapes-title'
line 1052: ' coordinate-system-simple-shapes-p1x1'
line 1053: ' The vast majority of p5 programming examples are visual in nature. These'
line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
line 1055: ' begin by looking at four primitive shapes.'
line 1056: ' coordinate-system-simple-shapes-p2x1'
line 1057: ' For each shape, we will ask ourselves what information is required to'
line 1058: ' specify the location and size (and later color) of that shape and learn how'
line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.'
line 1061: ' coordinate-system-simple-shapes-p3x1'
line 1062: ' coordinate-system-simple-shapes-p3x2'
line 1063: ' coordinate-system-simple-shapes-p4x1'
line 1064: ' coordinate-system-simple-shapes-p4x2'
line 1065: ' coordinate-system-simple-shapes-p5x1'
line 1066: ' coordinate-system-simple-shapes-p5x2'
line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by'
line 1068: ' the coordinate for the top left corner of the rectangle, as well as its'
line 1069: ' width and height.'
line 1070: ' coordinate-system-simple-shapes-p6x1'
line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along'
line 1072: ' with width and height. If we prefer this method, we first indicate that we'
line 1073: ' want to use the '
line 1074: ' coordinate-system-simple-shapes-p6x2'
line 1075: ' coordinate-system-simple-shapes-p7x1'
line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner'
line 1077: ' and the bottom right corner). The mode here is '
line 1078: ' coordinate-system-simple-shapes-p7x2'
line 1079: ' coordinate-system-simple-shapes-p8x1'
line 1080: ' coordinate-system-simple-shapes-p8x2'
line 1081: ' coordinate-system-simple-shapes-p8x3'
line 1082: ' coordinate-system-simple-shapes-p8x4'
line 1083: ' coordinate-system-simple-shapes-p8x5'
line 1084: ' coordinate-system-simple-shapes-p8x6'
line 1085: ' coordinate-system-simple-shapes-p9x1'
line 1086: ' Now let''s look at what some code with shapes in more complete form, with'
line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
line 1088: ' to specify the width and height of the canvas.'
line 1089: ' teach-desc'
line 1090: test-tutorial
line 1147: ' Libraries'
line 1148: ' core-libraries'
line 1149: ' community-libraries'
line 1150: ' libraries-created-by'
line 1151: ' p5.sound'
line 1152: ' p5.sound extends p5 with Web Audio functionality including audio input,'
line 1153: ' playback, analysis and synthesis.'
line 1154: ' p5.accessibility'
line 1155: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
line 1156: ' and visually impaired.'
line 1157: ' asciiart'
line 1158: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
line 1159: ' p5js.'
line 1160: ' p5.ble'
line 1161: ' A Javascript library that enables communication between BLE devices and p5'
line 1162: ' sketches.'
line 1163: ' blizard.js'
line 1164: ' p5.bots'
line 1165: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
line 1166: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
line 1167: ' drive LEDs, motors, and more!'
line 1168: ' p5.clickable'
line 1169: ' p5.cmyk.js'
line 1170: ' p5.collide2D'
line 1171: ' p5.collide2D provides tools for calculating collision detection for 2D'
line 1172: ' geometry with p5.js.'
line 1173: ' p5.createloop'
line 1174: ' p5.dimensions'
line 1175: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
line 1176: ' dimensions.'
line 1177: ' p5.EasyCam'
line 1178: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
line 1179: ' contributions by Thomas Diewald.'
line 1180: ' p5.experience'
line 1181: ' Extensive library for p5.js that adds additional event-listening'
line 1182: ' functionality for creating canvas-based web applications.'
line 1183: ' p5.func'
line 1184: ' p5.func is a p5 extension that provides new objects and utilities for'
line 1185: ' function generation in the time, frequency, and spatial domains.'
line 1186: ' p5.geolocation'
line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
line 1188: ' geofencing user locations for p5.js.'
line 1189: ' p5.gibber'
line 1190: ' grafica.js'
line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your'
line 1192: ' p5.js sketches.'
line 1193: ' p5.gui'
line 1194: ' p5.localmessage'
line 1195: ' p5.localmessage provides a simple interface to send messages locally from'
line 1196: ' one sketch to another for easy multi-window sketching!'
line 1197: ' marching'
line 1198: ' mappa'
line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and'
line 1200: ' geo-data. Useful when building geolocation-based visual representations.'
line 1201: ' ml5.js'
line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
line 1203: ' learning algorithms and models in the browser.'
line 1204: ' p5.play'
line 1205: ' p5.play provides sprites, animations, input and collision functions for'
line 1206: ' games and gamelike applications.'
line 1207: ' p5.particle'
line 1208: ' The Particle and Fountain objects can be used to create data-driven effects'
line 1209: ' that are defined through user structures or JSON input and user-draw'
line 1210: ' functions.'
line 1211: ' p5.Riso'
line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.'
line 1213: ' It helps turn your sketches into multi-color prints.'
line 1214: ' rita.js'
line 1215: ' RiTa.js provides a set of natural language processing objects for generative'
line 1216: ' literature.'
line 1217: ' Rotating knobs'
line 1218: ' p5.scenemanager'
line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
line 1220: ' Each scene is a like a sketch within the main sketch.'
line 1221: ' p5.screenPosition'
line 1222: ' p5.scribble'
line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
line 1224: ' on a port of the original Processing library'
line 1225: ' p5.serial'
line 1226: ' p5.serial enables serial communication between devices that support serial'
line 1227: ' (RS-232) and p5 sketches running in the browser.'
line 1228: ' Shape5'
line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to'
line 1230: ' code for the first time.'
line 1231: ' p5.shape.js'
line 1232: ' p5.speech'
line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech'
line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
line 1235: ' and listen.'
line 1236: ' p5.start2d.js'
line 1237: ' p5.tiledmap'
line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your'
line 1239: ' sketches.'
line 1240: ' p5.touchgui'
line 1241: ' tramontana'
line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,'
line 1243: ' tramontana Board, ...) to create interactive environments, interactive'
line 1244: ' spaces or just prototype experiences at scale and in space.'
line 1245: ' vida'
line 1246: ' Vida is a simple library that adds camera (or video) based motion detection'
line 1247: ' and blob tracking functionality to p5js.'
line 1248: ' p5.voronoi'
line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
line 1250: ' your p5.js sketches.'
line 1251: ' p5.3D'
line 1252: ' using-a-library-title'
line 1253: ' using-a-library1'
line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
line 1255: ' core functionality. There are two categories of libraries. Core libraries ('
line 1256: ' using-a-library3'
line 1257: ' ) are part of the p5.js distribution, while contributed libraries are'
line 1258: ' developed, owned, and maintained by members of the p5.js community.'
line 1259: ' using-a-library4'
line 1260: ' To include a library in your sketch, link it into your HTML file, after you'
line 1261: ' have linked in p5.js. An example HTML file might look like this'
line 1262: ' create-your-own-title'
line 1263: ' create-your-own1'
line 1264: ' create-your-own2'
line 1265: ' create-your-own3'
line 1266: ' create-your-own4'
line 1267: ' If you have created a library and would like to have it included on this'
line 1268: ' page, submit this form!'
line 1420: ' community-title'
line 1421: ' community-statement-title'
line 1422: ' community-statement1'
line 1423: ' p5.js is a community interested in exploring the creation of art and design'
line 1424: ' with technology.'
line 1425: ' community-statement2'
line 1426: ' We are a community of, and in solidarity with, people from every gender'
line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,'
line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political'
line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that'
line 1430: ' not everyone has the time, financial means, or capacity to actively'
line 1431: ' participate, but we recognize and encourage involvement of all kinds. We'
line 1432: ' facilitate and foster access and empowerment. We are all learners.'
line 1433: ' community-statement3'
line 1434: ' We like these hashtags'
line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
line 1437: ' course).'
line 1438: ' in-practice-title'
line 1439: ' in-practice1'
line 1440: ' in-practice2'
line 1441: ' We insist on actively engaging with requests for feedback regardless of'
line 1442: ' their complexity.'
line 1443: ' in-practice3'
line 1444: ' We welcome newcomers and prioritize the education of others. We strive to'
line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
line 1446: ' that newcomers are just as valuable in this effort as experts.'
line 1447: ' in-practice4'
line 1448: ' We consistently make the effort to actively recognize and validate multiple'
line 1449: ' types of contributions.'
line 1450: ' in-practice5'
line 1451: ' in-times-conflict-title'
line 1452: ' in-times-conflict1'
line 1453: ' in-times-conflict2'
line 1454: ' in-times-conflict3'
line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our'
line 1456: ' actions.'
line 1457: ' in-times-conflict4'
line 1458: ' in-times-conflict5'
line 1459: ' in-times-conflict6'
line 1460: ' in-times-conflict7'
line 1461: ' in-the-future-title'
line 1462: ' in-the-future1'
line 1463: ' notes-title'
line 1464: ' notes1'
line 1465: ' notes2'
line 1466: ' notes3'
line 1467: ' notes4'
line 1468: ' notes5'
line 1469: ' contribute-title'
line 1470: ' contribute1'
line 1471: ' Our community is always looking for enthusiasts to help in all different'
line 1472: ' ways.'
line 1473: ' develop-title'
line 1474: ' develop1'
line 1475: ' develop2'
line 1476: ' develop3'
line 1477: ' develop4'