|<\/p>|
/g, '')
- .replace(/\n|\s+/g, ' ');
+ .replace(/\n|\s+/g, ' ')
+ .trim();
}
// returns an array containing the 'clean' versions of the text in the
tags of the input text
@@ -145,7 +146,8 @@ function getParagraphs(text) {
.replace(/<\/p>|
/g, '')
.replace(/\n|\s+/g, ' ')
.split(/
/)
- .filter(x => x.length > 0);
+ .filter(x => x.length > 0)
+ .map(x => x.trim());
}
module.exports = getenJSON;
diff --git a/i18n-tracking.yml b/i18n-tracking.yml
index 86e83d4d60..4392b987f3 100644
--- a/i18n-tracking.yml
+++ b/i18n-tracking.yml
@@ -1,118 +1,93 @@
es:
src/data/en.yml:
- line 1517: ' Woman speaks at a podium in an auditorium while three participants sit on'
- line 1527: ' , advancing the code, documentation, and community outreach tools and'
- line 1528: ' exploring the current landscape of the p5.js programming environment.'
- line 1537: ' output1'
- line 1545: ' , testing early implementations of softCompile, OSC interfacing and added'
- line 1546: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
- line 1547: ' environment! Created by Ted Davis.'
- line 1548: ' output4'
- line 1549: ' A panel on Blackness and Gender in Virtual Space led by American Artist,'
- line 1550: ' with shawné michaelain holloway and LaJuné McMillian.'
- line 1551: ' output5'
- line 1552: ' output6'
- line 1553: ' output6-1'
- line 1554: ' output6-2'
- line 1555: ' output7'
- line 1556: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
- line 1557: ' Jon Chambers.'
- line 1558: ' output8'
- line 1559: ' output8-1'
- line 1560: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
- line 1561: ' Ye, Dorothy R. Santos, and Yasheng She.'
- line 1562: ' output9'
- line 1563: ' output9-1'
- line 1564: ' output10'
- line 1565: ' An overhaul of the p5.js website for accessibility. Including updates for'
- line 1566: ' screen reader accessibility, and improvements to the home, download, getting'
- line 1567: ' started, and reference pages. With contributions from Claire Kearney-Volpe,'
- line 1568: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
- line 1569: ' McCarthy, and Evelyn Masso.'
- line 1570: ' output11'
- line 1571: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
- line 1572: ' Sona Lee, Ted Davis, and Carlos Garcia.'
- line 1573: ' output12'
- line 1574: ' output13'
- line 1575: ' A design of the p5.js library system for the p5 Editor. Created by Cassie'
- line 1576: ' Tarakajian and Luca Damasco.'
- line 1577: ' output14'
- line 1578: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
- line 1579: ' Lauren Valley.'
- line 1580: ' output15'
- line 1581: ' 2019cc_1'
- line 1582: ' 2019cc_2'
- line 1583: ' 2019cc_3'
- line 1584: ' 2019cc_4'
- line 1585: ' 2019cc_5'
- line 1586: ' 2019cc_6'
- line 1587: ' 2019cc_7'
- line 1588: ' 2019cc_8'
- line 1589: ' 2019cc_9'
- line 1590: ' Participant speaks at a podium in front of projected text about the problem'
- line 1591: ' with anonymyzing data'
- line 1592: ' 2019cc_10'
- line 1593: ' Person with a microphone speaking to fellow participants in front of text'
- line 1594: ' that reads p5.js will not add any new features except those that increase'
- line 1595: ' access'
- line 1596: ' 2019cc_11'
- line 1597: ' 2019cc_12'
- line 1598: ' 2019cc_13'
- line 1599: ' 2019cc_14'
- line 1600: ' 2019cc_15'
- line 1601: ' Woman with microphone speaking to fellow participants with the text sacred'
- line 1602: ' boundaries in the projection behind her'
- line 1603: ' 2019cc_16'
- line 1604: ' Overhead view of participants listening to a panel of people with an image'
- line 1605: ' of a 3d rendered man on it'
- line 1606: ' 2019cc_17'
- line 1607: ' Participants sit around a table with their laptops and observe code on a'
- line 1608: ' screen'
- line 1609: ' 2019cc_18'
- line 1610: ' 2019cc_19'
- line 1611: ' 2019cc_20'
- line 1612: ' 2019cc_21'
- line 1613: ' 2019cc_22'
- line 1614: ' Participants sitting around a large U shaped table looking towards the front'
- line 1615: ' of the classroom'
- line 1616: ' 2019cc_23'
- line 1617: ' Man sitting in front of the classroom speaking energetically into a'
- line 1618: ' microphone'
- line 1619: ' 2019cc_24'
- line 1620: ' Group photo of participants smiling enthusiastically with their hands in the'
- line 1621: ' air'
- line 1622: ' 2019cc_25'
- line 1123: ' p5.collide2D provides tools for calculating collision detection for 2D'
- line 1124: ' geometry with p5.js.'
- line 1125: ' p5.createloop'
- line 1126: ' p5.dimensions'
- line 1127: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
- line 1128: ' dimensions.'
- line 1129: ' p5.EasyCam'
- line 1130: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
- line 1131: ' contributions by Thomas Diewald.'
- line 1132: ' p5.experience'
- line 1133: ' Extensive library for p5.js that adds additional event-listening'
- line 1134: ' functionality for creating canvas-based web applications.'
- line 97: ' p1xh1'
- line 96: ' start-creating'
- line 114: ' acknowledge that not everyone has the time, financial means, or capacity to'
- line 113: ' political opinion, age, skill level, occupation, and background. We'
- line 115: ' actively participate, but we recognize and encourage involvement of all'
- line 102: ' software, and the tools to learn it, should be accessible to everyone.'
- line 103: ' p1x2'
- line 104: ' Using the metaphor of a sketch, p5.js has a full set of drawing'
- line 105: ' functionality. However, you’re not limited to your drawing canvas. You can'
- line 256: ' you would like to use the minified version (compressed for faster page'
- line 251: ' download9'
- line 269: ' environment4'
- line 265: ' environment1'
- line 266: ' environmentlink'
- line 267: ' environment2'
- line 268: ' environment3'
- line 275: ' environment8'
- line 276: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
- line 277: ' that your html and js files are located in. On the left sidebar, you should'
+ line 883: ' p5.fab'
+ line 875: ' no setup required.'
+ line 871: ' p5.input'
+ line 872: ' ui'
+ line 873: ' p5.web-serial'
+ line 874: ' A p5.js library for using the Web Serial API to access devices like Arduino, '
+ line 876: ' p5.wasm.core'
+ line 877: ' p5.videorecorder'
+ line 878: ' p5.mapper'
+ line 879: ' p5.mapper is a projection mapping library for p5.js. This library makes it '
+ line 880: ' easy to code and keystone interactive, algorithmic sketches.'
+ line 881: ' p5.teach'
+ line 882: ' A beginner friendly math animation library for p5.js. Created with mentorship '
+ line 85: ' under the terms of the '
+ line 26: footer6
+ line 25: footer2
+ line 27: footer4
+ line 31: footer8
+ line 32: footer9
+ line 28: footer5
+ line 29: footer6
+ line 30: footer7
+ line 1174: ' The Summer 2021 Showcase'
+ line 288: ' to the index.html containing your p5.js sketch.'
+ line 297: ' file and the embed.html file for the sketch.'
+ line 306: ' be'
+ line 310: ' stylesheet)'
+ line 319: ' was ported to P5 by Kelly Chang. If you find any errors or have comments,'
+ line 330: ' background(255); // Setting the background to white'
+ line 331: ' stroke(0); // Setting the outline (stroke) to black'
+ line 332: ' fill(150); // Setting the interior of a shape (fill) to grey'
+ line 340: ' black. Also, remember not to eliminate both—with'
+ line 349: ' percentage). You can do this by specifying a custom'
+ line 358: ' want to use the'
+ line 363: ' and the bottom right corner). The mode here is'
+ line 374: ' Using p5.js, this book introduces and demonstrates the reflexive practice'
+ line 375: ' of aesthetic programming, engaging with learning to program as a way to'
+ line 376: ' understand and question existing technological objects and paradigms,'
+ line 385: ' p5.js work or your own to be featured here! If Google is not available in your region, please email chankati@usc.edu to submit!'
+ line 394: ' environments.'
+ line 398: ' better connect the p5.js learner and educator communities around the world.'
+ line 407: ' examples.'
+ line 415: ' links available in'
+ line 261: ' the'
+ line 270: ' particular topics. Check out the'
+ line 279: ' of the p5js site. The file called index.hbs is the'
+ line 442: ' .pdf format, all hosted publicly on GitHub.'
+ line 1536: ' teach-case2-image-alt'
+ line 1544: ' teach-case4-image-alt'
+ line 1552: ' teach-case6-image-alt'
+ line 1560: ' teach-case8-image-alt'
+ line 1568: ' teach-case9-image-alt'
+ line 1576: ' teach-case11-image-alt'
+ line 1584: ' teach-case12-image-alt'
+ 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'
@@ -121,7 +96,7 @@ es:
line 128: ' p3xp5'
line 59: tagline4
line 136: ' p4xp6'
- line 243: ' get-started-button'
+ line 243: ' settingUp-title'
line 62: tagline7
line 45: Books
line 34: Language-Settings
@@ -149,101 +124,90 @@ es:
line 127: ' p3xp4'
line 137: ' sketch_credits'
line 138: ' sketch_info'
- line 271: ' environment6'
- line 272: ' If you are a screen reader user and not using the p5 web editor, you may'
- line 273: ' want to use'
- line 282: ' edit it.'
- line 283: ' environment10'
- line 284: ' environment11'
- line 285: ' Open the index.html file in your browser by double clicking on it in your'
- line 286: ' file manager or type'
- line 287: ' environment12'
- line 288: ' environment14'
- line 289: ' environment15'
- line 290: ' environment16'
- line 291: ' environment13'
- line 292: ' your-first-sketch-title'
- line 293: ' your-first-sketch-intro1'
- line 294: ' your-first-sketch-intro2'
- line 295: ' your-first-sketch-intro3'
- line 296: ' your-first-sketch-intro4'
- line 297: ' your-first-sketch1'
- line 298: ' your-first-sketch2'
- line 299: ' your-first-sketch3'
- line 300: ' your-first-sketch4'
- line 301: ' The line you just added draws an ellipse, with its center 50 pixels over'
- line 302: ' from the left and 50 pixels down from the top, with a width and height of 80'
- line 303: ' pixels.'
- line 304: ' your-first-sketch5'
- line 305: ' your-first-sketch6'
- line 306: ' If you are using a screen reader, you must turn on the accessible outputs in'
- line 307: ' the p5 online editor, outside the editor you must add the accessibility'
- line 308: ' library in your html. To learn more visit '
- line 309: ' your-first-sketch7'
- line 310: ' your-first-sketch8'
- line 311: ' If you''ve typed everything correctly, this will appear in the display'
- line 312: ' window'
- line 313: ' your-first-sketch9'
- line 314: ' your-first-sketch10'
- line 315: ' If nothing appears, the editor may be having trouble understanding what'
- line 316: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
- line 317: ' exactly'
- line 318: ' between each of them, the line should end with a semicolon, and ellipse has'
- line 319: ' to be spelled correctly.'
- line 320: ' your-first-sketch11'
- line 321: ' One of the most difficult things about getting started with programming is'
- line 322: ' that you have to be very specific about the syntax. The browser isn''t always'
- line 323: ' smart enough to know what you mean, and can be quite fussy about the'
- line 324: ' placement of punctuation. You''ll get used to it with a little practice. In'
- line 325: ' the bottom left of the editor you will find the console section. Here, you'
- line 326: ' can find messages from the editor with details about any errors it'
- line 327: ' encounters.'
- line 328: ' your-first-sketch12'
- line 329: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
- line 330: ' last example to try this'
- line 331: ' your-first-sketch13'
- line 332: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
- line 333: ' and then starts drawing white circles at the position of the mouse. When a'
- line 334: ' mouse button is pressed, the circle color changes to black. Run the code,'
- line 335: ' move the mouse, and click to experience it.'
- line 336: ' your-first-sketch14'
- line 337: ' first-sketch-heading1'
- line 338: ' first-sketch-heading2'
- line 339: ' first-sketch-heading3'
- line 340: ' what-next-title'
- line 341: ' learn1'
- line 342: ' learn2'
- line 343: ' learn3'
- line 344: ' learn4'
- line 345: ' learn5'
- line 346: ' learn6'
- line 347: ' learn7'
- line 348: ' learn8'
- line 349: ' learn9'
- line 350: ' learn10'
- line 351: ' reference1'
- line 352: ' reference2'
- line 353: ' reference3'
- line 354: ' learn11'
- line 355: ' learn12'
- line 356: ' processing-transition1'
+ 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 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 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 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 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 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 333: ' learn1'
+ line 334: ' learn2'
+ line 335: ' learn3'
+ line 336: ' learn4'
+ line 337: ' learn5'
+ line 338: ' learn6'
+ line 339: ' learn7'
+ 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 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: ' download5'
- line 281: ' Click on your sketch.js file and it will open on the right where 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: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
- line 274: ' environment7'
- line 875: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
+ line 259: ' environment-title'
+ line 274: ' folder directly below.'
line 233: ' This page walks you through setting up a p5.js project and making your first'
line 234: ' sketch.'
- line 244: ' settingUp-title'
- line 245: ' download-title'
+ 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'
@@ -254,1318 +218,16 @@ es:
line 46: Community
line 133: ' p4xp3'
line 134: ' p4xp4'
- line 357: ' processing-transition2'
- line 358: ' processing-transition3'
- line 359: ' processing-transition4'
- line 360: ' book1'
- line 361: ' Parts of this tutorial were adapted from the book, Getting Started with'
- line 362: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
- line 363: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
- line 364: ' Contributors Conference.'
- 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: ' hosted-title'
- line 247: ' download1'
- line 248: ' download2'
- line 249: ' download3'
- line 250: ' download8'
- line 252: ' download10'
- line 253: ' download11'
- line 254: ' download4'
- line 255: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
- line 257: ' loading), change the link to p5.min.js.'
- line 260: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
- line 261: ' of these versions in the'
- line 262: ' download6'
- line 263: ' download7'
- line 264: ' environment-title'
- line 270: ' environment5'
- line 278: ' find the folder name at the top, with a list of the files contained in the'
- line 279: ' folder directly below.'
- line 280: ' environment9'
- line 444: ' Download'
- line 445: ' download-intro'
- line 446: ' Welcome! While titled "Download" this page actually contains a collection of'
- line 447: ' links to either download the library or begin working with it online. We''ve'
- line 448: ' tried to order things to reflect what a beginner might want first, to'
- line 449: ' resources that more experienced programmers may be looking for.'
- line 450: ' editor-title'
- line 451: ' p5.js-editor'
- line 452: ' p5.js-editor-intro'
- line 453: ' This link redirects you to the p5.js Editor online so you can begin using'
- line 454: ' p5.js immediately.'
- line 455: ' editor-includes'
- line 456: ' complete-library-title'
- line 457: ' complete-library-intro1'
- line 458: ' This is a download containing the p5.js library file, the p5.sound addon,'
- line 459: ' and an example project. It does not contain an editor. Visit'
- line 460: ' complete-library-intro2'
- line 461: ' complete-library-intro3'
- line 462: ' p5.js-complete'
- line 463: ' includes-1'
- line 464: ' includes-2'
- line 465: ' includes-3'
- line 466: ' single-files-title'
- line 467: ' single-files-intro'
- line 468: ' These are downloads or links to the p5.js library file. No additional'
- line 469: ' contents are included.'
- line 470: ' single-file'
- line 471: ' p5.js-uncompressed'
- line 472: ' compressed'
- line 473: ' link'
- line 474: ' statically-hosted-file'
- line 475: ' etc-title'
- line 476: ' older-releases'
- line 477: ' github-repository'
- line 478: ' report-bugs'
- line 479: ' supported-browsers'
- line 480: ' support-title'
- line 481: ' support-options'
- line 482: ' support-1'
- line 483: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
- line 484: ' and inclusive as possible. You can support this work by making a donation to'
- line 485: ' the '
- line 486: ' support-2'
- line 487: ' , the organization that supports p5.js.'
- line 488: ' Your donation supports software development for p5.js, education resources'
- line 489: ' like code examples and tutorials,'
- line 490: ' support-3'
- line 491: ' support-4'
- line 492: ' support-5'
- line 493: ' support-17'
- line 494: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
- line 495: ' Pittsburgh (Image credit'
- line 496: ' support-18'
- line 497: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
- line 498: ' workshops in London (Image credit'
- line 499: ' support-19'
- line 500: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
- line 501: ' Kira Simon-Kennedy)'
- line 502: ' support-20'
- line 503: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
- line 504: ' (Image credit'
- line 505: ' support-21'
- line 506: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
- line 507: ' credit'
- line 508: ' support-22'
- line 509: ' support-23'
- line 510: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
- line 511: ' (Image credit'
- line 512: ' support-24'
- line 513: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
- line 514: ' workshop led by Taeyoon Choi (Image credit'
- line 515: ' support-25'
- line 516: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
- line 517: ' Pittsburgh (Image credit'
- line 518: ' support-26'
- line 519: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
- line 520: ' International Center of Photography (Image credit'
- line 521: ' Photography)'
- line 522: ' support-27'
- line 523: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
- line 524: ' Montoya-Moraga (Image credit'
- line 525: ' support-28'
- line 526: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
- line 527: ' led by Taeyoon Choi (Image credit'
- line 528: ' support-29'
- line 529: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
- line 530: ' Angeles (Image credit'
- line 531: ' support-30'
- line 532: ' support-31'
- line 533: ' support-32'
- line 534: ' support-33'
- line 535: ' support-17-alt'
- line 536: ' support-18-alt'
- line 537: ' support-19-alt'
- line 538: ' support-20-alt'
- line 539: ' support-21-alt'
- line 540: ' support-22-alt'
- line 541: ' support-23-alt'
- line 542: ' support-24-alt'
- line 543: ' support-25-alt'
- line 544: ' support-26-alt'
- line 545: ' support-27-alt'
- line 546: ' support-28-alt'
- line 547: ' support-29-alt'
- line 548: ' support-30-alt'
- line 549: ' support-31-alt'
- line 729: ' teach-title2'
- line 730: ' learn1'
- line 731: ' These tutorials provide more in-depth or step-by-step overviews of'
- line 732: ' particular topics. Check out the '
- line 733: ' learn2'
- line 734: ' learn3'
- line 735: ' introduction-to-p5js-title'
- line 736: ' hello-p5js-title'
- line 737: ' hello-p5js'
- line 738: ' This short video will introduce you to the library and what you can do with'
- line 739: ' it.'
- line 740: ' getting-started-title'
- line 741: ' getting-started'
- line 742: ' Welcome to p5.js!
This introduction covers the basics of setting up a'
- line 743: ' p5.js project.'
- line 744: ' p5js-overview-title'
- line 745: ' p5js-overview'
- line 746: ' p5js-processing-title'
- line 747: ' p5js-processing'
- line 748: ' The main differences between the two, and how to convert from one to the'
- line 749: ' other.'
- line 750: ' p5-screen-reader-title'
- line 751: ' p5-screen-reader'
- line 752: ' using-local-server-title'
- line 753: ' using-local-server'
- line 754: ' p5js-wiki-title'
- line 755: ' p5js-wiki'
- line 756: ' connecting-p5js-title'
- line 757: ' creating-libraries-title'
- line 758: ' creating-libraries'
- line 759: ' nodejs-and-socketio-title'
- line 760: ' nodejs-and-socketio'
- line 761: ' programming-topics-title'
- line 762: ' beyond-the-canvas-title'
- line 763: ' beyond-the-canvas'
- line 764: ' 3d-webgl-title'
- line 765: ' 3d-webgl'
- line 766: ' color-title'
- line 767: ' color'
- line 768: ' coordinate-system-and-shapes-title'
- line 769: ' coordinate-system-and-shapes'
- line 770: ' interactivity-title'
- line 771: ' interactivity'
- line 772: ' program-flow-title'
- line 773: ' program-flow'
- line 774: ' curves-title'
- line 775: ' curves'
- line 776: ' An introduction to the three types of curves in p5.js'
- line 777: ' and Bézier curves.'
- line 778: ' becoming-a-better-programmer-title'
- line 779: ' debugging-title'
- line 780: ' debugging'
- line 781: ' optimizing-title'
- line 782: ' optimizing'
- line 783: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
- line 784: ' and smoother.'
- line 785: ' test-driven-development-title'
- line 786: ' test-driven-development'
- line 787: ' Save yourself from agony on install day. What is unit testing and how to use'
- line 788: ' it? By Andy Timmons.'
- line 789: ' contributing-to-the-community-title'
- line 790: ' development-title'
- line 791: ' development'
- line 792: ' looking-inside-title'
- line 793: ' looking-inside'
- line 794: ' A friendly intro to the file structure and tools for p5.js development, by'
- line 795: ' Luisa Pereira.'
- line 796: ' writing-tutorial-title'
- line 797: ' writing-tutorial'
- line 798: ' writing-a-tutorial-title'
- line 799: ' writing-a-tutorial-author'
- line 800: ' writing-a-tutorial-1'
- line 801: ' We invite educators, contributors and general enthusiasts to contribute p5js'
- line 802: ' tutorials. The p5js project makes creative coding and open source'
- line 803: ' development more accessible to a diverse community and we are excited to'
- line 804: ' publish tutorials on all aspects of the development process. Our learning'
- line 805: ' materials so far include guides on learning p5, programming technique and'
- line 806: ' how to contribute to an open source project.'
- line 807: ' writing-a-tutorial-2'
- line 808: ' We welcome new written tutorial contributions and this guide outlines the'
- line 809: ' steps of how to propose, prepare and contribute.'
- line 810: ' writing-a-tutorial-how-start-title'
- line 811: ' writing-a-tutorial-how-start-1'
- line 812: ' writing-a-tutorial-how-start-2'
- line 813: ' writing-a-tutorial-how-start-3'
- line 814: ' that outlines in progress tutorials. If your topic is listed as in progress,'
- line 815: ' perhaps you can add to work being done and contribute to preparing existing'
- line 816: ' work for publication so please reach out to us.'
- line 817: ' writing-a-tutorial-how-start-4'
- line 818: ' If your topic is not already covered and is not listed as in progress,'
- line 819: ' please write a few sentences on what you propose to cover and email us this'
- line 820: ' description at education@p5js.org.'
- line 821: ' writing-a-tutorial-how-prepare-title'
- line 822: ' writing-a-tutorial-how-prepare-1'
- line 823: ' When your tutorial is ready for publication, please follow these steps to'
- line 824: ' prepare your content for the p5js website.'
- line 825: ' writing-a-tutorial-how-prepare-2'
- line 826: ' writing-a-tutorial-how-prepare-3'
- line 827: ' writing-a-tutorial-how-prepare-4'
- line 828: ' writing-a-tutorial-how-prepare-5'
- line 829: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
- line 830: ' of the p5js site. The file called index.hbs is the '
- line 831: ' writing-a-tutorial-how-prepare-6'
- line 832: ' writing-a-tutorial-how-prepare-7'
- line 833: ' writing-a-tutorial-how-prepare-8'
- line 834: ' writing-a-tutorial-how-prepare-9'
- line 835: ' tags on the page, with formatting defined by the <h1> and <h2>'
- line 836: ' tags, the <p> paragraph tags as is done shown on the'
- line 837: ' writing-a-tutorial-how-prepare-10'
- line 838: ' writing-a-tutorial-how-prepare-11'
- line 839: ' If your tutorial contains images, they are to be placed in the assets folder'
- line 840: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
- line 841: ' shown below.'
- line 842: ' writing-a-tutorial-how-prepare-12'
- line 843: ' writing-a-tutorial-embedding-title'
- line 844: ' writing-a-tutorial-embedding-1'
- line 845: ' Using p5js means you can illustrate your tutorial with animated, interactive'
- line 846: ' or editable code examples to demonstrate programming concepts. Your examples'
- line 847: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
- line 848: ' in two ways.'
- line 849: ' writing-a-tutorial-embedding-2'
- line 850: ' writing-a-tutorial-embedding-3'
- line 851: ' writing-a-tutorial-embedding-4'
- line 852: ' writing-a-tutorial-embedding-5'
- line 853: ' writing-a-tutorial-embedding-6'
- line 854: ' writing-a-tutorial-embedding-7'
- line 855: ' writing-a-tutorial-embedding-8'
- line 856: ' writing-a-tutorial-embedding-9'
- line 857: ' writing-a-tutorial-embedding-10'
- line 858: ' If the example is to be animated and/or interactive but not editable. The'
- line 859: ' p5.js sketch should be embedded into the page as an iframe as described'
- line 860: ' below.'
- line 861: ' writing-a-tutorial-iframe-title'
- line 862: ' writing-a-tutorial-iframe-1'
- line 863: ' An iframe is like creating a window through which you can explore another'
- line 864: ' page, sandboxed from the rest of your page. In this case it will be a window'
- line 865: ' to the index.html containing your p5.js sketch. '
- line 866: ' writing-a-tutorial-iframe-2'
- line 867: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
- line 868: ' folder labelled with the name of your sketch as shown in the screenshot.'
- line 869: ' This is where all the images and p5 sketches linked by iframe should be'
- line 870: ' stored.'
- line 871: ' writing-a-tutorial-iframe-3'
- line 872: ' In the subfolders containing your p5 examples there should be a sketch.js'
- line 873: ' file and the embed.html file for the sketch. '
- line 874: ' writing-a-tutorial-iframe-4'
- line 876: ' the site. If your file structure is the same as above, the path to the p5.js'
- line 877: ' library should be "../../../js/p5.min.js".'
- line 878: ' writing-a-tutorial-iframe-5'
- line 879: ' You can then embed the p5js index files as iframes in the .hbs file that'
- line 880: ' contains your tutorial content. The embed code for the iframe would then'
- line 881: ' be'
- line 882: ' writing-a-tutorial-iframe-6'
- line 883: ' Styling for the iframe (this could directly into the post or in a'
- line 884: ' stylesheet)'
- line 885: ' writing-a-tutorial-iframe-7'
- line 886: ' writing-a-tutorial-iframe-8'
- line 887: ' writing-a-tutorial-iframe-9'
- line 888: ' One thing to note is that you need to manually set the size of the iframe,'
- line 889: ' so it works best if things are a standard size.'
- line 890: ' writing-a-tutorial-iframe-10'
- line 891: ' Also note that the links to the p5.js library files do not happen from the'
- line 892: ' .eps page with all the tutorial content. Instead they will be located in the'
- line 893: ' html page that is rendering your sketch (in this case, called embed.html).'
- line 894: ' writing-a-tutorial-iframe-11'
- line 895: ' writing-a-tutorial-embed-iframe-12'
- line 896: ' writing-a-tutorial-finishing-title'
- line 897: ' writing-a-tutorial-finishing-1'
- line 898: ' Once your have finished writing your tutorial and your content has been'
- line 899: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
- line 900: ' as described above and then issue a pull request to the p5.js website'
- line 901: ' repository so we can publish your contribution!'
- line 902: ' writing-a-tutorial-finishing-2'
- line 903: ' color-description1'
- line 904: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
- line 905: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
- line 906: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
- line 907: ' color-description2'
- line 908: ' color-p1x1'
- line 909: ' In the digital world, when we want to talk about a color, precision is'
- line 910: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
- line 911: ' Color, rather, is defined as a range of numbers. Let''s start with the'
- line 912: ' simplest case'
- line 913: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
- line 914: ' gray ranging from black to white.'
- line 915: ' color-p2x1'
- line 916: ' color-p2x2'
- line 917: ' color-p2x3'
- line 918: ' color-p2x4'
- line 919: ' color-code1'
- line 920: ' background(255); // Setting the background to white '
- line 921: ' stroke(0); // Setting the outline (stroke) to black '
- line 922: ' fill(150); // Setting the interior of a shape (fill) to grey '
- line 923: ' rect(50,50,75,100); // Drawing the rectangle'
- line 924: ' color-p3x1'
- line 925: ' color-p3x2'
- line 926: ' color-p3x3'
- line 927: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
- line 928: ' important to remember that 0 is not "nothing", but rather denotes the color'
- line 929: ' black. Also, remember not to eliminate both—with '
- line 930: ' color-p3x4'
- line 931: ' color-p3x5'
- line 932: ' color-p4x1'
- line 933: ' In addition, if we draw two shapes, p5.js will always use the most recently'
- line 934: ' specified stroke and fill, reading the code from top to bottom.'
- line 935: ' color-rgb-title'
- line 936: ' color-rgb-p1x1'
- line 937: ' Remember finger painting? By mixing three "primary" colors, any color could'
- line 938: ' be generated. Swirling all colors together resulted in a muddy brown. The'
- line 939: ' more paint you added, the darker it got. Digital colors are also constructed'
- line 940: ' by mixing three primary colors, but it works differently from paint. First,'
- line 941: ' the primaries are different'
- line 942: ' with color on the screen, you are mixing light, not paint, so the mixing'
- line 943: ' rules are different as well.'
- line 944: ' color-rgb-li1'
- line 945: ' color-rgb-li2'
- line 946: ' color-rgb-li3'
- line 947: ' color-rgb-li4'
- line 948: ' color-rgb-li5'
- line 949: ' color-rgb-p2x1'
- line 950: ' This assumes that the colors are all as bright as possible, but of course,'
- line 951: ' you have a range of color available, so some red plus some green plus some'
- line 952: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
- line 953: ' While this may take some getting used to, the more you program and'
- line 954: ' experiment with RGB color, the more it will become instinctive, much like'
- line 955: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
- line 956: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
- line 957: ' the individual color elements are expressed as ranges from 0 (none of that'
- line 958: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
- line 959: ' and B. You will get the hang of RGB color mixing through experimentation,'
- line 960: ' but next we will cover some code using some common colors.'
- line 961: ' color-transparency-title'
- line 962: ' color-transparency-p1x1'
- line 963: ' In addition to the red, green, and blue components of each color, there is'
- line 964: ' an additional optional fourth component, referred to as the color''s "alpha".'
- line 965: ' Alpha means transparency and is particularly useful when you want to draw'
- line 966: ' elements that appear partially see-through on top of one another. The alpha'
- line 967: ' values for an image are sometimes referred to collectively as the "alpha'
- line 968: ' channel" of an image.'
- line 969: ' color-transparency-p2x1'
- line 970: ' It is important to realize that pixels are not literally transparent, this'
- line 971: ' is simply a convenient illusion that is accomplished by blending colors.'
- line 972: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
- line 973: ' one to a percentage of another, creating the optical perception of blending.'
- line 974: ' (If you are interested in programming "rose-colored" glasses, this is where'
- line 975: ' you would begin.)'
- line 976: ' color-transparency-p3x1'
- line 977: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
- line 978: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
- line 979: ' color-custom-ranges-title'
- line 980: ' color-custom-ranges-p1x1'
- line 981: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
- line 982: ' in p5.js, in fact, it allows us to think about color any way we like. For'
- line 983: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
- line 984: ' percentage). You can do this by specifying a custom '
- line 985: ' color-custom-ranges-p2x1'
- line 986: ' The above function says'
- line 987: ' green, and blue. The range of RGB values will be from 0 to 100."'
- line 988: ' color-custom-ranges-p3x1'
- line 989: ' Although it is rarely convenient to do so, you can also have different'
- line 990: ' ranges for each color component'
- line 991: ' color-custom-ranges-p4x1'
- line 992: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
- line 993: ' from 0 to 10, and alpha from 0 to 255."'
- line 994: ' color-custom-ranges-p5x1'
- line 995: ' Finally, while you will likely only need RGB color for all of your'
- line 996: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
- line 997: ' and brightness) mode. Without getting into too much detail, HSB color works'
- line 998: ' as follows'
- line 999: ' color-custom-ranges-li1x1'
- line 1000: ' color-custom-ranges-li1x2'
- line 1001: ' color-custom-ranges-li2x1'
- line 1002: ' color-custom-ranges-li2x2'
- line 1003: ' color-custom-ranges-li3x1'
- line 1004: ' color-custom-ranges-li3x2'
- line 1005: ' color-custom-ranges-p6x1'
- line 1006: ' color-custom-ranges-p6x2'
- line 1007: ' coordinate-system-description1'
- line 1008: ' coordinate-system-description2'
- line 1009: ' coordinate-system-description3'
- line 1010: ' coordinate-system-description4'
- line 1011: ' coordinate-system-description5'
- line 1012: ' coordinate-system-description-title'
- line 1013: ' coordinate-system-description-p1x1'
- line 1014: ' Before we begin programming with p5, we must first channel our eighth grade'
- line 1015: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
- line 1016: ' distance between two points is a good old fashioned line, and this is where'
- line 1017: ' we begin, with two points on that graph paper.'
- line 1018: ' coordinate-system-description-p2x1'
- line 1019: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
- line 1020: ' you wanted to direct a friend of yours to draw that same line, you would'
- line 1021: ' give them a shout and say "draw a line from the point one-zero to the point'
- line 1022: ' four-five, please." Well, for the moment, imagine your friend was a computer'
- line 1023: ' and you wanted to instruct this digital pal to display that same line on its'
- line 1024: ' screen. The same command applies (only this time you can skip the'
- line 1025: ' pleasantries and you will be required to employ a precise formatting). Here,'
- line 1026: ' the instruction will look like this'
- line 1027: ' coordinate-system-description-p3x1'
- line 1028: ' Even without having studied the syntax of writing code, the above statement'
- line 1029: ' should make a fair amount of sense. We are providing a command (which we'
- line 1030: ' will refer to as a "function") for the machine to follow entitled "line." In'
- line 1031: ' addition, we are specifying some arguments for how that line should be'
- line 1032: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
- line 1033: ' code as a sentence, the function is a verb and the arguments are the objects'
- line 1034: ' of the sentence. The code sentence also ends with a semicolon instead of a'
- line 1035: ' period.'
- line 1036: ' coordinate-system-description-p4x1'
- line 1037: ' The key here is to realize that the computer screen is nothing more than a'
- line 1038: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
- line 1039: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
- line 1040: ' location of a point in space. And it is our job to specify what shapes and'
- line 1041: ' colors should appear at these pixel coordinates.'
- line 1042: ' coordinate-system-description-p5x1'
- line 1043: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
- line 1044: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
- line 1045: ' pointing up and the x-axis pointing to the right (in the positive direction,'
- line 1046: ' negative down and to the left). The coordinate system for pixels in a'
- line 1047: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
- line 1048: ' at the top left with the positive direction to the right horizontally and'
- line 1049: ' down vertically.'
- line 1050: ' coordinate-system-simple-shapes-title'
- line 1051: ' coordinate-system-simple-shapes-p1x1'
- line 1052: ' The vast majority of p5 programming examples are visual in nature. These'
- line 1053: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
- line 1054: ' begin by looking at four primitive shapes.'
- line 1055: ' coordinate-system-simple-shapes-p2x1'
- line 1056: ' For each shape, we will ask ourselves what information is required to'
- line 1057: ' specify the location and size (and later color) of that shape and learn how'
- line 1058: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
- line 1059: ' assume a window with a width of 100 pixels and height of 100 pixels.'
- line 1060: ' coordinate-system-simple-shapes-p3x1'
- line 1061: ' coordinate-system-simple-shapes-p3x2'
- line 1062: ' coordinate-system-simple-shapes-p4x1'
- line 1063: ' coordinate-system-simple-shapes-p4x2'
- line 1064: ' coordinate-system-simple-shapes-p5x1'
- line 1065: ' coordinate-system-simple-shapes-p5x2'
- line 1066: ' , things become a bit more complicated. In p5, a rectangle is specified by'
- line 1067: ' the coordinate for the top left corner of the rectangle, as well as its'
- line 1068: ' width and height.'
- line 1069: ' coordinate-system-simple-shapes-p6x1'
- line 1070: ' A second way to draw a rectangle involves specifying the centerpoint, along'
- line 1071: ' with width and height. If we prefer this method, we first indicate that we'
- line 1072: ' want to use the '
- line 1073: ' coordinate-system-simple-shapes-p6x2'
- line 1074: ' coordinate-system-simple-shapes-p7x1'
- line 1075: ' Finally, we can also draw a rectangle with two points (the top left corner'
- line 1076: ' and the bottom right corner). The mode here is '
- line 1077: ' coordinate-system-simple-shapes-p7x2'
- line 1078: ' coordinate-system-simple-shapes-p8x1'
- line 1079: ' coordinate-system-simple-shapes-p8x2'
- line 1080: ' coordinate-system-simple-shapes-p8x3'
- line 1081: ' coordinate-system-simple-shapes-p8x4'
- line 1082: ' coordinate-system-simple-shapes-p8x5'
- line 1083: ' coordinate-system-simple-shapes-p8x6'
- line 1084: ' coordinate-system-simple-shapes-p9x1'
- line 1085: ' Now let''s look at what some code with shapes in more complete form, with'
- line 1086: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
- line 1087: ' to specify the width and height of the canvas.'
- line 1088: ' teach-desc'
- line 1089: test-tutorial
- line 1147: ' p5.localmessage provides a simple interface to send messages locally from'
- line 1148: ' one sketch to another for easy multi-window sketching!'
- line 1149: ' marching'
- line 1150: ' mappa'
- line 1151: ' Mappa provides a set of tools for working with static maps, tile maps, and'
- line 1152: ' geo-data. Useful when building geolocation-based visual representations.'
- line 1153: ' ml5.js'
- line 1154: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
- line 1155: ' learning algorithms and models in the browser.'
- line 1156: ' p5.play'
- line 1157: ' p5.play provides sprites, animations, input and collision functions for'
- line 1158: ' games and gamelike applications.'
- line 1159: ' p5.particle'
- line 1160: ' The Particle and Fountain objects can be used to create data-driven effects'
- line 1161: ' that are defined through user structures or JSON input and user-draw'
- line 1162: ' functions.'
- line 1163: ' p5.Riso'
- line 1164: ' p5.Riso is a library for generating files suitable for Risograph printing.'
- line 1165: ' It helps turn your sketches into multi-color prints.'
- line 1166: ' rita.js'
- line 1167: ' RiTa.js provides a set of natural language processing objects for generative'
- line 1168: ' literature.'
- line 1169: ' Rotating knobs'
- line 1170: ' p5.scenemanager'
- line 1171: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
- line 1172: ' Each scene is a like a sketch within the main sketch.'
- line 1173: ' p5.screenPosition'
- line 1174: ' p5.scribble'
- line 1175: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
- line 1176: ' on a port of the original Processing library'
- line 1177: ' p5.serial'
- line 1178: ' p5.serial enables serial communication between devices that support serial'
- line 1179: ' (RS-232) and p5 sketches running in the browser.'
- line 1180: ' Shape5'
- line 1181: ' Shape5 is a 2D primative library for elementary students who are learning to'
- line 1182: ' code for the first time.'
- line 1183: ' p5.shape.js'
- line 1184: ' p5.speech'
- line 1185: ' p5.speech provides simple, clear access to the Web Speech and Speech'
- line 1186: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
- line 1187: ' and listen.'
- line 1188: ' p5.start2d.js'
- line 1189: ' p5.tiledmap'
- line 1190: ' p5.tiledmap provides drawing and helper functions to include maps in your'
- line 1191: ' sketches.'
- line 1192: ' p5.touchgui'
- line 1193: ' tramontana'
- line 1194: ' Tramontana is a platform for easily use many devices (iOS, Android,'
- line 1195: ' tramontana Board, ...) to create interactive environments, interactive'
- line 1196: ' spaces or just prototype experiences at scale and in space.'
- line 1197: ' vida'
- line 1198: ' Vida is a simple library that adds camera (or video) based motion detection'
- line 1199: ' and blob tracking functionality to p5js.'
- line 1200: ' p5.voronoi'
- line 1201: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
- line 1202: ' your p5.js sketches.'
- line 1203: ' p5.xr'
- line 1204: ' p5.3D'
- line 1205: ' using-a-library-title'
- line 1206: ' using-a-library1'
- line 1207: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
- line 1208: ' core functionality. There are two categories of libraries. Core libraries ('
- line 1209: ' using-a-library3'
- line 1210: ' ) are part of the p5.js distribution, while contributed libraries are'
- line 1211: ' developed, owned, and maintained by members of the p5.js community.'
- line 1212: ' using-a-library4'
- line 1213: ' To include a library in your sketch, link it into your HTML file, after you'
- line 1214: ' have linked in p5.js. An example HTML file might look like this'
- line 1215: ' create-your-own-title'
- line 1216: ' create-your-own1'
- line 1217: ' create-your-own2'
- line 1218: ' create-your-own3'
- line 1219: ' create-your-own4'
- line 1220: ' If you have created a library and would like to have it included on this'
- line 1221: ' page, submit this form!'
- line 1222: '>>>>>>> ded715d43dd9dd191404d8e380ba23112f647160'
- line 1420: ' notes3'
- line 1421: ' notes4'
- line 1422: ' notes5'
- line 1423: ' contribute-title'
- line 1424: ' contribute1'
- line 1425: ' Our community is always looking for enthusiasts to help in all different'
- line 1426: ' ways.'
- line 1427: ' develop-title'
- line 1428: ' develop1'
- line 1429: ' develop2'
- line 1430: ' develop3'
- line 1431: ' develop4'
- line 1432: ' develop5'
- line 1433: ' document-title'
- line 1434: ' document1'
- line 1435: ' document2'
- line 1436: ' document3'
- line 1437: ' document4'
- line 1438: ' document5'
- line 1439: ' teach-title'
- line 1440: ' teach1'
- line 1441: ' create-title'
- line 1442: ' create1'
- line 1443: ' create2'
- line 1444: ' create3'
- line 1445: ' donate-title'
- line 1446: ' donate1'
- line 1447: ' donate2'
- line 1448: ' donate3'
- line 1449: ' contributors-conference-title'
- line 1450: ' contributors-conference1'
- line 1451: ' While most work happens online, we also convene IRL. We''ve had two'
- line 1452: ' contributors conferences held at the'
- line 1453: ' contributors-conference2'
- line 1454: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
- line 1455: ' developers, educators, and got together to advance the p5.js project.'
- line 1456: ' participants-title'
- line 1457: ' support-title'
- line 1458: ' support1'
- line 1459: ' support2'
- line 1460: ' at Carnegie Mellon University, an academic laboratory for atypical,'
- line 1461: ' anti-disciplinary, and inter-institutional research at the intersections of'
- line 1462: ' arts, science, technology, and culture.'
- line 1463: ' support3'
- line 1464: ' support4'
- line 1465: ' support5'
- line 1466: ' support6'
- line 1467: ' mailing-list-title'
- line 1468: ' mailing-list-1'
- line 1469: ' Enter your email address to receive occasional updates from the Processing'
- line 1470: ' Foundation.'
- line 1471: ' 2015contributors-conference-title'
- line 1472: ' 2015contributors-conference-date'
- line 1473: ' 2015contributors-conference1'
- line 1474: ' 2015contributors-conference2'
- line 1475: ' , advancing the code, documentation, and community outreach tools of the'
- line 1476: ' p5.js programming environment. Participants came from as far away as Hong'
- line 1477: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
- line 1478: ' professionals in the fields of creative technology, interaction design, and'
- line 1479: ' new-media arts, but the group also included a half-dozen undergraduate and'
- line 1480: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
- line 1481: ' 2015contributors-conference3'
- line 1482: ' 2015contributors-conference-diversity-title'
- line 1483: ' 2015contributors-conference-diversity1'
- line 1484: ' Alongside technical development, one of the main focuses of this conference'
- line 1485: ' was outreach, community, and diversity. The conference began with a panel'
- line 1486: ' 2015contributors-conference-diversity2'
- line 1487: ' Diversity'
- line 1488: ' the Internet'
- line 1489: ' 2015contributors-conference-diversity3'
- line 1490: ' 2015contributors-conference-diversity4'
- line 1491: ' 2015contributors-conference-diversity5'
- line 1492: ' 2015contributors-conference-diversity6'
- line 1493: ' 2015contributors-conference-diversity7'
- line 1494: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
- line 1495: ' Mellon University. Speakers included'
- line 1496: ' 2015contributors-conference-diversity8'
- line 1497: ' 2015contributors-conference-diversity9'
- line 1498: ' 2015cc_1'
- line 1499: ' 2015cc_2'
- line 1500: ' 2015cc_3'
- line 1501: ' 2015cc_4'
- line 1502: ' Woman expressively speaks into a microphone while two male collaborators'
- line 1503: ' look on'
- line 1504: ' 2015cc_5'
- line 1505: ' 2015cc_6'
- line 1506: ' 2015cc_7'
- line 1507: ' Participants sit in a circle around a white board with sticky notes on it'
- line 1508: ' while a female student speaks into a microphone'
- line 1509: ' 2015cc_8'
- line 1510: ' Participants sit around a table looking at each others laptops and compare'
- line 1511: ' code'
- line 1512: ' 2015cc_9'
- line 1513: ' 2015cc_10'
- line 1514: ' Woman speaking into a microphone about valuing different skill sets while a'
- line 1515: ' group of participants with laptops look at her powerpoint in a classroom'
- line 1516: ' 2015cc_11'
- line 1518: ' the stage and another three are skyping in on the stage screen'
- line 1519: ' 2015cc_12'
- line 1520: ' 2015cc_13'
- line 1521: ' 2015cc_14'
- line 1522: ' 2015cc_15'
- line 1523: ' 2019contributors-conference-title'
- line 1524: ' 2019contributors-conference-date'
- line 1525: ' 2019contributors-conference1'
- line 1526: ' 2019contributors-conference2'
- line 1529: ' Comprising a diverse range of participants within the fields of creative'
- line 1530: ' technology, interaction design, and new media arts, the conference was aimed'
- line 1531: ' at fostering dialogue through a multidisciplinary lens. Working groups'
- line 1532: ' focused on several topic areas'
- line 1533: ' Landscape of Creative Tech; and Internationalization.'
- line 1534: ' 2019contributors-conference3'
- line 1535: ' 2019contributors-conference4'
- line 1536: ' outputs'
- line 1538: ' . An implementation of highly flexible triangle, square, hexagon, and'
- line 1539: ' octagon girds for p5.js. Created by Aren Davey.'
- line 1540: ' output2'
- line 1541: ' . A set of template files for building a multi-device, multiplayer game'
- line 1542: ' where multiple clients can connect to a specified host page. Created by L05.'
- line 1543: ' output3'
- line 1544: ' output3-1'
- line 1666: ' books-title'
- line 1667: ' book-1-title'
- line 1668: ' book-1-authors'
- line 1712: ' book-4-order-b'
- line 1713: ' book-5-title'
- line 1714: ' book-5-authors'
- line 1715: ' book-5-publisher'
- line 1716: ' book-5-pages'
- line 1717: ' book-5-type'
- line 1718: ' book-5-description'
- line 1719: ' Learn coding from scratch in a highly engaging and visual manner using the'
- line 1720: ' vastly popular JavaScript with the programming library p5.js. The skills you'
- line 1721: ' will acquire from this book are highly transferable to a myriad of'
- line 1722: ' industries and can be used towards building web applications, programmable'
- line 1723: ' robots, or generative art.'
- line 1724: ' book-5-order-a'
- line 1725: ' book-5-order-b'
- line 1726: ' book-6-title'
- line 1727: ' book-6-authors'
- line 1728: ' book-6-publisher'
- line 1729: ' book-6-pages'
- line 1730: ' book-6-type'
- line 1731: ' book-6-description'
- line 1732: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
- line 1733: ' of aesthetic programming, engaging with learning to program as a way to '
- line 1734: ' understand and question existing technological objects and paradigms, '
- line 1735: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
- line 1736: ' book-6-order-a'
- line 1737: ' book-6-order-b'
- line 1766: ' Examples'
- line 1767: ' back-examples'
- line 1768: ' Structure'
- line 1769: ' Form'
- line 1770: ' Data'
- line 1771: ' Arrays'
- line 2005: ' creator-from-roni-cantor'
- line 2006: ' project-links'
- line 2007: ' project-links-text-1-roni-cantor'
- line 2008: ' project-links-text-2-roni-cantor'
- line 2009: ' project-q-1-1'
- line 2010: ' project-q-1-2'
- line 2011: ' project-a-1-1-roni-cantor'
- line 2012: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
- line 2013: ' years of coding and making robots, I decided to take a break and play with'
- line 2014: ' some more traditional forms of art—while still coding and playing with'
- line 2015: ' robots.'
- line 2016: ' project-a-1-2-roni-cantor'
- line 2017: ' project-a-1-3-roni-cantor'
- line 2018: ' project-a-1-4-roni-cantor'
- line 2019: ' project-q-2'
- line 2020: ' project-a-2-1-roni-cantor'
- line 2021: ' I used p5.js in this project to generate the sine wave and lerp (linear'
- line 2022: ' interpolation) formulas and display the visuals in the'
- line 2023: ' project-a-2-2-roni-cantor'
- line 2024: ' . I then used a feature in my code that exported my programmed graphic into'
- line 2025: ' an'
- line 2026: ' project-a-2-3-roni-cantor'
- line 2027: ' project-a-2-4-roni-cantor'
- line 2028: ' —so that it understood where to draw the lines that I programmed. I sent'
- line 2029: ' this information to the plotter with a program called'
- line 2030: ' project-a-2-5-roni-cantor'
- line 2031: ' project-q-3'
- line 2032: ' project-a-3-roni-cantor'
- line 2033: ' project-q-4'
- line 2034: ' Did you face any challenges working on this project? If so, how did you'
- line 2035: ' overcome them?'
- line 2036: ' project-a-4-roni-cantor'
- line 2037: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
- line 2038: ' benefited from the people around me who had used p5 before, as well as'
- line 2039: ' online guides and forums.'
- line 2040: ' project-q-5'
- line 2041: ' project-a-5-roni-cantor'
- line 2042: ' project-q-6'
- line 2043: ' project-a-6-roni-cantor'
- line 2044: ' project-resources'
- line 2045: ' creator-from-qianqian'
- line 2046: ' interview-link-qianqian'
- line 2047: ' project-a-1-1-qianqian'
- line 2048: ' project-a-1-2-qianqian'
- line 2049: ' My partner introduced me to p5.js, which I learned mainly by watching free'
- line 2050: ' online video tutorials. My first p5.js project was drawing some shapes with'
- line 2051: ' different colors.'
- line 2052: ' project-a-2-1-qianqian'
- line 2053: ' This project started with an idea of teaching my mom, who lives in China and'
- line 2054: ' doesn’t speak English, to code with p5.js. This project was difficult on'
- line 2055: ' multiple levels, and I wanted to start by identifying the main reasons why'
- line 2056: ' it’s more challenging for someone like my mother to learn to code—primarily'
- line 2057: ' due to the lack of free creative coding education resources. Most of the'
- line 2058: ' free resources to learn creative coding are unavailable in China. The p5.js'
- line 2059: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
- line 2060: ' inaccessible in China because of internet censorship.'
- line 2061: ' project-a-2-2-qianqian'
- line 2062: ' project-a-2-3-qianqian'
- line 2063: ' , but the more I watched coding tutorials online, the more I realized how'
- line 2064: ' difficult it is to find other womxn and people of color teaching coding,'
- line 2065: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
- line 2066: ' creative coding.'
- line 2067: ' project-a-2-4-qianqian'
- line 2068: ' I am working on opening up the video channels to other Chinese creatives who'
- line 2069: ' want to contribute to the educational resource together, like interviews and'
- line 2070: ' guest tutorials. If you are interested in teaching/talking about creative'
- line 2071: ' coding in Mandarin, HMU!'
- line 2072: ' project-a-3-1-qianqian'
- line 2073: ' project-a-3-2-qianqian'
- line 2074: ' project-a-4-1-qianqian'
- line 2075: ' Learning to code in a second language was difficult and the lack of'
- line 2076: ' community made this process even harder. I hope to speak from my experience'
- line 2077: ' as a beginner and someone who once felt like an outsider to the creative'
- line 2078: ' coding and video tutorial world.'
- line 2079: ' project-a-4-2-qianqian'
- line 2080: ' I spend a lot of time researching the latest technology for my videos. In'
- line 2081: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
- line 2082: ' encourage others that it doesn’t take a lot of expensive gears to get'
- line 2083: ' started making instructional videos.'
- line 2084: ' project-a-4-3-qianqian'
- line 2085: ' Another issue I came across was my own fear of putting myself online. I'
- line 2086: ' first had to get over my anxiety of making mistakes in the videos or'
- line 2087: ' receiving negative comments online. Often womxn and people of color are'
- line 2088: ' targets for online harassment. I’m hoping to help set an example for other'
- line 2089: ' womxn and people of color that it’s ok to put yourselves online and'
- line 2090: ' strengthen your communities by sharing your knowledge. Eventually, we will'
- line 2091: ' be able to stop online harassment by creating strong diverse communities.'
- line 2092: ' project-a-5-1-qianqian'
- line 2093: ' project-a-5-2-qianqian'
- line 2094: ' creator-from-phuong'
- line 2095: ' project-a-1-1-phuong'
- line 2096: ' link-1-phuong'
- line 2097: ' link-2-phuong'
- line 2098: ' link-3-phuong'
- line 2099: ' project-a-1-2-phuong'
- line 2100: ' project-a-1-3-phuong'
- line 2101: ' I was taking a course at the School of Machines in Berlin this summer'
- line 2102: ' called! "'
- line 2103: ' project-a-1-4-phuong'
- line 2104: ' project-a-2-1-phuong'
- line 2105: ' I used p5.js to work on the visual part of the game. The animation sprites'
- line 2106: ' for Airi and the ghosts were drawn on an iPad app called'
- line 2107: ' project-a-2-2-phuong'
- line 2108: ' project-a-2-3-phuong'
- line 2109: ' project-a-2-4-phuong'
- line 2110: ' p5-sketch-by-chjno-phuong'
- line 2111: ' project-a-2-5-phuong'
- line 2112: ' . I set a condition so whenever the word "pew" or a mouse click was'
- line 2113: ' detected, the scrolling speed would change to make an illusion of Airi'
- line 2114: ' flying up. When the user does not do anything, the scrolling speed is'
- line 2115: ' negative, which makes it look like Airi is falling down.'
- line 2116: ' project-a-2-6-phuong'
- line 2117: ' project-a-2-7-phuong'
- line 2118: ' project-a-3-1-phuong'
- line 2119: ' I really love how easily you can create, manipulate, and delete HTML blocks'
- line 2120: ' and classes with the'
- line 2121: ' project-a-3-2-phuong'
- line 2122: ' project-a-3-3-phuong'
- line 2123: ' project-a-3-4-phuong'
- line 2124: ' project-a-4-1-phuong'
- line 2125: ' There were a lot of challenges simply because p5.js was something new to me.'
- line 2126: ' I did not work much with JavaScript in general before. Reading documentation'
- line 2127: ' and searching for similar examples helped a lot.'
- line 2128: ' project-a-5-1-phuong'
- line 2129: ' school-of-machines-phuong'
- line 2130: ' project-a-5-2-phuong'
- line 2131: ' ! They try hard to connect the most creative people in the world and they do'
- line 2132: ' it well so far. ❤️'
- line 2133: ' pronouns-male'
- line 2134: ' creator-from-chung'
- line 2135: ' link-1-casey-louise'
- line 2136: ' link-2-casey-louise'
- line 2137: ' link-1-chung'
- line 2138: ' link-2-chung'
- line 2139: ' link-3-chung'
- line 2140: ' project-a-1-1-chung'
- line 2141: ' I am a graphic designer and a faculty member at Maryland Institute College'
- line 2142: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
- line 2143: ' and motion graphics.'
- line 2144: ' project-a-1-2-chung'
- line 2145: ' project-a-1-3-chung'
- line 2146: ' project-a-2-1-chung'
- line 2147: ' This summer, I gave myself a challenge of making typographic posters with'
- line 2148: ' coding, and this is one of the posters I made. I didn’t know until very'
- line 2149: ' recently that I could use motion sensor data with p5.js. I was also watching'
- line 2150: ' dan-shiffman-matterjs-tutorial'
- line 2151: ' project-a-2-2-chung'
- line 2152: ' project-a-3-1-chung'
- line 2153: ' There are many things I love about p5.js such as the online community and'
- line 2154: ' beginner friendliness. What I really like right now is the'
- line 2155: ' project-a-3-2-chung'
- line 2156: ' , with which I can not only work online for myself but also share URLs'
- line 2157: ' quickly in the present mode. For this project in particular, I had to do a'
- line 2158: ' lot of testing on my phone, and it was much easier and quicker than'
- line 2159: ' committing to GitHub.'
- line 2160: ' project-a-4-1-chung'
- line 2161: ' project-a-4-2-chung'
- line 2162: ' project-a-4-3-chung'
- line 2163: ' project-a-5-1-chung'
- line 2164: ' As mentioned above, if you want to render out frames and video files out of'
- line 2165: ' p5.js sketches, check out my'
- line 2166: ' project-a-5-2-chung'
- line 2167: ' creator-from-casey-louise'
- line 2168: ' project-a-1-1-casey-louise'
- line 2169: ' Casey'
- line 2170: ' interactive spaces, physical and digital.'
- line 2171: ' project-a-1-2-casey-louise'
- line 2172: ' Louise'
- line 2173: ' interactive spaces based on sensor technologies.'
- line 2174: ' project-a-1-3-casey-louise'
- line 2175: ' Casey'
- line 2176: ' I had been dabbling in'
- line 2177: ' project-a-1-4-casey-louise'
- line 2178: ' project-a-1-5-casey-louise'
- line 2179: ' Louise'
- line 2180: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
- line 2181: ' me.'
- line 2182: ' project-a-2-1-casey-louise'
- line 2183: ' Casey'
- line 2184: ' curious if I could use them in p5.js. Then I heard about a grant for open'
- line 2185: ' source, storytelling, and learning resource projects at ITP called'
- line 2186: ' project-a-2-2-casey-louise'
- line 2187: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
- line 2188: ' decided to figure out how they''re implemented in p5.js and create a resource'
- line 2189: ' for others to learn. When I told Louise about the project, she was'
- line 2190: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
- line 2191: ' great about making sure the project is a learning resource and not just a'
- line 2192: ' collection of examples.'
- line 2193: ' project-a-3-1-casey-louise'
- line 2194: ' project-a-3-2-casey-louise'
- line 2195: ' project-a-3-3-casey-louise'
- line 2196: ' project-a-3-4-casey-louise'
- line 2197: ' project-a-3-5-casey-louise'
- line 2198: ' project-a-4-1-casey-louise'
- line 2199: ' Casey'
- line 2200: ' reaching out to amazing people, asking questions, and asking for permission'
- line 2201: ' to use their examples in our project.'
- line 2202: ' adam-ferris-repo-casey-louise'
- line 2203: ' project-a-4-2-casey-louise'
- line 2204: ' project-a-4-3-casey-louise'
- line 2205: ' project-a-4-4-casey-louise'
- line 2206: ' webgl-casey-louise'
- line 2207: ' project-a-4-5-casey-louise'
- line 2208: ' project-a-4-6-casey-louise'
- line 2209: ' Louise'
- line 2210: ' Luckily, there were some very well-documented examples on GitHub by Adam'
- line 2211: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
- line 2212: ' understand how to implement it, so it was as much a technical challenge as'
- line 2213: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
- line 2214: ' inspiration from the way the'
- line 2215: ' openframeworks-book-casey-louise'
- line 2216: ' project-a-4-7-casey-louise'
- line 2217: ' project-a-5-1-casey-louise'
- line 2218: ' project-a-5-2-casey-louise'
- line 2219: ' pronouns-nonbinary'
- line 2220: ' creator-from-moon'
- line 2221: ' posters-by'
- line 2222: ' project-a-1-1-moon'
- line 2223: ' Moon'
- line 2224: ' summer, I taught a graphic design course in the University of Georgia'
- line 2225: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
- line 2226: ' planning to teach and to study digital platforms at UGA.'
- line 2227: ' project-a-1-2-moon'
- line 2228: ' project-a-1-3-moon'
- line 2229: ' project-a-1-4-moon'
- line 2230: ' pcd-la-moon'
- line 2231: ' project-a-1-5-moon'
- line 2232: ' . They helped me with the tools and logics of p5.js. It was an excellent'
- line 2233: ' teaching and learning experience.'
- line 2234: ' project-a-2-1-moon'
- line 2235: ' codetrain-moon'
- line 2236: ' project-a-2-2-moon'
- line 2237: ' p5-reference-moon'
- line 2238: ' project-a-2-3-moon'
- line 2239: ' project-a-3-1-moon'
- line 2240: ' project-a-3-2-moon'
- line 2241: ' project-a-3-3-moon'
- line 2242: ' project-a-3-4-moon'
- line 2243: ' . I was able to use and to teach this tool to visualize various ideas about'
- line 2244: ' time in motion.'
- line 2245: ' project-a-4-1-moon'
- line 2246: ' It was challenging for me, a beginner, to understand the overall structure'
- line 2247: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
- line 2248: ' couple of times, and then I drew a chart to memorize and to teach the way I'
- line 2249: ' understood the p5.js structure and code with strong constraints I set up. It'
- line 2250: ' was an excellent teaching and learning experience.'
- line 2251: ' project-a-5-1-moon'
- line 2252: ' project-a-5-2-moon'
- line 2253: teach
- line 2254: ' teach-title2'
- line 2255: ' teach-intro1'
- line 2256: ' Every teaching has its own unique goals, messages, conditions, and'
- line 2257: ' environments. '
- line 2258: ' teach-intro2'
- line 2259: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
- line 2260: ' better connect the p5.js learner and educator communities around the world. '
- line 2261: ' teach-intro3'
- line 2262: ' teach-intro4'
- line 2263: ' teach-heading'
- line 2264: ' teach-search-filter'
- line 2265: ' teach-filter1'
- line 2266: ' teach-filter1-label1'
- line 2267: ' teach-filter1-label2'
- line 2268: ' teach-filter1-label3'
- line 2269: ' teach-filter1-label4'
- line 2270: ' teach-filter1-label5'
- line 2271: ' teach-filter1-label6'
- line 2272: ' teach-filter1-label7'
- line 2273: ' teach-filter1-label8'
- line 2274: ' teach-filter1-label9'
- line 2275: ' teach-filter1-label10'
- line 2276: ' teach-filter1-label11'
- line 2277: ' teach-filter1-label12'
- line 2278: ' teach-filter1-label13'
- line 2279: ' teach-filter1-label14'
- line 2280: ' teach-filter1-label15'
- line 2281: ' teach-filter1-label16'
- line 2282: ' teach-filter2'
- line 2283: ' teach-filter2-label1'
- line 2284: ' teach-filter2-label2'
- line 2285: ' teach-filter2-label3'
- line 2286: ' teach-filter2-label4'
- line 2287: ' teach-filter2-label5'
- line 2288: ' teach-filter2-label6'
- line 2289: ' teach-filter2-label7'
- line 2290: ' teach-filter3'
- line 2291: ' teach-filter4'
- line 2292: ' teach-filter4-label1'
- line 2293: ' teach-filter4-label2'
- line 2294: ' teach-filter4-label3'
- line 2295: ' teach-case-subtitle1'
- line 2296: ' teach-case-subtitle2'
- line 2297: ' teach-case-subtitle3'
- line 2298: ' teach-case-subtitle4'
- line 2299: ' teach-case-subtitle5'
- line 2300: ' teach-case1-title'
- line 2301: ' teach-case1-lead-name'
- line 2302: ' teach-case1-content1'
- line 2303: ' teach-case1-content1-1'
- line 2304: ' teach-case1-content2'
- line 2305: ' teach-case1-content3'
- line 2306: ' teach-case1-content4'
- line 2307: ' To introduce a new public to programming through fun and compelling'
- line 2308: ' examples. '
- line 2309: ' teach-case1-content5'
- line 2310: ' Method'
- line 2311: ' each times. The students were using (Ubuntu) machines with the p5.js web'
- line 2312: ' editor. I was teaching using a video projector as well as a board.'
- line 2313: ' teach-case1-content5-1'
- line 2314: ' Materials'
- line 2315: ' links available in '
- line 2316: ' teach-case2-title'
- line 2317: ' Making The Thing that Makes the Thing'
- line 2318: ' with p5.js'
- line 2319: ' teach-case2-lead-name'
- line 2320: ' teach-case2-content1'
- line 2321: ' teach-case2-content1-1'
- line 2322: ' teach-case2-content2'
- line 2323: ' Our participants included art/design students & professionals, creative'
- line 2324: ' coding enthusiasts. We had close to 50 participants.'
- line 2325: ' teach-case2-content3'
- line 2326: ' teach-case2-content4'
- line 2327: ' To explore generative art & design and recreate some classical works'
- line 2328: ' with p5.js. '
- line 2329: ' teach-case2-content5'
- line 2330: ' teach-case2-content5-1'
- line 2331: ' teach-case2-content5-2'
- line 2332: ' teach-case2-content5-3'
- line 2333: ' teach-case2-content5-4'
- line 2334: ' teach-case2-content5-5'
- line 2335: ' teach-case3-title'
- line 2336: ' teach-case3-lead-name'
- line 2337: ' teach-case3-speech'
- line 2338: ' teach-case3-content1'
- line 2339: ' teach-case3-content1-1'
- line 2340: ' teach-case3-content2'
- line 2341: ' Our participants included art/design students & professionals, creative'
- line 2342: ' coding enthusiasts. We had close to 50 participants.'
- line 2343: ' teach-case3-content3'
- line 2344: ' teach-case3-content4'
- line 2345: ' To build a teacher and student community around p5 for middle and high'
- line 2346: ' school.'
- line 2347: ' teach-case3-content5'
- line 2348: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
- line 2349: ' methods and materials. Most used some sort of slides or documentation, some'
- line 2350: ' live coding using an editor, with work time for participant to remix.'
- line 2351: ' teach-case3-content5-1'
- line 2352: ' teach-case3-content5-2'
- line 2353: ' teach-case3-content5-3'
- line 2354: ' teach-case4-title'
- line 2355: ' teach-case4-lead-name'
- line 2356: ' teach-case4-speech'
- line 2357: ' teach-case4-content1'
- line 2358: ' teach-case4-content1-1'
- line 2359: ' teach-case4-content2'
- line 2360: ' I had around 16 students in the workshop, and a team including 3 people from'
- line 2361: ' the PlusCode festival, and one person at the venue.'
- line 2362: ' teach-case4-content3'
- line 2363: ' teach-case4-content4'
- line 2364: ' Introduction to beginners and artists of graphic web programming and open'
- line 2365: ' source, using p5.js, in Spanish '
- line 2366: ' teach-case4-content5'
- line 2367: ' teach-case4-content5-1'
- line 2368: ' teach-case4-content5-2'
- line 2369: ' teach-case4-content5-3'
- line 2370: ' teach-case4-content5-4'
- line 2371: ' teach-case5-title'
- line 2372: ' teach-case5-lead-name'
- line 2373: ' teach-case5-speech'
- line 2374: ' My greatest source of uncertainty in developing the workshop was whether it'
- line 2375: ' was trying to teach art to programmers or to teach programming to artists.'
- line 2376: ' teach-case5-content1'
- line 2377: ' teach-case5-content1-1'
- line 2378: ' teach-case5-content1-2'
- line 2379: ' teach-case5-content1-3'
- line 2380: ' teach-case5-content2'
- line 2381: ' teach-case5-content3'
- line 2382: ' teach-case5-content4'
- line 2383: ' To introduce p5.js to artists with little or no programming experience and'
- line 2384: ' to suggest one way an analogue practice can migrate to a digital form.'
- line 2385: ' teach-case5-content5'
- line 2386: ' A printed workbook with activities that used the p5.js web editor to show'
- line 2387: ' how translate an physical drawing into a digital drawing.'
- line 2388: ' teach-case5-content5-1'
- line 2389: ' teach-case5-content5-2'
- line 2390: ' teach-case5-content5-3'
- line 2391: ' teach-case6-title'
- line 2392: ' teach-case6-lead-name'
- line 2393: ' teach-case6-speech'
- line 2394: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
- line 2395: ' your everyday life!'
- line 2396: ' teach-case6-content1'
- line 2397: ' teach-case6-content1-1'
- line 2398: ' teach-case6-content2'
- line 2399: ' teach-case6-content3'
- line 2400: ' teach-case6-content4'
- line 2401: ' teach-case6-content5'
- line 2402: ' teach-case6-content5-1'
- line 2403: ' teach-case6-content5-2'
- line 2404: ' teach-case6-content5-3'
- line 2405: ' teach-case6-content5-4'
- line 2406: ' teach-case6-content5-5'
- line 2407: ' teach-case7-title'
- line 2408: ' teach-case7-lead-name'
- line 2409: ' teach-case7-speech'
- line 2410: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
- line 2411: ' to give it a try!'
- line 2412: ' teach-case7-content1'
- line 2413: ' teach-case7-content1-1'
- line 2414: ' teach-case7-content2'
- line 2415: ' teach-case7-content3'
- line 2416: ' teach-case7-content4'
- line 2417: ' teach-case7-content5'
- line 2418: ' teach-case7-content5-1'
- line 2419: ' teach-case8-title'
- line 2420: ' teach-case8-lead-name'
- line 2421: ' teach-case8-content1'
- line 2422: ' teach-case8-content1-1'
- line 2423: ' teach-case8-content2'
- line 2424: ' teach-case8-content3'
- line 2425: ' teach-case8-content4'
- line 2426: ' teach-case8-content5'
- line 2427: ' teach-case8-content5-1'
- line 2428: ' teach-case8-content5-2'
- line 2429: ' teach-case9-title'
- line 2430: ' teach-case9-lead-name'
- line 2431: ' teach-case9-content1'
- line 2432: ' teach-case9-content1-1'
- line 2433: ' teach-case9-content2'
- line 2434: ' Students at Interactive Telecommunications Program, New York University. 16'
- line 2435: ' people.'
- line 2436: ' teach-case9-content3'
- line 2437: ' teach-case9-content4'
- line 2438: ' The goal of this class is to learn and understand common machine learning'
- line 2439: ' techniques and apply them to generate creative outputs in the browser using'
- line 2440: ' ml5.js and p5.js.'
- line 2441: ' teach-case9-content5'
- line 2442: ' This class is a mix of lectures, coding sessions, group discussions, and'
- line 2443: ' presentations. I used '
- line 2444: ' teach-case9-content5-1'
- line 2445: ' teach-case9-content5-2'
- line 2446: ' teach-case9-content5-3'
- line 2447: ' teach-case10-title'
- line 2448: ' teach-case10-lead-name'
- line 2449: ' teach-case10-content1'
- line 2450: ' teach-case10-content3'
- line 2451: ' teach-case10-content4'
- line 2452: ' Introduce learners (potentially with no coding experiences at all) to the'
- line 2453: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
- line 2454: ' and enable them to pursue own projects in a safe environment.'
- line 2455: ' teach-case10-content5'
- line 2456: ' p5.js source code (for the introductory project), JavaScript source code'
- line 2457: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
- line 2458: ' .pdf format, all hosted publicly on GitHub. '
- line 2459: ' teach-case10-content5-1'
- line 2460: ' teach-case10-content5-2'
- line 2461: ' teach-case11-title'
- line 2462: ' teach-case11-lead-name'
- line 2463: ' teach-case11-content1'
- line 2464: ' teach-case11-content1-1'
- line 2465: ' teach-case11-content2'
- line 2466: ' teach-case11-content3'
- line 2467: ' teach-case11-content4'
- line 2468: ' Over the course of three workshops, we will draw and create patterns using'
- line 2469: ' p5.js, an open-source graphical library; we will learn and apply'
- line 2470: ' computational concepts to transform patterns and finally, we will bring a'
- line 2471: ' weaving to life with electronic microcontrollers.'
- line 2472: ' teach-case11-content5'
- line 2473: ' teach-case11-content5-1'
- line 2474: ' Materials'
- line 2475: ' pattern weaving tool.'
- line 2476: ' teach-case11-content5-2'
- line 2477: ' teach-case11-content5-3'
- line 2478: ' teach-case11-content5-4'
- line 2479: ' teach-case11-content5-5'
- line 2480: ' teach-case12-title'
- line 2481: ' teach-case12-lead-name'
- line 2482: ' teach-case12-speech'
- line 2483: ' I''m working on a new series of coding class for Disabled students in South'
- line 2484: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
- line 2485: ' workshops in December 2020. The project is supported by the Open Society'
- line 2486: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
- line 2487: ' Center.'
- line 2488: ' teach-case12-content1'
- line 2489: ' teach-case12-content1-1'
- line 2490: ' teach-case12-content2'
- line 2491: ' teach-case12-content3'
- line 2492: ' teach-case12-content4'
- line 2493: ' To help Deaf and Hard of Hearing students learn about computer programming'
- line 2494: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
- line 2495: ' teach-case12-content5'
- line 2496: ' We used p5.js Web editor and code examples on the website. We also used'
- line 2497: ' dice, playing cards and various paper tools to help students learn about'
- line 2498: ' coding concepts.'
- line 2499: ' teach-case12-content5-1'
- line 2500: ' teach-case12-content5-2'
- line 2501: ' teach-case13-title'
- line 2502: ' teach-case13-lead-name'
- line 2503: ' teach-case13-speech'
- line 2504: ' I''m working on a new series of coding class for Disabled students in South'
- line 2505: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
- line 2506: ' workshops in December 2020. The project is supported by the Open Society'
- line 2507: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
- line 2508: ' Center.'
- line 2509: ' teach-case13-content1'
- line 2510: ' teach-case13-content1-1'
- line 2511: ' teach-case13-content2'
- line 2512: ' teach-case13-content3'
- line 2513: ' teach-case13-content4'
- line 2514: ' Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
- line 2515: ' teach-case13-content5'
- line 2516: ' Website, p5.js editor.'
- line 2517: ' teach-case13-content5-1'
- line 2540: ' teach-case14-title'
- line 2541: ' teach-case14-lead-name'
- line 2542: ' teach-case14-speech'
- line 2543: ' The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
- line 2544: ' teach-case14-content1'
- line 2545: ' teach-case14-content1-1'
- line 2546: ' teach-case14-content1-2'
- line 2547: ' teach-case14-content2'
- line 2548: ' teach-case14-content3'
- line 2549: ' teach-case14-content4'
- line 2550: ' To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,'
- line 2551: ' the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
- line 2552: ' teach-case14-content5'
- line 2553: ' p5.js, p5 web editor, ml5.js, and installations. '
- line 2554: ' teach-case14-content5-1'
- line 2555: ' 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
- line 2556: ' teach-case14-content5-2'
- line 2557: ' 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
- line 1623: ' teach-case17-speech'
- line 1624: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
- line 1625: ' teach-case17-content1'
- line 1626: ' teach-case17-content1-1'
- line 1627: ' teach-case17-content2'
- line 1628: ' teach-case17-content3'
- line 1629: ' teach-case17-content4'
- line 1630: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
- line 1631: ' teach-case17-content5'
- line 1632: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
- line 1633: ' teach-case17-content5-1'
- 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 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'
@@ -1575,6 +237,12 @@ es:
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
+ line 357: ' link-2-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 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'
@@ -1584,9 +252,6 @@ es:
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'
@@ -1595,7 +260,6 @@ es:
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'
@@ -1604,11 +268,9 @@ es:
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'
@@ -1617,7 +279,6 @@ es:
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'
@@ -1625,7 +286,6 @@ es:
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'
@@ -1655,25 +315,594 @@ es:
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 262: ' environment2'
+ line 263: ' environment3'
+ line 264: ' environment4'
+ line 278: ' environment10'
+ 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!
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 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 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'
@@ -1720,6 +949,213 @@ es:
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'
+ line 1478: ' develop5'
+ line 1479: ' document-title'
+ line 1480: ' document1'
+ line 1481: ' document2'
+ line 1482: ' document3'
+ line 1483: ' document4'
+ line 1484: ' document5'
+ line 1485: ' teach-title'
+ line 1486: ' teach1'
+ line 1487: ' create-title'
+ line 1488: ' create1'
+ line 1489: ' create2'
+ line 1490: ' create3'
+ line 1491: ' donate-title'
+ line 1492: ' donate1'
+ line 1493: ' donate2'
+ line 1494: ' donate3'
+ line 1495: ' contributors-conference-title'
+ line 1496: ' contributors-conference1'
+ line 1497: ' While most work happens online, we also convene IRL. We''ve had two'
+ line 1498: ' contributors conferences held at the'
+ line 1499: ' contributors-conference2'
+ line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
+ line 1501: ' developers, educators, and got together to advance the p5.js project.'
+ line 1502: ' participants-title'
+ line 1503: ' support-title'
+ line 1504: ' support1'
+ line 1505: ' support2'
+ line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,'
+ line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of'
+ line 1508: ' arts, science, technology, and culture.'
+ line 1509: ' support3'
+ line 1510: ' support4'
+ line 1511: ' support5'
+ line 1512: ' support6'
+ line 1513: ' mailing-list-title'
+ line 1514: ' mailing-list-1'
+ line 1515: ' Enter your email address to receive occasional updates from the Processing'
+ line 1516: ' Foundation.'
+ line 1517: ' 2015contributors-conference-title'
+ line 1518: ' 2015contributors-conference-date'
+ line 1519: ' 2015contributors-conference1'
+ line 1520: ' 2015contributors-conference2'
+ line 1521: ' , advancing the code, documentation, and community outreach tools of the'
+ line 1522: ' p5.js programming environment. Participants came from as far away as Hong'
+ line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
+ line 1524: ' professionals in the fields of creative technology, interaction design, and'
+ line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and'
+ line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
+ line 1527: ' 2015contributors-conference3'
+ line 1528: ' 2015contributors-conference-diversity-title'
+ line 1529: ' 2015contributors-conference-diversity1'
+ line 1530: ' Alongside technical development, one of the main focuses of this conference'
+ line 1531: ' was outreach, community, and diversity. The conference began with a panel'
+ line 1532: ' 2015contributors-conference-diversity2'
+ line 1533: ' Diversity'
+ line 1534: ' the Internet'
+ line 1535: ' 2015contributors-conference-diversity3'
+ line 1537: ' 2015contributors-conference-diversity5'
+ line 1538: ' 2015contributors-conference-diversity6'
+ line 1539: ' 2015contributors-conference-diversity7'
+ line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
+ line 1541: ' Mellon University. Speakers included'
+ line 1542: ' 2015contributors-conference-diversity8'
+ line 1543: ' 2015contributors-conference-diversity9'
+ line 1545: ' 2015cc_2'
+ line 1546: ' 2015cc_3'
+ line 1547: ' 2015cc_4'
+ line 1548: ' Woman expressively speaks into a microphone while two male collaborators'
+ line 1549: ' look on'
+ line 1550: ' 2015cc_5'
+ line 1551: ' 2015cc_6'
+ line 1553: ' Participants sit in a circle around a white board with sticky notes on it'
+ line 1554: ' while a female student speaks into a microphone'
+ line 1555: ' 2015cc_8'
+ line 1556: ' Participants sit around a table looking at each others laptops and compare'
+ line 1557: ' code'
+ line 1558: ' 2015cc_9'
+ line 1559: ' 2015cc_10'
+ line 1561: ' group of participants with laptops look at her powerpoint in a classroom'
+ line 1562: ' 2015cc_11'
+ line 1563: ' Woman speaks at a podium in an auditorium while three participants sit on'
+ line 1564: ' the stage and another three are skyping in on the stage screen'
+ line 1565: ' 2015cc_12'
+ line 1566: ' 2015cc_13'
+ line 1567: ' 2015cc_14'
+ line 1569: ' 2019contributors-conference-title'
+ line 1570: ' 2019contributors-conference-date'
+ line 1571: ' 2019contributors-conference1'
+ line 1572: ' 2019contributors-conference2'
+ line 1573: ' , advancing the code, documentation, and community outreach tools and'
+ line 1574: ' exploring the current landscape of the p5.js programming environment.'
+ line 1575: ' Comprising a diverse range of participants within the fields of creative'
+ line 1577: ' at fostering dialogue through a multidisciplinary lens. Working groups'
+ line 1578: ' focused on several topic areas'
+ line 1579: ' Landscape of Creative Tech; and Internationalization.'
+ line 1580: ' 2019contributors-conference3'
+ line 1581: ' 2019contributors-conference4'
+ line 1582: ' outputs'
+ line 1583: ' output1'
+ line 1585: ' octagon girds for p5.js. Created by Aren Davey.'
+ line 1586: ' output2'
+ line 1587: ' . A set of template files for building a multi-device, multiplayer game'
+ line 1588: ' where multiple clients can connect to a specified host page. Created by L05.'
+ line 1589: ' output3'
+ line 1590: ' output3-1'
+ line 1591: ' , testing early implementations of softCompile, OSC interfacing and added'
+ line 1592: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
+ line 1593: ' environment! Created by Ted Davis.'
+ line 1594: ' output4'
+ line 1595: ' A panel on Blackness and Gender in Virtual Space led by American Artist,'
+ line 1596: ' with shawné michaelain holloway and LaJuné McMillian.'
+ line 1597: ' output5'
+ line 1598: ' output6'
+ line 1599: ' output6-1'
+ line 1600: ' output6-2'
+ line 1601: ' output7'
+ line 1602: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
+ line 1603: ' Jon Chambers.'
+ line 1604: ' output8'
+ line 1605: ' output8-1'
+ line 1606: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
+ line 1607: ' Ye, Dorothy R. Santos, and Yasheng She.'
+ line 1608: ' output9'
+ line 1609: ' output9-1'
+ line 1610: ' output10'
+ line 1611: ' An overhaul of the p5.js website for accessibility. Including updates for'
+ line 1612: ' screen reader accessibility, and improvements to the home, download, getting'
+ line 1613: ' started, and reference pages. With contributions from Claire Kearney-Volpe,'
+ line 1614: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
+ line 1615: ' McCarthy, and Evelyn Masso.'
+ line 1616: ' output11'
+ line 1617: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
+ line 1618: ' Sona Lee, Ted Davis, and Carlos Garcia.'
+ line 1619: ' output12'
+ line 1620: ' output13'
+ line 1621: ' A design of the p5.js library system for the p5 Editor. Created by Cassie'
+ line 1622: ' Tarakajian and Luca Damasco.'
+ line 1623: ' output14'
+ line 1624: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
+ line 1625: ' Lauren Valley.'
+ line 1626: ' output15'
+ line 1627: ' 2019cc_1'
+ line 1628: ' 2019cc_2'
+ line 1629: ' 2019cc_3'
+ line 1630: ' 2019cc_4'
+ line 1631: ' 2019cc_5'
+ line 1632: ' 2019cc_6'
+ line 1633: ' 2019cc_7'
line 1634: ' 2019cc_8'
line 1635: ' 2019cc_9'
line 1636: ' Participant speaks at a podium in front of projected text about the problem'
@@ -1752,6 +1188,35 @@ es:
line 1663: ' Man sitting in front of the classroom speaking energetically into a'
line 1664: ' microphone'
line 1665: ' 2019cc_24'
+ line 1666: ' Group photo of participants smiling enthusiastically with their hands in the'
+ line 1667: ' air'
+ line 1668: ' 2019cc_25'
+ line 1712: ' books-title'
+ line 1713: ' book-1-title'
+ line 1714: ' book-1-authors'
+ line 1715: ' book-1-publisher'
+ line 1716: ' book-1-pages'
+ line 1717: ' book-1-type'
+ line 1718: ' book-1-description'
+ line 1719: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1720: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1721: ' using JavaScript and HTML.'
+ line 1722: ' book-1-order-a'
+ line 1723: ' book-1-order-b'
+ line 1724: ' book-2-title'
+ line 1725: ' book-2-authors'
+ line 1726: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
+ line 1727: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
+ line 1728: ' book-2-publisher'
+ line 1729: ' book-2-pages'
+ line 1730: ' book-2-type'
+ line 1731: ' book-2-description'
+ line 1732: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1733: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1734: ' using JavaScript and HTML.'
+ line 1735: ' book-2-order-a'
+ line 1736: ' book-2-order-b'
+ line 1737: ' book-3-title'
line 1738: ' book-3-authors'
line 1739: ' book-3-publisher'
line 1740: ' book-3-pages'
@@ -1780,6 +1245,12 @@ es:
line 1763: ' book-5-type'
line 1764: ' book-5-description'
line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the'
+ line 1766: ' vastly popular JavaScript with the programming library p5.js. The skills you'
+ line 1767: ' will acquire from this book are highly transferable to a myriad of'
+ line 1768: ' industries and can be used towards building web applications, programmable'
+ line 1769: ' robots, or generative art.'
+ line 1770: ' book-5-order-a'
+ line 1771: ' book-5-order-b'
line 1800: ' Examples'
line 1801: ' back-examples'
line 1802: ' Structure'
@@ -1807,6 +1278,519 @@ es:
line 1824: ' Mobile'
line 1825: ' Hello_P5'
line 1829: ' Reference'
+ line 2005: ' showcase-title'
+ line 2006: ' showcase-intro1'
+ line 2007: ' showcase-intro2'
+ line 2008: ' showcase-intro3'
+ line 2009: ' We''re celebrating how people are using p5.js to make creative work,'
+ line 2010: ' learning, and open source more interesting and inclusive. Together, we make'
+ line 2011: ' community. During Summer 2019, we asked a few creators to share more about'
+ line 2012: ' how they''ve used p5.js through different projects and pieces.'
+ line 2013: ' showcase-intro4'
+ line 2014: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
+ line 2015: ' p5.js work or your own to be featured here!'
+ line 2016: ' nominate-project'
+ line 2017: ' showcase-featuring'
+ line 2018: ' project-tag-art'
+ line 2019: ' project-tag-design'
+ line 2020: ' project-tag-code'
+ line 2021: ' project-tag-curriculum'
+ line 2022: ' project-tag-documentation'
+ line 2023: ' project-tag-game'
+ line 2024: ' project-tag-library'
+ line 2025: ' project-tag-organizing'
+ line 2026: ' project-tag-tool'
+ line 2027: ' project-tag-tutorial'
+ line 2028: ' project-roni'
+ line 2029: ' credit-roni'
+ line 2030: ' description-roni'
+ line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
+ line 2032: ' plotter and pens.'
+ line 2033: ' project-phuong'
+ line 2034: ' credit-phuong'
+ line 2035: ' description-phuong'
+ line 2036: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
+ line 2037: ' encourage people to get out of their comfort zone and feel more confident'
+ line 2038: ' about themselves regardless of what they do and how they look or sound.'
+ line 2039: ' project-daein'
+ line 2040: ' credit-daein'
+ line 2041: ' description-daein'
+ line 2042: ' An interactive typographic poster that uses a mobile device''s motion sensor'
+ line 2043: ' with p5.js.'
+ line 2044: ' project-qianqian'
+ line 2045: ' credit-qianqian'
+ line 2046: ' description-qianqian'
+ line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
+ line 2048: ' and technology, including p5.js tutorials for beginners. Available on'
+ line 2049: ' YouTube, Instagram, Bilibili, and TikTok.'
+ line 2050: ' project-casey-louise'
+ line 2051: ' credit-casey-louise'
+ line 2052: ' description-casey-louise'
+ line 2053: ' project-moon-xin'
+ line 2054: ' credit-moon-xin'
+ line 2055: ' description-moon-xin'
+ line 2056: ' Browser-based moving posters that use graphical systems, transformation'
+ line 2057: ' methods, and p5.js to address the connotations of a word less than 8'
+ line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative'
+ line 2059: ' Systems) at the University of Georgia.'
+ line 2060: ' created-by'
+ line 2061: ' pronouns-female'
+ line 2062: ' creator-from-roni-cantor'
+ line 2063: ' project-links'
+ line 2064: ' project-links-text-1-roni-cantor'
+ line 2065: ' project-links-text-2-roni-cantor'
+ line 2066: ' project-q-1-1'
+ line 2067: ' project-q-1-2'
+ line 2068: ' project-a-1-1-roni-cantor'
+ line 2069: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
+ line 2070: ' years of coding and making robots, I decided to take a break and play with'
+ line 2071: ' some more traditional forms of art—while still coding and playing with'
+ line 2072: ' robots.'
+ line 2073: ' project-a-1-2-roni-cantor'
+ line 2074: ' project-a-1-3-roni-cantor'
+ line 2075: ' project-a-1-4-roni-cantor'
+ line 2076: ' project-q-2'
+ line 2077: ' project-a-2-1-roni-cantor'
+ line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear'
+ line 2079: ' interpolation) formulas and display the visuals in the'
+ line 2080: ' project-a-2-2-roni-cantor'
+ line 2081: ' . I then used a feature in my code that exported my programmed graphic into'
+ line 2082: ' an'
+ line 2083: ' project-a-2-3-roni-cantor'
+ line 2084: ' project-a-2-4-roni-cantor'
+ line 2085: ' —so that it understood where to draw the lines that I programmed. I sent'
+ line 2086: ' this information to the plotter with a program called'
+ line 2087: ' project-a-2-5-roni-cantor'
+ line 2088: ' project-q-3'
+ line 2089: ' project-a-3-roni-cantor'
+ line 2090: ' project-q-4'
+ line 2091: ' Did you face any challenges working on this project? If so, how did you'
+ line 2092: ' overcome them?'
+ line 2093: ' project-a-4-roni-cantor'
+ line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
+ line 2095: ' benefited from the people around me who had used p5 before, as well as'
+ line 2096: ' online guides and forums.'
+ line 2097: ' project-q-5'
+ line 2098: ' project-a-5-roni-cantor'
+ line 2099: ' project-q-6'
+ line 2100: ' project-a-6-roni-cantor'
+ line 2101: ' project-resources'
+ line 2102: ' creator-from-qianqian'
+ line 2103: ' interview-link-qianqian'
+ line 2104: ' project-a-1-1-qianqian'
+ line 2105: ' project-a-1-2-qianqian'
+ line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free'
+ line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with'
+ line 2108: ' different colors.'
+ line 2109: ' project-a-2-1-qianqian'
+ line 2110: ' This project started with an idea of teaching my mom, who lives in China and'
+ line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on'
+ line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why'
+ line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily'
+ line 2114: ' due to the lack of free creative coding education resources. Most of the'
+ line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js'
+ line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
+ line 2117: ' inaccessible in China because of internet censorship.'
+ line 2118: ' project-a-2-2-qianqian'
+ line 2119: ' project-a-2-3-qianqian'
+ line 2120: ' , but the more I watched coding tutorials online, the more I realized how'
+ line 2121: ' difficult it is to find other womxn and people of color teaching coding,'
+ line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
+ line 2123: ' creative coding.'
+ line 2124: ' project-a-2-4-qianqian'
+ line 2125: ' I am working on opening up the video channels to other Chinese creatives who'
+ line 2126: ' want to contribute to the educational resource together, like interviews and'
+ line 2127: ' guest tutorials. If you are interested in teaching/talking about creative'
+ line 2128: ' coding in Mandarin, HMU!'
+ line 2129: ' project-a-3-1-qianqian'
+ line 2130: ' project-a-3-2-qianqian'
+ line 2131: ' project-a-4-1-qianqian'
+ line 2132: ' Learning to code in a second language was difficult and the lack of'
+ line 2133: ' community made this process even harder. I hope to speak from my experience'
+ line 2134: ' as a beginner and someone who once felt like an outsider to the creative'
+ line 2135: ' coding and video tutorial world.'
+ line 2136: ' project-a-4-2-qianqian'
+ line 2137: ' I spend a lot of time researching the latest technology for my videos. In'
+ line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
+ line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get'
+ line 2140: ' started making instructional videos.'
+ line 2141: ' project-a-4-3-qianqian'
+ line 2142: ' Another issue I came across was my own fear of putting myself online. I'
+ line 2143: ' first had to get over my anxiety of making mistakes in the videos or'
+ line 2144: ' receiving negative comments online. Often womxn and people of color are'
+ line 2145: ' targets for online harassment. I’m hoping to help set an example for other'
+ line 2146: ' womxn and people of color that it’s ok to put yourselves online and'
+ line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will'
+ line 2148: ' be able to stop online harassment by creating strong diverse communities.'
+ line 2149: ' project-a-5-1-qianqian'
+ line 2150: ' project-a-5-2-qianqian'
+ line 2151: ' creator-from-phuong'
+ line 2152: ' project-a-1-1-phuong'
+ line 2153: ' link-1-phuong'
+ line 2154: ' link-2-phuong'
+ line 2155: ' link-3-phuong'
+ line 2156: ' project-a-1-2-phuong'
+ line 2157: ' project-a-1-3-phuong'
+ line 2158: ' I was taking a course at the School of Machines in Berlin this summer'
+ line 2159: ' called! "'
+ line 2160: ' project-a-1-4-phuong'
+ line 2161: ' project-a-2-1-phuong'
+ line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites'
+ line 2163: ' for Airi and the ghosts were drawn on an iPad app called'
+ line 2164: ' project-a-2-2-phuong'
+ line 2165: ' project-a-2-3-phuong'
+ line 2166: ' project-a-2-4-phuong'
+ line 2167: ' p5-sketch-by-chjno-phuong'
+ line 2168: ' project-a-2-5-phuong'
+ line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was'
+ line 2170: ' detected, the scrolling speed would change to make an illusion of Airi'
+ line 2171: ' flying up. When the user does not do anything, the scrolling speed is'
+ line 2172: ' negative, which makes it look like Airi is falling down.'
+ line 2173: ' project-a-2-6-phuong'
+ line 2174: ' project-a-2-7-phuong'
+ line 2175: ' project-a-3-1-phuong'
+ line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks'
+ line 2177: ' and classes with the'
+ line 2178: ' project-a-3-2-phuong'
+ line 2179: ' project-a-3-3-phuong'
+ line 2180: ' project-a-3-4-phuong'
+ line 2181: ' project-a-4-1-phuong'
+ line 2182: ' There were a lot of challenges simply because p5.js was something new to me.'
+ line 2183: ' I did not work much with JavaScript in general before. Reading documentation'
+ line 2184: ' and searching for similar examples helped a lot.'
+ line 2185: ' project-a-5-1-phuong'
+ line 2186: ' school-of-machines-phuong'
+ line 2187: ' project-a-5-2-phuong'
+ line 2188: ' ! They try hard to connect the most creative people in the world and they do'
+ line 2189: ' it well so far. ❤️'
+ line 2190: ' pronouns-male'
+ line 2191: ' creator-from-chung'
+ line 2192: ' link-1-casey-louise'
+ line 2193: ' link-2-casey-louise'
+ line 2194: ' link-1-chung'
+ line 2195: ' link-2-chung'
+ line 2196: ' link-3-chung'
+ line 2197: ' project-a-1-1-chung'
+ line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College'
+ line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
+ line 2200: ' and motion graphics.'
+ line 2201: ' project-a-1-2-chung'
+ line 2202: ' project-a-1-3-chung'
+ line 2203: ' project-a-2-1-chung'
+ line 2204: ' This summer, I gave myself a challenge of making typographic posters with'
+ line 2205: ' coding, and this is one of the posters I made. I didn’t know until very'
+ line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching'
+ line 2207: ' dan-shiffman-matterjs-tutorial'
+ line 2208: ' project-a-2-2-chung'
+ line 2209: ' project-a-3-1-chung'
+ line 2210: ' There are many things I love about p5.js such as the online community and'
+ line 2211: ' beginner friendliness. What I really like right now is the'
+ line 2212: ' project-a-3-2-chung'
+ line 2213: ' , with which I can not only work online for myself but also share URLs'
+ line 2214: ' quickly in the present mode. For this project in particular, I had to do a'
+ line 2215: ' lot of testing on my phone, and it was much easier and quicker than'
+ line 2216: ' committing to GitHub.'
+ line 2217: ' project-a-4-1-chung'
+ line 2218: ' project-a-4-2-chung'
+ line 2219: ' project-a-4-3-chung'
+ line 2220: ' project-a-5-1-chung'
+ line 2221: ' As mentioned above, if you want to render out frames and video files out of'
+ line 2222: ' p5.js sketches, check out my'
+ line 2223: ' project-a-5-2-chung'
+ line 2224: ' creator-from-casey-louise'
+ line 2225: ' project-a-1-1-casey-louise'
+ line 2226: ' Casey'
+ line 2227: ' interactive spaces, physical and digital.'
+ line 2228: ' project-a-1-2-casey-louise'
+ line 2229: ' Louise'
+ line 2230: ' interactive spaces based on sensor technologies.'
+ line 2231: ' project-a-1-3-casey-louise'
+ line 2232: ' Casey'
+ line 2233: ' I had been dabbling in'
+ line 2234: ' project-a-1-4-casey-louise'
+ line 2235: ' project-a-1-5-casey-louise'
+ line 2236: ' Louise'
+ line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
+ line 2238: ' me.'
+ line 2239: ' project-a-2-1-casey-louise'
+ line 2240: ' Casey'
+ line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open'
+ line 2242: ' source, storytelling, and learning resource projects at ITP called'
+ line 2243: ' project-a-2-2-casey-louise'
+ line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
+ line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource'
+ line 2246: ' for others to learn. When I told Louise about the project, she was'
+ line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
+ line 2248: ' great about making sure the project is a learning resource and not just a'
+ line 2249: ' collection of examples.'
+ line 2250: ' project-a-3-1-casey-louise'
+ line 2251: ' project-a-3-2-casey-louise'
+ line 2252: ' project-a-3-3-casey-louise'
+ line 2253: ' project-a-3-4-casey-louise'
+ line 2254: ' project-a-3-5-casey-louise'
+ line 2255: ' project-a-4-1-casey-louise'
+ line 2256: ' Casey'
+ line 2257: ' reaching out to amazing people, asking questions, and asking for permission'
+ line 2258: ' to use their examples in our project.'
+ line 2259: ' adam-ferris-repo-casey-louise'
+ line 2260: ' project-a-4-2-casey-louise'
+ line 2261: ' project-a-4-3-casey-louise'
+ line 2262: ' project-a-4-4-casey-louise'
+ line 2263: ' webgl-casey-louise'
+ line 2264: ' project-a-4-5-casey-louise'
+ line 2265: ' project-a-4-6-casey-louise'
+ line 2266: ' Louise'
+ line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam'
+ line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
+ line 2269: ' understand how to implement it, so it was as much a technical challenge as'
+ line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
+ line 2271: ' inspiration from the way the'
+ line 2272: ' openframeworks-book-casey-louise'
+ line 2273: ' project-a-4-7-casey-louise'
+ line 2274: ' project-a-5-1-casey-louise'
+ line 2275: ' project-a-5-2-casey-louise'
+ line 2276: ' pronouns-nonbinary'
+ line 2277: ' creator-from-moon'
+ line 2278: ' posters-by'
+ line 2279: ' project-a-1-1-moon'
+ line 2280: ' Moon'
+ line 2281: ' summer, I taught a graphic design course in the University of Georgia'
+ line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
+ line 2283: ' planning to teach and to study digital platforms at UGA.'
+ line 2284: ' project-a-1-2-moon'
+ line 2285: ' project-a-1-3-moon'
+ line 2286: ' project-a-1-4-moon'
+ line 2287: ' pcd-la-moon'
+ line 2288: ' project-a-1-5-moon'
+ line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent'
+ line 2290: ' teaching and learning experience.'
+ line 2291: ' project-a-2-1-moon'
+ line 2292: ' codetrain-moon'
+ line 2293: ' project-a-2-2-moon'
+ line 2294: ' p5-reference-moon'
+ line 2295: ' project-a-2-3-moon'
+ line 2296: ' project-a-3-1-moon'
+ line 2297: ' project-a-3-2-moon'
+ line 2298: ' project-a-3-3-moon'
+ line 2299: ' project-a-3-4-moon'
+ line 2300: ' . I was able to use and to teach this tool to visualize various ideas about'
+ line 2301: ' time in motion.'
+ line 2302: ' project-a-4-1-moon'
+ line 2303: ' It was challenging for me, a beginner, to understand the overall structure'
+ line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
+ line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I'
+ line 2306: ' understood the p5.js structure and code with strong constraints I set up. It'
+ line 2307: ' was an excellent teaching and learning experience.'
+ line 2308: ' project-a-5-1-moon'
+ line 2309: ' project-a-5-2-moon'
+ line 2310: teach
+ line 2311: ' teach-title2'
+ line 2312: ' teach-intro1'
+ line 2313: ' Every teaching has its own unique goals, messages, conditions, and'
+ line 2314: ' environments. '
+ line 2315: ' teach-intro2'
+ line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
+ line 2317: ' better connect the p5.js learner and educator communities around the world. '
+ line 2318: ' teach-intro3'
+ line 2319: ' teach-intro4'
+ line 2320: ' teach-heading'
+ line 2321: ' teach-search-filter'
+ line 2322: ' teach-filter1'
+ line 2323: ' teach-filter1-label1'
+ line 2324: ' teach-filter1-label2'
+ line 2325: ' teach-filter1-label3'
+ line 2326: ' teach-filter1-label4'
+ line 2327: ' teach-filter1-label5'
+ line 2328: ' teach-filter1-label6'
+ line 2329: ' teach-filter1-label7'
+ line 2330: ' teach-filter1-label8'
+ line 2331: ' teach-filter1-label9'
+ line 2332: ' teach-filter1-label10'
+ line 2333: ' teach-filter1-label11'
+ line 2334: ' teach-filter1-label12'
+ line 2335: ' teach-filter1-label13'
+ line 2336: ' teach-filter1-label14'
+ line 2337: ' teach-filter1-label15'
+ line 2338: ' teach-filter1-label16'
+ line 2339: ' teach-filter2'
+ line 2340: ' teach-filter2-label1'
+ line 2341: ' teach-filter2-label2'
+ line 2342: ' teach-filter2-label3'
+ line 2343: ' teach-filter2-label4'
+ line 2344: ' teach-filter2-label5'
+ line 2345: ' teach-filter2-label6'
+ line 2346: ' teach-filter2-label7'
+ line 2347: ' teach-filter3'
+ line 2348: ' teach-filter4'
+ line 2349: ' teach-filter4-label1'
+ line 2350: ' teach-filter4-label2'
+ line 2351: ' teach-filter4-label3'
+ line 2352: ' teach-case-subtitle1'
+ line 2353: ' teach-case-subtitle2'
+ line 2354: ' teach-case-subtitle3'
+ line 2355: ' teach-case-subtitle4'
+ line 2356: ' teach-case-subtitle5'
+ line 2357: ' teach-case1-title'
+ line 2358: ' teach-case1-lead-name'
+ line 2359: ' teach-case1-content1'
+ line 2360: ' teach-case1-content1-1'
+ line 2361: ' teach-case1-content2'
+ line 2362: ' teach-case1-content3'
+ line 2363: ' teach-case1-content4'
+ line 2364: ' To introduce a new public to programming through fun and compelling'
+ line 2365: ' examples. '
+ line 2366: ' teach-case1-content5'
+ line 2367: ' Method'
+ line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web'
+ line 2369: ' editor. I was teaching using a video projector as well as a board.'
+ line 2370: ' teach-case1-content5-1'
+ line 2371: ' Materials'
+ line 2372: ' links available in '
+ line 2373: ' teach-case2-title'
+ line 2374: ' Making The Thing that Makes the Thing'
+ line 2375: ' with p5.js'
+ line 2376: ' teach-case2-lead-name'
+ line 2377: ' teach-case2-content1'
+ line 2378: ' teach-case2-content1-1'
+ line 2379: ' teach-case2-content2'
+ line 2380: ' Our participants included art/design students & professionals, creative'
+ line 2381: ' coding enthusiasts. We had close to 50 participants.'
+ line 2382: ' teach-case2-content3'
+ line 2383: ' teach-case2-content4'
+ line 2384: ' To explore generative art & design and recreate some classical works'
+ line 2385: ' with p5.js. '
+ line 2386: ' teach-case2-content5'
+ line 2387: ' teach-case2-content5-1'
+ line 2388: ' teach-case2-content5-2'
+ line 2389: ' teach-case2-content5-3'
+ line 2390: ' teach-case2-content5-4'
+ line 2391: ' teach-case2-content5-5'
+ line 2392: ' teach-case3-title'
+ line 2393: ' teach-case3-lead-name'
+ line 2394: ' teach-case3-speech'
+ line 2395: ' teach-case3-content1'
+ line 2396: ' teach-case3-content1-1'
+ line 2397: ' teach-case3-content2'
+ line 2398: ' Our participants included art/design students & professionals, creative'
+ line 2399: ' coding enthusiasts. We had close to 50 participants.'
+ line 2400: ' teach-case3-content3'
+ line 2401: ' teach-case3-content4'
+ line 2402: ' To build a teacher and student community around p5 for middle and high'
+ line 2403: ' school.'
+ line 2404: ' teach-case3-content5'
+ line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
+ line 2406: ' methods and materials. Most used some sort of slides or documentation, some'
+ line 2407: ' live coding using an editor, with work time for participant to remix.'
+ line 2408: ' teach-case3-content5-1'
+ line 2409: ' teach-case3-content5-2'
+ line 2410: ' teach-case3-content5-3'
+ line 2411: ' teach-case4-title'
+ line 2412: ' teach-case4-lead-name'
+ line 2413: ' teach-case4-speech'
+ line 2414: ' teach-case4-content1'
+ line 2415: ' teach-case4-content1-1'
+ line 2416: ' teach-case4-content2'
+ line 2417: ' I had around 16 students in the workshop, and a team including 3 people from'
+ line 2418: ' the PlusCode festival, and one person at the venue.'
+ line 2419: ' teach-case4-content3'
+ line 2420: ' teach-case4-content4'
+ line 2421: ' Introduction to beginners and artists of graphic web programming and open'
+ line 2422: ' source, using p5.js, in Spanish '
+ line 2423: ' teach-case4-content5'
+ line 2424: ' teach-case4-content5-1'
+ line 2425: ' teach-case4-content5-2'
+ line 2426: ' teach-case4-content5-3'
+ line 2427: ' teach-case4-content5-4'
+ line 2428: ' teach-case5-title'
+ line 2429: ' teach-case5-lead-name'
+ line 2430: ' teach-case5-speech'
+ line 2431: ' My greatest source of uncertainty in developing the workshop was whether it'
+ line 2432: ' was trying to teach art to programmers or to teach programming to artists.'
+ line 2433: ' teach-case5-content1'
+ line 2434: ' teach-case5-content1-1'
+ line 2435: ' teach-case5-content1-2'
+ line 2436: ' teach-case5-content1-3'
+ line 2437: ' teach-case5-content2'
+ line 2438: ' teach-case5-content3'
+ line 2439: ' teach-case5-content4'
+ line 2440: ' To introduce p5.js to artists with little or no programming experience and'
+ line 2441: ' to suggest one way an analogue practice can migrate to a digital form.'
+ line 2442: ' teach-case5-content5'
+ line 2443: ' A printed workbook with activities that used the p5.js web editor to show'
+ line 2444: ' how translate an physical drawing into a digital drawing.'
+ line 2445: ' teach-case5-content5-1'
+ line 2446: ' teach-case5-content5-2'
+ line 2447: ' teach-case5-content5-3'
+ line 2448: ' teach-case6-title'
+ line 2449: ' teach-case6-lead-name'
+ line 2450: ' teach-case6-speech'
+ line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
+ line 2452: ' your everyday life!'
+ line 2453: ' teach-case6-content1'
+ line 2454: ' teach-case6-content1-1'
+ line 2455: ' teach-case6-content2'
+ line 2456: ' teach-case6-content3'
+ line 2457: ' teach-case6-content4'
+ line 2458: ' teach-case6-content5'
+ line 2459: ' teach-case6-content5-1'
+ line 2460: ' teach-case6-content5-2'
+ line 2461: ' teach-case6-content5-3'
+ line 2462: ' teach-case6-content5-4'
+ line 2463: ' teach-case6-content5-5'
+ line 2464: ' teach-case7-title'
+ line 2465: ' teach-case7-lead-name'
+ line 2466: ' teach-case7-speech'
+ line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
+ line 2468: ' to give it a try!'
+ line 2469: ' teach-case7-content1'
+ line 2470: ' teach-case7-content1-1'
+ line 2471: ' teach-case7-content2'
+ line 2472: ' teach-case7-content3'
+ line 2473: ' teach-case7-content4'
+ line 2474: ' teach-case7-content5'
+ line 2475: ' teach-case7-content5-1'
+ line 2476: ' teach-case8-title'
+ line 2477: ' teach-case8-lead-name'
+ line 2478: ' teach-case8-content1'
+ line 2479: ' teach-case8-content1-1'
+ line 2480: ' teach-case8-content2'
+ line 2481: ' teach-case8-content3'
+ line 2482: ' teach-case8-content4'
+ line 2483: ' teach-case8-content5'
+ line 2484: ' teach-case8-content5-1'
+ line 2485: ' teach-case8-content5-2'
+ line 2486: ' teach-case9-title'
+ line 2487: ' teach-case9-lead-name'
+ line 2488: ' teach-case9-content1'
+ line 2489: ' teach-case9-content1-1'
+ line 2490: ' teach-case9-content2'
+ line 2491: ' Students at Interactive Telecommunications Program, New York University. 16'
+ line 2492: ' people.'
+ line 2493: ' teach-case9-content3'
+ line 2494: ' teach-case9-content4'
+ line 2495: ' The goal of this class is to learn and understand common machine learning'
+ line 2496: ' techniques and apply them to generate creative outputs in the browser using'
+ line 2497: ' ml5.js and p5.js.'
+ line 2498: ' teach-case9-content5'
+ line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and'
+ line 2500: ' presentations. I used '
+ line 2501: ' teach-case9-content5-1'
+ line 2502: ' teach-case9-content5-2'
+ line 2503: ' teach-case9-content5-3'
+ line 2504: ' teach-case10-title'
+ line 2505: ' teach-case10-lead-name'
+ line 2506: ' teach-case10-content1'
+ line 2507: ' teach-case10-content3'
+ line 2508: ' teach-case10-content4'
+ line 2509: ' Introduce learners (potentially with no coding experiences at all) to the'
+ line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
+ line 2511: ' and enable them to pursue own projects in a safe environment.'
+ line 2512: ' teach-case10-content5'
+ line 2513: ' p5.js source code (for the introductory project), JavaScript source code'
+ line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
+ line 2515: ' .pdf format, all hosted publicly on GitHub. '
+ line 2516: ' teach-case10-content5-1'
+ line 2517: ' teach-case10-content5-2'
line 2518: ' teach-case11-title'
line 2519: ' teach-case11-lead-name'
line 2520: ' teach-case11-content1'
@@ -1829,381 +1813,145 @@ es:
line 2537: ' teach-case12-title'
line 2538: ' teach-case12-lead-name'
line 2539: ' teach-case12-speech'
+ line 2540: ' I''m working on a new series of coding class for Disabled students in South'
+ line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 2542: ' workshops in December 2020. The project is supported by the Open Society'
+ line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 2544: ' Center.'
+ line 2545: ' teach-case12-content1'
+ line 2546: ' teach-case12-content1-1'
+ line 2547: ' teach-case12-content2'
+ line 2548: ' teach-case12-content3'
+ line 2549: ' teach-case12-content4'
+ line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming'
+ line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
+ line 2552: ' teach-case12-content5'
+ line 2553: ' We used p5.js Web editor and code examples on the website. We also used'
+ line 2554: ' dice, playing cards and various paper tools to help students learn about'
+ line 2555: ' coding concepts.'
+ line 2556: ' teach-case12-content5-1'
+ line 2557: ' teach-case12-content5-2'
line 598: ' color-custom-ranges-li1x2'
line 601: ' color-custom-ranges-li2x2'
line 604: ' color-custom-ranges-li3x2'
- line 728: ' learn-title'
- line 1091: <<<<<<< HEAD
- line 1099: '======='
- line 1100: ' Libraries'
- line 1101: ' core-libraries'
- line 1102: ' community-libraries'
- line 1103: ' libraries-created-by'
- line 1104: ' p5.sound'
- line 1105: ' p5.sound extends p5 with Web Audio functionality including audio input,'
- line 1106: ' playback, analysis and synthesis.'
- line 1107: ' p5.accessibility'
- line 1108: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
- line 1109: ' and visually impaired.'
- line 1110: ' asciiart'
- line 1111: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
- line 1112: ' p5js.'
- line 1113: ' p5.ble'
- line 1114: ' A Javascript library that enables communication between BLE devices and p5'
- line 1115: ' sketches.'
- line 1116: ' p5.bots'
- line 1117: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
- line 1118: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
- line 1119: ' drive LEDs, motors, and more!'
- line 1120: ' p5.clickable'
- line 1121: ' p5.cmyk.js'
- line 1122: ' p5.collide2D'
- line 1135: ' p5.func'
- line 1136: ' p5.func is a p5 extension that provides new objects and utilities for'
- line 1137: ' function generation in the time, frequency, and spatial domains.'
- line 1138: ' p5.geolocation'
- line 1139: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
- line 1140: ' geofencing user locations for p5.js.'
- line 1141: ' p5.gibber'
- line 1142: ' grafica.js'
- line 1143: ' grafica.js lets you add simple but highly configurable 2D plots to your'
- line 1144: ' p5.js sketches.'
- line 1145: ' p5.gui'
- line 1146: ' p5.localmessage'
- line 1374: ' community-title'
- line 1375: ' community-statement-title'
- line 1376: ' community-statement1'
- line 1377: ' p5.js is a community interested in exploring the creation of art and design'
- line 1378: ' with technology.'
- line 1379: ' community-statement2'
- line 1380: ' We are a community of, and in solidarity with, people from every gender'
- line 1381: ' identity and expression, sexual orientation, race, ethnicity, language,'
- line 1382: ' neuro-type, size, ability, class, religion, culture, subculture, political'
- line 1383: ' opinion, age, skill level, occupation, and background. We acknowledge that'
- line 1384: ' not everyone has the time, financial means, or capacity to actively'
- line 1385: ' participate, but we recognize and encourage involvement of all kinds. We'
- line 1386: ' facilitate and foster access and empowerment. We are all learners.'
- line 1387: ' community-statement3'
- line 1388: ' We like these hashtags'
- line 1389: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
- line 1390: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
- line 1391: ' course).'
- line 1392: ' in-practice-title'
- line 1393: ' in-practice1'
- line 1394: ' in-practice2'
- line 1395: ' We insist on actively engaging with requests for feedback regardless of'
- line 1396: ' their complexity.'
- line 1397: ' in-practice3'
- line 1398: ' We welcome newcomers and prioritize the education of others. We strive to'
- line 1399: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
- line 1400: ' that newcomers are just as valuable in this effort as experts.'
- line 1401: ' in-practice4'
- line 1402: ' We consistently make the effort to actively recognize and validate multiple'
- line 1403: ' types of contributions.'
- line 1404: ' in-practice5'
- line 1405: ' in-times-conflict-title'
- line 1406: ' in-times-conflict1'
- line 1407: ' in-times-conflict2'
- line 1408: ' in-times-conflict3'
- line 1409: ' We admit when we''re wrong, apologize, and accept responsibility for our'
- line 1410: ' actions.'
- line 1411: ' in-times-conflict4'
- line 1412: ' in-times-conflict5'
- line 1413: ' in-times-conflict6'
- line 1414: ' in-times-conflict7'
- line 1415: ' in-the-future-title'
- line 1416: ' in-the-future1'
- line 1417: ' notes-title'
- line 1418: ' notes1'
- line 1419: ' notes2'
- line 1669: ' book-1-publisher'
- line 1670: ' book-1-pages'
- line 1671: ' book-1-type'
- line 1672: ' book-1-description'
- line 1673: ' Written by the lead p5.js developer and the founders of Processing, this'
- line 1674: ' book provides an introduction to the creative possibilities of today''s Web,'
- line 1675: ' using JavaScript and HTML.'
- line 1676: ' book-1-order-a'
- line 1677: ' book-1-order-b'
- line 1678: ' book-2-title'
- line 1679: ' book-2-authors'
- line 1680: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
- line 1681: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
- line 1682: ' book-2-publisher'
- line 1683: ' book-2-pages'
- line 1684: ' book-2-type'
- line 1685: ' book-2-description'
- line 1686: ' Written by the lead p5.js developer and the founders of Processing, this'
- line 1687: ' book provides an introduction to the creative possibilities of today''s Web,'
- line 1688: ' using JavaScript and HTML.'
- line 1689: ' book-2-order-a'
- line 1690: ' book-2-order-b'
- line 1691: ' book-3-title'
- line 1692: ' book-3-authors'
- line 1693: ' book-3-publisher'
- line 1694: ' book-3-pages'
- line 1695: ' book-3-type'
- line 1696: ' book-3-description'
- line 1697: ' By using simple languages such as JavaScript in p5.js, artists and makers'
- line 1698: ' can create everything from interactive typography and textiles to 3D-printed'
- line 1699: ' furniture to complex and elegant infographics.'
- line 1700: ' book-3-order-a'
- line 1701: ' book-3-order-b'
- line 1702: ' book-4-title'
- line 1703: ' book-4-authors'
- line 1704: ' book-4-publisher'
- line 1705: ' book-4-pages'
- line 1706: ' book-4-type'
- line 1707: ' book-4-description'
- line 1708: ' By using simple languages such as JavaScript in p5.js, artists and makers'
- line 1709: ' can create everything from interactive typography and textiles to 3D-printed'
- line 1710: ' furniture to complex and elegant infographics.'
- line 1711: ' book-4-order-a'
- line 1772: ' Control'
- line 1773: ' Image'
- line 1774: ' Color'
- line 1775: ' Math'
- line 1776: ' Simulate'
- line 1777: ' Interaction'
- line 1778: ' Objects'
- line 1779: ' Lights'
- line 1780: ' Motion'
- line 1781: ' Instance_Mode'
- line 1782: ' Dom'
- line 1783: ' Drawing'
- line 1784: ' Transform'
- line 1785: ' Typography'
- line 1786: ' 3D'
- line 1787: ' Input'
- line 1788: ' Advanced_Data'
- line 1789: ' Sound'
- line 1790: ' Mobile'
- line 1791: ' Hello_P5'
- line 1795: ' Reference'
- line 1948: ' showcase-title'
- line 1949: ' showcase-intro1'
- line 1950: ' showcase-intro2'
- line 1951: ' showcase-intro3'
- line 1952: ' We''re celebrating how people are using p5.js to make creative work,'
- line 1953: ' learning, and open source more interesting and inclusive. Together, we make'
- line 1954: ' community. During Summer 2019, we asked a few creators to share more about'
- line 1955: ' how they''ve used p5.js through different projects and pieces.'
- line 1956: ' showcase-intro4'
- line 1957: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
- line 1958: ' p5.js work or your own to be featured here!'
- line 1959: ' nominate-project'
- line 1960: ' showcase-featuring'
- line 1961: ' project-tag-art'
- line 1962: ' project-tag-design'
- line 1963: ' project-tag-code'
- line 1964: ' project-tag-curriculum'
- line 1965: ' project-tag-documentation'
- line 1966: ' project-tag-game'
- line 1967: ' project-tag-library'
- line 1968: ' project-tag-organizing'
- line 1969: ' project-tag-tool'
- line 1970: ' project-tag-tutorial'
- line 1971: ' project-roni'
- line 1972: ' credit-roni'
- line 1973: ' description-roni'
- line 1974: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
- line 1975: ' plotter and pens.'
- line 1976: ' project-phuong'
- line 1977: ' credit-phuong'
- line 1978: ' description-phuong'
- line 1979: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
- line 1980: ' encourage people to get out of their comfort zone and feel more confident'
- line 1981: ' about themselves regardless of what they do and how they look or sound.'
- line 1982: ' project-daein'
- line 1983: ' credit-daein'
- line 1984: ' description-daein'
- line 1985: ' An interactive typographic poster that uses a mobile device''s motion sensor'
- line 1986: ' with p5.js.'
- line 1987: ' project-qianqian'
- line 1988: ' credit-qianqian'
- line 1989: ' description-qianqian'
- line 1990: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
- line 1991: ' and technology, including p5.js tutorials for beginners. Available on'
- line 1992: ' YouTube, Instagram, Bilibili, and TikTok.'
- line 1993: ' project-casey-louise'
- line 1994: ' credit-casey-louise'
- line 1995: ' description-casey-louise'
- line 1996: ' project-moon-xin'
- line 1997: ' credit-moon-xin'
- line 1998: ' description-moon-xin'
- line 1999: ' Browser-based moving posters that use graphical systems, transformation'
- line 2000: ' methods, and p5.js to address the connotations of a word less than 8'
- line 2001: ' letters. Designed by students for a graphic design course (Visual Narrative'
- line 2002: ' Systems) at the University of Georgia.'
- line 2003: ' created-by'
- line 2004: ' pronouns-female'
- line 2558: ' teach-case14-content5-3'
- line 2559: ' 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
- line 2560: ' teach-case14-content5-4'
- line 2561: ' 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. '
- line 2562: ' teach-case14-content5-5'
- line 2563: ' teach-case15-title'
- line 2564: ' teach-case15-lead-name'
- line 2565: ' teach-case15-content1'
- line 2566: ' L''École de Design Nantes Atlantique, France'
- line 2567: ' teach-case15-content1-1'
- line 2568: ' teach-case15-content2'
- line 2569: ' Students from l''école de design Nantes Atlantique'''
- line 2570: ' teach-case15-content3'
- line 2571: ' teach-case15-content4'
- line 2572: ' To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
- line 2573: ' teach-case15-content5'
- line 2574: ' GitHub Readme File'
- line 2575: ' teach-case15-content5-1'
- line 2576: ' teach-case16-title'
- line 2577: ' 50+ Coding Club '
- line 2578: ' teach-case16-lead-name'
- line 2579: ' teach-case16-speech'
- line 2580: ' This workshop was conducted in line with ''p5 for 50+'' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).'
- line 2581: ' teach-case16-content1'
- line 2582: ' teach-case16-content1-1'
- line 2583: ' teach-case16-content2'
- line 2584: ' teach-case16-content2-1'
- line 2585: ' teach-case16-content2-2'
- line 2586: ' teach-case16-content3'
- line 2587: ' teach-case16-content4'
- line 2588: ' Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
- line 2589: ' this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
- line 2590: ' teach-case16-content5'
- line 2591: ' p5for50+ web app'
- line 2592: ' teach-case16-content5-1'
- line 2593: ' a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants'' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.'
- line 2594: ' teach-case16-content5-2'
- line 2595: ' teach-case16-content5-3'
- line 2596: ' teach-case16-content5-4'
- line 2609: ' teach-case17-title'
- line 2610: ' teach-case17-lead-name'
- line 2611: ' teach-case17-speech'
- line 2612: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
- line 2613: ' teach-case17-content1'
- line 2614: ' teach-case17-content1-1'
- line 2615: ' teach-case17-content2'
- line 2616: ' teach-case17-content3'
- line 2617: ' teach-case17-content4'
- line 2618: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
- line 2619: ' teach-case17-content5'
- line 2620: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
- line 2621: ' teach-case17-content5-1'
+ line 424: ' with p5.js.'
+ line 433: ' presentations. I used'
+ line 84: ' copyright1'
+hi:
+ src/data/en.yml:
+ line 883: ' p5.fab'
+ line 26: footer6
+ line 25: footer2
+ line 27: footer4
+ line 28: footer5
+ line 29: footer6
+ line 30: footer7
+ line 31: footer8
+ line 32: footer9
+ line 85: ' under the terms of the '
+ line 84: ' copyright1'
+ line 871: ' p5.input'
+ line 872: ' ui'
+ line 873: ' p5.web-serial'
+ line 874: ' A p5.js library for using the Web Serial API to access devices like Arduino, '
+ line 875: ' no setup required.'
+ line 876: ' p5.wasm.core'
+ line 877: ' p5.videorecorder'
+ line 878: ' p5.mapper'
+ line 879: ' p5.mapper is a projection mapping library for p5.js. This library makes it '
+ line 880: ' easy to code and keystone interactive, algorithmic sketches.'
+ line 881: ' p5.teach'
+ line 882: ' A beginner friendly math animation library for p5.js. Created with mentorship '
ko:
src/data/en.yml:
- line 1517: ' Woman speaks at a podium in an auditorium while three participants sit on'
- line 1527: ' , advancing the code, documentation, and community outreach tools and'
- line 1528: ' exploring the current landscape of the p5.js programming environment.'
- line 1537: ' output1'
- line 1545: ' , testing early implementations of softCompile, OSC interfacing and added'
- line 1546: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
- line 1547: ' environment! Created by Ted Davis.'
- line 1548: ' output4'
- line 1549: ' A panel on Blackness and Gender in Virtual Space led by American Artist,'
- line 1550: ' with shawné michaelain holloway and LaJuné McMillian.'
- line 1551: ' output5'
- line 1552: ' output6'
- line 1553: ' output6-1'
- line 1554: ' output6-2'
- line 1555: ' output7'
- line 1556: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
- line 1557: ' Jon Chambers.'
- line 1558: ' output8'
- line 1559: ' output8-1'
- line 1560: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
- line 1561: ' Ye, Dorothy R. Santos, and Yasheng She.'
- line 1562: ' output9'
- line 1563: ' output9-1'
- line 1564: ' output10'
- line 1565: ' An overhaul of the p5.js website for accessibility. Including updates for'
- line 1566: ' screen reader accessibility, and improvements to the home, download, getting'
- line 1567: ' started, and reference pages. With contributions from Claire Kearney-Volpe,'
- line 1568: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
- line 1569: ' McCarthy, and Evelyn Masso.'
- line 1570: ' output11'
- line 1571: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
- line 1572: ' Sona Lee, Ted Davis, and Carlos Garcia.'
- line 1573: ' output12'
- line 1574: ' output13'
- line 1575: ' A design of the p5.js library system for the p5 Editor. Created by Cassie'
- line 1576: ' Tarakajian and Luca Damasco.'
- line 1577: ' output14'
- line 1578: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
- line 1579: ' Lauren Valley.'
- line 1580: ' output15'
- line 1581: ' 2019cc_1'
- line 1582: ' 2019cc_2'
- line 1583: ' 2019cc_3'
- line 1584: ' 2019cc_4'
- line 1585: ' 2019cc_5'
- line 1586: ' 2019cc_6'
- line 1587: ' 2019cc_7'
- line 1588: ' 2019cc_8'
- line 1589: ' 2019cc_9'
- line 1590: ' Participant speaks at a podium in front of projected text about the problem'
- line 1591: ' with anonymyzing data'
- line 1592: ' 2019cc_10'
- line 1593: ' Person with a microphone speaking to fellow participants in front of text'
- line 1594: ' that reads p5.js will not add any new features except those that increase'
- line 1595: ' access'
- line 1596: ' 2019cc_11'
- line 1597: ' 2019cc_12'
- line 1598: ' 2019cc_13'
- line 1599: ' 2019cc_14'
- line 1600: ' 2019cc_15'
- line 1601: ' Woman with microphone speaking to fellow participants with the text sacred'
- line 1602: ' boundaries in the projection behind her'
- line 1603: ' 2019cc_16'
- line 1604: ' Overhead view of participants listening to a panel of people with an image'
- line 1605: ' of a 3d rendered man on it'
- line 1606: ' 2019cc_17'
- line 1607: ' Participants sit around a table with their laptops and observe code on a'
- line 1608: ' screen'
- line 1609: ' 2019cc_18'
- line 1610: ' 2019cc_19'
- line 1611: ' 2019cc_20'
- line 1612: ' 2019cc_21'
- line 1613: ' 2019cc_22'
- line 1614: ' Participants sitting around a large U shaped table looking towards the front'
- line 1615: ' of the classroom'
- line 1616: ' 2019cc_23'
- line 1617: ' Man sitting in front of the classroom speaking energetically into a'
- line 1618: ' microphone'
- line 1619: ' 2019cc_24'
- line 1620: ' Group photo of participants smiling enthusiastically with their hands in the'
- line 1621: ' air'
- line 1622: ' 2019cc_25'
- line 1123: ' p5.collide2D provides tools for calculating collision detection for 2D'
- line 1124: ' geometry with p5.js.'
- line 1125: ' p5.createloop'
- line 1126: ' p5.dimensions'
- line 1127: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
- line 1128: ' dimensions.'
- line 1129: ' p5.EasyCam'
- line 1130: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
- line 1131: ' contributions by Thomas Diewald.'
- line 1132: ' p5.experience'
- line 1133: ' Extensive library for p5.js that adds additional event-listening'
- line 1134: ' functionality for creating canvas-based web applications.'
- line 97: ' p1xh1'
- line 96: ' start-creating'
- line 114: ' acknowledge that not everyone has the time, financial means, or capacity to'
- line 113: ' political opinion, age, skill level, occupation, and background. We'
- line 115: ' actively participate, but we recognize and encourage involvement of all'
- line 102: ' software, and the tools to learn it, should be accessible to everyone.'
- line 103: ' p1x2'
- line 104: ' Using the metaphor of a sketch, p5.js has a full set of drawing'
- line 105: ' functionality. However, you’re not limited to your drawing canvas. You can'
- line 251: ' download9'
- line 256: ' you would like to use the minified version (compressed for faster page'
- line 269: ' environment4'
- line 265: ' environment1'
- line 266: ' environmentlink'
- line 267: ' environment2'
- line 268: ' environment3'
- line 275: ' environment8'
- line 276: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
- line 277: ' that your html and js files are located in. On the left sidebar, you should'
+ line 883: ' p5.fab'
+ line 875: ' no setup required.'
+ line 871: ' p5.input'
+ line 872: ' ui'
+ line 873: ' p5.web-serial'
+ line 874: ' A p5.js library for using the Web Serial API to access devices like Arduino, '
+ line 876: ' p5.wasm.core'
+ line 877: ' p5.videorecorder'
+ line 878: ' p5.mapper'
+ line 879: ' p5.mapper is a projection mapping library for p5.js. This library makes it '
+ line 880: ' easy to code and keystone interactive, algorithmic sketches.'
+ line 881: ' p5.teach'
+ line 882: ' A beginner friendly math animation library for p5.js. Created with mentorship '
+ line 85: ' under the terms of the '
+ line 26: footer6
+ line 25: footer2
+ line 27: footer4
+ line 31: footer8
+ line 32: footer9
+ line 28: footer5
+ line 29: footer6
+ line 30: footer7
+ line 1174: ' The Summer 2021 Showcase'
+ line 270: ' particular topics. Check out the'
+ line 288: ' to the index.html containing your p5.js sketch.'
+ line 297: ' file and the embed.html file for the sketch.'
+ line 306: ' be'
+ line 310: ' stylesheet)'
+ line 319: ' was ported to P5 by Kelly Chang. If you find any errors or have comments,'
+ line 330: ' background(255); // Setting the background to white'
+ line 331: ' stroke(0); // Setting the outline (stroke) to black'
+ line 332: ' fill(150); // Setting the interior of a shape (fill) to grey'
+ line 340: ' black. Also, remember not to eliminate both—with'
+ line 349: ' percentage). You can do this by specifying a custom'
+ line 358: ' want to use the'
+ line 363: ' and the bottom right corner). The mode here is'
+ line 374: ' Using p5.js, this book introduces and demonstrates the reflexive practice'
+ line 375: ' of aesthetic programming, engaging with learning to program as a way to'
+ line 376: ' understand and question existing technological objects and paradigms,'
+ line 385: ' p5.js work or your own to be featured here! If Google is not available in your region, please email chankati@usc.edu to submit!'
+ line 394: ' environments.'
+ line 398: ' better connect the p5.js learner and educator communities around the world.'
+ line 407: ' examples.'
+ line 415: ' links available in'
+ line 261: ' the'
+ line 279: ' of the p5js site. The file called index.hbs is the'
+ line 442: ' .pdf format, all hosted publicly on GitHub.'
+ line 1536: ' teach-case2-image-alt'
+ line 1544: ' teach-case4-image-alt'
+ line 1552: ' teach-case6-image-alt'
+ line 1560: ' teach-case8-image-alt'
+ line 1568: ' teach-case9-image-alt'
+ line 1576: ' teach-case11-image-alt'
+ line 1584: ' teach-case12-image-alt'
+ 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 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
+ line 256: ' , the organization that supports p5.js.'
+ 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'
@@ -2212,7 +1960,7 @@ ko:
line 128: ' p3xp5'
line 59: tagline4
line 136: ' p4xp6'
- line 243: ' get-started-button'
+ line 243: ' settingUp-title'
line 62: tagline7
line 45: Books
line 34: Language-Settings
@@ -2240,102 +1988,90 @@ ko:
line 127: ' p3xp4'
line 137: ' sketch_credits'
line 138: ' sketch_info'
- line 270: ' environment5'
- line 271: ' environment6'
- line 272: ' If you are a screen reader user and not using the p5 web editor, you may'
- line 273: ' want to use'
- line 282: ' edit it.'
- line 283: ' environment10'
- line 284: ' environment11'
- line 285: ' Open the index.html file in your browser by double clicking on it in your'
- line 286: ' file manager or type'
- line 287: ' environment12'
- line 288: ' environment14'
- line 289: ' environment15'
- line 290: ' environment16'
- line 291: ' environment13'
- line 292: ' your-first-sketch-title'
- line 293: ' your-first-sketch-intro1'
- line 294: ' your-first-sketch-intro2'
- line 295: ' your-first-sketch-intro3'
- line 296: ' your-first-sketch-intro4'
- line 297: ' your-first-sketch1'
- line 298: ' your-first-sketch2'
- line 299: ' your-first-sketch3'
- line 300: ' your-first-sketch4'
- line 301: ' The line you just added draws an ellipse, with its center 50 pixels over'
- line 302: ' from the left and 50 pixels down from the top, with a width and height of 80'
- line 303: ' pixels.'
- line 304: ' your-first-sketch5'
- line 305: ' your-first-sketch6'
- line 306: ' If you are using a screen reader, you must turn on the accessible outputs in'
- line 307: ' the p5 online editor, outside the editor you must add the accessibility'
- line 308: ' library in your html. To learn more visit '
- line 309: ' your-first-sketch7'
- line 310: ' your-first-sketch8'
- line 311: ' If you''ve typed everything correctly, this will appear in the display'
- line 312: ' window'
- line 313: ' your-first-sketch9'
- line 314: ' your-first-sketch10'
- line 315: ' If nothing appears, the editor may be having trouble understanding what'
- line 316: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
- line 317: ' exactly'
- line 318: ' between each of them, the line should end with a semicolon, and ellipse has'
- line 319: ' to be spelled correctly.'
- line 320: ' your-first-sketch11'
- line 321: ' One of the most difficult things about getting started with programming is'
- line 322: ' that you have to be very specific about the syntax. The browser isn''t always'
- line 323: ' smart enough to know what you mean, and can be quite fussy about the'
- line 324: ' placement of punctuation. You''ll get used to it with a little practice. In'
- line 325: ' the bottom left of the editor you will find the console section. Here, you'
- line 326: ' can find messages from the editor with details about any errors it'
- line 327: ' encounters.'
- line 328: ' your-first-sketch12'
- line 329: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
- line 330: ' last example to try this'
- line 331: ' your-first-sketch13'
- line 332: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
- line 333: ' and then starts drawing white circles at the position of the mouse. When a'
- line 334: ' mouse button is pressed, the circle color changes to black. Run the code,'
- line 335: ' move the mouse, and click to experience it.'
- line 336: ' your-first-sketch14'
- line 337: ' first-sketch-heading1'
- line 338: ' first-sketch-heading2'
- line 339: ' first-sketch-heading3'
- line 340: ' what-next-title'
- line 341: ' learn1'
- line 342: ' learn2'
- line 343: ' learn3'
- line 344: ' learn4'
- line 345: ' learn5'
- line 346: ' learn6'
- line 347: ' learn7'
- line 348: ' learn8'
- line 349: ' learn9'
- line 350: ' learn10'
- line 351: ' reference1'
- line 352: ' reference2'
- line 353: ' reference3'
- line 354: ' learn11'
- line 355: ' learn12'
- line 356: ' processing-transition1'
+ 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 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 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 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 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 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 333: ' learn1'
+ line 334: ' learn2'
+ line 335: ' learn3'
+ line 336: ' learn4'
+ line 337: ' learn5'
+ line 338: ' learn6'
+ line 339: ' learn7'
+ 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 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: ' download5'
- line 281: ' Click on your sketch.js file and it will open on the right where 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: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
- line 274: ' environment7'
- line 875: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
+ line 259: ' environment-title'
+ line 274: ' folder directly below.'
line 233: ' This page walks you through setting up a p5.js project and making your first'
line 234: ' sketch.'
- line 244: ' settingUp-title'
- line 245: ' download-title'
+ 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'
@@ -2346,1317 +2082,16 @@ ko:
line 46: Community
line 133: ' p4xp3'
line 134: ' p4xp4'
- line 357: ' processing-transition2'
- line 358: ' processing-transition3'
- line 359: ' processing-transition4'
- line 360: ' book1'
- line 361: ' Parts of this tutorial were adapted from the book, Getting Started with'
- line 362: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
- line 363: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
- line 364: ' Contributors Conference.'
- 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: ' hosted-title'
- line 247: ' download1'
- line 248: ' download2'
- line 249: ' download3'
- line 250: ' download8'
- line 252: ' download10'
- line 253: ' download11'
- line 254: ' download4'
- line 255: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
- line 257: ' loading), change the link to p5.min.js.'
- line 260: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
- line 261: ' of these versions in the'
- line 262: ' download6'
- line 263: ' download7'
- line 264: ' environment-title'
- line 278: ' find the folder name at the top, with a list of the files contained in the'
- line 279: ' folder directly below.'
- line 280: ' environment9'
- line 444: ' Download'
- line 445: ' download-intro'
- line 446: ' Welcome! While titled "Download" this page actually contains a collection of'
- line 447: ' links to either download the library or begin working with it online. We''ve'
- line 448: ' tried to order things to reflect what a beginner might want first, to'
- line 449: ' resources that more experienced programmers may be looking for.'
- line 450: ' editor-title'
- line 451: ' p5.js-editor'
- line 452: ' p5.js-editor-intro'
- line 453: ' This link redirects you to the p5.js Editor online so you can begin using'
- line 454: ' p5.js immediately.'
- line 455: ' editor-includes'
- line 456: ' complete-library-title'
- line 457: ' complete-library-intro1'
- line 458: ' This is a download containing the p5.js library file, the p5.sound addon,'
- line 459: ' and an example project. It does not contain an editor. Visit'
- line 460: ' complete-library-intro2'
- line 461: ' complete-library-intro3'
- line 462: ' p5.js-complete'
- line 463: ' includes-1'
- line 464: ' includes-2'
- line 465: ' includes-3'
- line 466: ' single-files-title'
- line 467: ' single-files-intro'
- line 468: ' These are downloads or links to the p5.js library file. No additional'
- line 469: ' contents are included.'
- line 470: ' single-file'
- line 471: ' p5.js-uncompressed'
- line 472: ' compressed'
- line 473: ' link'
- line 474: ' statically-hosted-file'
- line 475: ' etc-title'
- line 476: ' older-releases'
- line 477: ' github-repository'
- line 478: ' report-bugs'
- line 479: ' supported-browsers'
- line 480: ' support-title'
- line 481: ' support-options'
- line 482: ' support-1'
- line 483: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
- line 484: ' and inclusive as possible. You can support this work by making a donation to'
- line 485: ' the '
- line 486: ' support-2'
- line 487: ' , the organization that supports p5.js.'
- line 488: ' Your donation supports software development for p5.js, education resources'
- line 489: ' like code examples and tutorials,'
- line 490: ' support-3'
- line 491: ' support-4'
- line 492: ' support-5'
- line 493: ' support-17'
- line 494: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
- line 495: ' Pittsburgh (Image credit'
- line 496: ' support-18'
- line 497: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
- line 498: ' workshops in London (Image credit'
- line 499: ' support-19'
- line 500: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
- line 501: ' Kira Simon-Kennedy)'
- line 502: ' support-20'
- line 503: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
- line 504: ' (Image credit'
- line 505: ' support-21'
- line 506: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
- line 507: ' credit'
- line 508: ' support-22'
- line 509: ' support-23'
- line 510: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
- line 511: ' (Image credit'
- line 512: ' support-24'
- line 513: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
- line 514: ' workshop led by Taeyoon Choi (Image credit'
- line 515: ' support-25'
- line 516: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
- line 517: ' Pittsburgh (Image credit'
- line 518: ' support-26'
- line 519: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
- line 520: ' International Center of Photography (Image credit'
- line 521: ' Photography)'
- line 522: ' support-27'
- line 523: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
- line 524: ' Montoya-Moraga (Image credit'
- line 525: ' support-28'
- line 526: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
- line 527: ' led by Taeyoon Choi (Image credit'
- line 528: ' support-29'
- line 529: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
- line 530: ' Angeles (Image credit'
- line 531: ' support-30'
- line 532: ' support-31'
- line 533: ' support-32'
- line 534: ' support-33'
- line 535: ' support-17-alt'
- line 536: ' support-18-alt'
- line 537: ' support-19-alt'
- line 538: ' support-20-alt'
- line 539: ' support-21-alt'
- line 540: ' support-22-alt'
- line 541: ' support-23-alt'
- line 542: ' support-24-alt'
- line 543: ' support-25-alt'
- line 544: ' support-26-alt'
- line 545: ' support-27-alt'
- line 546: ' support-28-alt'
- line 547: ' support-29-alt'
- line 548: ' support-30-alt'
- line 549: ' support-31-alt'
- line 729: ' teach-title2'
- line 730: ' learn1'
- line 731: ' These tutorials provide more in-depth or step-by-step overviews of'
- line 732: ' particular topics. Check out the '
- line 733: ' learn2'
- line 734: ' learn3'
- line 735: ' introduction-to-p5js-title'
- line 736: ' hello-p5js-title'
- line 737: ' hello-p5js'
- line 738: ' This short video will introduce you to the library and what you can do with'
- line 739: ' it.'
- line 740: ' getting-started-title'
- line 741: ' getting-started'
- line 742: ' Welcome to p5.js!
This introduction covers the basics of setting up a'
- line 743: ' p5.js project.'
- line 744: ' p5js-overview-title'
- line 745: ' p5js-overview'
- line 746: ' p5js-processing-title'
- line 747: ' p5js-processing'
- line 748: ' The main differences between the two, and how to convert from one to the'
- line 749: ' other.'
- line 750: ' p5-screen-reader-title'
- line 751: ' p5-screen-reader'
- line 752: ' using-local-server-title'
- line 753: ' using-local-server'
- line 754: ' p5js-wiki-title'
- line 755: ' p5js-wiki'
- line 756: ' connecting-p5js-title'
- line 757: ' creating-libraries-title'
- line 758: ' creating-libraries'
- line 759: ' nodejs-and-socketio-title'
- line 760: ' nodejs-and-socketio'
- line 761: ' programming-topics-title'
- line 762: ' beyond-the-canvas-title'
- line 763: ' beyond-the-canvas'
- line 764: ' 3d-webgl-title'
- line 765: ' 3d-webgl'
- line 766: ' color-title'
- line 767: ' color'
- line 768: ' coordinate-system-and-shapes-title'
- line 769: ' coordinate-system-and-shapes'
- line 770: ' interactivity-title'
- line 771: ' interactivity'
- line 772: ' program-flow-title'
- line 773: ' program-flow'
- line 774: ' curves-title'
- line 775: ' curves'
- line 776: ' An introduction to the three types of curves in p5.js'
- line 777: ' and Bézier curves.'
- line 778: ' becoming-a-better-programmer-title'
- line 779: ' debugging-title'
- line 780: ' debugging'
- line 781: ' optimizing-title'
- line 782: ' optimizing'
- line 783: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
- line 784: ' and smoother.'
- line 785: ' test-driven-development-title'
- line 786: ' test-driven-development'
- line 787: ' Save yourself from agony on install day. What is unit testing and how to use'
- line 788: ' it? By Andy Timmons.'
- line 789: ' contributing-to-the-community-title'
- line 790: ' development-title'
- line 791: ' development'
- line 792: ' looking-inside-title'
- line 793: ' looking-inside'
- line 794: ' A friendly intro to the file structure and tools for p5.js development, by'
- line 795: ' Luisa Pereira.'
- line 796: ' writing-tutorial-title'
- line 797: ' writing-tutorial'
- line 798: ' writing-a-tutorial-title'
- line 799: ' writing-a-tutorial-author'
- line 800: ' writing-a-tutorial-1'
- line 801: ' We invite educators, contributors and general enthusiasts to contribute p5js'
- line 802: ' tutorials. The p5js project makes creative coding and open source'
- line 803: ' development more accessible to a diverse community and we are excited to'
- line 804: ' publish tutorials on all aspects of the development process. Our learning'
- line 805: ' materials so far include guides on learning p5, programming technique and'
- line 806: ' how to contribute to an open source project.'
- line 807: ' writing-a-tutorial-2'
- line 808: ' We welcome new written tutorial contributions and this guide outlines the'
- line 809: ' steps of how to propose, prepare and contribute.'
- line 810: ' writing-a-tutorial-how-start-title'
- line 811: ' writing-a-tutorial-how-start-1'
- line 812: ' writing-a-tutorial-how-start-2'
- line 813: ' writing-a-tutorial-how-start-3'
- line 814: ' that outlines in progress tutorials. If your topic is listed as in progress,'
- line 815: ' perhaps you can add to work being done and contribute to preparing existing'
- line 816: ' work for publication so please reach out to us.'
- line 817: ' writing-a-tutorial-how-start-4'
- line 818: ' If your topic is not already covered and is not listed as in progress,'
- line 819: ' please write a few sentences on what you propose to cover and email us this'
- line 820: ' description at education@p5js.org.'
- line 821: ' writing-a-tutorial-how-prepare-title'
- line 822: ' writing-a-tutorial-how-prepare-1'
- line 823: ' When your tutorial is ready for publication, please follow these steps to'
- line 824: ' prepare your content for the p5js website.'
- line 825: ' writing-a-tutorial-how-prepare-2'
- line 826: ' writing-a-tutorial-how-prepare-3'
- line 827: ' writing-a-tutorial-how-prepare-4'
- line 828: ' writing-a-tutorial-how-prepare-5'
- line 829: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
- line 830: ' of the p5js site. The file called index.hbs is the '
- line 831: ' writing-a-tutorial-how-prepare-6'
- line 832: ' writing-a-tutorial-how-prepare-7'
- line 833: ' writing-a-tutorial-how-prepare-8'
- line 834: ' writing-a-tutorial-how-prepare-9'
- line 835: ' tags on the page, with formatting defined by the <h1> and <h2>'
- line 836: ' tags, the <p> paragraph tags as is done shown on the'
- line 837: ' writing-a-tutorial-how-prepare-10'
- line 838: ' writing-a-tutorial-how-prepare-11'
- line 839: ' If your tutorial contains images, they are to be placed in the assets folder'
- line 840: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
- line 841: ' shown below.'
- line 842: ' writing-a-tutorial-how-prepare-12'
- line 843: ' writing-a-tutorial-embedding-title'
- line 844: ' writing-a-tutorial-embedding-1'
- line 845: ' Using p5js means you can illustrate your tutorial with animated, interactive'
- line 846: ' or editable code examples to demonstrate programming concepts. Your examples'
- line 847: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
- line 848: ' in two ways.'
- line 849: ' writing-a-tutorial-embedding-2'
- line 850: ' writing-a-tutorial-embedding-3'
- line 851: ' writing-a-tutorial-embedding-4'
- line 852: ' writing-a-tutorial-embedding-5'
- line 853: ' writing-a-tutorial-embedding-6'
- line 854: ' writing-a-tutorial-embedding-7'
- line 855: ' writing-a-tutorial-embedding-8'
- line 856: ' writing-a-tutorial-embedding-9'
- line 857: ' writing-a-tutorial-embedding-10'
- line 858: ' If the example is to be animated and/or interactive but not editable. The'
- line 859: ' p5.js sketch should be embedded into the page as an iframe as described'
- line 860: ' below.'
- line 861: ' writing-a-tutorial-iframe-title'
- line 862: ' writing-a-tutorial-iframe-1'
- line 863: ' An iframe is like creating a window through which you can explore another'
- line 864: ' page, sandboxed from the rest of your page. In this case it will be a window'
- line 865: ' to the index.html containing your p5.js sketch. '
- line 866: ' writing-a-tutorial-iframe-2'
- line 867: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
- line 868: ' folder labelled with the name of your sketch as shown in the screenshot.'
- line 869: ' This is where all the images and p5 sketches linked by iframe should be'
- line 870: ' stored.'
- line 871: ' writing-a-tutorial-iframe-3'
- line 872: ' In the subfolders containing your p5 examples there should be a sketch.js'
- line 873: ' file and the embed.html file for the sketch. '
- line 874: ' writing-a-tutorial-iframe-4'
- line 876: ' the site. If your file structure is the same as above, the path to the p5.js'
- line 877: ' library should be "../../../js/p5.min.js".'
- line 878: ' writing-a-tutorial-iframe-5'
- line 879: ' You can then embed the p5js index files as iframes in the .hbs file that'
- line 880: ' contains your tutorial content. The embed code for the iframe would then'
- line 881: ' be'
- line 882: ' writing-a-tutorial-iframe-6'
- line 883: ' Styling for the iframe (this could directly into the post or in a'
- line 884: ' stylesheet)'
- line 885: ' writing-a-tutorial-iframe-7'
- line 886: ' writing-a-tutorial-iframe-8'
- line 887: ' writing-a-tutorial-iframe-9'
- line 888: ' One thing to note is that you need to manually set the size of the iframe,'
- line 889: ' so it works best if things are a standard size.'
- line 890: ' writing-a-tutorial-iframe-10'
- line 891: ' Also note that the links to the p5.js library files do not happen from the'
- line 892: ' .eps page with all the tutorial content. Instead they will be located in the'
- line 893: ' html page that is rendering your sketch (in this case, called embed.html).'
- line 894: ' writing-a-tutorial-iframe-11'
- line 895: ' writing-a-tutorial-embed-iframe-12'
- line 896: ' writing-a-tutorial-finishing-title'
- line 897: ' writing-a-tutorial-finishing-1'
- line 898: ' Once your have finished writing your tutorial and your content has been'
- line 899: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
- line 900: ' as described above and then issue a pull request to the p5.js website'
- line 901: ' repository so we can publish your contribution!'
- line 902: ' writing-a-tutorial-finishing-2'
- line 903: ' color-description1'
- line 904: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
- line 905: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
- line 906: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
- line 907: ' color-description2'
- line 908: ' color-p1x1'
- line 909: ' In the digital world, when we want to talk about a color, precision is'
- line 910: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
- line 911: ' Color, rather, is defined as a range of numbers. Let''s start with the'
- line 912: ' simplest case'
- line 913: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
- line 914: ' gray ranging from black to white.'
- line 915: ' color-p2x1'
- line 916: ' color-p2x2'
- line 917: ' color-p2x3'
- line 918: ' color-p2x4'
- line 919: ' color-code1'
- line 920: ' background(255); // Setting the background to white '
- line 921: ' stroke(0); // Setting the outline (stroke) to black '
- line 922: ' fill(150); // Setting the interior of a shape (fill) to grey '
- line 923: ' rect(50,50,75,100); // Drawing the rectangle'
- line 924: ' color-p3x1'
- line 925: ' color-p3x2'
- line 926: ' color-p3x3'
- line 927: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
- line 928: ' important to remember that 0 is not "nothing", but rather denotes the color'
- line 929: ' black. Also, remember not to eliminate both—with '
- line 930: ' color-p3x4'
- line 931: ' color-p3x5'
- line 932: ' color-p4x1'
- line 933: ' In addition, if we draw two shapes, p5.js will always use the most recently'
- line 934: ' specified stroke and fill, reading the code from top to bottom.'
- line 935: ' color-rgb-title'
- line 936: ' color-rgb-p1x1'
- line 937: ' Remember finger painting? By mixing three "primary" colors, any color could'
- line 938: ' be generated. Swirling all colors together resulted in a muddy brown. The'
- line 939: ' more paint you added, the darker it got. Digital colors are also constructed'
- line 940: ' by mixing three primary colors, but it works differently from paint. First,'
- line 941: ' the primaries are different'
- line 942: ' with color on the screen, you are mixing light, not paint, so the mixing'
- line 943: ' rules are different as well.'
- line 944: ' color-rgb-li1'
- line 945: ' color-rgb-li2'
- line 946: ' color-rgb-li3'
- line 947: ' color-rgb-li4'
- line 948: ' color-rgb-li5'
- line 949: ' color-rgb-p2x1'
- line 950: ' This assumes that the colors are all as bright as possible, but of course,'
- line 951: ' you have a range of color available, so some red plus some green plus some'
- line 952: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
- line 953: ' While this may take some getting used to, the more you program and'
- line 954: ' experiment with RGB color, the more it will become instinctive, much like'
- line 955: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
- line 956: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
- line 957: ' the individual color elements are expressed as ranges from 0 (none of that'
- line 958: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
- line 959: ' and B. You will get the hang of RGB color mixing through experimentation,'
- line 960: ' but next we will cover some code using some common colors.'
- line 961: ' color-transparency-title'
- line 962: ' color-transparency-p1x1'
- line 963: ' In addition to the red, green, and blue components of each color, there is'
- line 964: ' an additional optional fourth component, referred to as the color''s "alpha".'
- line 965: ' Alpha means transparency and is particularly useful when you want to draw'
- line 966: ' elements that appear partially see-through on top of one another. The alpha'
- line 967: ' values for an image are sometimes referred to collectively as the "alpha'
- line 968: ' channel" of an image.'
- line 969: ' color-transparency-p2x1'
- line 970: ' It is important to realize that pixels are not literally transparent, this'
- line 971: ' is simply a convenient illusion that is accomplished by blending colors.'
- line 972: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
- line 973: ' one to a percentage of another, creating the optical perception of blending.'
- line 974: ' (If you are interested in programming "rose-colored" glasses, this is where'
- line 975: ' you would begin.)'
- line 976: ' color-transparency-p3x1'
- line 977: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
- line 978: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
- line 979: ' color-custom-ranges-title'
- line 980: ' color-custom-ranges-p1x1'
- line 981: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
- line 982: ' in p5.js, in fact, it allows us to think about color any way we like. For'
- line 983: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
- line 984: ' percentage). You can do this by specifying a custom '
- line 985: ' color-custom-ranges-p2x1'
- line 986: ' The above function says'
- line 987: ' green, and blue. The range of RGB values will be from 0 to 100."'
- line 988: ' color-custom-ranges-p3x1'
- line 989: ' Although it is rarely convenient to do so, you can also have different'
- line 990: ' ranges for each color component'
- line 991: ' color-custom-ranges-p4x1'
- line 992: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
- line 993: ' from 0 to 10, and alpha from 0 to 255."'
- line 994: ' color-custom-ranges-p5x1'
- line 995: ' Finally, while you will likely only need RGB color for all of your'
- line 996: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
- line 997: ' and brightness) mode. Without getting into too much detail, HSB color works'
- line 998: ' as follows'
- line 999: ' color-custom-ranges-li1x1'
- line 1000: ' color-custom-ranges-li1x2'
- line 1001: ' color-custom-ranges-li2x1'
- line 1002: ' color-custom-ranges-li2x2'
- line 1003: ' color-custom-ranges-li3x1'
- line 1004: ' color-custom-ranges-li3x2'
- line 1005: ' color-custom-ranges-p6x1'
- line 1006: ' color-custom-ranges-p6x2'
- line 1007: ' coordinate-system-description1'
- line 1008: ' coordinate-system-description2'
- line 1009: ' coordinate-system-description3'
- line 1010: ' coordinate-system-description4'
- line 1011: ' coordinate-system-description5'
- line 1012: ' coordinate-system-description-title'
- line 1013: ' coordinate-system-description-p1x1'
- line 1014: ' Before we begin programming with p5, we must first channel our eighth grade'
- line 1015: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
- line 1016: ' distance between two points is a good old fashioned line, and this is where'
- line 1017: ' we begin, with two points on that graph paper.'
- line 1018: ' coordinate-system-description-p2x1'
- line 1019: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
- line 1020: ' you wanted to direct a friend of yours to draw that same line, you would'
- line 1021: ' give them a shout and say "draw a line from the point one-zero to the point'
- line 1022: ' four-five, please." Well, for the moment, imagine your friend was a computer'
- line 1023: ' and you wanted to instruct this digital pal to display that same line on its'
- line 1024: ' screen. The same command applies (only this time you can skip the'
- line 1025: ' pleasantries and you will be required to employ a precise formatting). Here,'
- line 1026: ' the instruction will look like this'
- line 1027: ' coordinate-system-description-p3x1'
- line 1028: ' Even without having studied the syntax of writing code, the above statement'
- line 1029: ' should make a fair amount of sense. We are providing a command (which we'
- line 1030: ' will refer to as a "function") for the machine to follow entitled "line." In'
- line 1031: ' addition, we are specifying some arguments for how that line should be'
- line 1032: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
- line 1033: ' code as a sentence, the function is a verb and the arguments are the objects'
- line 1034: ' of the sentence. The code sentence also ends with a semicolon instead of a'
- line 1035: ' period.'
- line 1036: ' coordinate-system-description-p4x1'
- line 1037: ' The key here is to realize that the computer screen is nothing more than a'
- line 1038: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
- line 1039: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
- line 1040: ' location of a point in space. And it is our job to specify what shapes and'
- line 1041: ' colors should appear at these pixel coordinates.'
- line 1042: ' coordinate-system-description-p5x1'
- line 1043: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
- line 1044: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
- line 1045: ' pointing up and the x-axis pointing to the right (in the positive direction,'
- line 1046: ' negative down and to the left). The coordinate system for pixels in a'
- line 1047: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
- line 1048: ' at the top left with the positive direction to the right horizontally and'
- line 1049: ' down vertically.'
- line 1050: ' coordinate-system-simple-shapes-title'
- line 1051: ' coordinate-system-simple-shapes-p1x1'
- line 1052: ' The vast majority of p5 programming examples are visual in nature. These'
- line 1053: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
- line 1054: ' begin by looking at four primitive shapes.'
- line 1055: ' coordinate-system-simple-shapes-p2x1'
- line 1056: ' For each shape, we will ask ourselves what information is required to'
- line 1057: ' specify the location and size (and later color) of that shape and learn how'
- line 1058: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
- line 1059: ' assume a window with a width of 100 pixels and height of 100 pixels.'
- line 1060: ' coordinate-system-simple-shapes-p3x1'
- line 1061: ' coordinate-system-simple-shapes-p3x2'
- line 1062: ' coordinate-system-simple-shapes-p4x1'
- line 1063: ' coordinate-system-simple-shapes-p4x2'
- line 1064: ' coordinate-system-simple-shapes-p5x1'
- line 1065: ' coordinate-system-simple-shapes-p5x2'
- line 1066: ' , things become a bit more complicated. In p5, a rectangle is specified by'
- line 1067: ' the coordinate for the top left corner of the rectangle, as well as its'
- line 1068: ' width and height.'
- line 1069: ' coordinate-system-simple-shapes-p6x1'
- line 1070: ' A second way to draw a rectangle involves specifying the centerpoint, along'
- line 1071: ' with width and height. If we prefer this method, we first indicate that we'
- line 1072: ' want to use the '
- line 1073: ' coordinate-system-simple-shapes-p6x2'
- line 1074: ' coordinate-system-simple-shapes-p7x1'
- line 1075: ' Finally, we can also draw a rectangle with two points (the top left corner'
- line 1076: ' and the bottom right corner). The mode here is '
- line 1077: ' coordinate-system-simple-shapes-p7x2'
- line 1078: ' coordinate-system-simple-shapes-p8x1'
- line 1079: ' coordinate-system-simple-shapes-p8x2'
- line 1080: ' coordinate-system-simple-shapes-p8x3'
- line 1081: ' coordinate-system-simple-shapes-p8x4'
- line 1082: ' coordinate-system-simple-shapes-p8x5'
- line 1083: ' coordinate-system-simple-shapes-p8x6'
- line 1084: ' coordinate-system-simple-shapes-p9x1'
- line 1085: ' Now let''s look at what some code with shapes in more complete form, with'
- line 1086: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
- line 1087: ' to specify the width and height of the canvas.'
- line 1088: ' teach-desc'
- line 1089: test-tutorial
- line 1147: ' p5.localmessage provides a simple interface to send messages locally from'
- line 1148: ' one sketch to another for easy multi-window sketching!'
- line 1149: ' marching'
- line 1150: ' mappa'
- line 1151: ' Mappa provides a set of tools for working with static maps, tile maps, and'
- line 1152: ' geo-data. Useful when building geolocation-based visual representations.'
- line 1153: ' ml5.js'
- line 1154: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
- line 1155: ' learning algorithms and models in the browser.'
- line 1156: ' p5.play'
- line 1157: ' p5.play provides sprites, animations, input and collision functions for'
- line 1158: ' games and gamelike applications.'
- line 1159: ' p5.particle'
- line 1160: ' The Particle and Fountain objects can be used to create data-driven effects'
- line 1161: ' that are defined through user structures or JSON input and user-draw'
- line 1162: ' functions.'
- line 1163: ' p5.Riso'
- line 1164: ' p5.Riso is a library for generating files suitable for Risograph printing.'
- line 1165: ' It helps turn your sketches into multi-color prints.'
- line 1166: ' rita.js'
- line 1167: ' RiTa.js provides a set of natural language processing objects for generative'
- line 1168: ' literature.'
- line 1169: ' Rotating knobs'
- line 1170: ' p5.scenemanager'
- line 1171: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
- line 1172: ' Each scene is a like a sketch within the main sketch.'
- line 1173: ' p5.screenPosition'
- line 1174: ' p5.scribble'
- line 1175: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
- line 1176: ' on a port of the original Processing library'
- line 1177: ' p5.serial'
- line 1178: ' p5.serial enables serial communication between devices that support serial'
- line 1179: ' (RS-232) and p5 sketches running in the browser.'
- line 1180: ' Shape5'
- line 1181: ' Shape5 is a 2D primative library for elementary students who are learning to'
- line 1182: ' code for the first time.'
- line 1183: ' p5.shape.js'
- line 1184: ' p5.speech'
- line 1185: ' p5.speech provides simple, clear access to the Web Speech and Speech'
- line 1186: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
- line 1187: ' and listen.'
- line 1188: ' p5.start2d.js'
- line 1189: ' p5.tiledmap'
- line 1190: ' p5.tiledmap provides drawing and helper functions to include maps in your'
- line 1191: ' sketches.'
- line 1192: ' p5.touchgui'
- line 1193: ' tramontana'
- line 1194: ' Tramontana is a platform for easily use many devices (iOS, Android,'
- line 1195: ' tramontana Board, ...) to create interactive environments, interactive'
- line 1196: ' spaces or just prototype experiences at scale and in space.'
- line 1197: ' vida'
- line 1198: ' Vida is a simple library that adds camera (or video) based motion detection'
- line 1199: ' and blob tracking functionality to p5js.'
- line 1200: ' p5.voronoi'
- line 1201: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
- line 1202: ' your p5.js sketches.'
- line 1203: ' p5.xr'
- line 1204: ' p5.3D'
- line 1205: ' using-a-library-title'
- line 1206: ' using-a-library1'
- line 1207: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
- line 1208: ' core functionality. There are two categories of libraries. Core libraries ('
- line 1209: ' using-a-library3'
- line 1210: ' ) are part of the p5.js distribution, while contributed libraries are'
- line 1211: ' developed, owned, and maintained by members of the p5.js community.'
- line 1212: ' using-a-library4'
- line 1213: ' To include a library in your sketch, link it into your HTML file, after you'
- line 1214: ' have linked in p5.js. An example HTML file might look like this'
- line 1215: ' create-your-own-title'
- line 1216: ' create-your-own1'
- line 1217: ' create-your-own2'
- line 1218: ' create-your-own3'
- line 1219: ' create-your-own4'
- line 1220: ' If you have created a library and would like to have it included on this'
- line 1221: ' page, submit this form!'
- line 1222: '>>>>>>> ded715d43dd9dd191404d8e380ba23112f647160'
- line 1420: ' notes3'
- line 1421: ' notes4'
- line 1422: ' notes5'
- line 1423: ' contribute-title'
- line 1424: ' contribute1'
- line 1425: ' Our community is always looking for enthusiasts to help in all different'
- line 1426: ' ways.'
- line 1427: ' develop-title'
- line 1428: ' develop1'
- line 1429: ' develop2'
- line 1430: ' develop3'
- line 1431: ' develop4'
- line 1432: ' develop5'
- line 1433: ' document-title'
- line 1434: ' document1'
- line 1435: ' document2'
- line 1436: ' document3'
- line 1437: ' document4'
- line 1438: ' document5'
- line 1439: ' teach-title'
- line 1440: ' teach1'
- line 1441: ' create-title'
- line 1442: ' create1'
- line 1443: ' create2'
- line 1444: ' create3'
- line 1445: ' donate-title'
- line 1446: ' donate1'
- line 1447: ' donate2'
- line 1448: ' donate3'
- line 1449: ' contributors-conference-title'
- line 1450: ' contributors-conference1'
- line 1451: ' While most work happens online, we also convene IRL. We''ve had two'
- line 1452: ' contributors conferences held at the'
- line 1453: ' contributors-conference2'
- line 1454: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
- line 1455: ' developers, educators, and got together to advance the p5.js project.'
- line 1456: ' participants-title'
- line 1457: ' support-title'
- line 1458: ' support1'
- line 1459: ' support2'
- line 1460: ' at Carnegie Mellon University, an academic laboratory for atypical,'
- line 1461: ' anti-disciplinary, and inter-institutional research at the intersections of'
- line 1462: ' arts, science, technology, and culture.'
- line 1463: ' support3'
- line 1464: ' support4'
- line 1465: ' support5'
- line 1466: ' support6'
- line 1467: ' mailing-list-title'
- line 1468: ' mailing-list-1'
- line 1469: ' Enter your email address to receive occasional updates from the Processing'
- line 1470: ' Foundation.'
- line 1471: ' 2015contributors-conference-title'
- line 1472: ' 2015contributors-conference-date'
- line 1473: ' 2015contributors-conference1'
- line 1474: ' 2015contributors-conference2'
- line 1475: ' , advancing the code, documentation, and community outreach tools of the'
- line 1476: ' p5.js programming environment. Participants came from as far away as Hong'
- line 1477: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
- line 1478: ' professionals in the fields of creative technology, interaction design, and'
- line 1479: ' new-media arts, but the group also included a half-dozen undergraduate and'
- line 1480: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
- line 1481: ' 2015contributors-conference3'
- line 1482: ' 2015contributors-conference-diversity-title'
- line 1483: ' 2015contributors-conference-diversity1'
- line 1484: ' Alongside technical development, one of the main focuses of this conference'
- line 1485: ' was outreach, community, and diversity. The conference began with a panel'
- line 1486: ' 2015contributors-conference-diversity2'
- line 1487: ' Diversity'
- line 1488: ' the Internet'
- line 1489: ' 2015contributors-conference-diversity3'
- line 1490: ' 2015contributors-conference-diversity4'
- line 1491: ' 2015contributors-conference-diversity5'
- line 1492: ' 2015contributors-conference-diversity6'
- line 1493: ' 2015contributors-conference-diversity7'
- line 1494: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
- line 1495: ' Mellon University. Speakers included'
- line 1496: ' 2015contributors-conference-diversity8'
- line 1497: ' 2015contributors-conference-diversity9'
- line 1498: ' 2015cc_1'
- line 1499: ' 2015cc_2'
- line 1500: ' 2015cc_3'
- line 1501: ' 2015cc_4'
- line 1502: ' Woman expressively speaks into a microphone while two male collaborators'
- line 1503: ' look on'
- line 1504: ' 2015cc_5'
- line 1505: ' 2015cc_6'
- line 1506: ' 2015cc_7'
- line 1507: ' Participants sit in a circle around a white board with sticky notes on it'
- line 1508: ' while a female student speaks into a microphone'
- line 1509: ' 2015cc_8'
- line 1510: ' Participants sit around a table looking at each others laptops and compare'
- line 1511: ' code'
- line 1512: ' 2015cc_9'
- line 1513: ' 2015cc_10'
- line 1514: ' Woman speaking into a microphone about valuing different skill sets while a'
- line 1515: ' group of participants with laptops look at her powerpoint in a classroom'
- line 1516: ' 2015cc_11'
- line 1518: ' the stage and another three are skyping in on the stage screen'
- line 1519: ' 2015cc_12'
- line 1520: ' 2015cc_13'
- line 1521: ' 2015cc_14'
- line 1522: ' 2015cc_15'
- line 1523: ' 2019contributors-conference-title'
- line 1524: ' 2019contributors-conference-date'
- line 1525: ' 2019contributors-conference1'
- line 1526: ' 2019contributors-conference2'
- line 1529: ' Comprising a diverse range of participants within the fields of creative'
- line 1530: ' technology, interaction design, and new media arts, the conference was aimed'
- line 1531: ' at fostering dialogue through a multidisciplinary lens. Working groups'
- line 1532: ' focused on several topic areas'
- line 1533: ' Landscape of Creative Tech; and Internationalization.'
- line 1534: ' 2019contributors-conference3'
- line 1535: ' 2019contributors-conference4'
- line 1536: ' outputs'
- line 1538: ' . An implementation of highly flexible triangle, square, hexagon, and'
- line 1539: ' octagon girds for p5.js. Created by Aren Davey.'
- line 1540: ' output2'
- line 1541: ' . A set of template files for building a multi-device, multiplayer game'
- line 1542: ' where multiple clients can connect to a specified host page. Created by L05.'
- line 1543: ' output3'
- line 1544: ' output3-1'
- line 1666: ' books-title'
- line 1667: ' book-1-title'
- line 1668: ' book-1-authors'
- line 1712: ' book-4-order-b'
- line 1713: ' book-5-title'
- line 1714: ' book-5-authors'
- line 1715: ' book-5-publisher'
- line 1716: ' book-5-pages'
- line 1717: ' book-5-type'
- line 1718: ' book-5-description'
- line 1719: ' Learn coding from scratch in a highly engaging and visual manner using the'
- line 1720: ' vastly popular JavaScript with the programming library p5.js. The skills you'
- line 1721: ' will acquire from this book are highly transferable to a myriad of'
- line 1722: ' industries and can be used towards building web applications, programmable'
- line 1723: ' robots, or generative art.'
- line 1724: ' book-5-order-a'
- line 1725: ' book-5-order-b'
- line 1726: ' book-6-title'
- line 1727: ' book-6-authors'
- line 1728: ' book-6-publisher'
- line 1729: ' book-6-pages'
- line 1730: ' book-6-type'
- line 1731: ' book-6-description'
- line 1732: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
- line 1733: ' of aesthetic programming, engaging with learning to program as a way to '
- line 1734: ' understand and question existing technological objects and paradigms, '
- line 1735: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
- line 1736: ' book-6-order-a'
- line 1737: ' book-6-order-b'
- line 1766: ' Examples'
- line 1767: ' back-examples'
- line 1768: ' Structure'
- line 1769: ' Form'
- line 1770: ' Data'
- line 1771: ' Arrays'
- line 2005: ' creator-from-roni-cantor'
- line 2006: ' project-links'
- line 2007: ' project-links-text-1-roni-cantor'
- line 2008: ' project-links-text-2-roni-cantor'
- line 2009: ' project-q-1-1'
- line 2010: ' project-q-1-2'
- line 2011: ' project-a-1-1-roni-cantor'
- line 2012: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
- line 2013: ' years of coding and making robots, I decided to take a break and play with'
- line 2014: ' some more traditional forms of art—while still coding and playing with'
- line 2015: ' robots.'
- line 2016: ' project-a-1-2-roni-cantor'
- line 2017: ' project-a-1-3-roni-cantor'
- line 2018: ' project-a-1-4-roni-cantor'
- line 2019: ' project-q-2'
- line 2020: ' project-a-2-1-roni-cantor'
- line 2021: ' I used p5.js in this project to generate the sine wave and lerp (linear'
- line 2022: ' interpolation) formulas and display the visuals in the'
- line 2023: ' project-a-2-2-roni-cantor'
- line 2024: ' . I then used a feature in my code that exported my programmed graphic into'
- line 2025: ' an'
- line 2026: ' project-a-2-3-roni-cantor'
- line 2027: ' project-a-2-4-roni-cantor'
- line 2028: ' —so that it understood where to draw the lines that I programmed. I sent'
- line 2029: ' this information to the plotter with a program called'
- line 2030: ' project-a-2-5-roni-cantor'
- line 2031: ' project-q-3'
- line 2032: ' project-a-3-roni-cantor'
- line 2033: ' project-q-4'
- line 2034: ' Did you face any challenges working on this project? If so, how did you'
- line 2035: ' overcome them?'
- line 2036: ' project-a-4-roni-cantor'
- line 2037: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
- line 2038: ' benefited from the people around me who had used p5 before, as well as'
- line 2039: ' online guides and forums.'
- line 2040: ' project-q-5'
- line 2041: ' project-a-5-roni-cantor'
- line 2042: ' project-q-6'
- line 2043: ' project-a-6-roni-cantor'
- line 2044: ' project-resources'
- line 2045: ' creator-from-qianqian'
- line 2046: ' interview-link-qianqian'
- line 2047: ' project-a-1-1-qianqian'
- line 2048: ' project-a-1-2-qianqian'
- line 2049: ' My partner introduced me to p5.js, which I learned mainly by watching free'
- line 2050: ' online video tutorials. My first p5.js project was drawing some shapes with'
- line 2051: ' different colors.'
- line 2052: ' project-a-2-1-qianqian'
- line 2053: ' This project started with an idea of teaching my mom, who lives in China and'
- line 2054: ' doesn’t speak English, to code with p5.js. This project was difficult on'
- line 2055: ' multiple levels, and I wanted to start by identifying the main reasons why'
- line 2056: ' it’s more challenging for someone like my mother to learn to code—primarily'
- line 2057: ' due to the lack of free creative coding education resources. Most of the'
- line 2058: ' free resources to learn creative coding are unavailable in China. The p5.js'
- line 2059: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
- line 2060: ' inaccessible in China because of internet censorship.'
- line 2061: ' project-a-2-2-qianqian'
- line 2062: ' project-a-2-3-qianqian'
- line 2063: ' , but the more I watched coding tutorials online, the more I realized how'
- line 2064: ' difficult it is to find other womxn and people of color teaching coding,'
- line 2065: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
- line 2066: ' creative coding.'
- line 2067: ' project-a-2-4-qianqian'
- line 2068: ' I am working on opening up the video channels to other Chinese creatives who'
- line 2069: ' want to contribute to the educational resource together, like interviews and'
- line 2070: ' guest tutorials. If you are interested in teaching/talking about creative'
- line 2071: ' coding in Mandarin, HMU!'
- line 2072: ' project-a-3-1-qianqian'
- line 2073: ' project-a-3-2-qianqian'
- line 2074: ' project-a-4-1-qianqian'
- line 2075: ' Learning to code in a second language was difficult and the lack of'
- line 2076: ' community made this process even harder. I hope to speak from my experience'
- line 2077: ' as a beginner and someone who once felt like an outsider to the creative'
- line 2078: ' coding and video tutorial world.'
- line 2079: ' project-a-4-2-qianqian'
- line 2080: ' I spend a lot of time researching the latest technology for my videos. In'
- line 2081: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
- line 2082: ' encourage others that it doesn’t take a lot of expensive gears to get'
- line 2083: ' started making instructional videos.'
- line 2084: ' project-a-4-3-qianqian'
- line 2085: ' Another issue I came across was my own fear of putting myself online. I'
- line 2086: ' first had to get over my anxiety of making mistakes in the videos or'
- line 2087: ' receiving negative comments online. Often womxn and people of color are'
- line 2088: ' targets for online harassment. I’m hoping to help set an example for other'
- line 2089: ' womxn and people of color that it’s ok to put yourselves online and'
- line 2090: ' strengthen your communities by sharing your knowledge. Eventually, we will'
- line 2091: ' be able to stop online harassment by creating strong diverse communities.'
- line 2092: ' project-a-5-1-qianqian'
- line 2093: ' project-a-5-2-qianqian'
- line 2094: ' creator-from-phuong'
- line 2095: ' project-a-1-1-phuong'
- line 2096: ' link-1-phuong'
- line 2097: ' link-2-phuong'
- line 2098: ' link-3-phuong'
- line 2099: ' project-a-1-2-phuong'
- line 2100: ' project-a-1-3-phuong'
- line 2101: ' I was taking a course at the School of Machines in Berlin this summer'
- line 2102: ' called! "'
- line 2103: ' project-a-1-4-phuong'
- line 2104: ' project-a-2-1-phuong'
- line 2105: ' I used p5.js to work on the visual part of the game. The animation sprites'
- line 2106: ' for Airi and the ghosts were drawn on an iPad app called'
- line 2107: ' project-a-2-2-phuong'
- line 2108: ' project-a-2-3-phuong'
- line 2109: ' project-a-2-4-phuong'
- line 2110: ' p5-sketch-by-chjno-phuong'
- line 2111: ' project-a-2-5-phuong'
- line 2112: ' . I set a condition so whenever the word "pew" or a mouse click was'
- line 2113: ' detected, the scrolling speed would change to make an illusion of Airi'
- line 2114: ' flying up. When the user does not do anything, the scrolling speed is'
- line 2115: ' negative, which makes it look like Airi is falling down.'
- line 2116: ' project-a-2-6-phuong'
- line 2117: ' project-a-2-7-phuong'
- line 2118: ' project-a-3-1-phuong'
- line 2119: ' I really love how easily you can create, manipulate, and delete HTML blocks'
- line 2120: ' and classes with the'
- line 2121: ' project-a-3-2-phuong'
- line 2122: ' project-a-3-3-phuong'
- line 2123: ' project-a-3-4-phuong'
- line 2124: ' project-a-4-1-phuong'
- line 2125: ' There were a lot of challenges simply because p5.js was something new to me.'
- line 2126: ' I did not work much with JavaScript in general before. Reading documentation'
- line 2127: ' and searching for similar examples helped a lot.'
- line 2128: ' project-a-5-1-phuong'
- line 2129: ' school-of-machines-phuong'
- line 2130: ' project-a-5-2-phuong'
- line 2131: ' ! They try hard to connect the most creative people in the world and they do'
- line 2132: ' it well so far. ❤️'
- line 2133: ' pronouns-male'
- line 2134: ' creator-from-chung'
- line 2135: ' link-1-casey-louise'
- line 2136: ' link-2-casey-louise'
- line 2137: ' link-1-chung'
- line 2138: ' link-2-chung'
- line 2139: ' link-3-chung'
- line 2140: ' project-a-1-1-chung'
- line 2141: ' I am a graphic designer and a faculty member at Maryland Institute College'
- line 2142: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
- line 2143: ' and motion graphics.'
- line 2144: ' project-a-1-2-chung'
- line 2145: ' project-a-1-3-chung'
- line 2146: ' project-a-2-1-chung'
- line 2147: ' This summer, I gave myself a challenge of making typographic posters with'
- line 2148: ' coding, and this is one of the posters I made. I didn’t know until very'
- line 2149: ' recently that I could use motion sensor data with p5.js. I was also watching'
- line 2150: ' dan-shiffman-matterjs-tutorial'
- line 2151: ' project-a-2-2-chung'
- line 2152: ' project-a-3-1-chung'
- line 2153: ' There are many things I love about p5.js such as the online community and'
- line 2154: ' beginner friendliness. What I really like right now is the'
- line 2155: ' project-a-3-2-chung'
- line 2156: ' , with which I can not only work online for myself but also share URLs'
- line 2157: ' quickly in the present mode. For this project in particular, I had to do a'
- line 2158: ' lot of testing on my phone, and it was much easier and quicker than'
- line 2159: ' committing to GitHub.'
- line 2160: ' project-a-4-1-chung'
- line 2161: ' project-a-4-2-chung'
- line 2162: ' project-a-4-3-chung'
- line 2163: ' project-a-5-1-chung'
- line 2164: ' As mentioned above, if you want to render out frames and video files out of'
- line 2165: ' p5.js sketches, check out my'
- line 2166: ' project-a-5-2-chung'
- line 2167: ' creator-from-casey-louise'
- line 2168: ' project-a-1-1-casey-louise'
- line 2169: ' Casey'
- line 2170: ' interactive spaces, physical and digital.'
- line 2171: ' project-a-1-2-casey-louise'
- line 2172: ' Louise'
- line 2173: ' interactive spaces based on sensor technologies.'
- line 2174: ' project-a-1-3-casey-louise'
- line 2175: ' Casey'
- line 2176: ' I had been dabbling in'
- line 2177: ' project-a-1-4-casey-louise'
- line 2178: ' project-a-1-5-casey-louise'
- line 2179: ' Louise'
- line 2180: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
- line 2181: ' me.'
- line 2182: ' project-a-2-1-casey-louise'
- line 2183: ' Casey'
- line 2184: ' curious if I could use them in p5.js. Then I heard about a grant for open'
- line 2185: ' source, storytelling, and learning resource projects at ITP called'
- line 2186: ' project-a-2-2-casey-louise'
- line 2187: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
- line 2188: ' decided to figure out how they''re implemented in p5.js and create a resource'
- line 2189: ' for others to learn. When I told Louise about the project, she was'
- line 2190: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
- line 2191: ' great about making sure the project is a learning resource and not just a'
- line 2192: ' collection of examples.'
- line 2193: ' project-a-3-1-casey-louise'
- line 2194: ' project-a-3-2-casey-louise'
- line 2195: ' project-a-3-3-casey-louise'
- line 2196: ' project-a-3-4-casey-louise'
- line 2197: ' project-a-3-5-casey-louise'
- line 2198: ' project-a-4-1-casey-louise'
- line 2199: ' Casey'
- line 2200: ' reaching out to amazing people, asking questions, and asking for permission'
- line 2201: ' to use their examples in our project.'
- line 2202: ' adam-ferris-repo-casey-louise'
- line 2203: ' project-a-4-2-casey-louise'
- line 2204: ' project-a-4-3-casey-louise'
- line 2205: ' project-a-4-4-casey-louise'
- line 2206: ' webgl-casey-louise'
- line 2207: ' project-a-4-5-casey-louise'
- line 2208: ' project-a-4-6-casey-louise'
- line 2209: ' Louise'
- line 2210: ' Luckily, there were some very well-documented examples on GitHub by Adam'
- line 2211: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
- line 2212: ' understand how to implement it, so it was as much a technical challenge as'
- line 2213: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
- line 2214: ' inspiration from the way the'
- line 2215: ' openframeworks-book-casey-louise'
- line 2216: ' project-a-4-7-casey-louise'
- line 2217: ' project-a-5-1-casey-louise'
- line 2218: ' project-a-5-2-casey-louise'
- line 2219: ' pronouns-nonbinary'
- line 2220: ' creator-from-moon'
- line 2221: ' posters-by'
- line 2222: ' project-a-1-1-moon'
- line 2223: ' Moon'
- line 2224: ' summer, I taught a graphic design course in the University of Georgia'
- line 2225: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
- line 2226: ' planning to teach and to study digital platforms at UGA.'
- line 2227: ' project-a-1-2-moon'
- line 2228: ' project-a-1-3-moon'
- line 2229: ' project-a-1-4-moon'
- line 2230: ' pcd-la-moon'
- line 2231: ' project-a-1-5-moon'
- line 2232: ' . They helped me with the tools and logics of p5.js. It was an excellent'
- line 2233: ' teaching and learning experience.'
- line 2234: ' project-a-2-1-moon'
- line 2235: ' codetrain-moon'
- line 2236: ' project-a-2-2-moon'
- line 2237: ' p5-reference-moon'
- line 2238: ' project-a-2-3-moon'
- line 2239: ' project-a-3-1-moon'
- line 2240: ' project-a-3-2-moon'
- line 2241: ' project-a-3-3-moon'
- line 2242: ' project-a-3-4-moon'
- line 2243: ' . I was able to use and to teach this tool to visualize various ideas about'
- line 2244: ' time in motion.'
- line 2245: ' project-a-4-1-moon'
- line 2246: ' It was challenging for me, a beginner, to understand the overall structure'
- line 2247: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
- line 2248: ' couple of times, and then I drew a chart to memorize and to teach the way I'
- line 2249: ' understood the p5.js structure and code with strong constraints I set up. It'
- line 2250: ' was an excellent teaching and learning experience.'
- line 2251: ' project-a-5-1-moon'
- line 2252: ' project-a-5-2-moon'
- line 2253: teach
- line 2254: ' teach-title2'
- line 2255: ' teach-intro1'
- line 2256: ' Every teaching has its own unique goals, messages, conditions, and'
- line 2257: ' environments. '
- line 2258: ' teach-intro2'
- line 2259: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
- line 2260: ' better connect the p5.js learner and educator communities around the world. '
- line 2261: ' teach-intro3'
- line 2262: ' teach-intro4'
- line 2263: ' teach-heading'
- line 2264: ' teach-search-filter'
- line 2265: ' teach-filter1'
- line 2266: ' teach-filter1-label1'
- line 2267: ' teach-filter1-label2'
- line 2268: ' teach-filter1-label3'
- line 2269: ' teach-filter1-label4'
- line 2270: ' teach-filter1-label5'
- line 2271: ' teach-filter1-label6'
- line 2272: ' teach-filter1-label7'
- line 2273: ' teach-filter1-label8'
- line 2274: ' teach-filter1-label9'
- line 2275: ' teach-filter1-label10'
- line 2276: ' teach-filter1-label11'
- line 2277: ' teach-filter1-label12'
- line 2278: ' teach-filter1-label13'
- line 2279: ' teach-filter1-label14'
- line 2280: ' teach-filter1-label15'
- line 2281: ' teach-filter1-label16'
- line 2282: ' teach-filter2'
- line 2283: ' teach-filter2-label1'
- line 2284: ' teach-filter2-label2'
- line 2285: ' teach-filter2-label3'
- line 2286: ' teach-filter2-label4'
- line 2287: ' teach-filter2-label5'
- line 2288: ' teach-filter2-label6'
- line 2289: ' teach-filter2-label7'
- line 2290: ' teach-filter3'
- line 2291: ' teach-filter4'
- line 2292: ' teach-filter4-label1'
- line 2293: ' teach-filter4-label2'
- line 2294: ' teach-filter4-label3'
- line 2295: ' teach-case-subtitle1'
- line 2296: ' teach-case-subtitle2'
- line 2297: ' teach-case-subtitle3'
- line 2298: ' teach-case-subtitle4'
- line 2299: ' teach-case-subtitle5'
- line 2300: ' teach-case1-title'
- line 2301: ' teach-case1-lead-name'
- line 2302: ' teach-case1-content1'
- line 2303: ' teach-case1-content1-1'
- line 2304: ' teach-case1-content2'
- line 2305: ' teach-case1-content3'
- line 2306: ' teach-case1-content4'
- line 2307: ' To introduce a new public to programming through fun and compelling'
- line 2308: ' examples. '
- line 2309: ' teach-case1-content5'
- line 2310: ' Method'
- line 2311: ' each times. The students were using (Ubuntu) machines with the p5.js web'
- line 2312: ' editor. I was teaching using a video projector as well as a board.'
- line 2313: ' teach-case1-content5-1'
- line 2314: ' Materials'
- line 2315: ' links available in '
- line 2316: ' teach-case2-title'
- line 2317: ' Making The Thing that Makes the Thing'
- line 2318: ' with p5.js'
- line 2319: ' teach-case2-lead-name'
- line 2320: ' teach-case2-content1'
- line 2321: ' teach-case2-content1-1'
- line 2322: ' teach-case2-content2'
- line 2323: ' Our participants included art/design students & professionals, creative'
- line 2324: ' coding enthusiasts. We had close to 50 participants.'
- line 2325: ' teach-case2-content3'
- line 2326: ' teach-case2-content4'
- line 2327: ' To explore generative art & design and recreate some classical works'
- line 2328: ' with p5.js. '
- line 2329: ' teach-case2-content5'
- line 2330: ' teach-case2-content5-1'
- line 2331: ' teach-case2-content5-2'
- line 2332: ' teach-case2-content5-3'
- line 2333: ' teach-case2-content5-4'
- line 2334: ' teach-case2-content5-5'
- line 2335: ' teach-case3-title'
- line 2336: ' teach-case3-lead-name'
- line 2337: ' teach-case3-speech'
- line 2338: ' teach-case3-content1'
- line 2339: ' teach-case3-content1-1'
- line 2340: ' teach-case3-content2'
- line 2341: ' Our participants included art/design students & professionals, creative'
- line 2342: ' coding enthusiasts. We had close to 50 participants.'
- line 2343: ' teach-case3-content3'
- line 2344: ' teach-case3-content4'
- line 2345: ' To build a teacher and student community around p5 for middle and high'
- line 2346: ' school.'
- line 2347: ' teach-case3-content5'
- line 2348: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
- line 2349: ' methods and materials. Most used some sort of slides or documentation, some'
- line 2350: ' live coding using an editor, with work time for participant to remix.'
- line 2351: ' teach-case3-content5-1'
- line 2352: ' teach-case3-content5-2'
- line 2353: ' teach-case3-content5-3'
- line 2354: ' teach-case4-title'
- line 2355: ' teach-case4-lead-name'
- line 2356: ' teach-case4-speech'
- line 2357: ' teach-case4-content1'
- line 2358: ' teach-case4-content1-1'
- line 2359: ' teach-case4-content2'
- line 2360: ' I had around 16 students in the workshop, and a team including 3 people from'
- line 2361: ' the PlusCode festival, and one person at the venue.'
- line 2362: ' teach-case4-content3'
- line 2363: ' teach-case4-content4'
- line 2364: ' Introduction to beginners and artists of graphic web programming and open'
- line 2365: ' source, using p5.js, in Spanish '
- line 2366: ' teach-case4-content5'
- line 2367: ' teach-case4-content5-1'
- line 2368: ' teach-case4-content5-2'
- line 2369: ' teach-case4-content5-3'
- line 2370: ' teach-case4-content5-4'
- line 2371: ' teach-case5-title'
- line 2372: ' teach-case5-lead-name'
- line 2373: ' teach-case5-speech'
- line 2374: ' My greatest source of uncertainty in developing the workshop was whether it'
- line 2375: ' was trying to teach art to programmers or to teach programming to artists.'
- line 2376: ' teach-case5-content1'
- line 2377: ' teach-case5-content1-1'
- line 2378: ' teach-case5-content1-2'
- line 2379: ' teach-case5-content1-3'
- line 2380: ' teach-case5-content2'
- line 2381: ' teach-case5-content3'
- line 2382: ' teach-case5-content4'
- line 2383: ' To introduce p5.js to artists with little or no programming experience and'
- line 2384: ' to suggest one way an analogue practice can migrate to a digital form.'
- line 2385: ' teach-case5-content5'
- line 2386: ' A printed workbook with activities that used the p5.js web editor to show'
- line 2387: ' how translate an physical drawing into a digital drawing.'
- line 2388: ' teach-case5-content5-1'
- line 2389: ' teach-case5-content5-2'
- line 2390: ' teach-case5-content5-3'
- line 2391: ' teach-case6-title'
- line 2392: ' teach-case6-lead-name'
- line 2393: ' teach-case6-speech'
- line 2394: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
- line 2395: ' your everyday life!'
- line 2396: ' teach-case6-content1'
- line 2397: ' teach-case6-content1-1'
- line 2398: ' teach-case6-content2'
- line 2399: ' teach-case6-content3'
- line 2400: ' teach-case6-content4'
- line 2401: ' teach-case6-content5'
- line 2402: ' teach-case6-content5-1'
- line 2403: ' teach-case6-content5-2'
- line 2404: ' teach-case6-content5-3'
- line 2405: ' teach-case6-content5-4'
- line 2406: ' teach-case6-content5-5'
- line 2407: ' teach-case7-title'
- line 2408: ' teach-case7-lead-name'
- line 2409: ' teach-case7-speech'
- line 2410: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
- line 2411: ' to give it a try!'
- line 2412: ' teach-case7-content1'
- line 2413: ' teach-case7-content1-1'
- line 2414: ' teach-case7-content2'
- line 2415: ' teach-case7-content3'
- line 2416: ' teach-case7-content4'
- line 2417: ' teach-case7-content5'
- line 2418: ' teach-case7-content5-1'
- line 2419: ' teach-case8-title'
- line 2420: ' teach-case8-lead-name'
- line 2421: ' teach-case8-content1'
- line 2422: ' teach-case8-content1-1'
- line 2423: ' teach-case8-content2'
- line 2424: ' teach-case8-content3'
- line 2425: ' teach-case8-content4'
- line 2426: ' teach-case8-content5'
- line 2427: ' teach-case8-content5-1'
- line 2428: ' teach-case8-content5-2'
- line 2429: ' teach-case9-title'
- line 2430: ' teach-case9-lead-name'
- line 2431: ' teach-case9-content1'
- line 2432: ' teach-case9-content1-1'
- line 2433: ' teach-case9-content2'
- line 2434: ' Students at Interactive Telecommunications Program, New York University. 16'
- line 2435: ' people.'
- line 2436: ' teach-case9-content3'
- line 2437: ' teach-case9-content4'
- line 2438: ' The goal of this class is to learn and understand common machine learning'
- line 2439: ' techniques and apply them to generate creative outputs in the browser using'
- line 2440: ' ml5.js and p5.js.'
- line 2441: ' teach-case9-content5'
- line 2442: ' This class is a mix of lectures, coding sessions, group discussions, and'
- line 2443: ' presentations. I used '
- line 2444: ' teach-case9-content5-1'
- line 2445: ' teach-case9-content5-2'
- line 2446: ' teach-case9-content5-3'
- line 2447: ' teach-case10-title'
- line 2448: ' teach-case10-lead-name'
- line 2449: ' teach-case10-content1'
- line 2450: ' teach-case10-content3'
- line 2451: ' teach-case10-content4'
- line 2452: ' Introduce learners (potentially with no coding experiences at all) to the'
- line 2453: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
- line 2454: ' and enable them to pursue own projects in a safe environment.'
- line 2455: ' teach-case10-content5'
- line 2456: ' p5.js source code (for the introductory project), JavaScript source code'
- line 2457: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
- line 2458: ' .pdf format, all hosted publicly on GitHub. '
- line 2459: ' teach-case10-content5-1'
- line 2460: ' teach-case10-content5-2'
- line 2461: ' teach-case11-title'
- line 2462: ' teach-case11-lead-name'
- line 2463: ' teach-case11-content1'
- line 2464: ' teach-case11-content1-1'
- line 2465: ' teach-case11-content2'
- line 2466: ' teach-case11-content3'
- line 2467: ' teach-case11-content4'
- line 2468: ' Over the course of three workshops, we will draw and create patterns using'
- line 2469: ' p5.js, an open-source graphical library; we will learn and apply'
- line 2470: ' computational concepts to transform patterns and finally, we will bring a'
- line 2471: ' weaving to life with electronic microcontrollers.'
- line 2472: ' teach-case11-content5'
- line 2473: ' teach-case11-content5-1'
- line 2474: ' Materials'
- line 2475: ' pattern weaving tool.'
- line 2476: ' teach-case11-content5-2'
- line 2477: ' teach-case11-content5-3'
- line 2478: ' teach-case11-content5-4'
- line 2479: ' teach-case11-content5-5'
- line 2480: ' teach-case12-title'
- line 2481: ' teach-case12-lead-name'
- line 2482: ' teach-case12-speech'
- line 2483: ' I''m working on a new series of coding class for Disabled students in South'
- line 2484: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
- line 2485: ' workshops in December 2020. The project is supported by the Open Society'
- line 2486: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
- line 2487: ' Center.'
- line 2488: ' teach-case12-content1'
- line 2489: ' teach-case12-content1-1'
- line 2490: ' teach-case12-content2'
- line 2491: ' teach-case12-content3'
- line 2492: ' teach-case12-content4'
- line 2493: ' To help Deaf and Hard of Hearing students learn about computer programming'
- line 2494: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
- line 2495: ' teach-case12-content5'
- line 2496: ' We used p5.js Web editor and code examples on the website. We also used'
- line 2497: ' dice, playing cards and various paper tools to help students learn about'
- line 2498: ' coding concepts.'
- line 2499: ' teach-case12-content5-1'
- line 2500: ' teach-case12-content5-2'
- line 2501: ' teach-case13-title'
- line 2502: ' teach-case13-lead-name'
- line 2503: ' teach-case13-speech'
- line 2504: ' I''m working on a new series of coding class for Disabled students in South'
- line 2505: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
- line 2506: ' workshops in December 2020. The project is supported by the Open Society'
- line 2507: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
- line 2508: ' Center.'
- line 2509: ' teach-case13-content1'
- line 2510: ' teach-case13-content1-1'
- line 2511: ' teach-case13-content2'
- line 2512: ' teach-case13-content3'
- line 2513: ' teach-case13-content4'
- line 2514: ' Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
- line 2515: ' teach-case13-content5'
- line 2516: ' Website, p5.js editor.'
- line 2517: ' teach-case13-content5-1'
- line 2540: ' teach-case14-title'
- line 2541: ' teach-case14-lead-name'
- line 2542: ' teach-case14-speech'
- line 2543: ' The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
- line 2544: ' teach-case14-content1'
- line 2545: ' teach-case14-content1-1'
- line 2546: ' teach-case14-content1-2'
- line 2547: ' teach-case14-content2'
- line 2548: ' teach-case14-content3'
- line 2549: ' teach-case14-content4'
- line 2550: ' To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,'
- line 2551: ' the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
- line 2552: ' teach-case14-content5'
- line 2553: ' p5.js, p5 web editor, ml5.js, and installations. '
- line 2554: ' teach-case14-content5-1'
- line 2555: ' 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
- line 2556: ' teach-case14-content5-2'
- line 2557: ' 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
- line 1623: ' teach-case17-speech'
- line 1624: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
- line 1625: ' teach-case17-content1'
- line 1626: ' teach-case17-content1-1'
- line 1627: ' teach-case17-content2'
- line 1628: ' teach-case17-content3'
- line 1629: ' teach-case17-content4'
- line 1630: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
- line 1631: ' teach-case17-content5'
- line 1632: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
- line 1633: ' teach-case17-content5-1'
- 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 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'
@@ -3666,6 +2101,12 @@ ko:
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
+ line 357: ' link-2-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 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'
@@ -3675,9 +2116,6 @@ ko:
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'
@@ -3686,7 +2124,6 @@ ko:
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'
@@ -3695,11 +2132,9 @@ ko:
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'
@@ -3708,7 +2143,6 @@ ko:
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'
@@ -3716,7 +2150,6 @@ ko:
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'
@@ -3746,25 +2179,594 @@ ko:
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 262: ' environment2'
+ line 263: ' environment3'
+ line 264: ' environment4'
+ line 278: ' environment10'
+ 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!
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 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 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'
@@ -3811,6 +2813,213 @@ ko:
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'
+ line 1478: ' develop5'
+ line 1479: ' document-title'
+ line 1480: ' document1'
+ line 1481: ' document2'
+ line 1482: ' document3'
+ line 1483: ' document4'
+ line 1484: ' document5'
+ line 1485: ' teach-title'
+ line 1486: ' teach1'
+ line 1487: ' create-title'
+ line 1488: ' create1'
+ line 1489: ' create2'
+ line 1490: ' create3'
+ line 1491: ' donate-title'
+ line 1492: ' donate1'
+ line 1493: ' donate2'
+ line 1494: ' donate3'
+ line 1495: ' contributors-conference-title'
+ line 1496: ' contributors-conference1'
+ line 1497: ' While most work happens online, we also convene IRL. We''ve had two'
+ line 1498: ' contributors conferences held at the'
+ line 1499: ' contributors-conference2'
+ line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
+ line 1501: ' developers, educators, and got together to advance the p5.js project.'
+ line 1502: ' participants-title'
+ line 1503: ' support-title'
+ line 1504: ' support1'
+ line 1505: ' support2'
+ line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,'
+ line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of'
+ line 1508: ' arts, science, technology, and culture.'
+ line 1509: ' support3'
+ line 1510: ' support4'
+ line 1511: ' support5'
+ line 1512: ' support6'
+ line 1513: ' mailing-list-title'
+ line 1514: ' mailing-list-1'
+ line 1515: ' Enter your email address to receive occasional updates from the Processing'
+ line 1516: ' Foundation.'
+ line 1517: ' 2015contributors-conference-title'
+ line 1518: ' 2015contributors-conference-date'
+ line 1519: ' 2015contributors-conference1'
+ line 1520: ' 2015contributors-conference2'
+ line 1521: ' , advancing the code, documentation, and community outreach tools of the'
+ line 1522: ' p5.js programming environment. Participants came from as far away as Hong'
+ line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
+ line 1524: ' professionals in the fields of creative technology, interaction design, and'
+ line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and'
+ line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
+ line 1527: ' 2015contributors-conference3'
+ line 1528: ' 2015contributors-conference-diversity-title'
+ line 1529: ' 2015contributors-conference-diversity1'
+ line 1530: ' Alongside technical development, one of the main focuses of this conference'
+ line 1531: ' was outreach, community, and diversity. The conference began with a panel'
+ line 1532: ' 2015contributors-conference-diversity2'
+ line 1533: ' Diversity'
+ line 1534: ' the Internet'
+ line 1535: ' 2015contributors-conference-diversity3'
+ line 1537: ' 2015contributors-conference-diversity5'
+ line 1538: ' 2015contributors-conference-diversity6'
+ line 1539: ' 2015contributors-conference-diversity7'
+ line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
+ line 1541: ' Mellon University. Speakers included'
+ line 1542: ' 2015contributors-conference-diversity8'
+ line 1543: ' 2015contributors-conference-diversity9'
+ line 1545: ' 2015cc_2'
+ line 1546: ' 2015cc_3'
+ line 1547: ' 2015cc_4'
+ line 1548: ' Woman expressively speaks into a microphone while two male collaborators'
+ line 1549: ' look on'
+ line 1550: ' 2015cc_5'
+ line 1551: ' 2015cc_6'
+ line 1553: ' Participants sit in a circle around a white board with sticky notes on it'
+ line 1554: ' while a female student speaks into a microphone'
+ line 1555: ' 2015cc_8'
+ line 1556: ' Participants sit around a table looking at each others laptops and compare'
+ line 1557: ' code'
+ line 1558: ' 2015cc_9'
+ line 1559: ' 2015cc_10'
+ line 1561: ' group of participants with laptops look at her powerpoint in a classroom'
+ line 1562: ' 2015cc_11'
+ line 1563: ' Woman speaks at a podium in an auditorium while three participants sit on'
+ line 1564: ' the stage and another three are skyping in on the stage screen'
+ line 1565: ' 2015cc_12'
+ line 1566: ' 2015cc_13'
+ line 1567: ' 2015cc_14'
+ line 1569: ' 2019contributors-conference-title'
+ line 1570: ' 2019contributors-conference-date'
+ line 1571: ' 2019contributors-conference1'
+ line 1572: ' 2019contributors-conference2'
+ line 1573: ' , advancing the code, documentation, and community outreach tools and'
+ line 1574: ' exploring the current landscape of the p5.js programming environment.'
+ line 1575: ' Comprising a diverse range of participants within the fields of creative'
+ line 1577: ' at fostering dialogue through a multidisciplinary lens. Working groups'
+ line 1578: ' focused on several topic areas'
+ line 1579: ' Landscape of Creative Tech; and Internationalization.'
+ line 1580: ' 2019contributors-conference3'
+ line 1581: ' 2019contributors-conference4'
+ line 1582: ' outputs'
+ line 1583: ' output1'
+ line 1585: ' octagon girds for p5.js. Created by Aren Davey.'
+ line 1586: ' output2'
+ line 1587: ' . A set of template files for building a multi-device, multiplayer game'
+ line 1588: ' where multiple clients can connect to a specified host page. Created by L05.'
+ line 1589: ' output3'
+ line 1590: ' output3-1'
+ line 1591: ' , testing early implementations of softCompile, OSC interfacing and added'
+ line 1592: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
+ line 1593: ' environment! Created by Ted Davis.'
+ line 1594: ' output4'
+ line 1595: ' A panel on Blackness and Gender in Virtual Space led by American Artist,'
+ line 1596: ' with shawné michaelain holloway and LaJuné McMillian.'
+ line 1597: ' output5'
+ line 1598: ' output6'
+ line 1599: ' output6-1'
+ line 1600: ' output6-2'
+ line 1601: ' output7'
+ line 1602: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
+ line 1603: ' Jon Chambers.'
+ line 1604: ' output8'
+ line 1605: ' output8-1'
+ line 1606: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
+ line 1607: ' Ye, Dorothy R. Santos, and Yasheng She.'
+ line 1608: ' output9'
+ line 1609: ' output9-1'
+ line 1610: ' output10'
+ line 1611: ' An overhaul of the p5.js website for accessibility. Including updates for'
+ line 1612: ' screen reader accessibility, and improvements to the home, download, getting'
+ line 1613: ' started, and reference pages. With contributions from Claire Kearney-Volpe,'
+ line 1614: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
+ line 1615: ' McCarthy, and Evelyn Masso.'
+ line 1616: ' output11'
+ line 1617: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
+ line 1618: ' Sona Lee, Ted Davis, and Carlos Garcia.'
+ line 1619: ' output12'
+ line 1620: ' output13'
+ line 1621: ' A design of the p5.js library system for the p5 Editor. Created by Cassie'
+ line 1622: ' Tarakajian and Luca Damasco.'
+ line 1623: ' output14'
+ line 1624: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
+ line 1625: ' Lauren Valley.'
+ line 1626: ' output15'
+ line 1627: ' 2019cc_1'
+ line 1628: ' 2019cc_2'
+ line 1629: ' 2019cc_3'
+ line 1630: ' 2019cc_4'
+ line 1631: ' 2019cc_5'
+ line 1632: ' 2019cc_6'
+ line 1633: ' 2019cc_7'
line 1634: ' 2019cc_8'
line 1635: ' 2019cc_9'
line 1636: ' Participant speaks at a podium in front of projected text about the problem'
@@ -3843,6 +3052,35 @@ ko:
line 1663: ' Man sitting in front of the classroom speaking energetically into a'
line 1664: ' microphone'
line 1665: ' 2019cc_24'
+ line 1666: ' Group photo of participants smiling enthusiastically with their hands in the'
+ line 1667: ' air'
+ line 1668: ' 2019cc_25'
+ line 1712: ' books-title'
+ line 1713: ' book-1-title'
+ line 1714: ' book-1-authors'
+ line 1715: ' book-1-publisher'
+ line 1716: ' book-1-pages'
+ line 1717: ' book-1-type'
+ line 1718: ' book-1-description'
+ line 1719: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1720: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1721: ' using JavaScript and HTML.'
+ line 1722: ' book-1-order-a'
+ line 1723: ' book-1-order-b'
+ line 1724: ' book-2-title'
+ line 1725: ' book-2-authors'
+ line 1726: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
+ line 1727: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
+ line 1728: ' book-2-publisher'
+ line 1729: ' book-2-pages'
+ line 1730: ' book-2-type'
+ line 1731: ' book-2-description'
+ line 1732: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1733: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1734: ' using JavaScript and HTML.'
+ line 1735: ' book-2-order-a'
+ line 1736: ' book-2-order-b'
+ line 1737: ' book-3-title'
line 1738: ' book-3-authors'
line 1739: ' book-3-publisher'
line 1740: ' book-3-pages'
@@ -3871,6 +3109,12 @@ ko:
line 1763: ' book-5-type'
line 1764: ' book-5-description'
line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the'
+ line 1766: ' vastly popular JavaScript with the programming library p5.js. The skills you'
+ line 1767: ' will acquire from this book are highly transferable to a myriad of'
+ line 1768: ' industries and can be used towards building web applications, programmable'
+ line 1769: ' robots, or generative art.'
+ line 1770: ' book-5-order-a'
+ line 1771: ' book-5-order-b'
line 1800: ' Examples'
line 1801: ' back-examples'
line 1802: ' Structure'
@@ -3898,6 +3142,519 @@ ko:
line 1824: ' Mobile'
line 1825: ' Hello_P5'
line 1829: ' Reference'
+ line 2005: ' showcase-title'
+ line 2006: ' showcase-intro1'
+ line 2007: ' showcase-intro2'
+ line 2008: ' showcase-intro3'
+ line 2009: ' We''re celebrating how people are using p5.js to make creative work,'
+ line 2010: ' learning, and open source more interesting and inclusive. Together, we make'
+ line 2011: ' community. During Summer 2019, we asked a few creators to share more about'
+ line 2012: ' how they''ve used p5.js through different projects and pieces.'
+ line 2013: ' showcase-intro4'
+ line 2014: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
+ line 2015: ' p5.js work or your own to be featured here!'
+ line 2016: ' nominate-project'
+ line 2017: ' showcase-featuring'
+ line 2018: ' project-tag-art'
+ line 2019: ' project-tag-design'
+ line 2020: ' project-tag-code'
+ line 2021: ' project-tag-curriculum'
+ line 2022: ' project-tag-documentation'
+ line 2023: ' project-tag-game'
+ line 2024: ' project-tag-library'
+ line 2025: ' project-tag-organizing'
+ line 2026: ' project-tag-tool'
+ line 2027: ' project-tag-tutorial'
+ line 2028: ' project-roni'
+ line 2029: ' credit-roni'
+ line 2030: ' description-roni'
+ line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
+ line 2032: ' plotter and pens.'
+ line 2033: ' project-phuong'
+ line 2034: ' credit-phuong'
+ line 2035: ' description-phuong'
+ line 2036: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
+ line 2037: ' encourage people to get out of their comfort zone and feel more confident'
+ line 2038: ' about themselves regardless of what they do and how they look or sound.'
+ line 2039: ' project-daein'
+ line 2040: ' credit-daein'
+ line 2041: ' description-daein'
+ line 2042: ' An interactive typographic poster that uses a mobile device''s motion sensor'
+ line 2043: ' with p5.js.'
+ line 2044: ' project-qianqian'
+ line 2045: ' credit-qianqian'
+ line 2046: ' description-qianqian'
+ line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
+ line 2048: ' and technology, including p5.js tutorials for beginners. Available on'
+ line 2049: ' YouTube, Instagram, Bilibili, and TikTok.'
+ line 2050: ' project-casey-louise'
+ line 2051: ' credit-casey-louise'
+ line 2052: ' description-casey-louise'
+ line 2053: ' project-moon-xin'
+ line 2054: ' credit-moon-xin'
+ line 2055: ' description-moon-xin'
+ line 2056: ' Browser-based moving posters that use graphical systems, transformation'
+ line 2057: ' methods, and p5.js to address the connotations of a word less than 8'
+ line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative'
+ line 2059: ' Systems) at the University of Georgia.'
+ line 2060: ' created-by'
+ line 2061: ' pronouns-female'
+ line 2062: ' creator-from-roni-cantor'
+ line 2063: ' project-links'
+ line 2064: ' project-links-text-1-roni-cantor'
+ line 2065: ' project-links-text-2-roni-cantor'
+ line 2066: ' project-q-1-1'
+ line 2067: ' project-q-1-2'
+ line 2068: ' project-a-1-1-roni-cantor'
+ line 2069: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
+ line 2070: ' years of coding and making robots, I decided to take a break and play with'
+ line 2071: ' some more traditional forms of art—while still coding and playing with'
+ line 2072: ' robots.'
+ line 2073: ' project-a-1-2-roni-cantor'
+ line 2074: ' project-a-1-3-roni-cantor'
+ line 2075: ' project-a-1-4-roni-cantor'
+ line 2076: ' project-q-2'
+ line 2077: ' project-a-2-1-roni-cantor'
+ line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear'
+ line 2079: ' interpolation) formulas and display the visuals in the'
+ line 2080: ' project-a-2-2-roni-cantor'
+ line 2081: ' . I then used a feature in my code that exported my programmed graphic into'
+ line 2082: ' an'
+ line 2083: ' project-a-2-3-roni-cantor'
+ line 2084: ' project-a-2-4-roni-cantor'
+ line 2085: ' —so that it understood where to draw the lines that I programmed. I sent'
+ line 2086: ' this information to the plotter with a program called'
+ line 2087: ' project-a-2-5-roni-cantor'
+ line 2088: ' project-q-3'
+ line 2089: ' project-a-3-roni-cantor'
+ line 2090: ' project-q-4'
+ line 2091: ' Did you face any challenges working on this project? If so, how did you'
+ line 2092: ' overcome them?'
+ line 2093: ' project-a-4-roni-cantor'
+ line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
+ line 2095: ' benefited from the people around me who had used p5 before, as well as'
+ line 2096: ' online guides and forums.'
+ line 2097: ' project-q-5'
+ line 2098: ' project-a-5-roni-cantor'
+ line 2099: ' project-q-6'
+ line 2100: ' project-a-6-roni-cantor'
+ line 2101: ' project-resources'
+ line 2102: ' creator-from-qianqian'
+ line 2103: ' interview-link-qianqian'
+ line 2104: ' project-a-1-1-qianqian'
+ line 2105: ' project-a-1-2-qianqian'
+ line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free'
+ line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with'
+ line 2108: ' different colors.'
+ line 2109: ' project-a-2-1-qianqian'
+ line 2110: ' This project started with an idea of teaching my mom, who lives in China and'
+ line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on'
+ line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why'
+ line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily'
+ line 2114: ' due to the lack of free creative coding education resources. Most of the'
+ line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js'
+ line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
+ line 2117: ' inaccessible in China because of internet censorship.'
+ line 2118: ' project-a-2-2-qianqian'
+ line 2119: ' project-a-2-3-qianqian'
+ line 2120: ' , but the more I watched coding tutorials online, the more I realized how'
+ line 2121: ' difficult it is to find other womxn and people of color teaching coding,'
+ line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
+ line 2123: ' creative coding.'
+ line 2124: ' project-a-2-4-qianqian'
+ line 2125: ' I am working on opening up the video channels to other Chinese creatives who'
+ line 2126: ' want to contribute to the educational resource together, like interviews and'
+ line 2127: ' guest tutorials. If you are interested in teaching/talking about creative'
+ line 2128: ' coding in Mandarin, HMU!'
+ line 2129: ' project-a-3-1-qianqian'
+ line 2130: ' project-a-3-2-qianqian'
+ line 2131: ' project-a-4-1-qianqian'
+ line 2132: ' Learning to code in a second language was difficult and the lack of'
+ line 2133: ' community made this process even harder. I hope to speak from my experience'
+ line 2134: ' as a beginner and someone who once felt like an outsider to the creative'
+ line 2135: ' coding and video tutorial world.'
+ line 2136: ' project-a-4-2-qianqian'
+ line 2137: ' I spend a lot of time researching the latest technology for my videos. In'
+ line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
+ line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get'
+ line 2140: ' started making instructional videos.'
+ line 2141: ' project-a-4-3-qianqian'
+ line 2142: ' Another issue I came across was my own fear of putting myself online. I'
+ line 2143: ' first had to get over my anxiety of making mistakes in the videos or'
+ line 2144: ' receiving negative comments online. Often womxn and people of color are'
+ line 2145: ' targets for online harassment. I’m hoping to help set an example for other'
+ line 2146: ' womxn and people of color that it’s ok to put yourselves online and'
+ line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will'
+ line 2148: ' be able to stop online harassment by creating strong diverse communities.'
+ line 2149: ' project-a-5-1-qianqian'
+ line 2150: ' project-a-5-2-qianqian'
+ line 2151: ' creator-from-phuong'
+ line 2152: ' project-a-1-1-phuong'
+ line 2153: ' link-1-phuong'
+ line 2154: ' link-2-phuong'
+ line 2155: ' link-3-phuong'
+ line 2156: ' project-a-1-2-phuong'
+ line 2157: ' project-a-1-3-phuong'
+ line 2158: ' I was taking a course at the School of Machines in Berlin this summer'
+ line 2159: ' called! "'
+ line 2160: ' project-a-1-4-phuong'
+ line 2161: ' project-a-2-1-phuong'
+ line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites'
+ line 2163: ' for Airi and the ghosts were drawn on an iPad app called'
+ line 2164: ' project-a-2-2-phuong'
+ line 2165: ' project-a-2-3-phuong'
+ line 2166: ' project-a-2-4-phuong'
+ line 2167: ' p5-sketch-by-chjno-phuong'
+ line 2168: ' project-a-2-5-phuong'
+ line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was'
+ line 2170: ' detected, the scrolling speed would change to make an illusion of Airi'
+ line 2171: ' flying up. When the user does not do anything, the scrolling speed is'
+ line 2172: ' negative, which makes it look like Airi is falling down.'
+ line 2173: ' project-a-2-6-phuong'
+ line 2174: ' project-a-2-7-phuong'
+ line 2175: ' project-a-3-1-phuong'
+ line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks'
+ line 2177: ' and classes with the'
+ line 2178: ' project-a-3-2-phuong'
+ line 2179: ' project-a-3-3-phuong'
+ line 2180: ' project-a-3-4-phuong'
+ line 2181: ' project-a-4-1-phuong'
+ line 2182: ' There were a lot of challenges simply because p5.js was something new to me.'
+ line 2183: ' I did not work much with JavaScript in general before. Reading documentation'
+ line 2184: ' and searching for similar examples helped a lot.'
+ line 2185: ' project-a-5-1-phuong'
+ line 2186: ' school-of-machines-phuong'
+ line 2187: ' project-a-5-2-phuong'
+ line 2188: ' ! They try hard to connect the most creative people in the world and they do'
+ line 2189: ' it well so far. ❤️'
+ line 2190: ' pronouns-male'
+ line 2191: ' creator-from-chung'
+ line 2192: ' link-1-casey-louise'
+ line 2193: ' link-2-casey-louise'
+ line 2194: ' link-1-chung'
+ line 2195: ' link-2-chung'
+ line 2196: ' link-3-chung'
+ line 2197: ' project-a-1-1-chung'
+ line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College'
+ line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
+ line 2200: ' and motion graphics.'
+ line 2201: ' project-a-1-2-chung'
+ line 2202: ' project-a-1-3-chung'
+ line 2203: ' project-a-2-1-chung'
+ line 2204: ' This summer, I gave myself a challenge of making typographic posters with'
+ line 2205: ' coding, and this is one of the posters I made. I didn’t know until very'
+ line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching'
+ line 2207: ' dan-shiffman-matterjs-tutorial'
+ line 2208: ' project-a-2-2-chung'
+ line 2209: ' project-a-3-1-chung'
+ line 2210: ' There are many things I love about p5.js such as the online community and'
+ line 2211: ' beginner friendliness. What I really like right now is the'
+ line 2212: ' project-a-3-2-chung'
+ line 2213: ' , with which I can not only work online for myself but also share URLs'
+ line 2214: ' quickly in the present mode. For this project in particular, I had to do a'
+ line 2215: ' lot of testing on my phone, and it was much easier and quicker than'
+ line 2216: ' committing to GitHub.'
+ line 2217: ' project-a-4-1-chung'
+ line 2218: ' project-a-4-2-chung'
+ line 2219: ' project-a-4-3-chung'
+ line 2220: ' project-a-5-1-chung'
+ line 2221: ' As mentioned above, if you want to render out frames and video files out of'
+ line 2222: ' p5.js sketches, check out my'
+ line 2223: ' project-a-5-2-chung'
+ line 2224: ' creator-from-casey-louise'
+ line 2225: ' project-a-1-1-casey-louise'
+ line 2226: ' Casey'
+ line 2227: ' interactive spaces, physical and digital.'
+ line 2228: ' project-a-1-2-casey-louise'
+ line 2229: ' Louise'
+ line 2230: ' interactive spaces based on sensor technologies.'
+ line 2231: ' project-a-1-3-casey-louise'
+ line 2232: ' Casey'
+ line 2233: ' I had been dabbling in'
+ line 2234: ' project-a-1-4-casey-louise'
+ line 2235: ' project-a-1-5-casey-louise'
+ line 2236: ' Louise'
+ line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
+ line 2238: ' me.'
+ line 2239: ' project-a-2-1-casey-louise'
+ line 2240: ' Casey'
+ line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open'
+ line 2242: ' source, storytelling, and learning resource projects at ITP called'
+ line 2243: ' project-a-2-2-casey-louise'
+ line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
+ line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource'
+ line 2246: ' for others to learn. When I told Louise about the project, she was'
+ line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
+ line 2248: ' great about making sure the project is a learning resource and not just a'
+ line 2249: ' collection of examples.'
+ line 2250: ' project-a-3-1-casey-louise'
+ line 2251: ' project-a-3-2-casey-louise'
+ line 2252: ' project-a-3-3-casey-louise'
+ line 2253: ' project-a-3-4-casey-louise'
+ line 2254: ' project-a-3-5-casey-louise'
+ line 2255: ' project-a-4-1-casey-louise'
+ line 2256: ' Casey'
+ line 2257: ' reaching out to amazing people, asking questions, and asking for permission'
+ line 2258: ' to use their examples in our project.'
+ line 2259: ' adam-ferris-repo-casey-louise'
+ line 2260: ' project-a-4-2-casey-louise'
+ line 2261: ' project-a-4-3-casey-louise'
+ line 2262: ' project-a-4-4-casey-louise'
+ line 2263: ' webgl-casey-louise'
+ line 2264: ' project-a-4-5-casey-louise'
+ line 2265: ' project-a-4-6-casey-louise'
+ line 2266: ' Louise'
+ line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam'
+ line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
+ line 2269: ' understand how to implement it, so it was as much a technical challenge as'
+ line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
+ line 2271: ' inspiration from the way the'
+ line 2272: ' openframeworks-book-casey-louise'
+ line 2273: ' project-a-4-7-casey-louise'
+ line 2274: ' project-a-5-1-casey-louise'
+ line 2275: ' project-a-5-2-casey-louise'
+ line 2276: ' pronouns-nonbinary'
+ line 2277: ' creator-from-moon'
+ line 2278: ' posters-by'
+ line 2279: ' project-a-1-1-moon'
+ line 2280: ' Moon'
+ line 2281: ' summer, I taught a graphic design course in the University of Georgia'
+ line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
+ line 2283: ' planning to teach and to study digital platforms at UGA.'
+ line 2284: ' project-a-1-2-moon'
+ line 2285: ' project-a-1-3-moon'
+ line 2286: ' project-a-1-4-moon'
+ line 2287: ' pcd-la-moon'
+ line 2288: ' project-a-1-5-moon'
+ line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent'
+ line 2290: ' teaching and learning experience.'
+ line 2291: ' project-a-2-1-moon'
+ line 2292: ' codetrain-moon'
+ line 2293: ' project-a-2-2-moon'
+ line 2294: ' p5-reference-moon'
+ line 2295: ' project-a-2-3-moon'
+ line 2296: ' project-a-3-1-moon'
+ line 2297: ' project-a-3-2-moon'
+ line 2298: ' project-a-3-3-moon'
+ line 2299: ' project-a-3-4-moon'
+ line 2300: ' . I was able to use and to teach this tool to visualize various ideas about'
+ line 2301: ' time in motion.'
+ line 2302: ' project-a-4-1-moon'
+ line 2303: ' It was challenging for me, a beginner, to understand the overall structure'
+ line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
+ line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I'
+ line 2306: ' understood the p5.js structure and code with strong constraints I set up. It'
+ line 2307: ' was an excellent teaching and learning experience.'
+ line 2308: ' project-a-5-1-moon'
+ line 2309: ' project-a-5-2-moon'
+ line 2310: teach
+ line 2311: ' teach-title2'
+ line 2312: ' teach-intro1'
+ line 2313: ' Every teaching has its own unique goals, messages, conditions, and'
+ line 2314: ' environments. '
+ line 2315: ' teach-intro2'
+ line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
+ line 2317: ' better connect the p5.js learner and educator communities around the world. '
+ line 2318: ' teach-intro3'
+ line 2319: ' teach-intro4'
+ line 2320: ' teach-heading'
+ line 2321: ' teach-search-filter'
+ line 2322: ' teach-filter1'
+ line 2323: ' teach-filter1-label1'
+ line 2324: ' teach-filter1-label2'
+ line 2325: ' teach-filter1-label3'
+ line 2326: ' teach-filter1-label4'
+ line 2327: ' teach-filter1-label5'
+ line 2328: ' teach-filter1-label6'
+ line 2329: ' teach-filter1-label7'
+ line 2330: ' teach-filter1-label8'
+ line 2331: ' teach-filter1-label9'
+ line 2332: ' teach-filter1-label10'
+ line 2333: ' teach-filter1-label11'
+ line 2334: ' teach-filter1-label12'
+ line 2335: ' teach-filter1-label13'
+ line 2336: ' teach-filter1-label14'
+ line 2337: ' teach-filter1-label15'
+ line 2338: ' teach-filter1-label16'
+ line 2339: ' teach-filter2'
+ line 2340: ' teach-filter2-label1'
+ line 2341: ' teach-filter2-label2'
+ line 2342: ' teach-filter2-label3'
+ line 2343: ' teach-filter2-label4'
+ line 2344: ' teach-filter2-label5'
+ line 2345: ' teach-filter2-label6'
+ line 2346: ' teach-filter2-label7'
+ line 2347: ' teach-filter3'
+ line 2348: ' teach-filter4'
+ line 2349: ' teach-filter4-label1'
+ line 2350: ' teach-filter4-label2'
+ line 2351: ' teach-filter4-label3'
+ line 2352: ' teach-case-subtitle1'
+ line 2353: ' teach-case-subtitle2'
+ line 2354: ' teach-case-subtitle3'
+ line 2355: ' teach-case-subtitle4'
+ line 2356: ' teach-case-subtitle5'
+ line 2357: ' teach-case1-title'
+ line 2358: ' teach-case1-lead-name'
+ line 2359: ' teach-case1-content1'
+ line 2360: ' teach-case1-content1-1'
+ line 2361: ' teach-case1-content2'
+ line 2362: ' teach-case1-content3'
+ line 2363: ' teach-case1-content4'
+ line 2364: ' To introduce a new public to programming through fun and compelling'
+ line 2365: ' examples. '
+ line 2366: ' teach-case1-content5'
+ line 2367: ' Method'
+ line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web'
+ line 2369: ' editor. I was teaching using a video projector as well as a board.'
+ line 2370: ' teach-case1-content5-1'
+ line 2371: ' Materials'
+ line 2372: ' links available in '
+ line 2373: ' teach-case2-title'
+ line 2374: ' Making The Thing that Makes the Thing'
+ line 2375: ' with p5.js'
+ line 2376: ' teach-case2-lead-name'
+ line 2377: ' teach-case2-content1'
+ line 2378: ' teach-case2-content1-1'
+ line 2379: ' teach-case2-content2'
+ line 2380: ' Our participants included art/design students & professionals, creative'
+ line 2381: ' coding enthusiasts. We had close to 50 participants.'
+ line 2382: ' teach-case2-content3'
+ line 2383: ' teach-case2-content4'
+ line 2384: ' To explore generative art & design and recreate some classical works'
+ line 2385: ' with p5.js. '
+ line 2386: ' teach-case2-content5'
+ line 2387: ' teach-case2-content5-1'
+ line 2388: ' teach-case2-content5-2'
+ line 2389: ' teach-case2-content5-3'
+ line 2390: ' teach-case2-content5-4'
+ line 2391: ' teach-case2-content5-5'
+ line 2392: ' teach-case3-title'
+ line 2393: ' teach-case3-lead-name'
+ line 2394: ' teach-case3-speech'
+ line 2395: ' teach-case3-content1'
+ line 2396: ' teach-case3-content1-1'
+ line 2397: ' teach-case3-content2'
+ line 2398: ' Our participants included art/design students & professionals, creative'
+ line 2399: ' coding enthusiasts. We had close to 50 participants.'
+ line 2400: ' teach-case3-content3'
+ line 2401: ' teach-case3-content4'
+ line 2402: ' To build a teacher and student community around p5 for middle and high'
+ line 2403: ' school.'
+ line 2404: ' teach-case3-content5'
+ line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
+ line 2406: ' methods and materials. Most used some sort of slides or documentation, some'
+ line 2407: ' live coding using an editor, with work time for participant to remix.'
+ line 2408: ' teach-case3-content5-1'
+ line 2409: ' teach-case3-content5-2'
+ line 2410: ' teach-case3-content5-3'
+ line 2411: ' teach-case4-title'
+ line 2412: ' teach-case4-lead-name'
+ line 2413: ' teach-case4-speech'
+ line 2414: ' teach-case4-content1'
+ line 2415: ' teach-case4-content1-1'
+ line 2416: ' teach-case4-content2'
+ line 2417: ' I had around 16 students in the workshop, and a team including 3 people from'
+ line 2418: ' the PlusCode festival, and one person at the venue.'
+ line 2419: ' teach-case4-content3'
+ line 2420: ' teach-case4-content4'
+ line 2421: ' Introduction to beginners and artists of graphic web programming and open'
+ line 2422: ' source, using p5.js, in Spanish '
+ line 2423: ' teach-case4-content5'
+ line 2424: ' teach-case4-content5-1'
+ line 2425: ' teach-case4-content5-2'
+ line 2426: ' teach-case4-content5-3'
+ line 2427: ' teach-case4-content5-4'
+ line 2428: ' teach-case5-title'
+ line 2429: ' teach-case5-lead-name'
+ line 2430: ' teach-case5-speech'
+ line 2431: ' My greatest source of uncertainty in developing the workshop was whether it'
+ line 2432: ' was trying to teach art to programmers or to teach programming to artists.'
+ line 2433: ' teach-case5-content1'
+ line 2434: ' teach-case5-content1-1'
+ line 2435: ' teach-case5-content1-2'
+ line 2436: ' teach-case5-content1-3'
+ line 2437: ' teach-case5-content2'
+ line 2438: ' teach-case5-content3'
+ line 2439: ' teach-case5-content4'
+ line 2440: ' To introduce p5.js to artists with little or no programming experience and'
+ line 2441: ' to suggest one way an analogue practice can migrate to a digital form.'
+ line 2442: ' teach-case5-content5'
+ line 2443: ' A printed workbook with activities that used the p5.js web editor to show'
+ line 2444: ' how translate an physical drawing into a digital drawing.'
+ line 2445: ' teach-case5-content5-1'
+ line 2446: ' teach-case5-content5-2'
+ line 2447: ' teach-case5-content5-3'
+ line 2448: ' teach-case6-title'
+ line 2449: ' teach-case6-lead-name'
+ line 2450: ' teach-case6-speech'
+ line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
+ line 2452: ' your everyday life!'
+ line 2453: ' teach-case6-content1'
+ line 2454: ' teach-case6-content1-1'
+ line 2455: ' teach-case6-content2'
+ line 2456: ' teach-case6-content3'
+ line 2457: ' teach-case6-content4'
+ line 2458: ' teach-case6-content5'
+ line 2459: ' teach-case6-content5-1'
+ line 2460: ' teach-case6-content5-2'
+ line 2461: ' teach-case6-content5-3'
+ line 2462: ' teach-case6-content5-4'
+ line 2463: ' teach-case6-content5-5'
+ line 2464: ' teach-case7-title'
+ line 2465: ' teach-case7-lead-name'
+ line 2466: ' teach-case7-speech'
+ line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
+ line 2468: ' to give it a try!'
+ line 2469: ' teach-case7-content1'
+ line 2470: ' teach-case7-content1-1'
+ line 2471: ' teach-case7-content2'
+ line 2472: ' teach-case7-content3'
+ line 2473: ' teach-case7-content4'
+ line 2474: ' teach-case7-content5'
+ line 2475: ' teach-case7-content5-1'
+ line 2476: ' teach-case8-title'
+ line 2477: ' teach-case8-lead-name'
+ line 2478: ' teach-case8-content1'
+ line 2479: ' teach-case8-content1-1'
+ line 2480: ' teach-case8-content2'
+ line 2481: ' teach-case8-content3'
+ line 2482: ' teach-case8-content4'
+ line 2483: ' teach-case8-content5'
+ line 2484: ' teach-case8-content5-1'
+ line 2485: ' teach-case8-content5-2'
+ line 2486: ' teach-case9-title'
+ line 2487: ' teach-case9-lead-name'
+ line 2488: ' teach-case9-content1'
+ line 2489: ' teach-case9-content1-1'
+ line 2490: ' teach-case9-content2'
+ line 2491: ' Students at Interactive Telecommunications Program, New York University. 16'
+ line 2492: ' people.'
+ line 2493: ' teach-case9-content3'
+ line 2494: ' teach-case9-content4'
+ line 2495: ' The goal of this class is to learn and understand common machine learning'
+ line 2496: ' techniques and apply them to generate creative outputs in the browser using'
+ line 2497: ' ml5.js and p5.js.'
+ line 2498: ' teach-case9-content5'
+ line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and'
+ line 2500: ' presentations. I used '
+ line 2501: ' teach-case9-content5-1'
+ line 2502: ' teach-case9-content5-2'
+ line 2503: ' teach-case9-content5-3'
+ line 2504: ' teach-case10-title'
+ line 2505: ' teach-case10-lead-name'
+ line 2506: ' teach-case10-content1'
+ line 2507: ' teach-case10-content3'
+ line 2508: ' teach-case10-content4'
+ line 2509: ' Introduce learners (potentially with no coding experiences at all) to the'
+ line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
+ line 2511: ' and enable them to pursue own projects in a safe environment.'
+ line 2512: ' teach-case10-content5'
+ line 2513: ' p5.js source code (for the introductory project), JavaScript source code'
+ line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
+ line 2515: ' .pdf format, all hosted publicly on GitHub. '
+ line 2516: ' teach-case10-content5-1'
+ line 2517: ' teach-case10-content5-2'
line 2518: ' teach-case11-title'
line 2519: ' teach-case11-lead-name'
line 2520: ' teach-case11-content1'
@@ -3920,381 +3677,120 @@ ko:
line 2537: ' teach-case12-title'
line 2538: ' teach-case12-lead-name'
line 2539: ' teach-case12-speech'
+ line 2540: ' I''m working on a new series of coding class for Disabled students in South'
+ line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 2542: ' workshops in December 2020. The project is supported by the Open Society'
+ line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 2544: ' Center.'
+ line 2545: ' teach-case12-content1'
+ line 2546: ' teach-case12-content1-1'
+ line 2547: ' teach-case12-content2'
+ line 2548: ' teach-case12-content3'
+ line 2549: ' teach-case12-content4'
+ line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming'
+ line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
+ line 2552: ' teach-case12-content5'
+ line 2553: ' We used p5.js Web editor and code examples on the website. We also used'
+ line 2554: ' dice, playing cards and various paper tools to help students learn about'
+ line 2555: ' coding concepts.'
+ line 2556: ' teach-case12-content5-1'
+ line 2557: ' teach-case12-content5-2'
line 598: ' color-custom-ranges-li1x2'
line 601: ' color-custom-ranges-li2x2'
line 604: ' color-custom-ranges-li3x2'
- line 728: ' learn-title'
- line 1091: <<<<<<< HEAD
- line 1099: '======='
- line 1100: ' Libraries'
- line 1101: ' core-libraries'
- line 1102: ' community-libraries'
- line 1103: ' libraries-created-by'
- line 1104: ' p5.sound'
- line 1105: ' p5.sound extends p5 with Web Audio functionality including audio input,'
- line 1106: ' playback, analysis and synthesis.'
- line 1107: ' p5.accessibility'
- line 1108: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
- line 1109: ' and visually impaired.'
- line 1110: ' asciiart'
- line 1111: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
- line 1112: ' p5js.'
- line 1113: ' p5.ble'
- line 1114: ' A Javascript library that enables communication between BLE devices and p5'
- line 1115: ' sketches.'
- line 1116: ' p5.bots'
- line 1117: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
- line 1118: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
- line 1119: ' drive LEDs, motors, and more!'
- line 1120: ' p5.clickable'
- line 1121: ' p5.cmyk.js'
- line 1122: ' p5.collide2D'
- line 1135: ' p5.func'
- line 1136: ' p5.func is a p5 extension that provides new objects and utilities for'
- line 1137: ' function generation in the time, frequency, and spatial domains.'
- line 1138: ' p5.geolocation'
- line 1139: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
- line 1140: ' geofencing user locations for p5.js.'
- line 1141: ' p5.gibber'
- line 1142: ' grafica.js'
- line 1143: ' grafica.js lets you add simple but highly configurable 2D plots to your'
- line 1144: ' p5.js sketches.'
- line 1145: ' p5.gui'
- line 1146: ' p5.localmessage'
- line 1374: ' community-title'
- line 1375: ' community-statement-title'
- line 1376: ' community-statement1'
- line 1377: ' p5.js is a community interested in exploring the creation of art and design'
- line 1378: ' with technology.'
- line 1379: ' community-statement2'
- line 1380: ' We are a community of, and in solidarity with, people from every gender'
- line 1381: ' identity and expression, sexual orientation, race, ethnicity, language,'
- line 1382: ' neuro-type, size, ability, class, religion, culture, subculture, political'
- line 1383: ' opinion, age, skill level, occupation, and background. We acknowledge that'
- line 1384: ' not everyone has the time, financial means, or capacity to actively'
- line 1385: ' participate, but we recognize and encourage involvement of all kinds. We'
- line 1386: ' facilitate and foster access and empowerment. We are all learners.'
- line 1387: ' community-statement3'
- line 1388: ' We like these hashtags'
- line 1389: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
- line 1390: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
- line 1391: ' course).'
- line 1392: ' in-practice-title'
- line 1393: ' in-practice1'
- line 1394: ' in-practice2'
- line 1395: ' We insist on actively engaging with requests for feedback regardless of'
- line 1396: ' their complexity.'
- line 1397: ' in-practice3'
- line 1398: ' We welcome newcomers and prioritize the education of others. We strive to'
- line 1399: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
- line 1400: ' that newcomers are just as valuable in this effort as experts.'
- line 1401: ' in-practice4'
- line 1402: ' We consistently make the effort to actively recognize and validate multiple'
- line 1403: ' types of contributions.'
- line 1404: ' in-practice5'
- line 1405: ' in-times-conflict-title'
- line 1406: ' in-times-conflict1'
- line 1407: ' in-times-conflict2'
- line 1408: ' in-times-conflict3'
- line 1409: ' We admit when we''re wrong, apologize, and accept responsibility for our'
- line 1410: ' actions.'
- line 1411: ' in-times-conflict4'
- line 1412: ' in-times-conflict5'
- line 1413: ' in-times-conflict6'
- line 1414: ' in-times-conflict7'
- line 1415: ' in-the-future-title'
- line 1416: ' in-the-future1'
- line 1417: ' notes-title'
- line 1418: ' notes1'
- line 1419: ' notes2'
- line 1669: ' book-1-publisher'
- line 1670: ' book-1-pages'
- line 1671: ' book-1-type'
- line 1672: ' book-1-description'
- line 1673: ' Written by the lead p5.js developer and the founders of Processing, this'
- line 1674: ' book provides an introduction to the creative possibilities of today''s Web,'
- line 1675: ' using JavaScript and HTML.'
- line 1676: ' book-1-order-a'
- line 1677: ' book-1-order-b'
- line 1678: ' book-2-title'
- line 1679: ' book-2-authors'
- line 1680: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
- line 1681: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
- line 1682: ' book-2-publisher'
- line 1683: ' book-2-pages'
- line 1684: ' book-2-type'
- line 1685: ' book-2-description'
- line 1686: ' Written by the lead p5.js developer and the founders of Processing, this'
- line 1687: ' book provides an introduction to the creative possibilities of today''s Web,'
- line 1688: ' using JavaScript and HTML.'
- line 1689: ' book-2-order-a'
- line 1690: ' book-2-order-b'
- line 1691: ' book-3-title'
- line 1692: ' book-3-authors'
- line 1693: ' book-3-publisher'
- line 1694: ' book-3-pages'
- line 1695: ' book-3-type'
- line 1696: ' book-3-description'
- line 1697: ' By using simple languages such as JavaScript in p5.js, artists and makers'
- line 1698: ' can create everything from interactive typography and textiles to 3D-printed'
- line 1699: ' furniture to complex and elegant infographics.'
- line 1700: ' book-3-order-a'
- line 1701: ' book-3-order-b'
- line 1702: ' book-4-title'
- line 1703: ' book-4-authors'
- line 1704: ' book-4-publisher'
- line 1705: ' book-4-pages'
- line 1706: ' book-4-type'
- line 1707: ' book-4-description'
- line 1708: ' By using simple languages such as JavaScript in p5.js, artists and makers'
- line 1709: ' can create everything from interactive typography and textiles to 3D-printed'
- line 1710: ' furniture to complex and elegant infographics.'
- line 1711: ' book-4-order-a'
- line 1772: ' Control'
- line 1773: ' Image'
- line 1774: ' Color'
- line 1775: ' Math'
- line 1776: ' Simulate'
- line 1777: ' Interaction'
- line 1778: ' Objects'
- line 1779: ' Lights'
- line 1780: ' Motion'
- line 1781: ' Instance_Mode'
- line 1782: ' Dom'
- line 1783: ' Drawing'
- line 1784: ' Transform'
- line 1785: ' Typography'
- line 1786: ' 3D'
- line 1787: ' Input'
- line 1788: ' Advanced_Data'
- line 1789: ' Sound'
- line 1790: ' Mobile'
- line 1791: ' Hello_P5'
- line 1795: ' Reference'
- line 1948: ' showcase-title'
- line 1949: ' showcase-intro1'
- line 1950: ' showcase-intro2'
- line 1951: ' showcase-intro3'
- line 1952: ' We''re celebrating how people are using p5.js to make creative work,'
- line 1953: ' learning, and open source more interesting and inclusive. Together, we make'
- line 1954: ' community. During Summer 2019, we asked a few creators to share more about'
- line 1955: ' how they''ve used p5.js through different projects and pieces.'
- line 1956: ' showcase-intro4'
- line 1957: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
- line 1958: ' p5.js work or your own to be featured here!'
- line 1959: ' nominate-project'
- line 1960: ' showcase-featuring'
- line 1961: ' project-tag-art'
- line 1962: ' project-tag-design'
- line 1963: ' project-tag-code'
- line 1964: ' project-tag-curriculum'
- line 1965: ' project-tag-documentation'
- line 1966: ' project-tag-game'
- line 1967: ' project-tag-library'
- line 1968: ' project-tag-organizing'
- line 1969: ' project-tag-tool'
- line 1970: ' project-tag-tutorial'
- line 1971: ' project-roni'
- line 1972: ' credit-roni'
- line 1973: ' description-roni'
- line 1974: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
- line 1975: ' plotter and pens.'
- line 1976: ' project-phuong'
- line 1977: ' credit-phuong'
- line 1978: ' description-phuong'
- line 1979: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
- line 1980: ' encourage people to get out of their comfort zone and feel more confident'
- line 1981: ' about themselves regardless of what they do and how they look or sound.'
- line 1982: ' project-daein'
- line 1983: ' credit-daein'
- line 1984: ' description-daein'
- line 1985: ' An interactive typographic poster that uses a mobile device''s motion sensor'
- line 1986: ' with p5.js.'
- line 1987: ' project-qianqian'
- line 1988: ' credit-qianqian'
- line 1989: ' description-qianqian'
- line 1990: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
- line 1991: ' and technology, including p5.js tutorials for beginners. Available on'
- line 1992: ' YouTube, Instagram, Bilibili, and TikTok.'
- line 1993: ' project-casey-louise'
- line 1994: ' credit-casey-louise'
- line 1995: ' description-casey-louise'
- line 1996: ' project-moon-xin'
- line 1997: ' credit-moon-xin'
- line 1998: ' description-moon-xin'
- line 1999: ' Browser-based moving posters that use graphical systems, transformation'
- line 2000: ' methods, and p5.js to address the connotations of a word less than 8'
- line 2001: ' letters. Designed by students for a graphic design course (Visual Narrative'
- line 2002: ' Systems) at the University of Georgia.'
- line 2003: ' created-by'
- line 2004: ' pronouns-female'
- line 2558: ' teach-case14-content5-3'
- line 2559: ' 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
- line 2560: ' teach-case14-content5-4'
- line 2561: ' 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. '
- line 2562: ' teach-case14-content5-5'
- line 2563: ' teach-case15-title'
- line 2564: ' teach-case15-lead-name'
- line 2565: ' teach-case15-content1'
- line 2566: ' L''École de Design Nantes Atlantique, France'
- line 2567: ' teach-case15-content1-1'
- line 2568: ' teach-case15-content2'
- line 2569: ' Students from l''école de design Nantes Atlantique'''
- line 2570: ' teach-case15-content3'
- line 2571: ' teach-case15-content4'
- line 2572: ' To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
- line 2573: ' teach-case15-content5'
- line 2574: ' GitHub Readme File'
- line 2575: ' teach-case15-content5-1'
- line 2576: ' teach-case16-title'
- line 2577: ' 50+ Coding Club '
- line 2578: ' teach-case16-lead-name'
- line 2579: ' teach-case16-speech'
- line 2580: ' This workshop was conducted in line with ''p5 for 50+'' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).'
- line 2581: ' teach-case16-content1'
- line 2582: ' teach-case16-content1-1'
- line 2583: ' teach-case16-content2'
- line 2584: ' teach-case16-content2-1'
- line 2585: ' teach-case16-content2-2'
- line 2586: ' teach-case16-content3'
- line 2587: ' teach-case16-content4'
- line 2588: ' Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
- line 2589: ' this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
- line 2590: ' teach-case16-content5'
- line 2591: ' p5for50+ web app'
- line 2592: ' teach-case16-content5-1'
- line 2593: ' a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants'' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.'
- line 2594: ' teach-case16-content5-2'
- line 2595: ' teach-case16-content5-3'
- line 2596: ' teach-case16-content5-4'
- line 2609: ' teach-case17-title'
- line 2610: ' teach-case17-lead-name'
- line 2611: ' teach-case17-speech'
- line 2612: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
- line 2613: ' teach-case17-content1'
- line 2614: ' teach-case17-content1-1'
- line 2615: ' teach-case17-content2'
- line 2616: ' teach-case17-content3'
- line 2617: ' teach-case17-content4'
- line 2618: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
- line 2619: ' teach-case17-content5'
- line 2620: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
- line 2621: ' teach-case17-content5-1'
+ line 424: ' with p5.js.'
+ line 433: ' presentations. I used'
+ line 84: ' copyright1'
zh-Hans:
src/data/en.yml:
- line 1517: ' Woman speaks at a podium in an auditorium while three participants sit on'
- line 1527: ' , advancing the code, documentation, and community outreach tools and'
- line 1528: ' exploring the current landscape of the p5.js programming environment.'
- line 1537: ' output1'
- line 1545: ' , testing early implementations of softCompile, OSC interfacing and added'
- line 1546: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
- line 1547: ' environment! Created by Ted Davis.'
- line 1548: ' output4'
- line 1549: ' A panel on Blackness and Gender in Virtual Space led by American Artist,'
- line 1550: ' with shawné michaelain holloway and LaJuné McMillian.'
- line 1551: ' output5'
- line 1552: ' output6'
- line 1553: ' output6-1'
- line 1554: ' output6-2'
- line 1555: ' output7'
- line 1556: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
- line 1557: ' Jon Chambers.'
- line 1558: ' output8'
- line 1559: ' output8-1'
- line 1560: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
- line 1561: ' Ye, Dorothy R. Santos, and Yasheng She.'
- line 1562: ' output9'
- line 1563: ' output9-1'
- line 1564: ' output10'
- line 1565: ' An overhaul of the p5.js website for accessibility. Including updates for'
- line 1566: ' screen reader accessibility, and improvements to the home, download, getting'
- line 1567: ' started, and reference pages. With contributions from Claire Kearney-Volpe,'
- line 1568: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
- line 1569: ' McCarthy, and Evelyn Masso.'
- line 1570: ' output11'
- line 1571: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
- line 1572: ' Sona Lee, Ted Davis, and Carlos Garcia.'
- line 1573: ' output12'
- line 1574: ' output13'
- line 1575: ' A design of the p5.js library system for the p5 Editor. Created by Cassie'
- line 1576: ' Tarakajian and Luca Damasco.'
- line 1577: ' output14'
- line 1578: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
- line 1579: ' Lauren Valley.'
- line 1580: ' output15'
- line 1581: ' 2019cc_1'
- line 1582: ' 2019cc_2'
- line 1583: ' 2019cc_3'
- line 1584: ' 2019cc_4'
- line 1585: ' 2019cc_5'
- line 1586: ' 2019cc_6'
- line 1587: ' 2019cc_7'
- line 1588: ' 2019cc_8'
- line 1589: ' 2019cc_9'
- line 1590: ' Participant speaks at a podium in front of projected text about the problem'
- line 1591: ' with anonymyzing data'
- line 1592: ' 2019cc_10'
- line 1593: ' Person with a microphone speaking to fellow participants in front of text'
- line 1594: ' that reads p5.js will not add any new features except those that increase'
- line 1595: ' access'
- line 1596: ' 2019cc_11'
- line 1597: ' 2019cc_12'
- line 1598: ' 2019cc_13'
- line 1599: ' 2019cc_14'
- line 1600: ' 2019cc_15'
- line 1601: ' Woman with microphone speaking to fellow participants with the text sacred'
- line 1602: ' boundaries in the projection behind her'
- line 1603: ' 2019cc_16'
- line 1604: ' Overhead view of participants listening to a panel of people with an image'
- line 1605: ' of a 3d rendered man on it'
- line 1606: ' 2019cc_17'
- line 1607: ' Participants sit around a table with their laptops and observe code on a'
- line 1608: ' screen'
- line 1609: ' 2019cc_18'
- line 1610: ' 2019cc_19'
- line 1611: ' 2019cc_20'
- line 1612: ' 2019cc_21'
- line 1613: ' 2019cc_22'
- line 1614: ' Participants sitting around a large U shaped table looking towards the front'
- line 1615: ' of the classroom'
- line 1616: ' 2019cc_23'
- line 1617: ' Man sitting in front of the classroom speaking energetically into a'
- line 1618: ' microphone'
- line 1619: ' 2019cc_24'
- line 1620: ' Group photo of participants smiling enthusiastically with their hands in the'
- line 1621: ' air'
- line 1622: ' 2019cc_25'
- line 1123: ' p5.collide2D provides tools for calculating collision detection for 2D'
- line 1124: ' geometry with p5.js.'
- line 1125: ' p5.createloop'
- line 1126: ' p5.dimensions'
- line 1127: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
- line 1128: ' dimensions.'
- line 1129: ' p5.EasyCam'
- line 1130: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
- line 1131: ' contributions by Thomas Diewald.'
- line 1132: ' p5.experience'
- line 1133: ' Extensive library for p5.js that adds additional event-listening'
- line 1134: ' functionality for creating canvas-based web applications.'
- line 97: ' p1xh1'
- line 96: ' start-creating'
- line 114: ' acknowledge that not everyone has the time, financial means, or capacity to'
- line 113: ' political opinion, age, skill level, occupation, and background. We'
- line 115: ' actively participate, but we recognize and encourage involvement of all'
- line 102: ' software, and the tools to learn it, should be accessible to everyone.'
- line 103: ' p1x2'
- line 104: ' Using the metaphor of a sketch, p5.js has a full set of drawing'
- line 105: ' functionality. However, you’re not limited to your drawing canvas. You can'
- line 251: ' download9'
- line 256: ' you would like to use the minified version (compressed for faster page'
- line 269: ' environment4'
- line 265: ' environment1'
- line 266: ' environmentlink'
- line 267: ' environment2'
- line 268: ' environment3'
- line 275: ' environment8'
- line 276: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
- line 277: ' that your html and js files are located in. On the left sidebar, you should'
+ line 883: ' p5.fab'
+ line 875: ' no setup required.'
+ line 871: ' p5.input'
+ line 872: ' ui'
+ line 873: ' p5.web-serial'
+ line 874: ' A p5.js library for using the Web Serial API to access devices like Arduino, '
+ line 876: ' p5.wasm.core'
+ line 877: ' p5.videorecorder'
+ line 878: ' p5.mapper'
+ line 879: ' p5.mapper is a projection mapping library for p5.js. This library makes it '
+ line 880: ' easy to code and keystone interactive, algorithmic sketches.'
+ line 881: ' p5.teach'
+ line 882: ' A beginner friendly math animation library for p5.js. Created with mentorship '
+ line 85: ' under the terms of the '
+ line 26: footer6
+ line 25: footer2
+ line 27: footer4
+ line 31: footer8
+ line 32: footer9
+ line 28: footer5
+ line 29: footer6
+ line 30: footer7
+ line 1174: ' The Summer 2021 Showcase'
+ line 270: ' particular topics. Check out the'
+ line 288: ' to the index.html containing your p5.js sketch.'
+ line 297: ' file and the embed.html file for the sketch.'
+ line 306: ' be'
+ line 310: ' stylesheet)'
+ line 319: ' was ported to P5 by Kelly Chang. If you find any errors or have comments,'
+ line 330: ' background(255); // Setting the background to white'
+ line 331: ' stroke(0); // Setting the outline (stroke) to black'
+ line 332: ' fill(150); // Setting the interior of a shape (fill) to grey'
+ line 340: ' black. Also, remember not to eliminate both—with'
+ line 349: ' percentage). You can do this by specifying a custom'
+ line 358: ' want to use the'
+ line 363: ' and the bottom right corner). The mode here is'
+ line 374: ' Using p5.js, this book introduces and demonstrates the reflexive practice'
+ line 375: ' of aesthetic programming, engaging with learning to program as a way to'
+ line 376: ' understand and question existing technological objects and paradigms,'
+ line 385: ' p5.js work or your own to be featured here! If Google is not available in your region, please email chankati@usc.edu to submit!'
+ line 394: ' environments.'
+ line 398: ' better connect the p5.js learner and educator communities around the world.'
+ line 407: ' examples.'
+ line 415: ' links available in'
+ line 261: ' the'
+ line 279: ' of the p5js site. The file called index.hbs is the'
+ line 442: ' .pdf format, all hosted publicly on GitHub.'
+ line 1536: ' teach-case2-image-alt'
+ line 1544: ' teach-case4-image-alt'
+ line 1552: ' teach-case6-image-alt'
+ line 1560: ' teach-case8-image-alt'
+ line 1568: ' teach-case9-image-alt'
+ line 1576: ' teach-case11-image-alt'
+ line 1584: ' teach-case12-image-alt'
+ 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 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
+ line 256: ' , the organization that supports p5.js.'
+ 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'
@@ -4330,102 +3826,90 @@ zh-Hans:
line 127: ' p3xp4'
line 137: ' sketch_credits'
line 138: ' sketch_info'
- line 270: ' environment5'
- line 271: ' environment6'
- line 272: ' If you are a screen reader user and not using the p5 web editor, you may'
- line 273: ' want to use'
- line 282: ' edit it.'
- line 283: ' environment10'
- line 284: ' environment11'
- line 285: ' Open the index.html file in your browser by double clicking on it in your'
- line 286: ' file manager or type'
- line 287: ' environment12'
- line 288: ' environment14'
- line 289: ' environment15'
- line 290: ' environment16'
- line 291: ' environment13'
- line 292: ' your-first-sketch-title'
- line 293: ' your-first-sketch-intro1'
- line 294: ' your-first-sketch-intro2'
- line 295: ' your-first-sketch-intro3'
- line 296: ' your-first-sketch-intro4'
- line 297: ' your-first-sketch1'
- line 298: ' your-first-sketch2'
- line 299: ' your-first-sketch3'
- line 300: ' your-first-sketch4'
- line 301: ' The line you just added draws an ellipse, with its center 50 pixels over'
- line 302: ' from the left and 50 pixels down from the top, with a width and height of 80'
- line 303: ' pixels.'
- line 304: ' your-first-sketch5'
- line 305: ' your-first-sketch6'
- line 306: ' If you are using a screen reader, you must turn on the accessible outputs in'
- line 307: ' the p5 online editor, outside the editor you must add the accessibility'
- line 308: ' library in your html. To learn more visit '
- line 309: ' your-first-sketch7'
- line 310: ' your-first-sketch8'
- line 311: ' If you''ve typed everything correctly, this will appear in the display'
- line 312: ' window'
- line 313: ' your-first-sketch9'
- line 314: ' your-first-sketch10'
- line 315: ' If nothing appears, the editor may be having trouble understanding what'
- line 316: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
- line 317: ' exactly'
- line 318: ' between each of them, the line should end with a semicolon, and ellipse has'
- line 319: ' to be spelled correctly.'
- line 320: ' your-first-sketch11'
- line 321: ' One of the most difficult things about getting started with programming is'
- line 322: ' that you have to be very specific about the syntax. The browser isn''t always'
- line 323: ' smart enough to know what you mean, and can be quite fussy about the'
- line 324: ' placement of punctuation. You''ll get used to it with a little practice. In'
- line 325: ' the bottom left of the editor you will find the console section. Here, you'
- line 326: ' can find messages from the editor with details about any errors it'
- line 327: ' encounters.'
- line 328: ' your-first-sketch12'
- line 329: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
- line 330: ' last example to try this'
- line 331: ' your-first-sketch13'
- line 332: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
- line 333: ' and then starts drawing white circles at the position of the mouse. When a'
- line 334: ' mouse button is pressed, the circle color changes to black. Run the code,'
- line 335: ' move the mouse, and click to experience it.'
- line 336: ' your-first-sketch14'
- line 337: ' first-sketch-heading1'
- line 338: ' first-sketch-heading2'
- line 339: ' first-sketch-heading3'
- line 340: ' what-next-title'
- line 341: ' learn1'
- line 342: ' learn2'
- line 343: ' learn3'
- line 344: ' learn4'
- line 345: ' learn5'
- line 346: ' learn6'
- line 347: ' learn7'
- line 348: ' learn8'
- line 349: ' learn9'
- line 350: ' learn10'
- line 351: ' reference1'
- line 352: ' reference2'
- line 353: ' reference3'
- line 354: ' learn11'
- line 355: ' learn12'
- line 356: ' processing-transition1'
+ 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 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 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 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 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 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 333: ' learn1'
+ line 334: ' learn2'
+ line 335: ' learn3'
+ line 336: ' learn4'
+ line 337: ' learn5'
+ line 338: ' learn6'
+ line 339: ' learn7'
+ 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 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: ' download5'
- line 281: ' Click on your sketch.js file and it will open on the right where 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: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
- line 274: ' environment7'
- line 875: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
+ line 259: ' environment-title'
+ line 274: ' folder directly below.'
line 233: ' This page walks you through setting up a p5.js project and making your first'
line 234: ' sketch.'
- line 244: ' settingUp-title'
- line 245: ' download-title'
+ 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'
@@ -4436,1357 +3920,16 @@ zh-Hans:
line 46: Community
line 133: ' p4xp3'
line 134: ' p4xp4'
- line 357: ' processing-transition2'
- line 358: ' processing-transition3'
- line 359: ' processing-transition4'
- line 360: ' book1'
- line 361: ' Parts of this tutorial were adapted from the book, Getting Started with'
- line 362: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
- line 363: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
- line 364: ' Contributors Conference.'
- 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 243: ' get-started-button'
- line 246: ' hosted-title'
- line 247: ' download1'
- line 248: ' download2'
- line 249: ' download3'
- line 250: ' download8'
- line 252: ' download10'
- line 253: ' download11'
- line 254: ' download4'
- line 255: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
- line 257: ' loading), change the link to p5.min.js.'
- line 260: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
- line 261: ' of these versions in the'
- line 262: ' download6'
- line 263: ' download7'
- line 264: ' environment-title'
- line 278: ' find the folder name at the top, with a list of the files contained in the'
- line 279: ' folder directly below.'
- line 280: ' environment9'
- line 444: ' Download'
- line 445: ' download-intro'
- line 446: ' Welcome! While titled "Download" this page actually contains a collection of'
- line 447: ' links to either download the library or begin working with it online. We''ve'
- line 448: ' tried to order things to reflect what a beginner might want first, to'
- line 449: ' resources that more experienced programmers may be looking for.'
- line 450: ' editor-title'
- line 451: ' p5.js-editor'
- line 452: ' p5.js-editor-intro'
- line 453: ' This link redirects you to the p5.js Editor online so you can begin using'
- line 454: ' p5.js immediately.'
- line 455: ' editor-includes'
- line 456: ' complete-library-title'
- line 457: ' complete-library-intro1'
- line 458: ' This is a download containing the p5.js library file, the p5.sound addon,'
- line 459: ' and an example project. It does not contain an editor. Visit'
- line 460: ' complete-library-intro2'
- line 461: ' complete-library-intro3'
- line 462: ' p5.js-complete'
- line 463: ' includes-1'
- line 464: ' includes-2'
- line 465: ' includes-3'
- line 466: ' single-files-title'
- line 467: ' single-files-intro'
- line 468: ' These are downloads or links to the p5.js library file. No additional'
- line 469: ' contents are included.'
- line 470: ' single-file'
- line 471: ' p5.js-uncompressed'
- line 472: ' compressed'
- line 473: ' link'
- line 474: ' statically-hosted-file'
- line 475: ' etc-title'
- line 476: ' older-releases'
- line 477: ' github-repository'
- line 478: ' report-bugs'
- line 479: ' supported-browsers'
- line 480: ' support-title'
- line 481: ' support-options'
- line 482: ' support-1'
- line 483: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
- line 484: ' and inclusive as possible. You can support this work by making a donation to'
- line 485: ' the '
- line 486: ' support-2'
- line 487: ' , the organization that supports p5.js.'
- line 488: ' Your donation supports software development for p5.js, education resources'
- line 489: ' like code examples and tutorials,'
- line 490: ' support-3'
- line 491: ' support-4'
- line 492: ' support-5'
- line 493: ' support-17'
- line 494: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
- line 495: ' Pittsburgh (Image credit'
- line 496: ' support-18'
- line 497: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
- line 498: ' workshops in London (Image credit'
- line 499: ' support-19'
- line 500: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
- line 501: ' Kira Simon-Kennedy)'
- line 502: ' support-20'
- line 503: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
- line 504: ' (Image credit'
- line 505: ' support-21'
- line 506: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
- line 507: ' credit'
- line 508: ' support-22'
- line 509: ' support-23'
- line 510: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
- line 511: ' (Image credit'
- line 512: ' support-24'
- line 513: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
- line 514: ' workshop led by Taeyoon Choi (Image credit'
- line 515: ' support-25'
- line 516: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
- line 517: ' Pittsburgh (Image credit'
- line 518: ' support-26'
- line 519: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
- line 520: ' International Center of Photography (Image credit'
- line 521: ' Photography)'
- line 522: ' support-27'
- line 523: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
- line 524: ' Montoya-Moraga (Image credit'
- line 525: ' support-28'
- line 526: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
- line 527: ' led by Taeyoon Choi (Image credit'
- line 528: ' support-29'
- line 529: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
- line 530: ' Angeles (Image credit'
- line 531: ' support-30'
- line 532: ' support-31'
- line 533: ' support-32'
- line 534: ' support-33'
- line 535: ' support-17-alt'
- line 536: ' support-18-alt'
- line 537: ' support-19-alt'
- line 538: ' support-20-alt'
- line 539: ' support-21-alt'
- line 540: ' support-22-alt'
- line 541: ' support-23-alt'
- line 542: ' support-24-alt'
- line 543: ' support-25-alt'
- line 544: ' support-26-alt'
- line 545: ' support-27-alt'
- line 546: ' support-28-alt'
- line 547: ' support-29-alt'
- line 548: ' support-30-alt'
- line 549: ' support-31-alt'
- line 729: ' teach-title2'
- line 730: ' learn1'
- line 731: ' These tutorials provide more in-depth or step-by-step overviews of'
- line 732: ' particular topics. Check out the '
- line 733: ' learn2'
- line 734: ' learn3'
- line 735: ' introduction-to-p5js-title'
- line 736: ' hello-p5js-title'
- line 737: ' hello-p5js'
- line 738: ' This short video will introduce you to the library and what you can do with'
- line 739: ' it.'
- line 740: ' getting-started-title'
- line 741: ' getting-started'
- line 742: ' Welcome to p5.js!
This introduction covers the basics of setting up a'
- line 743: ' p5.js project.'
- line 744: ' p5js-overview-title'
- line 745: ' p5js-overview'
- line 746: ' p5js-processing-title'
- line 747: ' p5js-processing'
- line 748: ' The main differences between the two, and how to convert from one to the'
- line 749: ' other.'
- line 750: ' p5-screen-reader-title'
- line 751: ' p5-screen-reader'
- line 752: ' using-local-server-title'
- line 753: ' using-local-server'
- line 754: ' p5js-wiki-title'
- line 755: ' p5js-wiki'
- line 756: ' connecting-p5js-title'
- line 757: ' creating-libraries-title'
- line 758: ' creating-libraries'
- line 759: ' nodejs-and-socketio-title'
- line 760: ' nodejs-and-socketio'
- line 761: ' programming-topics-title'
- line 762: ' beyond-the-canvas-title'
- line 763: ' beyond-the-canvas'
- line 764: ' 3d-webgl-title'
- line 765: ' 3d-webgl'
- line 766: ' color-title'
- line 767: ' color'
- line 768: ' coordinate-system-and-shapes-title'
- line 769: ' coordinate-system-and-shapes'
- line 770: ' interactivity-title'
- line 771: ' interactivity'
- line 772: ' program-flow-title'
- line 773: ' program-flow'
- line 774: ' curves-title'
- line 775: ' curves'
- line 776: ' An introduction to the three types of curves in p5.js'
- line 777: ' and Bézier curves.'
- line 778: ' becoming-a-better-programmer-title'
- line 779: ' debugging-title'
- line 780: ' debugging'
- line 781: ' optimizing-title'
- line 782: ' optimizing'
- line 783: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
- line 784: ' and smoother.'
- line 785: ' test-driven-development-title'
- line 786: ' test-driven-development'
- line 787: ' Save yourself from agony on install day. What is unit testing and how to use'
- line 788: ' it? By Andy Timmons.'
- line 789: ' contributing-to-the-community-title'
- line 790: ' development-title'
- line 791: ' development'
- line 792: ' looking-inside-title'
- line 793: ' looking-inside'
- line 794: ' A friendly intro to the file structure and tools for p5.js development, by'
- line 795: ' Luisa Pereira.'
- line 796: ' writing-tutorial-title'
- line 797: ' writing-tutorial'
- line 798: ' writing-a-tutorial-title'
- line 799: ' writing-a-tutorial-author'
- line 800: ' writing-a-tutorial-1'
- line 801: ' We invite educators, contributors and general enthusiasts to contribute p5js'
- line 802: ' tutorials. The p5js project makes creative coding and open source'
- line 803: ' development more accessible to a diverse community and we are excited to'
- line 804: ' publish tutorials on all aspects of the development process. Our learning'
- line 805: ' materials so far include guides on learning p5, programming technique and'
- line 806: ' how to contribute to an open source project.'
- line 807: ' writing-a-tutorial-2'
- line 808: ' We welcome new written tutorial contributions and this guide outlines the'
- line 809: ' steps of how to propose, prepare and contribute.'
- line 810: ' writing-a-tutorial-how-start-title'
- line 811: ' writing-a-tutorial-how-start-1'
- line 812: ' writing-a-tutorial-how-start-2'
- line 813: ' writing-a-tutorial-how-start-3'
- line 814: ' that outlines in progress tutorials. If your topic is listed as in progress,'
- line 815: ' perhaps you can add to work being done and contribute to preparing existing'
- line 816: ' work for publication so please reach out to us.'
- line 817: ' writing-a-tutorial-how-start-4'
- line 818: ' If your topic is not already covered and is not listed as in progress,'
- line 819: ' please write a few sentences on what you propose to cover and email us this'
- line 820: ' description at education@p5js.org.'
- line 821: ' writing-a-tutorial-how-prepare-title'
- line 822: ' writing-a-tutorial-how-prepare-1'
- line 823: ' When your tutorial is ready for publication, please follow these steps to'
- line 824: ' prepare your content for the p5js website.'
- line 825: ' writing-a-tutorial-how-prepare-2'
- line 826: ' writing-a-tutorial-how-prepare-3'
- line 827: ' writing-a-tutorial-how-prepare-4'
- line 828: ' writing-a-tutorial-how-prepare-5'
- line 829: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
- line 830: ' of the p5js site. The file called index.hbs is the '
- line 831: ' writing-a-tutorial-how-prepare-6'
- line 832: ' writing-a-tutorial-how-prepare-7'
- line 833: ' writing-a-tutorial-how-prepare-8'
- line 834: ' writing-a-tutorial-how-prepare-9'
- line 835: ' tags on the page, with formatting defined by the <h1> and <h2>'
- line 836: ' tags, the <p> paragraph tags as is done shown on the'
- line 837: ' writing-a-tutorial-how-prepare-10'
- line 838: ' writing-a-tutorial-how-prepare-11'
- line 839: ' If your tutorial contains images, they are to be placed in the assets folder'
- line 840: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
- line 841: ' shown below.'
- line 842: ' writing-a-tutorial-how-prepare-12'
- line 843: ' writing-a-tutorial-embedding-title'
- line 844: ' writing-a-tutorial-embedding-1'
- line 845: ' Using p5js means you can illustrate your tutorial with animated, interactive'
- line 846: ' or editable code examples to demonstrate programming concepts. Your examples'
- line 847: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
- line 848: ' in two ways.'
- line 849: ' writing-a-tutorial-embedding-2'
- line 850: ' writing-a-tutorial-embedding-3'
- line 851: ' writing-a-tutorial-embedding-4'
- line 852: ' writing-a-tutorial-embedding-5'
- line 853: ' writing-a-tutorial-embedding-6'
- line 854: ' writing-a-tutorial-embedding-7'
- line 855: ' writing-a-tutorial-embedding-8'
- line 856: ' writing-a-tutorial-embedding-9'
- line 857: ' writing-a-tutorial-embedding-10'
- line 858: ' If the example is to be animated and/or interactive but not editable. The'
- line 859: ' p5.js sketch should be embedded into the page as an iframe as described'
- line 860: ' below.'
- line 861: ' writing-a-tutorial-iframe-title'
- line 862: ' writing-a-tutorial-iframe-1'
- line 863: ' An iframe is like creating a window through which you can explore another'
- line 864: ' page, sandboxed from the rest of your page. In this case it will be a window'
- line 865: ' to the index.html containing your p5.js sketch. '
- line 866: ' writing-a-tutorial-iframe-2'
- line 867: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
- line 868: ' folder labelled with the name of your sketch as shown in the screenshot.'
- line 869: ' This is where all the images and p5 sketches linked by iframe should be'
- line 870: ' stored.'
- line 871: ' writing-a-tutorial-iframe-3'
- line 872: ' In the subfolders containing your p5 examples there should be a sketch.js'
- line 873: ' file and the embed.html file for the sketch. '
- line 874: ' writing-a-tutorial-iframe-4'
- line 876: ' the site. If your file structure is the same as above, the path to the p5.js'
- line 877: ' library should be "../../../js/p5.min.js".'
- line 878: ' writing-a-tutorial-iframe-5'
- line 879: ' You can then embed the p5js index files as iframes in the .hbs file that'
- line 880: ' contains your tutorial content. The embed code for the iframe would then'
- line 881: ' be'
- line 882: ' writing-a-tutorial-iframe-6'
- line 883: ' Styling for the iframe (this could directly into the post or in a'
- line 884: ' stylesheet)'
- line 885: ' writing-a-tutorial-iframe-7'
- line 886: ' writing-a-tutorial-iframe-8'
- line 887: ' writing-a-tutorial-iframe-9'
- line 888: ' One thing to note is that you need to manually set the size of the iframe,'
- line 889: ' so it works best if things are a standard size.'
- line 890: ' writing-a-tutorial-iframe-10'
- line 891: ' Also note that the links to the p5.js library files do not happen from the'
- line 892: ' .eps page with all the tutorial content. Instead they will be located in the'
- line 893: ' html page that is rendering your sketch (in this case, called embed.html).'
- line 894: ' writing-a-tutorial-iframe-11'
- line 895: ' writing-a-tutorial-embed-iframe-12'
- line 896: ' writing-a-tutorial-finishing-title'
- line 897: ' writing-a-tutorial-finishing-1'
- line 898: ' Once your have finished writing your tutorial and your content has been'
- line 899: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
- line 900: ' as described above and then issue a pull request to the p5.js website'
- line 901: ' repository so we can publish your contribution!'
- line 902: ' writing-a-tutorial-finishing-2'
- line 903: ' color-description1'
- line 904: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
- line 905: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
- line 906: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
- line 907: ' color-description2'
- line 908: ' color-p1x1'
- line 909: ' In the digital world, when we want to talk about a color, precision is'
- line 910: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
- line 911: ' Color, rather, is defined as a range of numbers. Let''s start with the'
- line 912: ' simplest case'
- line 913: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
- line 914: ' gray ranging from black to white.'
- line 915: ' color-p2x1'
- line 916: ' color-p2x2'
- line 917: ' color-p2x3'
- line 918: ' color-p2x4'
- line 919: ' color-code1'
- line 920: ' background(255); // Setting the background to white '
- line 921: ' stroke(0); // Setting the outline (stroke) to black '
- line 922: ' fill(150); // Setting the interior of a shape (fill) to grey '
- line 923: ' rect(50,50,75,100); // Drawing the rectangle'
- line 924: ' color-p3x1'
- line 925: ' color-p3x2'
- line 926: ' color-p3x3'
- line 927: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
- line 928: ' important to remember that 0 is not "nothing", but rather denotes the color'
- line 929: ' black. Also, remember not to eliminate both—with '
- line 930: ' color-p3x4'
- line 931: ' color-p3x5'
- line 932: ' color-p4x1'
- line 933: ' In addition, if we draw two shapes, p5.js will always use the most recently'
- line 934: ' specified stroke and fill, reading the code from top to bottom.'
- line 935: ' color-rgb-title'
- line 936: ' color-rgb-p1x1'
- line 937: ' Remember finger painting? By mixing three "primary" colors, any color could'
- line 938: ' be generated. Swirling all colors together resulted in a muddy brown. The'
- line 939: ' more paint you added, the darker it got. Digital colors are also constructed'
- line 940: ' by mixing three primary colors, but it works differently from paint. First,'
- line 941: ' the primaries are different'
- line 942: ' with color on the screen, you are mixing light, not paint, so the mixing'
- line 943: ' rules are different as well.'
- line 944: ' color-rgb-li1'
- line 945: ' color-rgb-li2'
- line 946: ' color-rgb-li3'
- line 947: ' color-rgb-li4'
- line 948: ' color-rgb-li5'
- line 949: ' color-rgb-p2x1'
- line 950: ' This assumes that the colors are all as bright as possible, but of course,'
- line 951: ' you have a range of color available, so some red plus some green plus some'
- line 952: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
- line 953: ' While this may take some getting used to, the more you program and'
- line 954: ' experiment with RGB color, the more it will become instinctive, much like'
- line 955: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
- line 956: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
- line 957: ' the individual color elements are expressed as ranges from 0 (none of that'
- line 958: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
- line 959: ' and B. You will get the hang of RGB color mixing through experimentation,'
- line 960: ' but next we will cover some code using some common colors.'
- line 961: ' color-transparency-title'
- line 962: ' color-transparency-p1x1'
- line 963: ' In addition to the red, green, and blue components of each color, there is'
- line 964: ' an additional optional fourth component, referred to as the color''s "alpha".'
- line 965: ' Alpha means transparency and is particularly useful when you want to draw'
- line 966: ' elements that appear partially see-through on top of one another. The alpha'
- line 967: ' values for an image are sometimes referred to collectively as the "alpha'
- line 968: ' channel" of an image.'
- line 969: ' color-transparency-p2x1'
- line 970: ' It is important to realize that pixels are not literally transparent, this'
- line 971: ' is simply a convenient illusion that is accomplished by blending colors.'
- line 972: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
- line 973: ' one to a percentage of another, creating the optical perception of blending.'
- line 974: ' (If you are interested in programming "rose-colored" glasses, this is where'
- line 975: ' you would begin.)'
- line 976: ' color-transparency-p3x1'
- line 977: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
- line 978: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
- line 979: ' color-custom-ranges-title'
- line 980: ' color-custom-ranges-p1x1'
- line 981: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
- line 982: ' in p5.js, in fact, it allows us to think about color any way we like. For'
- line 983: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
- line 984: ' percentage). You can do this by specifying a custom '
- line 985: ' color-custom-ranges-p2x1'
- line 986: ' The above function says'
- line 987: ' green, and blue. The range of RGB values will be from 0 to 100."'
- line 988: ' color-custom-ranges-p3x1'
- line 989: ' Although it is rarely convenient to do so, you can also have different'
- line 990: ' ranges for each color component'
- line 991: ' color-custom-ranges-p4x1'
- line 992: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
- line 993: ' from 0 to 10, and alpha from 0 to 255."'
- line 994: ' color-custom-ranges-p5x1'
- line 995: ' Finally, while you will likely only need RGB color for all of your'
- line 996: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
- line 997: ' and brightness) mode. Without getting into too much detail, HSB color works'
- line 998: ' as follows'
- line 999: ' color-custom-ranges-li1x1'
- line 1000: ' color-custom-ranges-li1x2'
- line 1001: ' color-custom-ranges-li2x1'
- line 1002: ' color-custom-ranges-li2x2'
- line 1003: ' color-custom-ranges-li3x1'
- line 1004: ' color-custom-ranges-li3x2'
- line 1005: ' color-custom-ranges-p6x1'
- line 1006: ' color-custom-ranges-p6x2'
- line 1007: ' coordinate-system-description1'
- line 1008: ' coordinate-system-description2'
- line 1009: ' coordinate-system-description3'
- line 1010: ' coordinate-system-description4'
- line 1011: ' coordinate-system-description5'
- line 1012: ' coordinate-system-description-title'
- line 1013: ' coordinate-system-description-p1x1'
- line 1014: ' Before we begin programming with p5, we must first channel our eighth grade'
- line 1015: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
- line 1016: ' distance between two points is a good old fashioned line, and this is where'
- line 1017: ' we begin, with two points on that graph paper.'
- line 1018: ' coordinate-system-description-p2x1'
- line 1019: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
- line 1020: ' you wanted to direct a friend of yours to draw that same line, you would'
- line 1021: ' give them a shout and say "draw a line from the point one-zero to the point'
- line 1022: ' four-five, please." Well, for the moment, imagine your friend was a computer'
- line 1023: ' and you wanted to instruct this digital pal to display that same line on its'
- line 1024: ' screen. The same command applies (only this time you can skip the'
- line 1025: ' pleasantries and you will be required to employ a precise formatting). Here,'
- line 1026: ' the instruction will look like this'
- line 1027: ' coordinate-system-description-p3x1'
- line 1028: ' Even without having studied the syntax of writing code, the above statement'
- line 1029: ' should make a fair amount of sense. We are providing a command (which we'
- line 1030: ' will refer to as a "function") for the machine to follow entitled "line." In'
- line 1031: ' addition, we are specifying some arguments for how that line should be'
- line 1032: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
- line 1033: ' code as a sentence, the function is a verb and the arguments are the objects'
- line 1034: ' of the sentence. The code sentence also ends with a semicolon instead of a'
- line 1035: ' period.'
- line 1036: ' coordinate-system-description-p4x1'
- line 1037: ' The key here is to realize that the computer screen is nothing more than a'
- line 1038: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
- line 1039: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
- line 1040: ' location of a point in space. And it is our job to specify what shapes and'
- line 1041: ' colors should appear at these pixel coordinates.'
- line 1042: ' coordinate-system-description-p5x1'
- line 1043: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
- line 1044: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
- line 1045: ' pointing up and the x-axis pointing to the right (in the positive direction,'
- line 1046: ' negative down and to the left). The coordinate system for pixels in a'
- line 1047: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
- line 1048: ' at the top left with the positive direction to the right horizontally and'
- line 1049: ' down vertically.'
- line 1050: ' coordinate-system-simple-shapes-title'
- line 1051: ' coordinate-system-simple-shapes-p1x1'
- line 1052: ' The vast majority of p5 programming examples are visual in nature. These'
- line 1053: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
- line 1054: ' begin by looking at four primitive shapes.'
- line 1055: ' coordinate-system-simple-shapes-p2x1'
- line 1056: ' For each shape, we will ask ourselves what information is required to'
- line 1057: ' specify the location and size (and later color) of that shape and learn how'
- line 1058: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
- line 1059: ' assume a window with a width of 100 pixels and height of 100 pixels.'
- line 1060: ' coordinate-system-simple-shapes-p3x1'
- line 1061: ' coordinate-system-simple-shapes-p3x2'
- line 1062: ' coordinate-system-simple-shapes-p4x1'
- line 1063: ' coordinate-system-simple-shapes-p4x2'
- line 1064: ' coordinate-system-simple-shapes-p5x1'
- line 1065: ' coordinate-system-simple-shapes-p5x2'
- line 1066: ' , things become a bit more complicated. In p5, a rectangle is specified by'
- line 1067: ' the coordinate for the top left corner of the rectangle, as well as its'
- line 1068: ' width and height.'
- line 1069: ' coordinate-system-simple-shapes-p6x1'
- line 1070: ' A second way to draw a rectangle involves specifying the centerpoint, along'
- line 1071: ' with width and height. If we prefer this method, we first indicate that we'
- line 1072: ' want to use the '
- line 1073: ' coordinate-system-simple-shapes-p6x2'
- line 1074: ' coordinate-system-simple-shapes-p7x1'
- line 1075: ' Finally, we can also draw a rectangle with two points (the top left corner'
- line 1076: ' and the bottom right corner). The mode here is '
- line 1077: ' coordinate-system-simple-shapes-p7x2'
- line 1078: ' coordinate-system-simple-shapes-p8x1'
- line 1079: ' coordinate-system-simple-shapes-p8x2'
- line 1080: ' coordinate-system-simple-shapes-p8x3'
- line 1081: ' coordinate-system-simple-shapes-p8x4'
- line 1082: ' coordinate-system-simple-shapes-p8x5'
- line 1083: ' coordinate-system-simple-shapes-p8x6'
- line 1084: ' coordinate-system-simple-shapes-p9x1'
- line 1085: ' Now let''s look at what some code with shapes in more complete form, with'
- line 1086: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
- line 1087: ' to specify the width and height of the canvas.'
- line 1088: ' teach-desc'
- line 1089: test-tutorial
- line 1147: ' p5.localmessage provides a simple interface to send messages locally from'
- line 1148: ' one sketch to another for easy multi-window sketching!'
- line 1149: ' marching'
- line 1150: ' mappa'
- line 1151: ' Mappa provides a set of tools for working with static maps, tile maps, and'
- line 1152: ' geo-data. Useful when building geolocation-based visual representations.'
- line 1153: ' ml5.js'
- line 1154: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
- line 1155: ' learning algorithms and models in the browser.'
- line 1156: ' p5.play'
- line 1157: ' p5.play provides sprites, animations, input and collision functions for'
- line 1158: ' games and gamelike applications.'
- line 1159: ' p5.particle'
- line 1160: ' The Particle and Fountain objects can be used to create data-driven effects'
- line 1161: ' that are defined through user structures or JSON input and user-draw'
- line 1162: ' functions.'
- line 1163: ' p5.Riso'
- line 1164: ' p5.Riso is a library for generating files suitable for Risograph printing.'
- line 1165: ' It helps turn your sketches into multi-color prints.'
- line 1166: ' rita.js'
- line 1167: ' RiTa.js provides a set of natural language processing objects for generative'
- line 1168: ' literature.'
- line 1169: ' Rotating knobs'
- line 1170: ' p5.scenemanager'
- line 1171: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
- line 1172: ' Each scene is a like a sketch within the main sketch.'
- line 1173: ' p5.screenPosition'
- line 1174: ' p5.scribble'
- line 1175: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
- line 1176: ' on a port of the original Processing library'
- line 1177: ' p5.serial'
- line 1178: ' p5.serial enables serial communication between devices that support serial'
- line 1179: ' (RS-232) and p5 sketches running in the browser.'
- line 1180: ' Shape5'
- line 1181: ' Shape5 is a 2D primative library for elementary students who are learning to'
- line 1182: ' code for the first time.'
- line 1183: ' p5.shape.js'
- line 1184: ' p5.speech'
- line 1185: ' p5.speech provides simple, clear access to the Web Speech and Speech'
- line 1186: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
- line 1187: ' and listen.'
- line 1188: ' p5.start2d.js'
- line 1189: ' p5.tiledmap'
- line 1190: ' p5.tiledmap provides drawing and helper functions to include maps in your'
- line 1191: ' sketches.'
- line 1192: ' p5.touchgui'
- line 1193: ' tramontana'
- line 1194: ' Tramontana is a platform for easily use many devices (iOS, Android,'
- line 1195: ' tramontana Board, ...) to create interactive environments, interactive'
- line 1196: ' spaces or just prototype experiences at scale and in space.'
- line 1197: ' vida'
- line 1198: ' Vida is a simple library that adds camera (or video) based motion detection'
- line 1199: ' and blob tracking functionality to p5js.'
- line 1200: ' p5.voronoi'
- line 1201: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
- line 1202: ' your p5.js sketches.'
- line 1203: ' p5.xr'
- line 1204: ' p5.3D'
- line 1205: ' using-a-library-title'
- line 1206: ' using-a-library1'
- line 1207: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
- line 1208: ' core functionality. There are two categories of libraries. Core libraries ('
- line 1209: ' using-a-library3'
- line 1210: ' ) are part of the p5.js distribution, while contributed libraries are'
- line 1211: ' developed, owned, and maintained by members of the p5.js community.'
- line 1212: ' using-a-library4'
- line 1213: ' To include a library in your sketch, link it into your HTML file, after you'
- line 1214: ' have linked in p5.js. An example HTML file might look like this'
- line 1215: ' create-your-own-title'
- line 1216: ' create-your-own1'
- line 1217: ' create-your-own2'
- line 1218: ' create-your-own3'
- line 1219: ' create-your-own4'
- line 1220: ' If you have created a library and would like to have it included on this'
- line 1221: ' page, submit this form!'
- line 1222: '>>>>>>> ded715d43dd9dd191404d8e380ba23112f647160'
- line 1420: ' notes3'
- line 1421: ' notes4'
- line 1422: ' notes5'
- line 1423: ' contribute-title'
- line 1424: ' contribute1'
- line 1425: ' Our community is always looking for enthusiasts to help in all different'
- line 1426: ' ways.'
- line 1427: ' develop-title'
- line 1428: ' develop1'
- line 1429: ' develop2'
- line 1430: ' develop3'
- line 1431: ' develop4'
- line 1432: ' develop5'
- line 1433: ' document-title'
- line 1434: ' document1'
- line 1435: ' document2'
- line 1436: ' document3'
- line 1437: ' document4'
- line 1438: ' document5'
- line 1439: ' teach-title'
- line 1440: ' teach1'
- line 1441: ' create-title'
- line 1442: ' create1'
- line 1443: ' create2'
- line 1444: ' create3'
- line 1445: ' donate-title'
- line 1446: ' donate1'
- line 1447: ' donate2'
- line 1448: ' donate3'
- line 1449: ' contributors-conference-title'
- line 1450: ' contributors-conference1'
- line 1451: ' While most work happens online, we also convene IRL. We''ve had two'
- line 1452: ' contributors conferences held at the'
- line 1453: ' contributors-conference2'
- line 1454: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
- line 1455: ' developers, educators, and got together to advance the p5.js project.'
- line 1456: ' participants-title'
- line 1457: ' support-title'
- line 1458: ' support1'
- line 1459: ' support2'
- line 1460: ' at Carnegie Mellon University, an academic laboratory for atypical,'
- line 1461: ' anti-disciplinary, and inter-institutional research at the intersections of'
- line 1462: ' arts, science, technology, and culture.'
- line 1463: ' support3'
- line 1464: ' support4'
- line 1465: ' support5'
- line 1466: ' support6'
- line 1467: ' mailing-list-title'
- line 1468: ' mailing-list-1'
- line 1469: ' Enter your email address to receive occasional updates from the Processing'
- line 1470: ' Foundation.'
- line 1471: ' 2015contributors-conference-title'
- line 1472: ' 2015contributors-conference-date'
- line 1473: ' 2015contributors-conference1'
- line 1474: ' 2015contributors-conference2'
- line 1475: ' , advancing the code, documentation, and community outreach tools of the'
- line 1476: ' p5.js programming environment. Participants came from as far away as Hong'
- line 1477: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
- line 1478: ' professionals in the fields of creative technology, interaction design, and'
- line 1479: ' new-media arts, but the group also included a half-dozen undergraduate and'
- line 1480: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
- line 1481: ' 2015contributors-conference3'
- line 1482: ' 2015contributors-conference-diversity-title'
- line 1483: ' 2015contributors-conference-diversity1'
- line 1484: ' Alongside technical development, one of the main focuses of this conference'
- line 1485: ' was outreach, community, and diversity. The conference began with a panel'
- line 1486: ' 2015contributors-conference-diversity2'
- line 1487: ' Diversity'
- line 1488: ' the Internet'
- line 1489: ' 2015contributors-conference-diversity3'
- line 1490: ' 2015contributors-conference-diversity4'
- line 1491: ' 2015contributors-conference-diversity5'
- line 1492: ' 2015contributors-conference-diversity6'
- line 1493: ' 2015contributors-conference-diversity7'
- line 1494: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
- line 1495: ' Mellon University. Speakers included'
- line 1496: ' 2015contributors-conference-diversity8'
- line 1497: ' 2015contributors-conference-diversity9'
- line 1498: ' 2015cc_1'
- line 1499: ' 2015cc_2'
- line 1500: ' 2015cc_3'
- line 1501: ' 2015cc_4'
- line 1502: ' Woman expressively speaks into a microphone while two male collaborators'
- line 1503: ' look on'
- line 1504: ' 2015cc_5'
- line 1505: ' 2015cc_6'
- line 1506: ' 2015cc_7'
- line 1507: ' Participants sit in a circle around a white board with sticky notes on it'
- line 1508: ' while a female student speaks into a microphone'
- line 1509: ' 2015cc_8'
- line 1510: ' Participants sit around a table looking at each others laptops and compare'
- line 1511: ' code'
- line 1512: ' 2015cc_9'
- line 1513: ' 2015cc_10'
- line 1514: ' Woman speaking into a microphone about valuing different skill sets while a'
- line 1515: ' group of participants with laptops look at her powerpoint in a classroom'
- line 1516: ' 2015cc_11'
- line 1518: ' the stage and another three are skyping in on the stage screen'
- line 1519: ' 2015cc_12'
- line 1520: ' 2015cc_13'
- line 1521: ' 2015cc_14'
- line 1522: ' 2015cc_15'
- line 1523: ' 2019contributors-conference-title'
- line 1524: ' 2019contributors-conference-date'
- line 1525: ' 2019contributors-conference1'
- line 1526: ' 2019contributors-conference2'
- line 1529: ' Comprising a diverse range of participants within the fields of creative'
- line 1530: ' technology, interaction design, and new media arts, the conference was aimed'
- line 1531: ' at fostering dialogue through a multidisciplinary lens. Working groups'
- line 1532: ' focused on several topic areas'
- line 1533: ' Landscape of Creative Tech; and Internationalization.'
- line 1534: ' 2019contributors-conference3'
- line 1535: ' 2019contributors-conference4'
- line 1536: ' outputs'
- line 1538: ' . An implementation of highly flexible triangle, square, hexagon, and'
- line 1539: ' octagon girds for p5.js. Created by Aren Davey.'
- line 1540: ' output2'
- line 1541: ' . A set of template files for building a multi-device, multiplayer game'
- line 1542: ' where multiple clients can connect to a specified host page. Created by L05.'
- line 1543: ' output3'
- line 1544: ' output3-1'
- line 1666: ' books-title'
- line 1667: ' book-1-title'
- line 1668: ' book-1-authors'
- line 1712: ' book-4-order-b'
- line 1713: ' book-5-title'
- line 1714: ' book-5-authors'
- line 1715: ' book-5-publisher'
- line 1716: ' book-5-pages'
- line 1717: ' book-5-type'
- line 1718: ' book-5-description'
- line 1719: ' Learn coding from scratch in a highly engaging and visual manner using the'
- line 1720: ' vastly popular JavaScript with the programming library p5.js. The skills you'
- line 1721: ' will acquire from this book are highly transferable to a myriad of'
- line 1722: ' industries and can be used towards building web applications, programmable'
- line 1723: ' robots, or generative art.'
- line 1724: ' book-5-order-a'
- line 1725: ' book-5-order-b'
- line 1726: ' book-6-title'
- line 1727: ' book-6-authors'
- line 1728: ' book-6-publisher'
- line 1729: ' book-6-pages'
- line 1730: ' book-6-type'
- line 1731: ' book-6-description'
- line 1732: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
- line 1733: ' of aesthetic programming, engaging with learning to program as a way to '
- line 1734: ' understand and question existing technological objects and paradigms, '
- line 1735: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
- line 1736: ' book-6-order-a'
- line 1737: ' book-6-order-b'
- line 1766: ' Examples'
- line 1767: ' back-examples'
- line 1768: ' Structure'
- line 1769: ' Form'
- line 1770: ' Data'
- line 1771: ' Arrays'
- line 2005: ' creator-from-roni-cantor'
- line 2006: ' project-links'
- line 2007: ' project-links-text-1-roni-cantor'
- line 2008: ' project-links-text-2-roni-cantor'
- line 2009: ' project-q-1-1'
- line 2010: ' project-q-1-2'
- line 2011: ' project-a-1-1-roni-cantor'
- line 2012: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
- line 2013: ' years of coding and making robots, I decided to take a break and play with'
- line 2014: ' some more traditional forms of art—while still coding and playing with'
- line 2015: ' robots.'
- line 2016: ' project-a-1-2-roni-cantor'
- line 2017: ' project-a-1-3-roni-cantor'
- line 2018: ' project-a-1-4-roni-cantor'
- line 2019: ' project-q-2'
- line 2020: ' project-a-2-1-roni-cantor'
- line 2021: ' I used p5.js in this project to generate the sine wave and lerp (linear'
- line 2022: ' interpolation) formulas and display the visuals in the'
- line 2023: ' project-a-2-2-roni-cantor'
- line 2024: ' . I then used a feature in my code that exported my programmed graphic into'
- line 2025: ' an'
- line 2026: ' project-a-2-3-roni-cantor'
- line 2027: ' project-a-2-4-roni-cantor'
- line 2028: ' —so that it understood where to draw the lines that I programmed. I sent'
- line 2029: ' this information to the plotter with a program called'
- line 2030: ' project-a-2-5-roni-cantor'
- line 2031: ' project-q-3'
- line 2032: ' project-a-3-roni-cantor'
- line 2033: ' project-q-4'
- line 2034: ' Did you face any challenges working on this project? If so, how did you'
- line 2035: ' overcome them?'
- line 2036: ' project-a-4-roni-cantor'
- line 2037: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
- line 2038: ' benefited from the people around me who had used p5 before, as well as'
- line 2039: ' online guides and forums.'
- line 2040: ' project-q-5'
- line 2041: ' project-a-5-roni-cantor'
- line 2042: ' project-q-6'
- line 2043: ' project-a-6-roni-cantor'
- line 2044: ' project-resources'
- line 2045: ' creator-from-qianqian'
- line 2046: ' interview-link-qianqian'
- line 2047: ' project-a-1-1-qianqian'
- line 2048: ' project-a-1-2-qianqian'
- line 2049: ' My partner introduced me to p5.js, which I learned mainly by watching free'
- line 2050: ' online video tutorials. My first p5.js project was drawing some shapes with'
- line 2051: ' different colors.'
- line 2052: ' project-a-2-1-qianqian'
- line 2053: ' This project started with an idea of teaching my mom, who lives in China and'
- line 2054: ' doesn’t speak English, to code with p5.js. This project was difficult on'
- line 2055: ' multiple levels, and I wanted to start by identifying the main reasons why'
- line 2056: ' it’s more challenging for someone like my mother to learn to code—primarily'
- line 2057: ' due to the lack of free creative coding education resources. Most of the'
- line 2058: ' free resources to learn creative coding are unavailable in China. The p5.js'
- line 2059: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
- line 2060: ' inaccessible in China because of internet censorship.'
- line 2061: ' project-a-2-2-qianqian'
- line 2062: ' project-a-2-3-qianqian'
- line 2063: ' , but the more I watched coding tutorials online, the more I realized how'
- line 2064: ' difficult it is to find other womxn and people of color teaching coding,'
- line 2065: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
- line 2066: ' creative coding.'
- line 2067: ' project-a-2-4-qianqian'
- line 2068: ' I am working on opening up the video channels to other Chinese creatives who'
- line 2069: ' want to contribute to the educational resource together, like interviews and'
- line 2070: ' guest tutorials. If you are interested in teaching/talking about creative'
- line 2071: ' coding in Mandarin, HMU!'
- line 2072: ' project-a-3-1-qianqian'
- line 2073: ' project-a-3-2-qianqian'
- line 2074: ' project-a-4-1-qianqian'
- line 2075: ' Learning to code in a second language was difficult and the lack of'
- line 2076: ' community made this process even harder. I hope to speak from my experience'
- line 2077: ' as a beginner and someone who once felt like an outsider to the creative'
- line 2078: ' coding and video tutorial world.'
- line 2079: ' project-a-4-2-qianqian'
- line 2080: ' I spend a lot of time researching the latest technology for my videos. In'
- line 2081: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
- line 2082: ' encourage others that it doesn’t take a lot of expensive gears to get'
- line 2083: ' started making instructional videos.'
- line 2084: ' project-a-4-3-qianqian'
- line 2085: ' Another issue I came across was my own fear of putting myself online. I'
- line 2086: ' first had to get over my anxiety of making mistakes in the videos or'
- line 2087: ' receiving negative comments online. Often womxn and people of color are'
- line 2088: ' targets for online harassment. I’m hoping to help set an example for other'
- line 2089: ' womxn and people of color that it’s ok to put yourselves online and'
- line 2090: ' strengthen your communities by sharing your knowledge. Eventually, we will'
- line 2091: ' be able to stop online harassment by creating strong diverse communities.'
- line 2092: ' project-a-5-1-qianqian'
- line 2093: ' project-a-5-2-qianqian'
- line 2094: ' creator-from-phuong'
- line 2095: ' project-a-1-1-phuong'
- line 2096: ' link-1-phuong'
- line 2097: ' link-2-phuong'
- line 2098: ' link-3-phuong'
- line 2099: ' project-a-1-2-phuong'
- line 2100: ' project-a-1-3-phuong'
- line 2101: ' I was taking a course at the School of Machines in Berlin this summer'
- line 2102: ' called! "'
- line 2103: ' project-a-1-4-phuong'
- line 2104: ' project-a-2-1-phuong'
- line 2105: ' I used p5.js to work on the visual part of the game. The animation sprites'
- line 2106: ' for Airi and the ghosts were drawn on an iPad app called'
- line 2107: ' project-a-2-2-phuong'
- line 2108: ' project-a-2-3-phuong'
- line 2109: ' project-a-2-4-phuong'
- line 2110: ' p5-sketch-by-chjno-phuong'
- line 2111: ' project-a-2-5-phuong'
- line 2112: ' . I set a condition so whenever the word "pew" or a mouse click was'
- line 2113: ' detected, the scrolling speed would change to make an illusion of Airi'
- line 2114: ' flying up. When the user does not do anything, the scrolling speed is'
- line 2115: ' negative, which makes it look like Airi is falling down.'
- line 2116: ' project-a-2-6-phuong'
- line 2117: ' project-a-2-7-phuong'
- line 2118: ' project-a-3-1-phuong'
- line 2119: ' I really love how easily you can create, manipulate, and delete HTML blocks'
- line 2120: ' and classes with the'
- line 2121: ' project-a-3-2-phuong'
- line 2122: ' project-a-3-3-phuong'
- line 2123: ' project-a-3-4-phuong'
- line 2124: ' project-a-4-1-phuong'
- line 2125: ' There were a lot of challenges simply because p5.js was something new to me.'
- line 2126: ' I did not work much with JavaScript in general before. Reading documentation'
- line 2127: ' and searching for similar examples helped a lot.'
- line 2128: ' project-a-5-1-phuong'
- line 2129: ' school-of-machines-phuong'
- line 2130: ' project-a-5-2-phuong'
- line 2131: ' ! They try hard to connect the most creative people in the world and they do'
- line 2132: ' it well so far. ❤️'
- line 2133: ' pronouns-male'
- line 2134: ' creator-from-chung'
- line 2135: ' link-1-casey-louise'
- line 2136: ' link-2-casey-louise'
- line 2137: ' link-1-chung'
- line 2138: ' link-2-chung'
- line 2139: ' link-3-chung'
- line 2140: ' project-a-1-1-chung'
- line 2141: ' I am a graphic designer and a faculty member at Maryland Institute College'
- line 2142: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
- line 2143: ' and motion graphics.'
- line 2144: ' project-a-1-2-chung'
- line 2145: ' project-a-1-3-chung'
- line 2146: ' project-a-2-1-chung'
- line 2147: ' This summer, I gave myself a challenge of making typographic posters with'
- line 2148: ' coding, and this is one of the posters I made. I didn’t know until very'
- line 2149: ' recently that I could use motion sensor data with p5.js. I was also watching'
- line 2150: ' dan-shiffman-matterjs-tutorial'
- line 2151: ' project-a-2-2-chung'
- line 2152: ' project-a-3-1-chung'
- line 2153: ' There are many things I love about p5.js such as the online community and'
- line 2154: ' beginner friendliness. What I really like right now is the'
- line 2155: ' project-a-3-2-chung'
- line 2156: ' , with which I can not only work online for myself but also share URLs'
- line 2157: ' quickly in the present mode. For this project in particular, I had to do a'
- line 2158: ' lot of testing on my phone, and it was much easier and quicker than'
- line 2159: ' committing to GitHub.'
- line 2160: ' project-a-4-1-chung'
- line 2161: ' project-a-4-2-chung'
- line 2162: ' project-a-4-3-chung'
- line 2163: ' project-a-5-1-chung'
- line 2164: ' As mentioned above, if you want to render out frames and video files out of'
- line 2165: ' p5.js sketches, check out my'
- line 2166: ' project-a-5-2-chung'
- line 2167: ' creator-from-casey-louise'
- line 2168: ' project-a-1-1-casey-louise'
- line 2169: ' Casey'
- line 2170: ' interactive spaces, physical and digital.'
- line 2171: ' project-a-1-2-casey-louise'
- line 2172: ' Louise'
- line 2173: ' interactive spaces based on sensor technologies.'
- line 2174: ' project-a-1-3-casey-louise'
- line 2175: ' Casey'
- line 2176: ' I had been dabbling in'
- line 2177: ' project-a-1-4-casey-louise'
- line 2178: ' project-a-1-5-casey-louise'
- line 2179: ' Louise'
- line 2180: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
- line 2181: ' me.'
- line 2182: ' project-a-2-1-casey-louise'
- line 2183: ' Casey'
- line 2184: ' curious if I could use them in p5.js. Then I heard about a grant for open'
- line 2185: ' source, storytelling, and learning resource projects at ITP called'
- line 2186: ' project-a-2-2-casey-louise'
- line 2187: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
- line 2188: ' decided to figure out how they''re implemented in p5.js and create a resource'
- line 2189: ' for others to learn. When I told Louise about the project, she was'
- line 2190: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
- line 2191: ' great about making sure the project is a learning resource and not just a'
- line 2192: ' collection of examples.'
- line 2193: ' project-a-3-1-casey-louise'
- line 2194: ' project-a-3-2-casey-louise'
- line 2195: ' project-a-3-3-casey-louise'
- line 2196: ' project-a-3-4-casey-louise'
- line 2197: ' project-a-3-5-casey-louise'
- line 2198: ' project-a-4-1-casey-louise'
- line 2199: ' Casey'
- line 2200: ' reaching out to amazing people, asking questions, and asking for permission'
- line 2201: ' to use their examples in our project.'
- line 2202: ' adam-ferris-repo-casey-louise'
- line 2203: ' project-a-4-2-casey-louise'
- line 2204: ' project-a-4-3-casey-louise'
- line 2205: ' project-a-4-4-casey-louise'
- line 2206: ' webgl-casey-louise'
- line 2207: ' project-a-4-5-casey-louise'
- line 2208: ' project-a-4-6-casey-louise'
- line 2209: ' Louise'
- line 2210: ' Luckily, there were some very well-documented examples on GitHub by Adam'
- line 2211: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
- line 2212: ' understand how to implement it, so it was as much a technical challenge as'
- line 2213: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
- line 2214: ' inspiration from the way the'
- line 2215: ' openframeworks-book-casey-louise'
- line 2216: ' project-a-4-7-casey-louise'
- line 2217: ' project-a-5-1-casey-louise'
- line 2218: ' project-a-5-2-casey-louise'
- line 2219: ' pronouns-nonbinary'
- line 2220: ' creator-from-moon'
- line 2221: ' posters-by'
- line 2222: ' project-a-1-1-moon'
- line 2223: ' Moon'
- line 2224: ' summer, I taught a graphic design course in the University of Georgia'
- line 2225: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
- line 2226: ' planning to teach and to study digital platforms at UGA.'
- line 2227: ' project-a-1-2-moon'
- line 2228: ' project-a-1-3-moon'
- line 2229: ' project-a-1-4-moon'
- line 2230: ' pcd-la-moon'
- line 2231: ' project-a-1-5-moon'
- line 2232: ' . They helped me with the tools and logics of p5.js. It was an excellent'
- line 2233: ' teaching and learning experience.'
- line 2234: ' project-a-2-1-moon'
- line 2235: ' codetrain-moon'
- line 2236: ' project-a-2-2-moon'
- line 2237: ' p5-reference-moon'
- line 2238: ' project-a-2-3-moon'
- line 2239: ' project-a-3-1-moon'
- line 2240: ' project-a-3-2-moon'
- line 2241: ' project-a-3-3-moon'
- line 2242: ' project-a-3-4-moon'
- line 2243: ' . I was able to use and to teach this tool to visualize various ideas about'
- line 2244: ' time in motion.'
- line 2245: ' project-a-4-1-moon'
- line 2246: ' It was challenging for me, a beginner, to understand the overall structure'
- line 2247: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
- line 2248: ' couple of times, and then I drew a chart to memorize and to teach the way I'
- line 2249: ' understood the p5.js structure and code with strong constraints I set up. It'
- line 2250: ' was an excellent teaching and learning experience.'
- line 2251: ' project-a-5-1-moon'
- line 2252: ' project-a-5-2-moon'
- line 2253: teach
- line 2254: ' teach-title2'
- line 2255: ' teach-intro1'
- line 2256: ' Every teaching has its own unique goals, messages, conditions, and'
- line 2257: ' environments. '
- line 2258: ' teach-intro2'
- line 2259: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
- line 2260: ' better connect the p5.js learner and educator communities around the world. '
- line 2261: ' teach-intro3'
- line 2262: ' teach-intro4'
- line 2263: ' teach-heading'
- line 2264: ' teach-search-filter'
- line 2265: ' teach-filter1'
- line 2266: ' teach-filter1-label1'
- line 2267: ' teach-filter1-label2'
- line 2268: ' teach-filter1-label3'
- line 2269: ' teach-filter1-label4'
- line 2270: ' teach-filter1-label5'
- line 2271: ' teach-filter1-label6'
- line 2272: ' teach-filter1-label7'
- line 2273: ' teach-filter1-label8'
- line 2274: ' teach-filter1-label9'
- line 2275: ' teach-filter1-label10'
- line 2276: ' teach-filter1-label11'
- line 2277: ' teach-filter1-label12'
- line 2278: ' teach-filter1-label13'
- line 2279: ' teach-filter1-label14'
- line 2280: ' teach-filter1-label15'
- line 2281: ' teach-filter1-label16'
- line 2282: ' teach-filter2'
- line 2283: ' teach-filter2-label1'
- line 2284: ' teach-filter2-label2'
- line 2285: ' teach-filter2-label3'
- line 2286: ' teach-filter2-label4'
- line 2287: ' teach-filter2-label5'
- line 2288: ' teach-filter2-label6'
- line 2289: ' teach-filter2-label7'
- line 2290: ' teach-filter3'
- line 2291: ' teach-filter4'
- line 2292: ' teach-filter4-label1'
- line 2293: ' teach-filter4-label2'
- line 2294: ' teach-filter4-label3'
- line 2295: ' teach-case-subtitle1'
- line 2296: ' teach-case-subtitle2'
- line 2297: ' teach-case-subtitle3'
- line 2298: ' teach-case-subtitle4'
- line 2299: ' teach-case-subtitle5'
- line 2300: ' teach-case1-title'
- line 2301: ' teach-case1-lead-name'
- line 2302: ' teach-case1-content1'
- line 2303: ' teach-case1-content1-1'
- line 2304: ' teach-case1-content2'
- line 2305: ' teach-case1-content3'
- line 2306: ' teach-case1-content4'
- line 2307: ' To introduce a new public to programming through fun and compelling'
- line 2308: ' examples. '
- line 2309: ' teach-case1-content5'
- line 2310: ' Method'
- line 2311: ' each times. The students were using (Ubuntu) machines with the p5.js web'
- line 2312: ' editor. I was teaching using a video projector as well as a board.'
- line 2313: ' teach-case1-content5-1'
- line 2314: ' Materials'
- line 2315: ' links available in '
- line 2316: ' teach-case2-title'
- line 2317: ' Making The Thing that Makes the Thing'
- line 2318: ' with p5.js'
- line 2319: ' teach-case2-lead-name'
- line 2320: ' teach-case2-content1'
- line 2321: ' teach-case2-content1-1'
- line 2322: ' teach-case2-content2'
- line 2323: ' Our participants included art/design students & professionals, creative'
- line 2324: ' coding enthusiasts. We had close to 50 participants.'
- line 2325: ' teach-case2-content3'
- line 2326: ' teach-case2-content4'
- line 2327: ' To explore generative art & design and recreate some classical works'
- line 2328: ' with p5.js. '
- line 2329: ' teach-case2-content5'
- line 2330: ' teach-case2-content5-1'
- line 2331: ' teach-case2-content5-2'
- line 2332: ' teach-case2-content5-3'
- line 2333: ' teach-case2-content5-4'
- line 2334: ' teach-case2-content5-5'
- line 2335: ' teach-case3-title'
- line 2336: ' teach-case3-lead-name'
- line 2337: ' teach-case3-speech'
- line 2338: ' teach-case3-content1'
- line 2339: ' teach-case3-content1-1'
- line 2340: ' teach-case3-content2'
- line 2341: ' Our participants included art/design students & professionals, creative'
- line 2342: ' coding enthusiasts. We had close to 50 participants.'
- line 2343: ' teach-case3-content3'
- line 2344: ' teach-case3-content4'
- line 2345: ' To build a teacher and student community around p5 for middle and high'
- line 2346: ' school.'
- line 2347: ' teach-case3-content5'
- line 2348: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
- line 2349: ' methods and materials. Most used some sort of slides or documentation, some'
- line 2350: ' live coding using an editor, with work time for participant to remix.'
- line 2351: ' teach-case3-content5-1'
- line 2352: ' teach-case3-content5-2'
- line 2353: ' teach-case3-content5-3'
- line 2354: ' teach-case4-title'
- line 2355: ' teach-case4-lead-name'
- line 2356: ' teach-case4-speech'
- line 2357: ' teach-case4-content1'
- line 2358: ' teach-case4-content1-1'
- line 2359: ' teach-case4-content2'
- line 2360: ' I had around 16 students in the workshop, and a team including 3 people from'
- line 2361: ' the PlusCode festival, and one person at the venue.'
- line 2362: ' teach-case4-content3'
- line 2363: ' teach-case4-content4'
- line 2364: ' Introduction to beginners and artists of graphic web programming and open'
- line 2365: ' source, using p5.js, in Spanish '
- line 2366: ' teach-case4-content5'
- line 2367: ' teach-case4-content5-1'
- line 2368: ' teach-case4-content5-2'
- line 2369: ' teach-case4-content5-3'
- line 2370: ' teach-case4-content5-4'
- line 2371: ' teach-case5-title'
- line 2372: ' teach-case5-lead-name'
- line 2373: ' teach-case5-speech'
- line 2374: ' My greatest source of uncertainty in developing the workshop was whether it'
- line 2375: ' was trying to teach art to programmers or to teach programming to artists.'
- line 2376: ' teach-case5-content1'
- line 2377: ' teach-case5-content1-1'
- line 2378: ' teach-case5-content1-2'
- line 2379: ' teach-case5-content1-3'
- line 2380: ' teach-case5-content2'
- line 2381: ' teach-case5-content3'
- line 2382: ' teach-case5-content4'
- line 2383: ' To introduce p5.js to artists with little or no programming experience and'
- line 2384: ' to suggest one way an analogue practice can migrate to a digital form.'
- line 2385: ' teach-case5-content5'
- line 2386: ' A printed workbook with activities that used the p5.js web editor to show'
- line 2387: ' how translate an physical drawing into a digital drawing.'
- line 2388: ' teach-case5-content5-1'
- line 2389: ' teach-case5-content5-2'
- line 2390: ' teach-case5-content5-3'
- line 2391: ' teach-case6-title'
- line 2392: ' teach-case6-lead-name'
- line 2393: ' teach-case6-speech'
- line 2394: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
- line 2395: ' your everyday life!'
- line 2396: ' teach-case6-content1'
- line 2397: ' teach-case6-content1-1'
- line 2398: ' teach-case6-content2'
- line 2399: ' teach-case6-content3'
- line 2400: ' teach-case6-content4'
- line 2401: ' teach-case6-content5'
- line 2402: ' teach-case6-content5-1'
- line 2403: ' teach-case6-content5-2'
- line 2404: ' teach-case6-content5-3'
- line 2405: ' teach-case6-content5-4'
- line 2406: ' teach-case6-content5-5'
- line 2407: ' teach-case7-title'
- line 2408: ' teach-case7-lead-name'
- line 2409: ' teach-case7-speech'
- line 2410: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
- line 2411: ' to give it a try!'
- line 2412: ' teach-case7-content1'
- line 2413: ' teach-case7-content1-1'
- line 2414: ' teach-case7-content2'
- line 2415: ' teach-case7-content3'
- line 2416: ' teach-case7-content4'
- line 2417: ' teach-case7-content5'
- line 2418: ' teach-case7-content5-1'
- line 2419: ' teach-case8-title'
- line 2420: ' teach-case8-lead-name'
- line 2421: ' teach-case8-content1'
- line 2422: ' teach-case8-content1-1'
- line 2423: ' teach-case8-content2'
- line 2424: ' teach-case8-content3'
- line 2425: ' teach-case8-content4'
- line 2426: ' teach-case8-content5'
- line 2427: ' teach-case8-content5-1'
- line 2428: ' teach-case8-content5-2'
- line 2429: ' teach-case9-title'
- line 2430: ' teach-case9-lead-name'
- line 2431: ' teach-case9-content1'
- line 2432: ' teach-case9-content1-1'
- line 2433: ' teach-case9-content2'
- line 2434: ' Students at Interactive Telecommunications Program, New York University. 16'
- line 2435: ' people.'
- line 2436: ' teach-case9-content3'
- line 2437: ' teach-case9-content4'
- line 2438: ' The goal of this class is to learn and understand common machine learning'
- line 2439: ' techniques and apply them to generate creative outputs in the browser using'
- line 2440: ' ml5.js and p5.js.'
- line 2441: ' teach-case9-content5'
- line 2442: ' This class is a mix of lectures, coding sessions, group discussions, and'
- line 2443: ' presentations. I used '
- line 2444: ' teach-case9-content5-1'
- line 2445: ' teach-case9-content5-2'
- line 2446: ' teach-case9-content5-3'
- line 2447: ' teach-case10-title'
- line 2448: ' teach-case10-lead-name'
- line 2449: ' teach-case10-content1'
- line 2450: ' teach-case10-content3'
- line 2451: ' teach-case10-content4'
- line 2452: ' Introduce learners (potentially with no coding experiences at all) to the'
- line 2453: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
- line 2454: ' and enable them to pursue own projects in a safe environment.'
- line 2455: ' teach-case10-content5'
- line 2456: ' p5.js source code (for the introductory project), JavaScript source code'
- line 2457: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
- line 2458: ' .pdf format, all hosted publicly on GitHub. '
- line 2459: ' teach-case10-content5-1'
- line 2460: ' teach-case10-content5-2'
- line 2461: ' teach-case11-title'
- line 2462: ' teach-case11-lead-name'
- line 2463: ' teach-case11-content1'
- line 2464: ' teach-case11-content1-1'
- line 2465: ' teach-case11-content2'
- line 2466: ' teach-case11-content3'
- line 2467: ' teach-case11-content4'
- line 2468: ' Over the course of three workshops, we will draw and create patterns using'
- line 2469: ' p5.js, an open-source graphical library; we will learn and apply'
- line 2470: ' computational concepts to transform patterns and finally, we will bring a'
- line 2471: ' weaving to life with electronic microcontrollers.'
- line 2472: ' teach-case11-content5'
- line 2473: ' teach-case11-content5-1'
- line 2474: ' Materials'
- line 2475: ' pattern weaving tool.'
- line 2476: ' teach-case11-content5-2'
- line 2477: ' teach-case11-content5-3'
- line 2478: ' teach-case11-content5-4'
- line 2479: ' teach-case11-content5-5'
- line 2480: ' teach-case12-title'
- line 2481: ' teach-case12-lead-name'
- line 2482: ' teach-case12-speech'
- line 2483: ' I''m working on a new series of coding class for Disabled students in South'
- line 2484: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
- line 2485: ' workshops in December 2020. The project is supported by the Open Society'
- line 2486: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
- line 2487: ' Center.'
- line 2488: ' teach-case12-content1'
- line 2489: ' teach-case12-content1-1'
- line 2490: ' teach-case12-content2'
- line 2491: ' teach-case12-content3'
- line 2492: ' teach-case12-content4'
- line 2493: ' To help Deaf and Hard of Hearing students learn about computer programming'
- line 2494: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
- line 2495: ' teach-case12-content5'
- line 2496: ' We used p5.js Web editor and code examples on the website. We also used'
- line 2497: ' dice, playing cards and various paper tools to help students learn about'
- line 2498: ' coding concepts.'
- line 2499: ' teach-case12-content5-1'
- line 2500: ' teach-case12-content5-2'
- line 2501: ' teach-case13-title'
- line 2502: ' teach-case13-lead-name'
- line 2503: ' teach-case13-speech'
- line 2504: ' I''m working on a new series of coding class for Disabled students in South'
- line 2505: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
- line 2506: ' workshops in December 2020. The project is supported by the Open Society'
- line 2507: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
- line 2508: ' Center.'
- line 2509: ' teach-case13-content1'
- line 2510: ' teach-case13-content1-1'
- line 2511: ' teach-case13-content2'
- line 2512: ' teach-case13-content3'
- line 2513: ' teach-case13-content4'
- line 2514: ' Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
- line 2515: ' teach-case13-content5'
- line 2516: ' Website, p5.js editor.'
- line 2517: ' teach-case13-content5-1'
- line 2540: ' teach-case14-title'
- line 2541: ' teach-case14-lead-name'
- line 2542: ' teach-case14-speech'
- line 2543: ' The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
- line 2544: ' teach-case14-content1'
- line 2545: ' teach-case14-content1-1'
- line 2546: ' teach-case14-content1-2'
- line 2547: ' teach-case14-content2'
- line 2548: ' teach-case14-content3'
- line 2549: ' teach-case14-content4'
- line 2550: ' To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,'
- line 2551: ' the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
- line 2552: ' teach-case14-content5'
- line 2553: ' p5.js, p5 web editor, ml5.js, and installations. '
- line 2554: ' teach-case14-content5-1'
- line 2555: ' 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
- line 2556: ' teach-case14-content5-2'
- line 2557: ' 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
- line 2558: ' teach-case14-content5-3'
- line 2559: ' 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
- line 2560: ' teach-case14-content5-4'
- line 2561: ' 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. '
- line 2562: ' teach-case14-content5-5'
- line 2563: ' teach-case15-title'
- line 2564: ' teach-case15-lead-name'
- line 2565: ' teach-case15-content1'
- line 2566: ' L''École de Design Nantes Atlantique, France'
- line 2567: ' teach-case15-content1-1'
- line 2568: ' teach-case15-content2'
- line 2569: ' Students from l''école de design Nantes Atlantique'''
- line 2570: ' teach-case15-content3'
- line 2571: ' teach-case15-content4'
- line 2572: ' To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
- line 2573: ' teach-case15-content5'
- line 2574: ' GitHub Readme File'
- line 2575: ' teach-case15-content5-1'
- line 2576: ' teach-case16-title'
- line 2577: ' 50+ Coding Club '
- line 2578: ' teach-case16-lead-name'
- line 2579: ' teach-case16-speech'
- line 2580: ' This workshop was conducted in line with ''p5 for 50+'' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).'
- line 2581: ' teach-case16-content1'
- line 2582: ' teach-case16-content1-1'
- line 2583: ' teach-case16-content2'
- line 2584: ' teach-case16-content2-1'
- line 2585: ' teach-case16-content2-2'
- line 2586: ' teach-case16-content3'
- line 2587: ' teach-case16-content4'
- line 2588: ' Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
- line 2589: ' this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
- line 2590: ' teach-case16-content5'
- line 2591: ' p5for50+ web app'
- line 2592: ' teach-case16-content5-1'
- line 2593: ' a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants'' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.'
- line 2594: ' teach-case16-content5-2'
- line 2595: ' teach-case16-content5-3'
- line 2596: ' teach-case16-content5-4'
- line 1623: ' teach-case17-speech'
- line 1624: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
- line 1625: ' teach-case17-content1'
- line 1626: ' teach-case17-content1-1'
- line 1627: ' teach-case17-content2'
- line 1628: ' teach-case17-content3'
- line 1629: ' teach-case17-content4'
- line 1630: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
- line 1631: ' teach-case17-content5'
- line 1632: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
- line 1633: ' teach-case17-content5-1'
- 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 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'
@@ -5796,6 +3939,12 @@ zh-Hans:
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
+ line 357: ' link-2-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 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'
@@ -5805,9 +3954,6 @@ zh-Hans:
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'
@@ -5816,7 +3962,6 @@ zh-Hans:
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'
@@ -5825,11 +3970,9 @@ zh-Hans:
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'
@@ -5838,7 +3981,6 @@ zh-Hans:
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'
@@ -5846,7 +3988,6 @@ zh-Hans:
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'
@@ -5876,25 +4017,595 @@ zh-Hans:
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 243: ' settingUp-title'
+ 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 262: ' environment2'
+ line 263: ' environment3'
+ line 264: ' environment4'
+ line 278: ' environment10'
+ 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!
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 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 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'
@@ -5941,6 +4652,213 @@ zh-Hans:
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'
+ line 1478: ' develop5'
+ line 1479: ' document-title'
+ line 1480: ' document1'
+ line 1481: ' document2'
+ line 1482: ' document3'
+ line 1483: ' document4'
+ line 1484: ' document5'
+ line 1485: ' teach-title'
+ line 1486: ' teach1'
+ line 1487: ' create-title'
+ line 1488: ' create1'
+ line 1489: ' create2'
+ line 1490: ' create3'
+ line 1491: ' donate-title'
+ line 1492: ' donate1'
+ line 1493: ' donate2'
+ line 1494: ' donate3'
+ line 1495: ' contributors-conference-title'
+ line 1496: ' contributors-conference1'
+ line 1497: ' While most work happens online, we also convene IRL. We''ve had two'
+ line 1498: ' contributors conferences held at the'
+ line 1499: ' contributors-conference2'
+ line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
+ line 1501: ' developers, educators, and got together to advance the p5.js project.'
+ line 1502: ' participants-title'
+ line 1503: ' support-title'
+ line 1504: ' support1'
+ line 1505: ' support2'
+ line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,'
+ line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of'
+ line 1508: ' arts, science, technology, and culture.'
+ line 1509: ' support3'
+ line 1510: ' support4'
+ line 1511: ' support5'
+ line 1512: ' support6'
+ line 1513: ' mailing-list-title'
+ line 1514: ' mailing-list-1'
+ line 1515: ' Enter your email address to receive occasional updates from the Processing'
+ line 1516: ' Foundation.'
+ line 1517: ' 2015contributors-conference-title'
+ line 1518: ' 2015contributors-conference-date'
+ line 1519: ' 2015contributors-conference1'
+ line 1520: ' 2015contributors-conference2'
+ line 1521: ' , advancing the code, documentation, and community outreach tools of the'
+ line 1522: ' p5.js programming environment. Participants came from as far away as Hong'
+ line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
+ line 1524: ' professionals in the fields of creative technology, interaction design, and'
+ line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and'
+ line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
+ line 1527: ' 2015contributors-conference3'
+ line 1528: ' 2015contributors-conference-diversity-title'
+ line 1529: ' 2015contributors-conference-diversity1'
+ line 1530: ' Alongside technical development, one of the main focuses of this conference'
+ line 1531: ' was outreach, community, and diversity. The conference began with a panel'
+ line 1532: ' 2015contributors-conference-diversity2'
+ line 1533: ' Diversity'
+ line 1534: ' the Internet'
+ line 1535: ' 2015contributors-conference-diversity3'
+ line 1537: ' 2015contributors-conference-diversity5'
+ line 1538: ' 2015contributors-conference-diversity6'
+ line 1539: ' 2015contributors-conference-diversity7'
+ line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
+ line 1541: ' Mellon University. Speakers included'
+ line 1542: ' 2015contributors-conference-diversity8'
+ line 1543: ' 2015contributors-conference-diversity9'
+ line 1545: ' 2015cc_2'
+ line 1546: ' 2015cc_3'
+ line 1547: ' 2015cc_4'
+ line 1548: ' Woman expressively speaks into a microphone while two male collaborators'
+ line 1549: ' look on'
+ line 1550: ' 2015cc_5'
+ line 1551: ' 2015cc_6'
+ line 1553: ' Participants sit in a circle around a white board with sticky notes on it'
+ line 1554: ' while a female student speaks into a microphone'
+ line 1555: ' 2015cc_8'
+ line 1556: ' Participants sit around a table looking at each others laptops and compare'
+ line 1557: ' code'
+ line 1558: ' 2015cc_9'
+ line 1559: ' 2015cc_10'
+ line 1561: ' group of participants with laptops look at her powerpoint in a classroom'
+ line 1562: ' 2015cc_11'
+ line 1563: ' Woman speaks at a podium in an auditorium while three participants sit on'
+ line 1564: ' the stage and another three are skyping in on the stage screen'
+ line 1565: ' 2015cc_12'
+ line 1566: ' 2015cc_13'
+ line 1567: ' 2015cc_14'
+ line 1569: ' 2019contributors-conference-title'
+ line 1570: ' 2019contributors-conference-date'
+ line 1571: ' 2019contributors-conference1'
+ line 1572: ' 2019contributors-conference2'
+ line 1573: ' , advancing the code, documentation, and community outreach tools and'
+ line 1574: ' exploring the current landscape of the p5.js programming environment.'
+ line 1575: ' Comprising a diverse range of participants within the fields of creative'
+ line 1577: ' at fostering dialogue through a multidisciplinary lens. Working groups'
+ line 1578: ' focused on several topic areas'
+ line 1579: ' Landscape of Creative Tech; and Internationalization.'
+ line 1580: ' 2019contributors-conference3'
+ line 1581: ' 2019contributors-conference4'
+ line 1582: ' outputs'
+ line 1583: ' output1'
+ line 1585: ' octagon girds for p5.js. Created by Aren Davey.'
+ line 1586: ' output2'
+ line 1587: ' . A set of template files for building a multi-device, multiplayer game'
+ line 1588: ' where multiple clients can connect to a specified host page. Created by L05.'
+ line 1589: ' output3'
+ line 1590: ' output3-1'
+ line 1591: ' , testing early implementations of softCompile, OSC interfacing and added'
+ line 1592: ' connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
+ line 1593: ' environment! Created by Ted Davis.'
+ line 1594: ' output4'
+ line 1595: ' A panel on Blackness and Gender in Virtual Space led by American Artist,'
+ line 1596: ' with shawné michaelain holloway and LaJuné McMillian.'
+ line 1597: ' output5'
+ line 1598: ' output6'
+ line 1599: ' output6-1'
+ line 1600: ' output6-2'
+ line 1601: ' output7'
+ line 1602: ' New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
+ line 1603: ' Jon Chambers.'
+ line 1604: ' output8'
+ line 1605: ' output8-1'
+ line 1606: ' Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
+ line 1607: ' Ye, Dorothy R. Santos, and Yasheng She.'
+ line 1608: ' output9'
+ line 1609: ' output9-1'
+ line 1610: ' output10'
+ line 1611: ' An overhaul of the p5.js website for accessibility. Including updates for'
+ line 1612: ' screen reader accessibility, and improvements to the home, download, getting'
+ line 1613: ' started, and reference pages. With contributions from Claire Kearney-Volpe,'
+ line 1614: ' Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
+ line 1615: ' McCarthy, and Evelyn Masso.'
+ line 1616: ' output11'
+ line 1617: ' Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
+ line 1618: ' Sona Lee, Ted Davis, and Carlos Garcia.'
+ line 1619: ' output12'
+ line 1620: ' output13'
+ line 1621: ' A design of the p5.js library system for the p5 Editor. Created by Cassie'
+ line 1622: ' Tarakajian and Luca Damasco.'
+ line 1623: ' output14'
+ line 1624: ' Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
+ line 1625: ' Lauren Valley.'
+ line 1626: ' output15'
+ line 1627: ' 2019cc_1'
+ line 1628: ' 2019cc_2'
+ line 1629: ' 2019cc_3'
+ line 1630: ' 2019cc_4'
+ line 1631: ' 2019cc_5'
+ line 1632: ' 2019cc_6'
+ line 1633: ' 2019cc_7'
line 1634: ' 2019cc_8'
line 1635: ' 2019cc_9'
line 1636: ' Participant speaks at a podium in front of projected text about the problem'
@@ -5973,6 +4891,35 @@ zh-Hans:
line 1663: ' Man sitting in front of the classroom speaking energetically into a'
line 1664: ' microphone'
line 1665: ' 2019cc_24'
+ line 1666: ' Group photo of participants smiling enthusiastically with their hands in the'
+ line 1667: ' air'
+ line 1668: ' 2019cc_25'
+ line 1712: ' books-title'
+ line 1713: ' book-1-title'
+ line 1714: ' book-1-authors'
+ line 1715: ' book-1-publisher'
+ line 1716: ' book-1-pages'
+ line 1717: ' book-1-type'
+ line 1718: ' book-1-description'
+ line 1719: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1720: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1721: ' using JavaScript and HTML.'
+ line 1722: ' book-1-order-a'
+ line 1723: ' book-1-order-b'
+ line 1724: ' book-2-title'
+ line 1725: ' book-2-authors'
+ line 1726: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
+ line 1727: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
+ line 1728: ' book-2-publisher'
+ line 1729: ' book-2-pages'
+ line 1730: ' book-2-type'
+ line 1731: ' book-2-description'
+ line 1732: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1733: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1734: ' using JavaScript and HTML.'
+ line 1735: ' book-2-order-a'
+ line 1736: ' book-2-order-b'
+ line 1737: ' book-3-title'
line 1738: ' book-3-authors'
line 1739: ' book-3-publisher'
line 1740: ' book-3-pages'
@@ -6001,6 +4948,12 @@ zh-Hans:
line 1763: ' book-5-type'
line 1764: ' book-5-description'
line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the'
+ line 1766: ' vastly popular JavaScript with the programming library p5.js. The skills you'
+ line 1767: ' will acquire from this book are highly transferable to a myriad of'
+ line 1768: ' industries and can be used towards building web applications, programmable'
+ line 1769: ' robots, or generative art.'
+ line 1770: ' book-5-order-a'
+ line 1771: ' book-5-order-b'
line 1800: ' Examples'
line 1801: ' back-examples'
line 1802: ' Structure'
@@ -6028,6 +4981,519 @@ zh-Hans:
line 1824: ' Mobile'
line 1825: ' Hello_P5'
line 1829: ' Reference'
+ line 2005: ' showcase-title'
+ line 2006: ' showcase-intro1'
+ line 2007: ' showcase-intro2'
+ line 2008: ' showcase-intro3'
+ line 2009: ' We''re celebrating how people are using p5.js to make creative work,'
+ line 2010: ' learning, and open source more interesting and inclusive. Together, we make'
+ line 2011: ' community. During Summer 2019, we asked a few creators to share more about'
+ line 2012: ' how they''ve used p5.js through different projects and pieces.'
+ line 2013: ' showcase-intro4'
+ line 2014: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
+ line 2015: ' p5.js work or your own to be featured here!'
+ line 2016: ' nominate-project'
+ line 2017: ' showcase-featuring'
+ line 2018: ' project-tag-art'
+ line 2019: ' project-tag-design'
+ line 2020: ' project-tag-code'
+ line 2021: ' project-tag-curriculum'
+ line 2022: ' project-tag-documentation'
+ line 2023: ' project-tag-game'
+ line 2024: ' project-tag-library'
+ line 2025: ' project-tag-organizing'
+ line 2026: ' project-tag-tool'
+ line 2027: ' project-tag-tutorial'
+ line 2028: ' project-roni'
+ line 2029: ' credit-roni'
+ line 2030: ' description-roni'
+ line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
+ line 2032: ' plotter and pens.'
+ line 2033: ' project-phuong'
+ line 2034: ' credit-phuong'
+ line 2035: ' description-phuong'
+ line 2036: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
+ line 2037: ' encourage people to get out of their comfort zone and feel more confident'
+ line 2038: ' about themselves regardless of what they do and how they look or sound.'
+ line 2039: ' project-daein'
+ line 2040: ' credit-daein'
+ line 2041: ' description-daein'
+ line 2042: ' An interactive typographic poster that uses a mobile device''s motion sensor'
+ line 2043: ' with p5.js.'
+ line 2044: ' project-qianqian'
+ line 2045: ' credit-qianqian'
+ line 2046: ' description-qianqian'
+ line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
+ line 2048: ' and technology, including p5.js tutorials for beginners. Available on'
+ line 2049: ' YouTube, Instagram, Bilibili, and TikTok.'
+ line 2050: ' project-casey-louise'
+ line 2051: ' credit-casey-louise'
+ line 2052: ' description-casey-louise'
+ line 2053: ' project-moon-xin'
+ line 2054: ' credit-moon-xin'
+ line 2055: ' description-moon-xin'
+ line 2056: ' Browser-based moving posters that use graphical systems, transformation'
+ line 2057: ' methods, and p5.js to address the connotations of a word less than 8'
+ line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative'
+ line 2059: ' Systems) at the University of Georgia.'
+ line 2060: ' created-by'
+ line 2061: ' pronouns-female'
+ line 2062: ' creator-from-roni-cantor'
+ line 2063: ' project-links'
+ line 2064: ' project-links-text-1-roni-cantor'
+ line 2065: ' project-links-text-2-roni-cantor'
+ line 2066: ' project-q-1-1'
+ line 2067: ' project-q-1-2'
+ line 2068: ' project-a-1-1-roni-cantor'
+ line 2069: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
+ line 2070: ' years of coding and making robots, I decided to take a break and play with'
+ line 2071: ' some more traditional forms of art—while still coding and playing with'
+ line 2072: ' robots.'
+ line 2073: ' project-a-1-2-roni-cantor'
+ line 2074: ' project-a-1-3-roni-cantor'
+ line 2075: ' project-a-1-4-roni-cantor'
+ line 2076: ' project-q-2'
+ line 2077: ' project-a-2-1-roni-cantor'
+ line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear'
+ line 2079: ' interpolation) formulas and display the visuals in the'
+ line 2080: ' project-a-2-2-roni-cantor'
+ line 2081: ' . I then used a feature in my code that exported my programmed graphic into'
+ line 2082: ' an'
+ line 2083: ' project-a-2-3-roni-cantor'
+ line 2084: ' project-a-2-4-roni-cantor'
+ line 2085: ' —so that it understood where to draw the lines that I programmed. I sent'
+ line 2086: ' this information to the plotter with a program called'
+ line 2087: ' project-a-2-5-roni-cantor'
+ line 2088: ' project-q-3'
+ line 2089: ' project-a-3-roni-cantor'
+ line 2090: ' project-q-4'
+ line 2091: ' Did you face any challenges working on this project? If so, how did you'
+ line 2092: ' overcome them?'
+ line 2093: ' project-a-4-roni-cantor'
+ line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
+ line 2095: ' benefited from the people around me who had used p5 before, as well as'
+ line 2096: ' online guides and forums.'
+ line 2097: ' project-q-5'
+ line 2098: ' project-a-5-roni-cantor'
+ line 2099: ' project-q-6'
+ line 2100: ' project-a-6-roni-cantor'
+ line 2101: ' project-resources'
+ line 2102: ' creator-from-qianqian'
+ line 2103: ' interview-link-qianqian'
+ line 2104: ' project-a-1-1-qianqian'
+ line 2105: ' project-a-1-2-qianqian'
+ line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free'
+ line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with'
+ line 2108: ' different colors.'
+ line 2109: ' project-a-2-1-qianqian'
+ line 2110: ' This project started with an idea of teaching my mom, who lives in China and'
+ line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on'
+ line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why'
+ line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily'
+ line 2114: ' due to the lack of free creative coding education resources. Most of the'
+ line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js'
+ line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
+ line 2117: ' inaccessible in China because of internet censorship.'
+ line 2118: ' project-a-2-2-qianqian'
+ line 2119: ' project-a-2-3-qianqian'
+ line 2120: ' , but the more I watched coding tutorials online, the more I realized how'
+ line 2121: ' difficult it is to find other womxn and people of color teaching coding,'
+ line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
+ line 2123: ' creative coding.'
+ line 2124: ' project-a-2-4-qianqian'
+ line 2125: ' I am working on opening up the video channels to other Chinese creatives who'
+ line 2126: ' want to contribute to the educational resource together, like interviews and'
+ line 2127: ' guest tutorials. If you are interested in teaching/talking about creative'
+ line 2128: ' coding in Mandarin, HMU!'
+ line 2129: ' project-a-3-1-qianqian'
+ line 2130: ' project-a-3-2-qianqian'
+ line 2131: ' project-a-4-1-qianqian'
+ line 2132: ' Learning to code in a second language was difficult and the lack of'
+ line 2133: ' community made this process even harder. I hope to speak from my experience'
+ line 2134: ' as a beginner and someone who once felt like an outsider to the creative'
+ line 2135: ' coding and video tutorial world.'
+ line 2136: ' project-a-4-2-qianqian'
+ line 2137: ' I spend a lot of time researching the latest technology for my videos. In'
+ line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
+ line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get'
+ line 2140: ' started making instructional videos.'
+ line 2141: ' project-a-4-3-qianqian'
+ line 2142: ' Another issue I came across was my own fear of putting myself online. I'
+ line 2143: ' first had to get over my anxiety of making mistakes in the videos or'
+ line 2144: ' receiving negative comments online. Often womxn and people of color are'
+ line 2145: ' targets for online harassment. I’m hoping to help set an example for other'
+ line 2146: ' womxn and people of color that it’s ok to put yourselves online and'
+ line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will'
+ line 2148: ' be able to stop online harassment by creating strong diverse communities.'
+ line 2149: ' project-a-5-1-qianqian'
+ line 2150: ' project-a-5-2-qianqian'
+ line 2151: ' creator-from-phuong'
+ line 2152: ' project-a-1-1-phuong'
+ line 2153: ' link-1-phuong'
+ line 2154: ' link-2-phuong'
+ line 2155: ' link-3-phuong'
+ line 2156: ' project-a-1-2-phuong'
+ line 2157: ' project-a-1-3-phuong'
+ line 2158: ' I was taking a course at the School of Machines in Berlin this summer'
+ line 2159: ' called! "'
+ line 2160: ' project-a-1-4-phuong'
+ line 2161: ' project-a-2-1-phuong'
+ line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites'
+ line 2163: ' for Airi and the ghosts were drawn on an iPad app called'
+ line 2164: ' project-a-2-2-phuong'
+ line 2165: ' project-a-2-3-phuong'
+ line 2166: ' project-a-2-4-phuong'
+ line 2167: ' p5-sketch-by-chjno-phuong'
+ line 2168: ' project-a-2-5-phuong'
+ line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was'
+ line 2170: ' detected, the scrolling speed would change to make an illusion of Airi'
+ line 2171: ' flying up. When the user does not do anything, the scrolling speed is'
+ line 2172: ' negative, which makes it look like Airi is falling down.'
+ line 2173: ' project-a-2-6-phuong'
+ line 2174: ' project-a-2-7-phuong'
+ line 2175: ' project-a-3-1-phuong'
+ line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks'
+ line 2177: ' and classes with the'
+ line 2178: ' project-a-3-2-phuong'
+ line 2179: ' project-a-3-3-phuong'
+ line 2180: ' project-a-3-4-phuong'
+ line 2181: ' project-a-4-1-phuong'
+ line 2182: ' There were a lot of challenges simply because p5.js was something new to me.'
+ line 2183: ' I did not work much with JavaScript in general before. Reading documentation'
+ line 2184: ' and searching for similar examples helped a lot.'
+ line 2185: ' project-a-5-1-phuong'
+ line 2186: ' school-of-machines-phuong'
+ line 2187: ' project-a-5-2-phuong'
+ line 2188: ' ! They try hard to connect the most creative people in the world and they do'
+ line 2189: ' it well so far. ❤️'
+ line 2190: ' pronouns-male'
+ line 2191: ' creator-from-chung'
+ line 2192: ' link-1-casey-louise'
+ line 2193: ' link-2-casey-louise'
+ line 2194: ' link-1-chung'
+ line 2195: ' link-2-chung'
+ line 2196: ' link-3-chung'
+ line 2197: ' project-a-1-1-chung'
+ line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College'
+ line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
+ line 2200: ' and motion graphics.'
+ line 2201: ' project-a-1-2-chung'
+ line 2202: ' project-a-1-3-chung'
+ line 2203: ' project-a-2-1-chung'
+ line 2204: ' This summer, I gave myself a challenge of making typographic posters with'
+ line 2205: ' coding, and this is one of the posters I made. I didn’t know until very'
+ line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching'
+ line 2207: ' dan-shiffman-matterjs-tutorial'
+ line 2208: ' project-a-2-2-chung'
+ line 2209: ' project-a-3-1-chung'
+ line 2210: ' There are many things I love about p5.js such as the online community and'
+ line 2211: ' beginner friendliness. What I really like right now is the'
+ line 2212: ' project-a-3-2-chung'
+ line 2213: ' , with which I can not only work online for myself but also share URLs'
+ line 2214: ' quickly in the present mode. For this project in particular, I had to do a'
+ line 2215: ' lot of testing on my phone, and it was much easier and quicker than'
+ line 2216: ' committing to GitHub.'
+ line 2217: ' project-a-4-1-chung'
+ line 2218: ' project-a-4-2-chung'
+ line 2219: ' project-a-4-3-chung'
+ line 2220: ' project-a-5-1-chung'
+ line 2221: ' As mentioned above, if you want to render out frames and video files out of'
+ line 2222: ' p5.js sketches, check out my'
+ line 2223: ' project-a-5-2-chung'
+ line 2224: ' creator-from-casey-louise'
+ line 2225: ' project-a-1-1-casey-louise'
+ line 2226: ' Casey'
+ line 2227: ' interactive spaces, physical and digital.'
+ line 2228: ' project-a-1-2-casey-louise'
+ line 2229: ' Louise'
+ line 2230: ' interactive spaces based on sensor technologies.'
+ line 2231: ' project-a-1-3-casey-louise'
+ line 2232: ' Casey'
+ line 2233: ' I had been dabbling in'
+ line 2234: ' project-a-1-4-casey-louise'
+ line 2235: ' project-a-1-5-casey-louise'
+ line 2236: ' Louise'
+ line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
+ line 2238: ' me.'
+ line 2239: ' project-a-2-1-casey-louise'
+ line 2240: ' Casey'
+ line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open'
+ line 2242: ' source, storytelling, and learning resource projects at ITP called'
+ line 2243: ' project-a-2-2-casey-louise'
+ line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
+ line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource'
+ line 2246: ' for others to learn. When I told Louise about the project, she was'
+ line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
+ line 2248: ' great about making sure the project is a learning resource and not just a'
+ line 2249: ' collection of examples.'
+ line 2250: ' project-a-3-1-casey-louise'
+ line 2251: ' project-a-3-2-casey-louise'
+ line 2252: ' project-a-3-3-casey-louise'
+ line 2253: ' project-a-3-4-casey-louise'
+ line 2254: ' project-a-3-5-casey-louise'
+ line 2255: ' project-a-4-1-casey-louise'
+ line 2256: ' Casey'
+ line 2257: ' reaching out to amazing people, asking questions, and asking for permission'
+ line 2258: ' to use their examples in our project.'
+ line 2259: ' adam-ferris-repo-casey-louise'
+ line 2260: ' project-a-4-2-casey-louise'
+ line 2261: ' project-a-4-3-casey-louise'
+ line 2262: ' project-a-4-4-casey-louise'
+ line 2263: ' webgl-casey-louise'
+ line 2264: ' project-a-4-5-casey-louise'
+ line 2265: ' project-a-4-6-casey-louise'
+ line 2266: ' Louise'
+ line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam'
+ line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
+ line 2269: ' understand how to implement it, so it was as much a technical challenge as'
+ line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
+ line 2271: ' inspiration from the way the'
+ line 2272: ' openframeworks-book-casey-louise'
+ line 2273: ' project-a-4-7-casey-louise'
+ line 2274: ' project-a-5-1-casey-louise'
+ line 2275: ' project-a-5-2-casey-louise'
+ line 2276: ' pronouns-nonbinary'
+ line 2277: ' creator-from-moon'
+ line 2278: ' posters-by'
+ line 2279: ' project-a-1-1-moon'
+ line 2280: ' Moon'
+ line 2281: ' summer, I taught a graphic design course in the University of Georgia'
+ line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
+ line 2283: ' planning to teach and to study digital platforms at UGA.'
+ line 2284: ' project-a-1-2-moon'
+ line 2285: ' project-a-1-3-moon'
+ line 2286: ' project-a-1-4-moon'
+ line 2287: ' pcd-la-moon'
+ line 2288: ' project-a-1-5-moon'
+ line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent'
+ line 2290: ' teaching and learning experience.'
+ line 2291: ' project-a-2-1-moon'
+ line 2292: ' codetrain-moon'
+ line 2293: ' project-a-2-2-moon'
+ line 2294: ' p5-reference-moon'
+ line 2295: ' project-a-2-3-moon'
+ line 2296: ' project-a-3-1-moon'
+ line 2297: ' project-a-3-2-moon'
+ line 2298: ' project-a-3-3-moon'
+ line 2299: ' project-a-3-4-moon'
+ line 2300: ' . I was able to use and to teach this tool to visualize various ideas about'
+ line 2301: ' time in motion.'
+ line 2302: ' project-a-4-1-moon'
+ line 2303: ' It was challenging for me, a beginner, to understand the overall structure'
+ line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
+ line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I'
+ line 2306: ' understood the p5.js structure and code with strong constraints I set up. It'
+ line 2307: ' was an excellent teaching and learning experience.'
+ line 2308: ' project-a-5-1-moon'
+ line 2309: ' project-a-5-2-moon'
+ line 2310: teach
+ line 2311: ' teach-title2'
+ line 2312: ' teach-intro1'
+ line 2313: ' Every teaching has its own unique goals, messages, conditions, and'
+ line 2314: ' environments. '
+ line 2315: ' teach-intro2'
+ line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
+ line 2317: ' better connect the p5.js learner and educator communities around the world. '
+ line 2318: ' teach-intro3'
+ line 2319: ' teach-intro4'
+ line 2320: ' teach-heading'
+ line 2321: ' teach-search-filter'
+ line 2322: ' teach-filter1'
+ line 2323: ' teach-filter1-label1'
+ line 2324: ' teach-filter1-label2'
+ line 2325: ' teach-filter1-label3'
+ line 2326: ' teach-filter1-label4'
+ line 2327: ' teach-filter1-label5'
+ line 2328: ' teach-filter1-label6'
+ line 2329: ' teach-filter1-label7'
+ line 2330: ' teach-filter1-label8'
+ line 2331: ' teach-filter1-label9'
+ line 2332: ' teach-filter1-label10'
+ line 2333: ' teach-filter1-label11'
+ line 2334: ' teach-filter1-label12'
+ line 2335: ' teach-filter1-label13'
+ line 2336: ' teach-filter1-label14'
+ line 2337: ' teach-filter1-label15'
+ line 2338: ' teach-filter1-label16'
+ line 2339: ' teach-filter2'
+ line 2340: ' teach-filter2-label1'
+ line 2341: ' teach-filter2-label2'
+ line 2342: ' teach-filter2-label3'
+ line 2343: ' teach-filter2-label4'
+ line 2344: ' teach-filter2-label5'
+ line 2345: ' teach-filter2-label6'
+ line 2346: ' teach-filter2-label7'
+ line 2347: ' teach-filter3'
+ line 2348: ' teach-filter4'
+ line 2349: ' teach-filter4-label1'
+ line 2350: ' teach-filter4-label2'
+ line 2351: ' teach-filter4-label3'
+ line 2352: ' teach-case-subtitle1'
+ line 2353: ' teach-case-subtitle2'
+ line 2354: ' teach-case-subtitle3'
+ line 2355: ' teach-case-subtitle4'
+ line 2356: ' teach-case-subtitle5'
+ line 2357: ' teach-case1-title'
+ line 2358: ' teach-case1-lead-name'
+ line 2359: ' teach-case1-content1'
+ line 2360: ' teach-case1-content1-1'
+ line 2361: ' teach-case1-content2'
+ line 2362: ' teach-case1-content3'
+ line 2363: ' teach-case1-content4'
+ line 2364: ' To introduce a new public to programming through fun and compelling'
+ line 2365: ' examples. '
+ line 2366: ' teach-case1-content5'
+ line 2367: ' Method'
+ line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web'
+ line 2369: ' editor. I was teaching using a video projector as well as a board.'
+ line 2370: ' teach-case1-content5-1'
+ line 2371: ' Materials'
+ line 2372: ' links available in '
+ line 2373: ' teach-case2-title'
+ line 2374: ' Making The Thing that Makes the Thing'
+ line 2375: ' with p5.js'
+ line 2376: ' teach-case2-lead-name'
+ line 2377: ' teach-case2-content1'
+ line 2378: ' teach-case2-content1-1'
+ line 2379: ' teach-case2-content2'
+ line 2380: ' Our participants included art/design students & professionals, creative'
+ line 2381: ' coding enthusiasts. We had close to 50 participants.'
+ line 2382: ' teach-case2-content3'
+ line 2383: ' teach-case2-content4'
+ line 2384: ' To explore generative art & design and recreate some classical works'
+ line 2385: ' with p5.js. '
+ line 2386: ' teach-case2-content5'
+ line 2387: ' teach-case2-content5-1'
+ line 2388: ' teach-case2-content5-2'
+ line 2389: ' teach-case2-content5-3'
+ line 2390: ' teach-case2-content5-4'
+ line 2391: ' teach-case2-content5-5'
+ line 2392: ' teach-case3-title'
+ line 2393: ' teach-case3-lead-name'
+ line 2394: ' teach-case3-speech'
+ line 2395: ' teach-case3-content1'
+ line 2396: ' teach-case3-content1-1'
+ line 2397: ' teach-case3-content2'
+ line 2398: ' Our participants included art/design students & professionals, creative'
+ line 2399: ' coding enthusiasts. We had close to 50 participants.'
+ line 2400: ' teach-case3-content3'
+ line 2401: ' teach-case3-content4'
+ line 2402: ' To build a teacher and student community around p5 for middle and high'
+ line 2403: ' school.'
+ line 2404: ' teach-case3-content5'
+ line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
+ line 2406: ' methods and materials. Most used some sort of slides or documentation, some'
+ line 2407: ' live coding using an editor, with work time for participant to remix.'
+ line 2408: ' teach-case3-content5-1'
+ line 2409: ' teach-case3-content5-2'
+ line 2410: ' teach-case3-content5-3'
+ line 2411: ' teach-case4-title'
+ line 2412: ' teach-case4-lead-name'
+ line 2413: ' teach-case4-speech'
+ line 2414: ' teach-case4-content1'
+ line 2415: ' teach-case4-content1-1'
+ line 2416: ' teach-case4-content2'
+ line 2417: ' I had around 16 students in the workshop, and a team including 3 people from'
+ line 2418: ' the PlusCode festival, and one person at the venue.'
+ line 2419: ' teach-case4-content3'
+ line 2420: ' teach-case4-content4'
+ line 2421: ' Introduction to beginners and artists of graphic web programming and open'
+ line 2422: ' source, using p5.js, in Spanish '
+ line 2423: ' teach-case4-content5'
+ line 2424: ' teach-case4-content5-1'
+ line 2425: ' teach-case4-content5-2'
+ line 2426: ' teach-case4-content5-3'
+ line 2427: ' teach-case4-content5-4'
+ line 2428: ' teach-case5-title'
+ line 2429: ' teach-case5-lead-name'
+ line 2430: ' teach-case5-speech'
+ line 2431: ' My greatest source of uncertainty in developing the workshop was whether it'
+ line 2432: ' was trying to teach art to programmers or to teach programming to artists.'
+ line 2433: ' teach-case5-content1'
+ line 2434: ' teach-case5-content1-1'
+ line 2435: ' teach-case5-content1-2'
+ line 2436: ' teach-case5-content1-3'
+ line 2437: ' teach-case5-content2'
+ line 2438: ' teach-case5-content3'
+ line 2439: ' teach-case5-content4'
+ line 2440: ' To introduce p5.js to artists with little or no programming experience and'
+ line 2441: ' to suggest one way an analogue practice can migrate to a digital form.'
+ line 2442: ' teach-case5-content5'
+ line 2443: ' A printed workbook with activities that used the p5.js web editor to show'
+ line 2444: ' how translate an physical drawing into a digital drawing.'
+ line 2445: ' teach-case5-content5-1'
+ line 2446: ' teach-case5-content5-2'
+ line 2447: ' teach-case5-content5-3'
+ line 2448: ' teach-case6-title'
+ line 2449: ' teach-case6-lead-name'
+ line 2450: ' teach-case6-speech'
+ line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
+ line 2452: ' your everyday life!'
+ line 2453: ' teach-case6-content1'
+ line 2454: ' teach-case6-content1-1'
+ line 2455: ' teach-case6-content2'
+ line 2456: ' teach-case6-content3'
+ line 2457: ' teach-case6-content4'
+ line 2458: ' teach-case6-content5'
+ line 2459: ' teach-case6-content5-1'
+ line 2460: ' teach-case6-content5-2'
+ line 2461: ' teach-case6-content5-3'
+ line 2462: ' teach-case6-content5-4'
+ line 2463: ' teach-case6-content5-5'
+ line 2464: ' teach-case7-title'
+ line 2465: ' teach-case7-lead-name'
+ line 2466: ' teach-case7-speech'
+ line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
+ line 2468: ' to give it a try!'
+ line 2469: ' teach-case7-content1'
+ line 2470: ' teach-case7-content1-1'
+ line 2471: ' teach-case7-content2'
+ line 2472: ' teach-case7-content3'
+ line 2473: ' teach-case7-content4'
+ line 2474: ' teach-case7-content5'
+ line 2475: ' teach-case7-content5-1'
+ line 2476: ' teach-case8-title'
+ line 2477: ' teach-case8-lead-name'
+ line 2478: ' teach-case8-content1'
+ line 2479: ' teach-case8-content1-1'
+ line 2480: ' teach-case8-content2'
+ line 2481: ' teach-case8-content3'
+ line 2482: ' teach-case8-content4'
+ line 2483: ' teach-case8-content5'
+ line 2484: ' teach-case8-content5-1'
+ line 2485: ' teach-case8-content5-2'
+ line 2486: ' teach-case9-title'
+ line 2487: ' teach-case9-lead-name'
+ line 2488: ' teach-case9-content1'
+ line 2489: ' teach-case9-content1-1'
+ line 2490: ' teach-case9-content2'
+ line 2491: ' Students at Interactive Telecommunications Program, New York University. 16'
+ line 2492: ' people.'
+ line 2493: ' teach-case9-content3'
+ line 2494: ' teach-case9-content4'
+ line 2495: ' The goal of this class is to learn and understand common machine learning'
+ line 2496: ' techniques and apply them to generate creative outputs in the browser using'
+ line 2497: ' ml5.js and p5.js.'
+ line 2498: ' teach-case9-content5'
+ line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and'
+ line 2500: ' presentations. I used '
+ line 2501: ' teach-case9-content5-1'
+ line 2502: ' teach-case9-content5-2'
+ line 2503: ' teach-case9-content5-3'
+ line 2504: ' teach-case10-title'
+ line 2505: ' teach-case10-lead-name'
+ line 2506: ' teach-case10-content1'
+ line 2507: ' teach-case10-content3'
+ line 2508: ' teach-case10-content4'
+ line 2509: ' Introduce learners (potentially with no coding experiences at all) to the'
+ line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
+ line 2511: ' and enable them to pursue own projects in a safe environment.'
+ line 2512: ' teach-case10-content5'
+ line 2513: ' p5.js source code (for the introductory project), JavaScript source code'
+ line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
+ line 2515: ' .pdf format, all hosted publicly on GitHub. '
+ line 2516: ' teach-case10-content5-1'
+ line 2517: ' teach-case10-content5-2'
line 2518: ' teach-case11-title'
line 2519: ' teach-case11-lead-name'
line 2520: ' teach-case11-content1'
@@ -6050,224 +5516,27 @@ zh-Hans:
line 2537: ' teach-case12-title'
line 2538: ' teach-case12-lead-name'
line 2539: ' teach-case12-speech'
+ line 2540: ' I''m working on a new series of coding class for Disabled students in South'
+ line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 2542: ' workshops in December 2020. The project is supported by the Open Society'
+ line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 2544: ' Center.'
+ line 2545: ' teach-case12-content1'
+ line 2546: ' teach-case12-content1-1'
+ line 2547: ' teach-case12-content2'
+ line 2548: ' teach-case12-content3'
+ line 2549: ' teach-case12-content4'
+ line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming'
+ line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
+ line 2552: ' teach-case12-content5'
+ line 2553: ' We used p5.js Web editor and code examples on the website. We also used'
+ line 2554: ' dice, playing cards and various paper tools to help students learn about'
+ line 2555: ' coding concepts.'
+ line 2556: ' teach-case12-content5-1'
+ line 2557: ' teach-case12-content5-2'
line 598: ' color-custom-ranges-li1x2'
line 601: ' color-custom-ranges-li2x2'
line 604: ' color-custom-ranges-li3x2'
- line 728: ' learn-title'
- line 1091: <<<<<<< HEAD
- line 1099: '======='
- line 1100: ' Libraries'
- line 1101: ' core-libraries'
- line 1102: ' community-libraries'
- line 1103: ' libraries-created-by'
- line 1104: ' p5.sound'
- line 1105: ' p5.sound extends p5 with Web Audio functionality including audio input,'
- line 1106: ' playback, analysis and synthesis.'
- line 1107: ' p5.accessibility'
- line 1108: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
- line 1109: ' and visually impaired.'
- line 1110: ' asciiart'
- line 1111: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
- line 1112: ' p5js.'
- line 1113: ' p5.ble'
- line 1114: ' A Javascript library that enables communication between BLE devices and p5'
- line 1115: ' sketches.'
- line 1116: ' p5.bots'
- line 1117: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
- line 1118: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
- line 1119: ' drive LEDs, motors, and more!'
- line 1120: ' p5.clickable'
- line 1121: ' p5.cmyk.js'
- line 1122: ' p5.collide2D'
- line 1135: ' p5.func'
- line 1136: ' p5.func is a p5 extension that provides new objects and utilities for'
- line 1137: ' function generation in the time, frequency, and spatial domains.'
- line 1138: ' p5.geolocation'
- line 1139: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
- line 1140: ' geofencing user locations for p5.js.'
- line 1141: ' p5.gibber'
- line 1142: ' grafica.js'
- line 1143: ' grafica.js lets you add simple but highly configurable 2D plots to your'
- line 1144: ' p5.js sketches.'
- line 1145: ' p5.gui'
- line 1146: ' p5.localmessage'
- line 1374: ' community-title'
- line 1375: ' community-statement-title'
- line 1376: ' community-statement1'
- line 1377: ' p5.js is a community interested in exploring the creation of art and design'
- line 1378: ' with technology.'
- line 1379: ' community-statement2'
- line 1380: ' We are a community of, and in solidarity with, people from every gender'
- line 1381: ' identity and expression, sexual orientation, race, ethnicity, language,'
- line 1382: ' neuro-type, size, ability, class, religion, culture, subculture, political'
- line 1383: ' opinion, age, skill level, occupation, and background. We acknowledge that'
- line 1384: ' not everyone has the time, financial means, or capacity to actively'
- line 1385: ' participate, but we recognize and encourage involvement of all kinds. We'
- line 1386: ' facilitate and foster access and empowerment. We are all learners.'
- line 1387: ' community-statement3'
- line 1388: ' We like these hashtags'
- line 1389: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
- line 1390: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
- line 1391: ' course).'
- line 1392: ' in-practice-title'
- line 1393: ' in-practice1'
- line 1394: ' in-practice2'
- line 1395: ' We insist on actively engaging with requests for feedback regardless of'
- line 1396: ' their complexity.'
- line 1397: ' in-practice3'
- line 1398: ' We welcome newcomers and prioritize the education of others. We strive to'
- line 1399: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
- line 1400: ' that newcomers are just as valuable in this effort as experts.'
- line 1401: ' in-practice4'
- line 1402: ' We consistently make the effort to actively recognize and validate multiple'
- line 1403: ' types of contributions.'
- line 1404: ' in-practice5'
- line 1405: ' in-times-conflict-title'
- line 1406: ' in-times-conflict1'
- line 1407: ' in-times-conflict2'
- line 1408: ' in-times-conflict3'
- line 1409: ' We admit when we''re wrong, apologize, and accept responsibility for our'
- line 1410: ' actions.'
- line 1411: ' in-times-conflict4'
- line 1412: ' in-times-conflict5'
- line 1413: ' in-times-conflict6'
- line 1414: ' in-times-conflict7'
- line 1415: ' in-the-future-title'
- line 1416: ' in-the-future1'
- line 1417: ' notes-title'
- line 1418: ' notes1'
- line 1419: ' notes2'
- line 1669: ' book-1-publisher'
- line 1670: ' book-1-pages'
- line 1671: ' book-1-type'
- line 1672: ' book-1-description'
- line 1673: ' Written by the lead p5.js developer and the founders of Processing, this'
- line 1674: ' book provides an introduction to the creative possibilities of today''s Web,'
- line 1675: ' using JavaScript and HTML.'
- line 1676: ' book-1-order-a'
- line 1677: ' book-1-order-b'
- line 1678: ' book-2-title'
- line 1679: ' book-2-authors'
- line 1680: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
- line 1681: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
- line 1682: ' book-2-publisher'
- line 1683: ' book-2-pages'
- line 1684: ' book-2-type'
- line 1685: ' book-2-description'
- line 1686: ' Written by the lead p5.js developer and the founders of Processing, this'
- line 1687: ' book provides an introduction to the creative possibilities of today''s Web,'
- line 1688: ' using JavaScript and HTML.'
- line 1689: ' book-2-order-a'
- line 1690: ' book-2-order-b'
- line 1691: ' book-3-title'
- line 1692: ' book-3-authors'
- line 1693: ' book-3-publisher'
- line 1694: ' book-3-pages'
- line 1695: ' book-3-type'
- line 1696: ' book-3-description'
- line 1697: ' By using simple languages such as JavaScript in p5.js, artists and makers'
- line 1698: ' can create everything from interactive typography and textiles to 3D-printed'
- line 1699: ' furniture to complex and elegant infographics.'
- line 1700: ' book-3-order-a'
- line 1701: ' book-3-order-b'
- line 1702: ' book-4-title'
- line 1703: ' book-4-authors'
- line 1704: ' book-4-publisher'
- line 1705: ' book-4-pages'
- line 1706: ' book-4-type'
- line 1707: ' book-4-description'
- line 1708: ' By using simple languages such as JavaScript in p5.js, artists and makers'
- line 1709: ' can create everything from interactive typography and textiles to 3D-printed'
- line 1710: ' furniture to complex and elegant infographics.'
- line 1711: ' book-4-order-a'
- line 1772: ' Control'
- line 1773: ' Image'
- line 1774: ' Color'
- line 1775: ' Math'
- line 1776: ' Simulate'
- line 1777: ' Interaction'
- line 1778: ' Objects'
- line 1779: ' Lights'
- line 1780: ' Motion'
- line 1781: ' Instance_Mode'
- line 1782: ' Dom'
- line 1783: ' Drawing'
- line 1784: ' Transform'
- line 1785: ' Typography'
- line 1786: ' 3D'
- line 1787: ' Input'
- line 1788: ' Advanced_Data'
- line 1789: ' Sound'
- line 1790: ' Mobile'
- line 1791: ' Hello_P5'
- line 1795: ' Reference'
- line 1948: ' showcase-title'
- line 1949: ' showcase-intro1'
- line 1950: ' showcase-intro2'
- line 1951: ' showcase-intro3'
- line 1952: ' We''re celebrating how people are using p5.js to make creative work,'
- line 1953: ' learning, and open source more interesting and inclusive. Together, we make'
- line 1954: ' community. During Summer 2019, we asked a few creators to share more about'
- line 1955: ' how they''ve used p5.js through different projects and pieces.'
- line 1956: ' showcase-intro4'
- line 1957: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
- line 1958: ' p5.js work or your own to be featured here!'
- line 1959: ' nominate-project'
- line 1960: ' showcase-featuring'
- line 1961: ' project-tag-art'
- line 1962: ' project-tag-design'
- line 1963: ' project-tag-code'
- line 1964: ' project-tag-curriculum'
- line 1965: ' project-tag-documentation'
- line 1966: ' project-tag-game'
- line 1967: ' project-tag-library'
- line 1968: ' project-tag-organizing'
- line 1969: ' project-tag-tool'
- line 1970: ' project-tag-tutorial'
- line 1971: ' project-roni'
- line 1972: ' credit-roni'
- line 1973: ' description-roni'
- line 1974: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
- line 1975: ' plotter and pens.'
- line 1976: ' project-phuong'
- line 1977: ' credit-phuong'
- line 1978: ' description-phuong'
- line 1979: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
- line 1980: ' encourage people to get out of their comfort zone and feel more confident'
- line 1981: ' about themselves regardless of what they do and how they look or sound.'
- line 1982: ' project-daein'
- line 1983: ' credit-daein'
- line 1984: ' description-daein'
- line 1985: ' An interactive typographic poster that uses a mobile device''s motion sensor'
- line 1986: ' with p5.js.'
- line 1987: ' project-qianqian'
- line 1988: ' credit-qianqian'
- line 1989: ' description-qianqian'
- line 1990: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
- line 1991: ' and technology, including p5.js tutorials for beginners. Available on'
- line 1992: ' YouTube, Instagram, Bilibili, and TikTok.'
- line 1993: ' project-casey-louise'
- line 1994: ' credit-casey-louise'
- line 1995: ' description-casey-louise'
- line 1996: ' project-moon-xin'
- line 1997: ' credit-moon-xin'
- line 1998: ' description-moon-xin'
- line 1999: ' Browser-based moving posters that use graphical systems, transformation'
- line 2000: ' methods, and p5.js to address the connotations of a word less than 8'
- line 2001: ' letters. Designed by students for a graphic design course (Visual Narrative'
- line 2002: ' Systems) at the University of Georgia.'
- line 2003: ' created-by'
- line 2004: ' pronouns-female'
- line 2609: ' teach-case17-title'
- line 2610: ' teach-case17-lead-name'
- line 2611: ' teach-case17-speech'
- line 2612: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
- line 2613: ' teach-case17-content1'
- line 2614: ' teach-case17-content1-1'
- line 2615: ' teach-case17-content2'
- line 2616: ' teach-case17-content3'
- line 2617: ' teach-case17-content4'
- line 2618: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
- line 2619: ' teach-case17-content5'
- line 2620: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
- line 2621: ' teach-case17-content5-1'
+ line 424: ' with p5.js.'
+ line 433: ' presentations. I used'
+ line 84: ' copyright1'
\ No newline at end of file
diff --git a/offline-reference/extra/index.html b/offline-reference/extra/index.html
index d75e35e200..a4ce20e8f7 100644
--- a/offline-reference/extra/index.html
+++ b/offline-reference/extra/index.html
@@ -52,10 +52,10 @@
diff --git a/package-lock.json b/package-lock.json
index 8610c677a7..fdda768ede 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,44 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
+ "@fluent/syntax": {
+ "version": "0.17.0",
+ "resolved": "https://registry.npmjs.org/@fluent/syntax/-/syntax-0.17.0.tgz",
+ "integrity": "sha512-fgJNUZRBk/n5MO5AxZ7Vvv8aCzMF6NanGBS1GFR2HG2lnsGqHLAe9OeHpyg+FkKfP5SvOtbyk3Nkza5iIwN/Ug==",
+ "dev": true
+ },
+ "@kwsites/file-exists": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
+ "integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
+ "dev": true,
+ "requires": {
+ "debug": "^4.1.1"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+ "dev": true,
+ "requires": {
+ "ms": "2.1.2"
+ }
+ },
+ "ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+ "dev": true
+ }
+ }
+ },
+ "@kwsites/promise-deferred": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
+ "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
+ "dev": true
+ },
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -3029,6 +3067,16 @@
}
}
},
+ "call-bind": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+ "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+ "dev": true,
+ "requires": {
+ "function-bind": "^1.1.1",
+ "get-intrinsic": "^1.0.2"
+ }
+ },
"call-me-maybe": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -3114,20 +3162,22 @@
},
"dependencies": {
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
}
}
@@ -3139,9 +3189,9 @@
"dev": true
},
"caniuse-lite": {
- "version": "1.0.30001019",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001019.tgz",
- "integrity": "sha512-6ljkLtF1KM5fQ+5ZN0wuyVvvebJxgJPTmScOMaFuQN2QuOzvRJnWSKfzQskQU5IOU4Gap3zasYPIinzwUjoj/g==",
+ "version": "1.0.30001239",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
+ "integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==",
"dev": true
},
"caseless": {
@@ -3452,13 +3502,13 @@
}
},
"color": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
- "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
+ "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
"dev": true,
"requires": {
"color-convert": "^1.9.1",
- "color-string": "^1.5.2"
+ "color-string": "^1.5.4"
}
},
"color-convert": {
@@ -3477,15 +3527,21 @@
"dev": true
},
"color-string": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
- "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+ "version": "1.5.5",
+ "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
+ "integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
"dev": true,
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
+ "colorette": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+ "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+ "dev": true
+ },
"colors": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
@@ -3949,13 +4005,14 @@
"dev": true
},
"cosmiconfig": {
- "version": "5.0.5",
- "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.0.5.tgz",
- "integrity": "sha512-94j37OtvxS5w7qr7Ta6dt67tWdnOxigBVN4VnSxNXFez9o18PGQ0D33SchKP17r9LAcWVTYV72G6vDayAUBFIg==",
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+ "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
"dev": true,
"requires": {
+ "import-fresh": "^2.0.0",
"is-directory": "^0.3.1",
- "js-yaml": "^3.9.0",
+ "js-yaml": "^3.13.1",
"parse-json": "^4.0.0"
},
"dependencies": {
@@ -4067,9 +4124,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -4116,12 +4173,6 @@
"source-map": "^0.6.1"
}
},
- "css-unit-converter": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
- "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
- "dev": true
- },
"css-what": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -4129,19 +4180,19 @@
"dev": true
},
"cssesc": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
- "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
"cssnano": {
- "version": "4.1.10",
- "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
- "integrity": "sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==",
+ "version": "4.1.11",
+ "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
+ "integrity": "sha512-6gZm2htn7xIPJOHY824ERgj8cNPgPxyCSnkXc4v7YvNW+TdVfzgngHcEhy/8D11kUWRUMbke+tC+AUcUsnMz2g==",
"dev": true,
"requires": {
"cosmiconfig": "^5.0.0",
- "cssnano-preset-default": "^4.0.7",
+ "cssnano-preset-default": "^4.0.8",
"is-resolvable": "^1.0.0",
"postcss": "^7.0.0"
},
@@ -4184,9 +4235,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -4206,9 +4257,9 @@
}
},
"cssnano-preset-default": {
- "version": "4.0.7",
- "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz",
- "integrity": "sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==",
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz",
+ "integrity": "sha512-LdAyHuq+VRyeVREFmuxUZR1TXjQm8QQU/ktoo/x7bz+SdOge1YKc5eMN6pRW7YWBmyq59CqYba1dJ5cUukEjLQ==",
"dev": true,
"requires": {
"css-declaration-sorter": "^4.0.1",
@@ -4239,7 +4290,7 @@
"postcss-ordered-values": "^4.1.2",
"postcss-reduce-initial": "^4.0.3",
"postcss-reduce-transforms": "^4.0.2",
- "postcss-svgo": "^4.0.2",
+ "postcss-svgo": "^4.0.3",
"postcss-unique-selectors": "^4.0.1"
},
"dependencies": {
@@ -4281,9 +4332,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -4361,9 +4412,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -4389,12 +4440,30 @@
"dev": true
},
"csso": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
- "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+ "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
"dev": true,
"requires": {
- "css-tree": "1.0.0-alpha.37"
+ "css-tree": "^1.1.2"
+ },
+ "dependencies": {
+ "css-tree": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+ "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+ "dev": true,
+ "requires": {
+ "mdn-data": "2.0.14",
+ "source-map": "^0.6.1"
+ }
+ },
+ "mdn-data": {
+ "version": "2.0.14",
+ "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+ "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+ "dev": true
+ }
}
},
"cssom": {
@@ -5060,12 +5129,20 @@
"dev": true
},
"dot-prop": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
- "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+ "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
"dev": true,
"requires": {
- "is-obj": "^1.0.0"
+ "is-obj": "^2.0.0"
+ },
+ "dependencies": {
+ "is-obj": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+ "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+ "dev": true
+ }
}
},
"download": {
@@ -5136,10 +5213,13 @@
}
},
"ejs": {
- "version": "2.7.4",
- "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
- "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
- "dev": true
+ "version": "3.1.7",
+ "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.7.tgz",
+ "integrity": "sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==",
+ "dev": true,
+ "requires": {
+ "jake": "^10.8.5"
+ }
},
"electron-to-chromium": {
"version": "1.3.52",
@@ -5444,6 +5524,12 @@
"is-symbol": "^1.0.2"
}
},
+ "escalade": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+ "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+ "dev": true
+ },
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -6574,6 +6660,35 @@
"integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==",
"dev": true
},
+ "filelist": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+ "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+ "dev": true,
+ "requires": {
+ "minimatch": "^5.0.1"
+ },
+ "dependencies": {
+ "brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "dev": true,
+ "requires": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "minimatch": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+ "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+ "dev": true,
+ "requires": {
+ "brace-expansion": "^2.0.1"
+ }
+ }
+ }
+ },
"filename-regex": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -6877,21 +6992,21 @@
"dev": true
},
"fs-extra": {
- "version": "9.0.1",
- "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
- "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+ "version": "9.1.0",
+ "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+ "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
"dev": true,
"requires": {
"at-least-node": "^1.0.0",
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
- "universalify": "^1.0.0"
+ "universalify": "^2.0.0"
},
"dependencies": {
"graceful-fs": {
- "version": "4.2.4",
- "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
- "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+ "version": "4.2.6",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+ "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
"dev": true
}
}
@@ -7055,6 +7170,17 @@
}
}
},
+ "get-intrinsic": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+ "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+ "dev": true,
+ "requires": {
+ "function-bind": "^1.1.1",
+ "has": "^1.0.3",
+ "has-symbols": "^1.0.1"
+ }
+ },
"get-object": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/get-object/-/get-object-0.2.0.tgz",
@@ -7117,9 +7243,9 @@
}
},
"getobject": {
- "version": "0.1.0",
- "resolved": "https://registry.npmjs.org/getobject/-/getobject-0.1.0.tgz",
- "integrity": "sha1-BHpEl4n6Fg0Bj1SG7ZEyC27HiFw=",
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/getobject/-/getobject-1.0.2.tgz",
+ "integrity": "sha512-2zblDBaFcb3rB4rF77XVnuINOE2h2k/OnqXAiy0IrTxUfV1iFp3la33oAQVY9pCpWU268WFYVt2t71hlMuLsOg==",
"dev": true
},
"getpass": {
@@ -7583,9 +7709,9 @@
}
},
"grunt": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.3.0.tgz",
- "integrity": "sha512-6ILlMXv11/4cxuhSMfSU+SfvbxrPuqZrAtLN64+tZpQ3DAKfSQPQHRbTjSbdtxfyQhGZPtN0bDZJ/LdCM5WXXA==",
+ "version": "1.5.3",
+ "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.5.3.tgz",
+ "integrity": "sha512-mKwmo4X2d8/4c/BmcOETHek675uOqw0RuA/zy12jaspWqvTp4+ZeQF1W+OTpcbncnaBsfbQJ6l0l4j+Sn/GmaQ==",
"dev": true,
"requires": {
"dateformat": "~3.0.3",
@@ -7593,10 +7719,10 @@
"exit": "~0.1.2",
"findup-sync": "~0.3.0",
"glob": "~7.1.6",
- "grunt-cli": "~1.3.2",
- "grunt-known-options": "~1.1.0",
+ "grunt-cli": "~1.4.3",
+ "grunt-known-options": "~2.0.0",
"grunt-legacy-log": "~3.0.0",
- "grunt-legacy-util": "~2.0.0",
+ "grunt-legacy-util": "~2.0.1",
"iconv-lite": "~0.4.13",
"js-yaml": "~3.14.0",
"minimatch": "~3.0.4",
@@ -7630,9 +7756,9 @@
}
},
"glob": {
- "version": "7.1.6",
- "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
- "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+ "version": "7.1.7",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+ "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
@@ -7778,16 +7904,16 @@
}
},
"grunt-cli": {
- "version": "1.3.2",
- "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.3.2.tgz",
- "integrity": "sha512-8OHDiZZkcptxVXtMfDxJvmN7MVJNE8L/yIcPb4HB7TlyFD1kDvjHrb62uhySsU14wJx9ORMnTuhRMQ40lH/orQ==",
+ "version": "1.4.3",
+ "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.4.3.tgz",
+ "integrity": "sha512-9Dtx/AhVeB4LYzsViCjUQkd0Kw0McN2gYpdmGYKtE2a5Yt7v1Q+HYZVWhqXc/kGnxlMtqKDxSwotiGeFmkrCoQ==",
"dev": true,
"requires": {
- "grunt-known-options": "~1.1.0",
+ "grunt-known-options": "~2.0.0",
"interpret": "~1.1.0",
- "liftoff": "~2.5.0",
+ "liftup": "~3.0.1",
"nopt": "~4.0.1",
- "v8flags": "~3.1.1"
+ "v8flags": "~3.2.0"
},
"dependencies": {
"nopt": {
@@ -8074,9 +8200,9 @@
}
},
"grunt-known-options": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-1.1.1.tgz",
- "integrity": "sha512-cHwsLqoighpu7TuYj5RonnEuxGVFnztcUqTqp5rXFGYL4OuPFofwC4Ycg7n9fYwvK6F5WbYgeVOwph9Crs2fsQ==",
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-2.0.0.tgz",
+ "integrity": "sha512-GD7cTz0I4SAede1/+pAbmJRG44zFLPipVtdL9o3vqx9IEyb7b4/Y3s7r6ofI3CchR5GvYJ+8buCSioDv5dQLiA==",
"dev": true
},
"grunt-legacy-log": {
@@ -8111,9 +8237,9 @@
}
},
"chalk": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
- "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"requires": {
"ansi-styles": "^4.1.0",
@@ -8153,29 +8279,50 @@
}
},
"grunt-legacy-util": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-2.0.0.tgz",
- "integrity": "sha512-ZEmYFB44bblwPE2oz3q3ygfF6hseQja9tx8I3UZIwbUik32FMWewA+d1qSFicMFB+8dNXDkh35HcDCWlpRsGlA==",
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-2.0.1.tgz",
+ "integrity": "sha512-2bQiD4fzXqX8rhNdXkAywCadeqiPiay0oQny77wA2F3WF4grPJXCvAcyoWUJV+po/b15glGkxuSiQCK299UC2w==",
"dev": true,
"requires": {
- "async": "~1.5.2",
- "exit": "~0.1.1",
- "getobject": "~0.1.0",
+ "async": "~3.2.0",
+ "exit": "~0.1.2",
+ "getobject": "~1.0.0",
"hooker": "~0.2.3",
- "lodash": "~4.17.20",
+ "lodash": "~4.17.21",
"underscore.string": "~3.3.5",
- "which": "~1.3.0"
+ "which": "~2.0.2"
},
"dependencies": {
+ "async": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+ "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
+ "dev": true
+ },
+ "sprintf-js": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+ "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
+ "dev": true
+ },
"underscore.string": {
- "version": "3.3.5",
- "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.5.tgz",
- "integrity": "sha512-g+dpmgn+XBneLmXXo+sGlW5xQEt4ErkS3mgeN2GFbremYeMBSJKr9Wf2KJplQVaiPY/f7FN6atosWYNm9ovrYg==",
+ "version": "3.3.6",
+ "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.6.tgz",
+ "integrity": "sha512-VoC83HWXmCrF6rgkyxS9GHv8W9Q5nhMKho+OadDJGzL2oDYbYEppBaCMH6pFlwLeqj2QS+hhkw2kpXkSdD1JxQ==",
"dev": true,
"requires": {
- "sprintf-js": "^1.0.3",
+ "sprintf-js": "^1.1.1",
"util-deprecate": "^1.0.2"
}
+ },
+ "which": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+ "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+ "dev": true,
+ "requires": {
+ "isexe": "^2.0.0"
+ }
}
}
},
@@ -8509,9 +8656,9 @@
}
},
"handlebars": {
- "version": "4.7.6",
- "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
- "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+ "version": "4.7.7",
+ "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+ "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
"dev": true,
"requires": {
"minimist": "^1.2.5",
@@ -8521,22 +8668,12 @@
"wordwrap": "^1.0.0"
},
"dependencies": {
- "commander": {
- "version": "2.20.3",
- "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
- "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
- "dev": true,
- "optional": true
- },
"uglify-js": {
- "version": "3.9.1",
- "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.9.1.tgz",
- "integrity": "sha512-JUPoL1jHsc9fOjVFHdQIhqEEJsQvfKDjlubcCilu8U26uZ73qOg8VsN8O1jbuei44ZPlwL7kmbAdM4tzaUvqnA==",
+ "version": "3.13.9",
+ "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.9.tgz",
+ "integrity": "sha512-wZbyTQ1w6Y7fHdt8sJnHfSIuWeDgk6B5rCb4E/AM6QNNPbOMIZph21PW5dRB3h7Df0GszN+t7RuUH6sWK5bF0g==",
"dev": true,
- "optional": true,
- "requires": {
- "commander": "~2.20.3"
- }
+ "optional": true
}
}
},
@@ -8921,7 +9058,8 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz",
"integrity": "sha1-ZouTd26q5V696POtRkswekljYl4=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"html-encoding-sniffer": {
"version": "1.0.2",
@@ -9270,9 +9408,9 @@
}
},
"imagemin-pngquant": {
- "version": "9.0.1",
- "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-9.0.1.tgz",
- "integrity": "sha512-PYyo9G/xwddf+Qqlqe3onz5ZH7p6vHYVVkiuuczUjxZmfekyY77RXaOA/AR6FnVoeQxGa/pDtEK5xUKOcVo+sA==",
+ "version": "9.0.2",
+ "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-9.0.2.tgz",
+ "integrity": "sha512-cj//bKo8+Frd/DM8l6Pg9pws1pnDUjgb7ae++sUX1kUVdv2nrngPykhiUOgFeE0LGY/LmUbCf4egCHC4YUcZSg==",
"dev": true,
"requires": {
"execa": "^4.0.0",
@@ -9916,6 +10054,15 @@
"rgba-regex": "^1.0.0"
}
},
+ "is-core-module": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+ "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+ "dev": true,
+ "requires": {
+ "has": "^1.0.3"
+ }
+ },
"is-data-descriptor": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
@@ -10265,15 +10412,6 @@
"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
"dev": true
},
- "is-svg": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
- "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
- "dev": true,
- "requires": {
- "html-comment-regex": "^1.1.0"
- }
- },
"is-symbol": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
@@ -10384,6 +10522,75 @@
"is-object": "^1.0.1"
}
},
+ "jake": {
+ "version": "10.8.5",
+ "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.5.tgz",
+ "integrity": "sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==",
+ "dev": true,
+ "requires": {
+ "async": "^3.2.3",
+ "chalk": "^4.0.2",
+ "filelist": "^1.0.1",
+ "minimatch": "^3.0.4"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
+ "async": {
+ "version": "3.2.3",
+ "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz",
+ "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==",
+ "dev": true
+ },
+ "chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ }
+ }
+ },
"jest-docblock": {
"version": "21.2.0",
"resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-21.2.0.tgz",
@@ -10501,13 +10708,13 @@
"dev": true
},
"jsonfile": {
- "version": "6.0.1",
- "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
- "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+ "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.6",
- "universalify": "^1.0.0"
+ "universalify": "^2.0.0"
}
},
"jsprim": {
@@ -10609,331 +10816,100 @@
"type-check": "~0.3.2"
}
},
- "liftoff": {
- "version": "2.5.0",
- "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.5.0.tgz",
- "integrity": "sha1-IAkpG7Mc6oYbvxCnwVooyvdcMew=",
+ "liftup": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz",
+ "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==",
"dev": true,
"requires": {
- "extend": "^3.0.0",
- "findup-sync": "^2.0.0",
- "fined": "^1.0.1",
- "flagged-respawn": "^1.0.0",
+ "extend": "^3.0.2",
+ "findup-sync": "^4.0.0",
+ "fined": "^1.2.0",
+ "flagged-respawn": "^1.0.1",
"is-plain-object": "^2.0.4",
- "object.map": "^1.0.0",
- "rechoir": "^0.6.2",
- "resolve": "^1.1.7"
+ "object.map": "^1.0.1",
+ "rechoir": "^0.7.0",
+ "resolve": "^1.19.0"
},
"dependencies": {
- "arr-diff": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
- "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
- "dev": true
- },
- "array-unique": {
- "version": "0.3.2",
- "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
- "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
- "dev": true
- },
"braces": {
- "version": "2.3.2",
- "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
- "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+ "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"requires": {
- "arr-flatten": "^1.1.0",
- "array-unique": "^0.3.2",
- "extend-shallow": "^2.0.1",
- "fill-range": "^4.0.0",
- "isobject": "^3.0.1",
- "repeat-element": "^1.1.2",
- "snapdragon": "^0.8.1",
- "snapdragon-node": "^2.0.1",
- "split-string": "^3.0.2",
- "to-regex": "^3.0.1"
- },
- "dependencies": {
- "extend-shallow": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
- "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
- "dev": true,
- "requires": {
- "is-extendable": "^0.1.0"
- }
- }
- }
- },
- "define-property": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
- "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
- "dev": true,
- "requires": {
- "is-descriptor": "^1.0.2",
- "isobject": "^3.0.1"
- }
- },
- "expand-brackets": {
- "version": "2.1.4",
- "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
- "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
- "dev": true,
- "requires": {
- "debug": "^2.3.3",
- "define-property": "^0.2.5",
- "extend-shallow": "^2.0.1",
- "posix-character-classes": "^0.1.0",
- "regex-not": "^1.0.0",
- "snapdragon": "^0.8.1",
- "to-regex": "^3.0.1"
- },
- "dependencies": {
- "define-property": {
- "version": "0.2.5",
- "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
- "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
- "dev": true,
- "requires": {
- "is-descriptor": "^0.1.0"
- }
- },
- "extend-shallow": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
- "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
- "dev": true,
- "requires": {
- "is-extendable": "^0.1.0"
- }
- },
- "is-accessor-descriptor": {
- "version": "0.1.6",
- "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
- "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
- "dev": true,
- "requires": {
- "kind-of": "^3.0.2"
- },
- "dependencies": {
- "kind-of": {
- "version": "3.2.2",
- "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
- "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
- "dev": true,
- "requires": {
- "is-buffer": "^1.1.5"
- }
- }
- }
- },
- "is-data-descriptor": {
- "version": "0.1.4",
- "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
- "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
- "dev": true,
- "requires": {
- "kind-of": "^3.0.2"
- },
- "dependencies": {
- "kind-of": {
- "version": "3.2.2",
- "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
- "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
- "dev": true,
- "requires": {
- "is-buffer": "^1.1.5"
- }
- }
- }
- },
- "is-descriptor": {
- "version": "0.1.6",
- "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
- "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
- "dev": true,
- "requires": {
- "is-accessor-descriptor": "^0.1.6",
- "is-data-descriptor": "^0.1.4",
- "kind-of": "^5.0.0"
- }
- },
- "kind-of": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
- "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
- "dev": true
- }
- }
- },
- "extend-shallow": {
- "version": "3.0.2",
- "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
- "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
- "dev": true,
- "requires": {
- "assign-symbols": "^1.0.0",
- "is-extendable": "^1.0.1"
- },
- "dependencies": {
- "is-extendable": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
- "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
- "dev": true,
- "requires": {
- "is-plain-object": "^2.0.4"
- }
- }
- }
- },
- "extglob": {
- "version": "2.0.4",
- "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
- "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
- "dev": true,
- "requires": {
- "array-unique": "^0.3.2",
- "define-property": "^1.0.0",
- "expand-brackets": "^2.1.4",
- "extend-shallow": "^2.0.1",
- "fragment-cache": "^0.2.1",
- "regex-not": "^1.0.0",
- "snapdragon": "^0.8.1",
- "to-regex": "^3.0.1"
- },
- "dependencies": {
- "define-property": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
- "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
- "dev": true,
- "requires": {
- "is-descriptor": "^1.0.0"
- }
- },
- "extend-shallow": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
- "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
- "dev": true,
- "requires": {
- "is-extendable": "^0.1.0"
- }
- }
+ "fill-range": "^7.0.1"
}
},
"fill-range": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
- "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+ "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"requires": {
- "extend-shallow": "^2.0.1",
- "is-number": "^3.0.0",
- "repeat-string": "^1.6.1",
- "to-regex-range": "^2.1.0"
- },
- "dependencies": {
- "extend-shallow": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
- "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
- "dev": true,
- "requires": {
- "is-extendable": "^0.1.0"
- }
- }
+ "to-regex-range": "^5.0.1"
}
},
"findup-sync": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
- "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+ "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
"dev": true,
"requires": {
"detect-file": "^1.0.0",
- "is-glob": "^3.1.0",
- "micromatch": "^3.0.4",
+ "is-glob": "^4.0.0",
+ "micromatch": "^4.0.2",
"resolve-dir": "^1.0.1"
}
},
- "is-accessor-descriptor": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
- "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+ "is-glob": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+ "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
"dev": true,
"requires": {
- "kind-of": "^6.0.0"
+ "is-extglob": "^2.1.1"
}
},
- "is-data-descriptor": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
- "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
- "dev": true,
- "requires": {
- "kind-of": "^6.0.0"
- }
+ "is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+ "dev": true
},
- "is-descriptor": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
- "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+ "micromatch": {
+ "version": "4.0.4",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+ "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
"dev": true,
"requires": {
- "is-accessor-descriptor": "^1.0.0",
- "is-data-descriptor": "^1.0.0",
- "kind-of": "^6.0.2"
+ "braces": "^3.0.1",
+ "picomatch": "^2.2.3"
}
},
- "is-number": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
- "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+ "picomatch": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+ "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+ "dev": true
+ },
+ "resolve": {
+ "version": "1.20.0",
+ "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+ "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
"dev": true,
"requires": {
- "kind-of": "^3.0.2"
- },
- "dependencies": {
- "kind-of": {
- "version": "3.2.2",
- "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
- "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
- "dev": true,
- "requires": {
- "is-buffer": "^1.1.5"
- }
- }
+ "is-core-module": "^2.2.0",
+ "path-parse": "^1.0.6"
}
},
- "kind-of": {
- "version": "6.0.3",
- "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
- "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
- "dev": true
- },
- "micromatch": {
- "version": "3.1.10",
- "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
- "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+ "to-regex-range": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+ "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"requires": {
- "arr-diff": "^4.0.0",
- "array-unique": "^0.3.2",
- "braces": "^2.3.1",
- "define-property": "^2.0.2",
- "extend-shallow": "^3.0.2",
- "extglob": "^2.0.4",
- "fragment-cache": "^0.2.1",
- "kind-of": "^6.0.2",
- "nanomatch": "^1.2.9",
- "object.pick": "^1.3.0",
- "regex-not": "^1.0.0",
- "snapdragon": "^0.8.1",
- "to-regex": "^3.0.2"
+ "is-number": "^7.0.0"
}
}
}
@@ -11814,9 +11790,9 @@
}
},
"lodash": {
- "version": "4.17.20",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
- "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash._arrayfilter": {
@@ -12569,12 +12545,6 @@
"object-visit": "^1.0.0"
}
},
- "marked": {
- "version": "0.8.2",
- "resolved": "https://registry.npmjs.org/marked/-/marked-0.8.2.tgz",
- "integrity": "sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==",
- "dev": true
- },
"match-file": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/match-file/-/match-file-0.2.2.tgz",
@@ -12863,9 +12833,9 @@
}
},
"minimist": {
- "version": "1.2.5",
- "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
- "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+ "version": "1.2.6",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
"dev": true
},
"mixin-deep": {
@@ -12924,9 +12894,9 @@
"optional": true
},
"moment": {
- "version": "2.29.1",
- "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
- "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+ "version": "2.29.2",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
+ "integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==",
"dev": true
},
"morgan": {
@@ -13164,9 +13134,9 @@
"dev": true
},
"neo-async": {
- "version": "2.6.1",
- "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
- "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
"next-tick": {
@@ -13217,21 +13187,10 @@
}
},
"node-releases": {
- "version": "1.1.44",
- "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.44.tgz",
- "integrity": "sha512-NwbdvJyR7nrcGrXvKAvzc5raj/NkoJudkarh2yIpJ4t0NH4aqjUDz/486P+ynIW5eokKOfzGNRdYoLfBlomruw==",
- "dev": true,
- "requires": {
- "semver": "^6.3.0"
- },
- "dependencies": {
- "semver": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
- "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
- "dev": true
- }
- }
+ "version": "1.1.73",
+ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+ "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
+ "dev": true
},
"noncharacters": {
"version": "1.1.0",
@@ -13633,7 +13592,7 @@
},
"onetime": {
"version": "1.1.0",
- "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true
},
@@ -14042,9 +14001,9 @@
"dev": true
},
"path-parse": {
- "version": "1.0.6",
- "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
- "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
"dev": true
},
"path-root": {
@@ -14549,15 +14508,14 @@
}
},
"postcss-calc": {
- "version": "7.0.1",
- "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
- "integrity": "sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==",
+ "version": "7.0.5",
+ "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
+ "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
"dev": true,
"requires": {
- "css-unit-converter": "^1.1.1",
- "postcss": "^7.0.5",
- "postcss-selector-parser": "^5.0.0-rc.4",
- "postcss-value-parser": "^3.3.1"
+ "postcss": "^7.0.27",
+ "postcss-selector-parser": "^6.0.2",
+ "postcss-value-parser": "^4.0.2"
},
"dependencies": {
"ansi-styles": {
@@ -14598,9 +14556,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -14609,9 +14567,9 @@
}
},
"postcss-value-parser": {
- "version": "3.3.1",
- "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
- "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+ "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
"dev": true
},
"supports-color": {
@@ -14648,14 +14606,16 @@
}
},
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"chalk": {
@@ -14681,9 +14641,9 @@
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
},
"has-flag": {
@@ -14693,9 +14653,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -14762,9 +14722,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -14830,9 +14790,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -14898,9 +14858,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -14966,9 +14926,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15034,9 +14994,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15105,9 +15065,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15150,14 +15110,16 @@
}
},
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"chalk": {
@@ -15183,9 +15145,9 @@
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
},
"has-flag": {
@@ -15195,9 +15157,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15206,12 +15168,12 @@
}
},
"postcss-selector-parser": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
- "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+ "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
"dev": true,
"requires": {
- "dot-prop": "^4.1.1",
+ "dot-prop": "^5.2.0",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
@@ -15275,9 +15237,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15346,9 +15308,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15391,14 +15353,16 @@
}
},
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"chalk": {
@@ -15424,9 +15388,9 @@
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
},
"has-flag": {
@@ -15436,9 +15400,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15507,9 +15471,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15518,12 +15482,12 @@
}
},
"postcss-selector-parser": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
- "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+ "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
"dev": true,
"requires": {
- "dot-prop": "^4.1.1",
+ "dot-prop": "^5.2.0",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
@@ -15586,9 +15550,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15656,9 +15620,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15727,9 +15691,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15798,9 +15762,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15868,9 +15832,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15938,9 +15902,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -15980,14 +15944,16 @@
}
},
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"chalk": {
@@ -16013,9 +15979,9 @@
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
},
"has-flag": {
@@ -16025,9 +15991,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16096,9 +16062,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16165,9 +16131,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16235,9 +16201,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16278,14 +16244,16 @@
}
},
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"chalk": {
@@ -16311,9 +16279,9 @@
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
},
"has-flag": {
@@ -16323,9 +16291,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16394,9 +16362,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16416,23 +16384,21 @@
}
},
"postcss-selector-parser": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
- "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+ "version": "6.0.6",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
+ "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
"dev": true,
"requires": {
- "cssesc": "^2.0.0",
- "indexes-of": "^1.0.1",
- "uniq": "^1.0.1"
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
}
},
"postcss-svgo": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
- "integrity": "sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==",
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.3.tgz",
+ "integrity": "sha512-NoRbrcMWTtUghzuKSoIm6XV+sJdvZ7GZSc3wdBN0W19FTtp2ko8NqLsgoh/m9CzNhU3KLPvQmjIwtaNFkaFTvw==",
"dev": true,
"requires": {
- "is-svg": "^3.0.0",
"postcss": "^7.0.0",
"postcss-value-parser": "^3.0.0",
"svgo": "^1.0.0"
@@ -16476,9 +16442,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16546,9 +16512,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -16720,10 +16686,13 @@
"dev": true
},
"qs": {
- "version": "6.9.4",
- "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
- "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==",
- "dev": true
+ "version": "6.10.1",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz",
+ "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==",
+ "dev": true,
+ "requires": {
+ "side-channel": "^1.0.4"
+ }
},
"querystring": {
"version": "0.2.0",
@@ -16958,12 +16927,12 @@
}
},
"rechoir": {
- "version": "0.6.2",
- "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
- "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
+ "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
"dev": true,
"requires": {
- "resolve": "^1.1.6"
+ "resolve": "^1.9.0"
}
},
"redent": {
@@ -17994,9 +17963,9 @@
"optional": true
},
"set-getter": {
- "version": "0.1.0",
- "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.0.tgz",
- "integrity": "sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=",
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.1.tgz",
+ "integrity": "sha512-9sVWOy+gthr+0G9DzqqLaYNA7+5OKkSmcqjL9cBpDEaZrr3ShQlyX2cZ/O/ozE41oxn/Tt0LGEM/w4Rub3A3gw==",
"dev": true,
"requires": {
"to-object-path": "^0.3.0"
@@ -18070,6 +18039,25 @@
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true
},
+ "side-channel": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+ "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+ "dev": true,
+ "requires": {
+ "call-bind": "^1.0.0",
+ "get-intrinsic": "^1.0.2",
+ "object-inspect": "^1.9.0"
+ },
+ "dependencies": {
+ "object-inspect": {
+ "version": "1.10.3",
+ "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
+ "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
+ "dev": true
+ }
+ }
+ },
"sigmund": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
@@ -18090,9 +18078,9 @@
"optional": true
},
"simple-get": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz",
- "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==",
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+ "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
"dev": true,
"optional": true,
"requires": {
@@ -18121,21 +18109,23 @@
}
},
"simple-git": {
- "version": "1.132.0",
- "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-1.132.0.tgz",
- "integrity": "sha512-xauHm1YqCTom1sC9eOjfq3/9RKiUA9iPnxBbrY2DdL8l4ADMu0jjM5l5lphQP5YWNqAL2aXC/OeuQ76vHtW5fg==",
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.5.0.tgz",
+ "integrity": "sha512-fZsaq5nzdxQRhMNs6ESGLpMUHoL5GRP+boWPhq9pMYMKwOGZV2jHOxi8AbFFA2Y/6u4kR99HoULizSbpzaODkA==",
"dev": true,
"requires": {
- "debug": "^4.0.1"
+ "@kwsites/file-exists": "^1.1.1",
+ "@kwsites/promise-deferred": "^1.1.1",
+ "debug": "^4.3.3"
},
"dependencies": {
"debug": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
- "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dev": true,
"requires": {
- "ms": "^2.1.1"
+ "ms": "2.1.2"
}
},
"ms": {
@@ -18870,14 +18860,16 @@
}
},
"browserslist": {
- "version": "4.8.3",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
- "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+ "version": "4.16.6",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+ "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
- "caniuse-lite": "^1.0.30001017",
- "electron-to-chromium": "^1.3.322",
- "node-releases": "^1.1.44"
+ "caniuse-lite": "^1.0.30001219",
+ "colorette": "^1.2.2",
+ "electron-to-chromium": "^1.3.723",
+ "escalade": "^3.1.1",
+ "node-releases": "^1.1.71"
}
},
"chalk": {
@@ -18903,9 +18895,9 @@
}
},
"electron-to-chromium": {
- "version": "1.3.327",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.327.tgz",
- "integrity": "sha512-DNMd91VtKt44LIkFtpICxAWu/GSGFLUMDM/kFINJ3Oe47OimSnbMvO3ChkUCdUyit+pRdhdCcM3+i5bpli5gqg==",
+ "version": "1.3.752",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+ "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==",
"dev": true
},
"has-flag": {
@@ -18915,9 +18907,9 @@
"dev": true
},
"postcss": {
- "version": "7.0.26",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
- "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+ "version": "7.0.36",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+ "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@@ -18926,12 +18918,12 @@
}
},
"postcss-selector-parser": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
- "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+ "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
"dev": true,
"requires": {
- "dot-prop": "^4.1.1",
+ "dot-prop": "^5.2.0",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
@@ -20124,9 +20116,9 @@
}
},
"universalify": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
- "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+ "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
"dev": true
},
"unpipe": {
@@ -20283,9 +20275,9 @@
"dev": true
},
"v8flags": {
- "version": "3.1.3",
- "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz",
- "integrity": "sha512-amh9CCg3ZxkzQ48Mhcb8iX7xpAfYJgePHxWMQCBWECpOSqJUXgY26ncA61UTV0BkPqfhcy6mzwCIoP4ygxpW8w==",
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
+ "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
"dev": true,
"requires": {
"homedir-polyfill": "^1.0.1"
@@ -20308,9 +20300,9 @@
}
},
"vendors": {
- "version": "1.0.3",
- "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.3.tgz",
- "integrity": "sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw==",
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
+ "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
"dev": true
},
"verbalize": {
@@ -20706,9 +20698,9 @@
"dev": true
},
"yaml": {
- "version": "1.10.0",
- "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
- "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+ "version": "1.10.2",
+ "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+ "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"dev": true
},
"yargs": {
diff --git a/package.json b/package.json
index 81a56887a2..d82d62c726 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"languages": [
"en",
"es",
+ "hi",
"ko",
"zh-Hans"
],
@@ -38,20 +39,22 @@
}
],
"devDependencies": {
+ "@fluent/syntax": "^0.17.0",
"assemble": "^0.24.3",
"assemble-contrib-i18n": "^0.1.6",
"assemble-contrib-permalinks": "*",
"autoprefixer": "^6.7.7",
- "cssnano": "^4.1.10",
- "ejs": "^2.7.4",
+ "cssnano": "^4.1.11",
+ "ejs": "^3.1.7",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.10.0",
"eslint-plugin-prettier": "^2.7.0",
"flat": "^5.0.2",
- "fs-extra": "^9.0.1",
- "grunt": "^1.3.0",
+ "fs-extra": "^9.1.0",
+ "glob": "^5.0.15",
+ "grunt": "^1.5.3",
"grunt-assemble": "^0.6.3",
- "grunt-cli": "^1.3.2",
+ "grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-compress": "^1.6.0",
"grunt-contrib-concat": "^1.0.1",
@@ -69,25 +72,25 @@
"grunt-serve": "^0.1.6",
"grunt-shell": "^3.0.1",
"grunt-uncss": "^0.8.6",
- "handlebars": "^4.7.6",
+ "handlebars": "^4.7.7",
"husky": "^0.14.3",
"imagemin-mozjpeg": "^9.0.0",
- "imagemin-pngquant": "^9.0.1",
+ "imagemin-pngquant": "^9.0.2",
"js-yaml": "^3.14.1",
"lint-staged": "^9.5.0",
"load-grunt-tasks": "^5.1.0",
- "lodash": "^4.17.20",
- "marked": "^0.8.2",
- "moment": "^2.29.1",
+ "lodash": "^4.17.21",
+ "mkdirp": "^0.5.5",
+ "moment": "^2.29.2",
"ms": "^0.7.3",
"prettier": "^1.19.1",
- "qs": "^6.9.4",
+ "qs": "^6.10.1",
"send": "^0.16.2",
"serve-index": "^1.9.1",
- "simple-git": "^1.132.0",
+ "simple-git": "^3.5.0",
"time-grunt": "^1.4.0",
"uglify-js": "^2.8.29",
- "yaml": "^1.10.0"
+ "yaml": "^1.10.2"
},
"dependencies": {
"upath": "^1.2.0"
diff --git a/pontoon-config.toml b/pontoon-config.toml
new file mode 100644
index 0000000000..7ff80e8c69
--- /dev/null
+++ b/pontoon-config.toml
@@ -0,0 +1,11 @@
+basepath = "./src/data"
+
+locales = [
+ "es",
+ "ko",
+ "zh-CN"
+]
+
+[[paths]]
+ reference = "localization/en/**"
+ l10n = "localization/{locale}/**"
\ No newline at end of file
diff --git a/src/assets/contributor-docs/index.html b/src/assets/contributor-docs/index.html
index 7a4cc1a12c..cd7da0d55c 100644
--- a/src/assets/contributor-docs/index.html
+++ b/src/assets/contributor-docs/index.html
@@ -6,6 +6,8 @@
+
+
p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},brightness:{name:"brightness",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},color:{name:"color",class:"p5",module:"Color",overloads:[{params:[{name:"gray",description:"number specifying value between white and black.
\n",type:"Number"},{name:"alpha",description:"alpha value relative to current color range\n (default is 0-255)
\n",type:"Number",optional:!0}]},{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}]},{params:[{name:"value",description:"a color string
\n",type:"String"}]},{params:[{name:"values",description:"an array containing the red,green,blue &\n and alpha components of the color
\n",type:"Number[]"}]},{params:[{name:"color",description:"",type:"p5.Color"}]}]},green:{name:"green",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},hue:{name:"hue",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},lerpColor:{name:"lerpColor",params:[{name:"c1",description:"interpolate from this color
\n",type:"p5.Color"},{name:"c2",description:"interpolate to this color
\n",type:"p5.Color"},{name:"amt",description:"number between 0 and 1
\n",type:"Number"}],class:"p5",module:"Color"},lightness:{name:"lightness",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},red:{name:"red",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},saturation:{name:"saturation",params:[{name:"color",description:'p5.Color object, color components,\n or CSS color
\n',type:"p5.Color|Number[]|String"}],class:"p5",module:"Color"},background:{name:"background",class:"p5",module:"Color",overloads:[{params:[{name:"color",description:'any value created by the color() function
\n',type:"p5.Color"}],chainable:1},{params:[{name:"colorstring",description:"color string, possible formats include: integer\n rgb() or rgba(), percentage rgb() or rgba(),\n 3-digit hex, 6-digit hex
\n",type:"String"},{name:"a",description:"opacity of the background relative to current\n color range (default is 0-255)
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"gray",description:"specifies a value between white and black
\n",type:"Number"},{name:"a",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"v1",description:"red or hue value (depending on the current color\n mode)
\n",type:"Number"},{name:"v2",description:"green or saturation value (depending on the current\n color mode)
\n",type:"Number"},{name:"v3",description:"blue or brightness value (depending on the current\n color mode)
\n",type:"Number"},{name:"a",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"values",description:"an array containing the red, green, blue\n and alpha components of the color
\n",type:"Number[]"}],chainable:1},{params:[{name:"image",description:'image created with loadImage() or createImage(),\n to set as background\n (must be same size as the sketch window)
\n',type:"p5.Image"},{name:"a",description:"",type:"Number",optional:!0}],chainable:1}]},clear:{name:"clear",class:"p5",module:"Color"},colorMode:{name:"colorMode",class:"p5",module:"Color",overloads:[{params:[{name:"mode",description:"either RGB, HSB or HSL, corresponding to\n Red/Green/Blue and Hue/Saturation/Brightness\n (or Lightness)
\n",type:"Constant"},{name:"max",description:"range for all values
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"mode",description:"",type:"Constant"},{name:"max1",description:"range for the red or hue depending on the\n current color mode
\n",type:"Number"},{name:"max2",description:"range for the green or saturation depending\n on the current color mode
\n",type:"Number"},{name:"max3",description:"range for the blue or brightness/lightness\n depending on the current color mode
\n",type:"Number"},{name:"maxA",description:"range for the alpha
\n",type:"Number",optional:!0}],chainable:1}]},fill:{name:"fill",class:"p5",module:"Color",overloads:[{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"values",description:"an array containing the red,green,blue &\n and alpha components of the color
\n",type:"Number[]"}],chainable:1},{params:[{name:"color",description:"the fill color
\n",type:"p5.Color"}],chainable:1}]},noFill:{name:"noFill",class:"p5",module:"Color"},noStroke:{name:"noStroke",class:"p5",module:"Color"},stroke:{name:"stroke",class:"p5",module:"Color",overloads:[{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"values",description:"an array containing the red,green,blue &\n and alpha components of the color
\n",type:"Number[]"}],chainable:1},{params:[{name:"color",description:"the stroke color
\n",type:"p5.Color"}],chainable:1}]},erase:{name:"erase",params:[{name:"strengthFill",description:"A number (0-255) for the strength of erasing for a shape's fill.\n This will default to 255 when no argument is given, which\n is full strength.
\n",type:"Number",optional:!0},{name:"strengthStroke",description:"A number (0-255) for the strength of erasing for a shape's stroke.\n This will default to 255 when no argument is given, which\n is full strength.
\n",type:"Number",optional:!0}],class:"p5",module:"Color"},noErase:{name:"noErase",class:"p5",module:"Color"},arc:{name:"arc",params:[{name:"x",description:"x-coordinate of the arc's ellipse
\n",type:"Number"},{name:"y",description:"y-coordinate of the arc's ellipse
\n",type:"Number"},{name:"w",description:"width of the arc's ellipse by default
\n",type:"Number"},{name:"h",description:"height of the arc's ellipse by default
\n",type:"Number"},{name:"start",description:"angle to start the arc, specified in radians
\n",type:"Number"},{name:"stop",description:"angle to stop the arc, specified in radians
\n",type:"Number"},{name:"mode",description:"optional parameter to determine the way of drawing\n the arc. either CHORD, PIE or OPEN
\n",type:"Constant",optional:!0},{name:"detail",description:"optional parameter for WebGL mode only. This is to\n specify the number of vertices that makes up the\n perimeter of the arc. Default value is 25.
\n",type:"Number",optional:!0}],class:"p5",module:"Shape"},ellipse:{name:"ellipse",class:"p5",module:"Shape",overloads:[{params:[{name:"x",description:"x-coordinate of the center of ellipse.
\n",type:"Number"},{name:"y",description:"y-coordinate of the center of ellipse.
\n",type:"Number"},{name:"w",description:"width of the ellipse.
\n",type:"Number"},{name:"h",description:"height of the ellipse.
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"w",description:"",type:"Number"},{name:"h",description:"",type:"Number"},{name:"detail",description:"number of radial sectors to draw (for WebGL mode)
\n",type:"Integer"}]}]},circle:{name:"circle",params:[{name:"x",description:"x-coordinate of the centre of the circle.
\n",type:"Number"},{name:"y",description:"y-coordinate of the centre of the circle.
\n",type:"Number"},{name:"d",description:"diameter of the circle.
\n",type:"Number"}],class:"p5",module:"Shape"},line:{name:"line",class:"p5",module:"Shape",overloads:[{params:[{name:"x1",description:"the x-coordinate of the first point
\n",type:"Number"},{name:"y1",description:"the y-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"the x-coordinate of the second point
\n",type:"Number"},{name:"y2",description:"the y-coordinate of the second point
\n",type:"Number"}],chainable:1},{params:[{name:"x1",description:"",type:"Number"},{name:"y1",description:"",type:"Number"},{name:"z1",description:"the z-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"",type:"Number"},{name:"y2",description:"",type:"Number"},{name:"z2",description:"the z-coordinate of the second point
\n",type:"Number"}],chainable:1}]},point:{name:"point",class:"p5",module:"Shape",overloads:[{params:[{name:"x",description:"the x-coordinate
\n",type:"Number"},{name:"y",description:"the y-coordinate
\n",type:"Number"},{name:"z",description:"the z-coordinate (for WebGL mode)
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"coordinate_vector",description:"the coordinate vector
\n",type:"p5.Vector"}],chainable:1}]},quad:{name:"quad",class:"p5",module:"Shape",overloads:[{params:[{name:"x1",description:"the x-coordinate of the first point
\n",type:"Number"},{name:"y1",description:"the y-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"the x-coordinate of the second point
\n",type:"Number"},{name:"y2",description:"the y-coordinate of the second point
\n",type:"Number"},{name:"x3",description:"the x-coordinate of the third point
\n",type:"Number"},{name:"y3",description:"the y-coordinate of the third point
\n",type:"Number"},{name:"x4",description:"the x-coordinate of the fourth point
\n",type:"Number"},{name:"y4",description:"the y-coordinate of the fourth point
\n",type:"Number"}],chainable:1},{params:[{name:"x1",description:"",type:"Number"},{name:"y1",description:"",type:"Number"},{name:"z1",description:"the z-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"",type:"Number"},{name:"y2",description:"",type:"Number"},{name:"z2",description:"the z-coordinate of the second point
\n",type:"Number"},{name:"x3",description:"",type:"Number"},{name:"y3",description:"",type:"Number"},{name:"z3",description:"the z-coordinate of the third point
\n",type:"Number"},{name:"x4",description:"",type:"Number"},{name:"y4",description:"",type:"Number"},{name:"z4",description:"the z-coordinate of the fourth point
\n",type:"Number"}],chainable:1}]},rect:{name:"rect",class:"p5",module:"Shape",overloads:[{params:[{name:"x",description:"x-coordinate of the rectangle.
\n",type:"Number"},{name:"y",description:"y-coordinate of the rectangle.
\n",type:"Number"},{name:"w",description:"width of the rectangle.
\n",type:"Number"},{name:"h",description:"height of the rectangle.
\n",type:"Number",optional:!0},{name:"tl",description:"optional radius of top-left corner.
\n",type:"Number",optional:!0},{name:"tr",description:"optional radius of top-right corner.
\n",type:"Number",optional:!0},{name:"br",description:"optional radius of bottom-right corner.
\n",type:"Number",optional:!0},{name:"bl",description:"optional radius of bottom-left corner.
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"w",description:"",type:"Number"},{name:"h",description:"",type:"Number"},{name:"detailX",description:"number of segments in the x-direction (for WebGL mode)
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of segments in the y-direction (for WebGL mode)
\n",type:"Integer",optional:!0}],chainable:1}]},square:{name:"square",params:[{name:"x",description:"x-coordinate of the square.
\n",type:"Number"},{name:"y",description:"y-coordinate of the square.
\n",type:"Number"},{name:"s",description:"side size of the square.
\n",type:"Number"},{name:"tl",description:"optional radius of top-left corner.
\n",type:"Number",optional:!0},{name:"tr",description:"optional radius of top-right corner.
\n",type:"Number",optional:!0},{name:"br",description:"optional radius of bottom-right corner.
\n",type:"Number",optional:!0},{name:"bl",description:"optional radius of bottom-left corner.
\n",type:"Number",optional:!0}],class:"p5",module:"Shape"},triangle:{name:"triangle",params:[{name:"x1",description:"x-coordinate of the first point
\n",type:"Number"},{name:"y1",description:"y-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"x-coordinate of the second point
\n",type:"Number"},{name:"y2",description:"y-coordinate of the second point
\n",type:"Number"},{name:"x3",description:"x-coordinate of the third point
\n",type:"Number"},{name:"y3",description:"y-coordinate of the third point
\n",type:"Number"}],class:"p5",module:"Shape"},ellipseMode:{name:"ellipseMode",params:[{name:"mode",description:"either CENTER, RADIUS, CORNER, or CORNERS
\n",type:"Constant"}],class:"p5",module:"Shape"},noSmooth:{name:"noSmooth",class:"p5",module:"Shape"},rectMode:{name:"rectMode",params:[{name:"mode",description:"either CORNER, CORNERS, CENTER, or RADIUS
\n",type:"Constant"}],class:"p5",module:"Shape"},smooth:{name:"smooth",class:"p5",module:"Shape"},strokeCap:{name:"strokeCap",params:[{name:"cap",description:"either ROUND, SQUARE or PROJECT
\n",type:"Constant"}],class:"p5",module:"Shape"},strokeJoin:{name:"strokeJoin",params:[{name:"join",description:"either MITER, BEVEL, ROUND
\n",type:"Constant"}],class:"p5",module:"Shape"},strokeWeight:{name:"strokeWeight",params:[{name:"weight",description:"the weight of the stroke (in pixels)
\n",type:"Number"}],class:"p5",module:"Shape"},bezier:{name:"bezier",class:"p5",module:"Shape",overloads:[{params:[{name:"x1",description:"x-coordinate for the first anchor point
\n",type:"Number"},{name:"y1",description:"y-coordinate for the first anchor point
\n",type:"Number"},{name:"x2",description:"x-coordinate for the first control point
\n",type:"Number"},{name:"y2",description:"y-coordinate for the first control point
\n",type:"Number"},{name:"x3",description:"x-coordinate for the second control point
\n",type:"Number"},{name:"y3",description:"y-coordinate for the second control point
\n",type:"Number"},{name:"x4",description:"x-coordinate for the second anchor point
\n",type:"Number"},{name:"y4",description:"y-coordinate for the second anchor point
\n",type:"Number"}],chainable:1},{params:[{name:"x1",description:"",type:"Number"},{name:"y1",description:"",type:"Number"},{name:"z1",description:"z-coordinate for the first anchor point
\n",type:"Number"},{name:"x2",description:"",type:"Number"},{name:"y2",description:"",type:"Number"},{name:"z2",description:"z-coordinate for the first control point
\n",type:"Number"},{name:"x3",description:"",type:"Number"},{name:"y3",description:"",type:"Number"},{name:"z3",description:"z-coordinate for the second control point
\n",type:"Number"},{name:"x4",description:"",type:"Number"},{name:"y4",description:"",type:"Number"},{name:"z4",description:"z-coordinate for the second anchor point
\n",type:"Number"}],chainable:1}]},bezierDetail:{name:"bezierDetail",params:[{name:"detail",description:"resolution of the curves
\n",type:"Number"}],class:"p5",module:"Shape"},bezierPoint:{name:"bezierPoint",params:[{name:"a",description:"coordinate of first point on the curve
\n",type:"Number"},{name:"b",description:"coordinate of first control point
\n",type:"Number"},{name:"c",description:"coordinate of second control point
\n",type:"Number"},{name:"d",description:"coordinate of second point on the curve
\n",type:"Number"},{name:"t",description:"value between 0 and 1
\n",type:"Number"}],class:"p5",module:"Shape"},bezierTangent:{name:"bezierTangent",params:[{name:"a",description:"coordinate of first point on the curve
\n",type:"Number"},{name:"b",description:"coordinate of first control point
\n",type:"Number"},{name:"c",description:"coordinate of second control point
\n",type:"Number"},{name:"d",description:"coordinate of second point on the curve
\n",type:"Number"},{name:"t",description:"value between 0 and 1
\n",type:"Number"}],class:"p5",module:"Shape"},curve:{name:"curve",class:"p5",module:"Shape",overloads:[{params:[{name:"x1",description:"x-coordinate for the beginning control point
\n",type:"Number"},{name:"y1",description:"y-coordinate for the beginning control point
\n",type:"Number"},{name:"x2",description:"x-coordinate for the first point
\n",type:"Number"},{name:"y2",description:"y-coordinate for the first point
\n",type:"Number"},{name:"x3",description:"x-coordinate for the second point
\n",type:"Number"},{name:"y3",description:"y-coordinate for the second point
\n",type:"Number"},{name:"x4",description:"x-coordinate for the ending control point
\n",type:"Number"},{name:"y4",description:"y-coordinate for the ending control point
\n",type:"Number"}],chainable:1},{params:[{name:"x1",description:"",type:"Number"},{name:"y1",description:"",type:"Number"},{name:"z1",description:"z-coordinate for the beginning control point
\n",type:"Number"},{name:"x2",description:"",type:"Number"},{name:"y2",description:"",type:"Number"},{name:"z2",description:"z-coordinate for the first point
\n",type:"Number"},{name:"x3",description:"",type:"Number"},{name:"y3",description:"",type:"Number"},{name:"z3",description:"z-coordinate for the second point
\n",type:"Number"},{name:"x4",description:"",type:"Number"},{name:"y4",description:"",type:"Number"},{name:"z4",description:"z-coordinate for the ending control point
\n",type:"Number"}],chainable:1}]},curveDetail:{name:"curveDetail",params:[{name:"resolution",description:"resolution of the curves
\n",type:"Number"}],class:"p5",module:"Shape"},curveTightness:{name:"curveTightness",params:[{name:"amount",description:"amount of deformation from the original vertices
\n",type:"Number"}],class:"p5",module:"Shape"},curvePoint:{name:"curvePoint",params:[{name:"a",description:"coordinate of first control point of the curve
\n",type:"Number"},{name:"b",description:"coordinate of first point
\n",type:"Number"},{name:"c",description:"coordinate of second point
\n",type:"Number"},{name:"d",description:"coordinate of second control point
\n",type:"Number"},{name:"t",description:"value between 0 and 1
\n",type:"Number"}],class:"p5",module:"Shape"},curveTangent:{name:"curveTangent",params:[{name:"a",description:"coordinate of first control point
\n",type:"Number"},{name:"b",description:"coordinate of first point on the curve
\n",type:"Number"},{name:"c",description:"coordinate of second point on the curve
\n",type:"Number"},{name:"d",description:"coordinate of second conrol point
\n",type:"Number"},{name:"t",description:"value between 0 and 1
\n",type:"Number"}],class:"p5",module:"Shape"},beginContour:{name:"beginContour",class:"p5",module:"Shape"},beginShape:{name:"beginShape",params:[{name:"kind",description:"either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS
\n",type:"Constant",optional:!0}],class:"p5",module:"Shape"},bezierVertex:{name:"bezierVertex",class:"p5",module:"Shape",overloads:[{params:[{name:"x2",description:"x-coordinate for the first control point
\n",type:"Number"},{name:"y2",description:"y-coordinate for the first control point
\n",type:"Number"},{name:"x3",description:"x-coordinate for the second control point
\n",type:"Number"},{name:"y3",description:"y-coordinate for the second control point
\n",type:"Number"},{name:"x4",description:"x-coordinate for the anchor point
\n",type:"Number"},{name:"y4",description:"y-coordinate for the anchor point
\n",type:"Number"}],chainable:1},{params:[{name:"x2",description:"",type:"Number"},{name:"y2",description:"",type:"Number"},{name:"z2",description:"z-coordinate for the first control point (for WebGL mode)
\n",type:"Number"},{name:"x3",description:"",type:"Number"},{name:"y3",description:"",type:"Number"},{name:"z3",description:"z-coordinate for the second control point (for WebGL mode)
\n",type:"Number"},{name:"x4",description:"",type:"Number"},{name:"y4",description:"",type:"Number"},{name:"z4",description:"z-coordinate for the anchor point (for WebGL mode)
\n",type:"Number"}],chainable:1}]},curveVertex:{name:"curveVertex",class:"p5",module:"Shape",overloads:[{params:[{name:"x",description:"x-coordinate of the vertex
\n",type:"Number"},{name:"y",description:"y-coordinate of the vertex
\n",type:"Number"}],chainable:1},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"z-coordinate of the vertex (for WebGL mode)
\n",type:"Number",optional:!0}],chainable:1}]},endContour:{name:"endContour",class:"p5",module:"Shape"},endShape:{name:"endShape",params:[{name:"mode",description:"use CLOSE to close the shape
\n",type:"Constant",optional:!0}],class:"p5",module:"Shape"},quadraticVertex:{name:"quadraticVertex",class:"p5",module:"Shape",overloads:[{params:[{name:"cx",description:"x-coordinate for the control point
\n",type:"Number"},{name:"cy",description:"y-coordinate for the control point
\n",type:"Number"},{name:"x3",description:"x-coordinate for the anchor point
\n",type:"Number"},{name:"y3",description:"y-coordinate for the anchor point
\n",type:"Number"}],chainable:1},{params:[{name:"cx",description:"",type:"Number"},{name:"cy",description:"",type:"Number"},{name:"cz",description:"z-coordinate for the control point (for WebGL mode)
\n",type:"Number"},{name:"x3",description:"",type:"Number"},{name:"y3",description:"",type:"Number"},{name:"z3",description:"z-coordinate for the anchor point (for WebGL mode)
\n",type:"Number"}],chainable:1}]},vertex:{name:"vertex",class:"p5",module:"Shape",overloads:[{params:[{name:"x",description:"x-coordinate of the vertex
\n",type:"Number"},{name:"y",description:"y-coordinate of the vertex
\n",type:"Number"}],chainable:1},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"z-coordinate of the vertex
\n",type:"Number"},{name:"u",description:"the vertex's texture u-coordinate
\n",type:"Number",optional:!0},{name:"v",description:"the vertex's texture v-coordinate
\n",type:"Number",optional:!0}],chainable:1}]},P2D:{name:"P2D",class:"p5",module:"Constants"},WEBGL:{name:"WEBGL",class:"p5",module:"Constants"},ARROW:{name:"ARROW",class:"p5",module:"Constants"},CROSS:{name:"CROSS",class:"p5",module:"Constants"},HAND:{name:"HAND",class:"p5",module:"Constants"},MOVE:{name:"MOVE",class:"p5",module:"Constants"},TEXT:{name:"TEXT",class:"p5",module:"Constants"},WAIT:{name:"WAIT",class:"p5",module:"Constants"},HALF_PI:{name:"HALF_PI",class:"p5",module:"Constants"},PI:{name:"PI",class:"p5",module:"Constants"},QUARTER_PI:{name:"QUARTER_PI",class:"p5",module:"Constants"},TAU:{name:"TAU",class:"p5",module:"Constants"},TWO_PI:{name:"TWO_PI",class:"p5",module:"Constants"},DEGREES:{name:"DEGREES",class:"p5",module:"Constants"},RADIANS:{name:"RADIANS",class:"p5",module:"Constants"},CORNER:{name:"CORNER",class:"p5",module:"Constants"},CORNERS:{name:"CORNERS",class:"p5",module:"Constants"},RADIUS:{name:"RADIUS",class:"p5",module:"Constants"},RIGHT:{name:"RIGHT",class:"p5",module:"Constants"},LEFT:{name:"LEFT",class:"p5",module:"Constants"},CENTER:{name:"CENTER",class:"p5",module:"Constants"},TOP:{name:"TOP",class:"p5",module:"Constants"},BOTTOM:{name:"BOTTOM",class:"p5",module:"Constants"},BASELINE:{name:"BASELINE",class:"p5",module:"Constants"},POINTS:{name:"POINTS",class:"p5",module:"Constants"},LINES:{name:"LINES",class:"p5",module:"Constants"},LINE_STRIP:{name:"LINE_STRIP",class:"p5",module:"Constants"},LINE_LOOP:{name:"LINE_LOOP",class:"p5",module:"Constants"},TRIANGLES:{name:"TRIANGLES",class:"p5",module:"Constants"},TRIANGLE_FAN:{name:"TRIANGLE_FAN",class:"p5",module:"Constants"},TRIANGLE_STRIP:{name:"TRIANGLE_STRIP",class:"p5",module:"Constants"},QUADS:{name:"QUADS",class:"p5",module:"Constants"},QUAD_STRIP:{name:"QUAD_STRIP",class:"p5",module:"Constants"},TESS:{name:"TESS",class:"p5",module:"Constants"},CLOSE:{name:"CLOSE",class:"p5",module:"Constants"},OPEN:{name:"OPEN",class:"p5",module:"Constants"},CHORD:{name:"CHORD",class:"p5",module:"Constants"},PIE:{name:"PIE",class:"p5",module:"Constants"},PROJECT:{name:"PROJECT",class:"p5",module:"Constants"},SQUARE:{name:"SQUARE",class:"p5",module:"Constants"},ROUND:{name:"ROUND",class:"p5",module:"Constants"},BEVEL:{name:"BEVEL",class:"p5",module:"Constants"},MITER:{name:"MITER",class:"p5",module:"Constants"},RGB:{name:"RGB",class:"p5",module:"Constants"},HSB:{name:"HSB",class:"p5",module:"Constants"},HSL:{name:"HSL",class:"p5",module:"Constants"},AUTO:{name:"AUTO",class:"p5",module:"Constants"},ALT:{name:"ALT",class:"p5",module:"Constants"},BACKSPACE:{name:"BACKSPACE",class:"p5",module:"Constants"},CONTROL:{name:"CONTROL",class:"p5",module:"Constants"},DELETE:{name:"DELETE",class:"p5",module:"Constants"},DOWN_ARROW:{name:"DOWN_ARROW",class:"p5",module:"Constants"},ENTER:{name:"ENTER",class:"p5",module:"Constants"},ESCAPE:{name:"ESCAPE",class:"p5",module:"Constants"},LEFT_ARROW:{name:"LEFT_ARROW",class:"p5",module:"Constants"},OPTION:{name:"OPTION",class:"p5",module:"Constants"},RETURN:{name:"RETURN",class:"p5",module:"Constants"},RIGHT_ARROW:{name:"RIGHT_ARROW",class:"p5",module:"Constants"},SHIFT:{name:"SHIFT",class:"p5",module:"Constants"},TAB:{name:"TAB",class:"p5",module:"Constants"},UP_ARROW:{name:"UP_ARROW",class:"p5",module:"Constants"},BLEND:{name:"BLEND",class:"p5",module:"Constants"},REMOVE:{name:"REMOVE",class:"p5",module:"Constants"},ADD:{name:"ADD",class:"p5",module:"Constants"},DARKEST:{name:"DARKEST",class:"p5",module:"Constants"},LIGHTEST:{name:"LIGHTEST",class:"p5",module:"Constants"},DIFFERENCE:{name:"DIFFERENCE",class:"p5",module:"Constants"},SUBTRACT:{name:"SUBTRACT",class:"p5",module:"Constants"},EXCLUSION:{name:"EXCLUSION",class:"p5",module:"Constants"},MULTIPLY:{name:"MULTIPLY",class:"p5",module:"Constants"},SCREEN:{name:"SCREEN",class:"p5",module:"Constants"},REPLACE:{name:"REPLACE",class:"p5",module:"Constants"},OVERLAY:{name:"OVERLAY",class:"p5",module:"Constants"},HARD_LIGHT:{name:"HARD_LIGHT",class:"p5",module:"Constants"},SOFT_LIGHT:{name:"SOFT_LIGHT",class:"p5",module:"Constants"},DODGE:{name:"DODGE",class:"p5",module:"Constants"},BURN:{name:"BURN",class:"p5",module:"Constants"},THRESHOLD:{name:"THRESHOLD",class:"p5",module:"Constants"},GRAY:{name:"GRAY",class:"p5",module:"Constants"},OPAQUE:{name:"OPAQUE",class:"p5",module:"Constants"},INVERT:{name:"INVERT",class:"p5",module:"Constants"},POSTERIZE:{name:"POSTERIZE",class:"p5",module:"Constants"},DILATE:{name:"DILATE",class:"p5",module:"Constants"},ERODE:{name:"ERODE",class:"p5",module:"Constants"},BLUR:{name:"BLUR",class:"p5",module:"Constants"},NORMAL:{name:"NORMAL",class:"p5",module:"Constants"},ITALIC:{name:"ITALIC",class:"p5",module:"Constants"},BOLD:{name:"BOLD",class:"p5",module:"Constants"},BOLDITALIC:{name:"BOLDITALIC",class:"p5",module:"Constants"},LINEAR:{name:"LINEAR",class:"p5",module:"Constants"},QUADRATIC:{name:"QUADRATIC",class:"p5",module:"Constants"},BEZIER:{name:"BEZIER",class:"p5",module:"Constants"},CURVE:{name:"CURVE",class:"p5",module:"Constants"},STROKE:{name:"STROKE",class:"p5",module:"Constants"},FILL:{name:"FILL",class:"p5",module:"Constants"},TEXTURE:{name:"TEXTURE",class:"p5",module:"Constants"},IMMEDIATE:{name:"IMMEDIATE",class:"p5",module:"Constants"},IMAGE:{name:"IMAGE",class:"p5",module:"Constants"},NEAREST:{name:"NEAREST",class:"p5",module:"Constants"},REPEAT:{name:"REPEAT",class:"p5",module:"Constants"},CLAMP:{name:"CLAMP",class:"p5",module:"Constants"},MIRROR:{name:"MIRROR",class:"p5",module:"Constants"},LANDSCAPE:{name:"LANDSCAPE",class:"p5",module:"Constants"},PORTRAIT:{name:"PORTRAIT",class:"p5",module:"Constants"},GRID:{name:"GRID",class:"p5",module:"Constants"},AXES:{name:"AXES",class:"p5",module:"Constants"},print:{name:"print",params:[{name:"contents",description:"any combination of Number, String, Object, Boolean,\n Array to print
\n",type:"Any"}],class:"p5",module:"Environment"},frameCount:{name:"frameCount",class:"p5",module:"Environment"},deltaTime:{name:"deltaTime",class:"p5",module:"Environment"},focused:{name:"focused",class:"p5",module:"Environment"},cursor:{name:"cursor",params:[{name:"type",description:"Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n Native CSS properties: 'grab', 'progress', 'cell' etc.\n External: path for cursor's images\n (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n For more information on Native CSS cursors and url visit:\n https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
\n",type:"String|Constant"},{name:"x",description:"the horizontal active spot of the cursor (must be less than 32)
\n",type:"Number",optional:!0},{name:"y",description:"the vertical active spot of the cursor (must be less than 32)
\n",type:"Number",optional:!0}],class:"p5",module:"Environment"},frameRate:{name:"frameRate",class:"p5",module:"Environment",overloads:[{params:[{name:"fps",description:"number of frames to be displayed every second
\n",type:"Number"}],chainable:1},{params:[]}]},noCursor:{name:"noCursor",class:"p5",module:"Environment"},displayWidth:{name:"displayWidth",class:"p5",module:"Environment"},displayHeight:{name:"displayHeight",class:"p5",module:"Environment"},windowWidth:{name:"windowWidth",class:"p5",module:"Environment"},windowHeight:{name:"windowHeight",class:"p5",module:"Environment"},windowResized:{name:"windowResized",class:"p5",module:"Environment"},width:{name:"width",class:"p5",module:"Environment"},height:{name:"height",class:"p5",module:"Environment"},fullscreen:{name:"fullscreen",params:[{name:"val",description:"whether the sketch should be in fullscreen mode\nor not
\n",type:"Boolean",optional:!0}],class:"p5",module:"Environment"},pixelDensity:{name:"pixelDensity",class:"p5",module:"Environment",overloads:[{params:[{name:"val",description:"whether or how much the sketch should scale
\n",type:"Number"}],chainable:1},{params:[]}]},displayDensity:{name:"displayDensity",class:"p5",module:"Environment"},getURL:{name:"getURL",class:"p5",module:"Environment"},getURLPath:{name:"getURLPath",class:"p5",module:"Environment"},getURLParams:{name:"getURLParams",class:"p5",module:"Environment"},preload:{name:"preload",class:"p5",module:"Structure"},setup:{name:"setup",class:"p5",module:"Structure"},draw:{name:"draw",class:"p5",module:"Structure"},remove:{name:"remove",class:"p5",module:"Structure"},disableFriendlyErrors:{name:"disableFriendlyErrors",class:"p5",module:"Structure"},let:{name:"let",class:"p5",module:"Foundation"},const:{name:"const",class:"p5",module:"Foundation"},"===":{name:"===",class:"p5",module:"Foundation"},">":{name:">",class:"p5",module:"Foundation"},">=":{name:">=",class:"p5",module:"Foundation"},"<":{name:"<",class:"p5",module:"Foundation"},"<=":{name:"<=",class:"p5",module:"Foundation"},"if-else":{name:"if-else",class:"p5",module:"Foundation"},function:{name:"function",class:"p5",module:"Foundation"},return:{name:"return",class:"p5",module:"Foundation"},boolean:{name:"boolean",params:[{name:"n",description:"value to parse
\n",type:"String|Boolean|Number|Array"}],class:"p5",module:"Data"},string:{name:"string",class:"p5",module:"Foundation"},number:{name:"number",class:"p5",module:"Foundation"},object:{name:"object",class:"p5",module:"Foundation"},class:{name:"class",class:"p5",module:"Foundation"},for:{name:"for",class:"p5",module:"Foundation"},while:{name:"while",class:"p5",module:"Foundation"},createCanvas:{name:"createCanvas",params:[{name:"w",description:"width of the canvas
\n",type:"Number"},{name:"h",description:"height of the canvas
\n",type:"Number"},{name:"renderer",description:"either P2D or WEBGL
\n",type:"Constant",optional:!0}],class:"p5",module:"Rendering"},resizeCanvas:{name:"resizeCanvas",params:[{name:"w",description:"width of the canvas
\n",type:"Number"},{name:"h",description:"height of the canvas
\n",type:"Number"},{name:"noRedraw",description:"don't redraw the canvas immediately
\n",type:"Boolean",optional:!0}],class:"p5",module:"Rendering"},noCanvas:{name:"noCanvas",class:"p5",module:"Rendering"},createGraphics:{name:"createGraphics",params:[{name:"w",description:"width of the offscreen graphics buffer
\n",type:"Number"},{name:"h",description:"height of the offscreen graphics buffer
\n",type:"Number"},{name:"renderer",description:"either P2D or WEBGL\n undefined defaults to p2d
\n",type:"Constant",optional:!0}],class:"p5",module:"Rendering"},blendMode:{name:"blendMode",params:[{name:"mode",description:"blend mode to set for canvas.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
\n",type:"Constant"}],class:"p5",module:"Rendering"},drawingContext:{name:"drawingContext",class:"p5",module:"Rendering"},noLoop:{name:"noLoop",class:"p5",module:"Structure"},loop:{name:"loop",class:"p5",module:"Structure"},isLooping:{name:"isLooping",class:"p5",module:"Structure"},push:{name:"push",class:"p5",module:"Structure"},pop:{name:"pop",class:"p5",module:"Structure"},redraw:{name:"redraw",params:[{name:"n",description:"Redraw for n-times. The default value is 1.
\n",type:"Integer",optional:!0}],class:"p5",module:"Structure"},p5:{name:"p5",params:[{name:"sketch",description:"a function containing a p5.js sketch
\n",type:"Object"},{name:"node",description:"ID or pointer to HTML DOM node to contain sketch in
\n",type:"String|Object"}],class:"p5",module:"Structure"},applyMatrix:{name:"applyMatrix",params:[{name:"a",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"b",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"c",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"d",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"e",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"},{name:"f",description:"numbers which define the 2x3 matrix to be multiplied
\n",type:"Number"}],class:"p5",module:"Transform"},resetMatrix:{name:"resetMatrix",class:"p5",module:"Transform"},rotate:{name:"rotate",params:[{name:"angle",description:"the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n",type:"Number"},{name:"axis",description:"(in 3d) the axis to rotate around
\n",type:"p5.Vector|Number[]",optional:!0}],class:"p5",module:"Transform"},rotateX:{name:"rotateX",params:[{name:"angle",description:"the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n",type:"Number"}],class:"p5",module:"Transform"},rotateY:{name:"rotateY",params:[{name:"angle",description:"the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n",type:"Number"}],class:"p5",module:"Transform"},rotateZ:{name:"rotateZ",params:[{name:"angle",description:"the angle of rotation, specified in radians\n or degrees, depending on current angleMode
\n",type:"Number"}],class:"p5",module:"Transform"},scale:{name:"scale",class:"p5",module:"Transform",overloads:[{params:[{name:"s",description:"percent to scale the object, or percentage to\n scale the object in the x-axis if multiple arguments\n are given
\n",type:"Number|p5.Vector|Number[]"},{name:"y",description:"percent to scale the object in the y-axis
\n",type:"Number",optional:!0},{name:"z",description:"percent to scale the object in the z-axis (webgl only)
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"scales",description:"per-axis percents to scale the object
\n",type:"p5.Vector|Number[]"}],chainable:1}]},shearX:{name:"shearX",params:[{name:"angle",description:"angle of shear specified in radians or degrees,\n depending on current angleMode
\n",type:"Number"}],class:"p5",module:"Transform"},shearY:{name:"shearY",params:[{name:"angle",description:"angle of shear specified in radians or degrees,\n depending on current angleMode
\n",type:"Number"}],class:"p5",module:"Transform"},translate:{name:"translate",class:"p5",module:"Transform",overloads:[{params:[{name:"x",description:"left/right translation
\n",type:"Number"},{name:"y",description:"up/down translation
\n",type:"Number"},{name:"z",description:"forward/backward translation (webgl only)
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"vector",description:"the vector to translate by
\n",type:"p5.Vector"}],chainable:1}]},storeItem:{name:"storeItem",params:[{name:"key",description:"",type:"String"},{name:"value",description:"",type:"String|Number|Object|Boolean|p5.Color|p5.Vector"}],class:"p5",module:"Data"},getItem:{name:"getItem",params:[{name:"key",description:"name that you wish to use to store in local storage
\n",type:"String"}],class:"p5",module:"Data"},clearStorage:{name:"clearStorage",class:"p5",module:"Data"},removeItem:{name:"removeItem",params:[{name:"key",description:"",type:"String"}],class:"p5",module:"Data"},createStringDict:{name:"createStringDict",class:"p5",module:"Data",overloads:[{params:[{name:"key",description:"",type:"String"},{name:"value",description:"",type:"String"}]},{params:[{name:"object",description:"object
\n",type:"Object"}]}]},createNumberDict:{name:"createNumberDict",class:"p5",module:"Data",overloads:[{params:[{name:"key",description:"",type:"Number"},{name:"value",description:"",type:"Number"}]},{params:[{name:"object",description:"object
\n",type:"Object"}]}]},select:{name:"select",params:[{name:"selectors",description:"CSS selector string of element to search for
\n",type:"String"},{name:"container",description:'CSS selector string, p5.Element, or\n HTML element to search within
\n',type:"String|p5.Element|HTMLElement",optional:!0}],class:"p5",module:"DOM"},selectAll:{name:"selectAll",params:[{name:"selectors",description:"CSS selector string of elements to search for
\n",type:"String"},{name:"container",description:'CSS selector string, p5.Element\n , or HTML element to search within
\n',type:"String|p5.Element|HTMLElement",optional:!0}],class:"p5",module:"DOM"},removeElements:{name:"removeElements",class:"p5",module:"DOM"},changed:{name:"changed",params:[{name:"fxn",description:"function to be fired when the value of\n an element changes.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when any user input is\n detected within the element.\n if false is passed instead, the previously\n firing function will no longer fire.
inner HTML for element created
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},createP:{name:"createP",params:[{name:"html",description:"inner HTML for element created
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},createSpan:{name:"createSpan",params:[{name:"html",description:"inner HTML for element created
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},createImg:{name:"createImg",class:"p5",module:"DOM",overloads:[{params:[{name:"src",description:"src path or url for image
\n",type:"String"},{name:"alt",description:'alternate text to be used if image does not load. You can use also an empty string ("") if that an image is not intended to be viewed.
crossOrigin property of the img element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with canvas. if an empty string(\"\") is passed, CORS is not used
callback to be called once image data is loaded with the p5.Element as argument
\n',type:"Function",optional:!0}]}]},createA:{name:"createA",params:[{name:"href",description:"url of page to link to
\n",type:"String"},{name:"html",description:"inner html of link element to display
\n",type:"String"},{name:"target",description:"target where new link should open,\n could be _blank, _self, _parent, _top.
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},createSlider:{name:"createSlider",params:[{name:"min",description:"minimum value of the slider
\n",type:"Number"},{name:"max",description:"maximum value of the slider
\n",type:"Number"},{name:"value",description:"default value of the slider
\n",type:"Number",optional:!0},{name:"step",description:"step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)
\n",type:"Number",optional:!0}],class:"p5",module:"DOM"},createButton:{name:"createButton",params:[{name:"label",description:"label displayed on the button
\n",type:"String"},{name:"value",description:"value of the button
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},createCheckbox:{name:"createCheckbox",params:[{name:"label",description:"label displayed after checkbox
\n",type:"String",optional:!0},{name:"value",description:"value of the checkbox; checked is true, unchecked is false
\n",type:"Boolean",optional:!0}],class:"p5",module:"DOM"},createSelect:{name:"createSelect",class:"p5",module:"DOM",overloads:[{params:[{name:"multiple",description:"true if dropdown should support multiple selections
\n",type:"Boolean",optional:!0}]},{params:[{name:"existing",description:"DOM select element
\n",type:"Object"}]}]},createRadio:{name:"createRadio",class:"p5",module:"DOM",overloads:[{params:[{name:"containerElement",description:"An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.
\n",type:"Object"},{name:"name",description:"A name parameter for each Input Element.
\n",type:"String",optional:!0}]},{params:[{name:"name",description:"",type:"String"}]},{params:[]}]},createColorPicker:{name:"createColorPicker",params:[{name:"value",description:"default color of element
\n",type:"String|p5.Color",optional:!0}],class:"p5",module:"DOM"},createInput:{name:"createInput",class:"p5",module:"DOM",overloads:[{params:[{name:"value",description:"default value of the input box
\n",type:"String"},{name:"type",description:"type of text, ie text, password etc. Defaults to text.\n Needs a value to be specified first.
\n",type:"String",optional:!0}]},{params:[{name:"value",description:"",type:"String",optional:!0}]}]},createFileInput:{name:"createFileInput",params:[{name:"callback",description:"callback function for when a file is loaded
\n",type:"Function"},{name:"multiple",description:"optional, to allow multiple files to be selected
\n",type:"Boolean",optional:!0}],class:"p5",module:"DOM"},createVideo:{name:"createVideo",params:[{name:"src",description:"path to a video file, or array of paths for\n supporting different browsers
\n",type:"String|String[]"},{name:"callback",description:"callback function to be called upon\n 'canplaythrough' event fire, that is, when the\n browser can play the media, and estimates that\n enough data has been loaded to play the media\n up to its end without having to stop for\n further buffering of content
\n",type:"Function",optional:!0}],class:"p5",module:"DOM"},createAudio:{name:"createAudio",params:[{name:"src",description:"path to an audio file, or array of paths\n for supporting different browsers
\n",type:"String|String[]",optional:!0},{name:"callback",description:"callback function to be called upon\n 'canplaythrough' event fire, that is, when the\n browser can play the media, and estimates that\n enough data has been loaded to play the media\n up to its end without having to stop for\n further buffering of content
\n",type:"Function",optional:!0}],class:"p5",module:"DOM"},VIDEO:{name:"VIDEO",class:"p5",module:"DOM"},AUDIO:{name:"AUDIO",class:"p5",module:"DOM"},createCapture:{name:"createCapture",params:[{name:"type",description:"type of capture, either VIDEO or\n AUDIO if none specified, default both,\n or a Constraints object
\n",type:"String|Constant|Object"},{name:"callback",description:"function to be called once\n stream has loaded
\n",type:"Function",optional:!0}],class:"p5",module:"DOM"},createElement:{name:"createElement",params:[{name:"tag",description:"tag for the new element
\n",type:"String"},{name:"content",description:"html content to be inserted into the element
\n",type:"String",optional:!0}],class:"p5",module:"DOM"},deviceOrientation:{name:"deviceOrientation",class:"p5",module:"Events"},accelerationX:{name:"accelerationX",class:"p5",module:"Events"},accelerationY:{name:"accelerationY",class:"p5",module:"Events"},accelerationZ:{name:"accelerationZ",class:"p5",module:"Events"},pAccelerationX:{name:"pAccelerationX",class:"p5",module:"Events"},pAccelerationY:{name:"pAccelerationY",class:"p5",module:"Events"},pAccelerationZ:{name:"pAccelerationZ",class:"p5",module:"Events"},rotationX:{name:"rotationX",class:"p5",module:"Events"},rotationY:{name:"rotationY",class:"p5",module:"Events"},rotationZ:{name:"rotationZ",class:"p5",module:"Events"},pRotationX:{name:"pRotationX",class:"p5",module:"Events"},pRotationY:{name:"pRotationY",class:"p5",module:"Events"},pRotationZ:{name:"pRotationZ",class:"p5",module:"Events"},turnAxis:{name:"turnAxis",class:"p5",module:"Events"},setMoveThreshold:{name:"setMoveThreshold",params:[{name:"value",description:"The threshold value
\n",type:"Number"}],class:"p5",module:"Events"},setShakeThreshold:{name:"setShakeThreshold",params:[{name:"value",description:"The threshold value
\n",type:"Number"}],class:"p5",module:"Events"},deviceMoved:{name:"deviceMoved",class:"p5",module:"Events"},deviceTurned:{name:"deviceTurned",class:"p5",module:"Events"},deviceShaken:{name:"deviceShaken",class:"p5",module:"Events"},keyIsPressed:{name:"keyIsPressed",class:"p5",module:"Events"},key:{name:"key",class:"p5",module:"Events"},keyCode:{name:"keyCode",class:"p5",module:"Events"},keyPressed:{name:"keyPressed",class:"p5",module:"Events"},keyReleased:{name:"keyReleased",class:"p5",module:"Events"},keyTyped:{name:"keyTyped",class:"p5",module:"Events"},keyIsDown:{name:"keyIsDown",params:[{name:"code",description:"The key to check for.
\n",type:"Number"}],class:"p5",module:"Events"},movedX:{name:"movedX",class:"p5",module:"Events"},movedY:{name:"movedY",class:"p5",module:"Events"},mouseX:{name:"mouseX",class:"p5",module:"Events"},mouseY:{name:"mouseY",class:"p5",module:"Events"},pmouseX:{name:"pmouseX",class:"p5",module:"Events"},pmouseY:{name:"pmouseY",class:"p5",module:"Events"},winMouseX:{name:"winMouseX",class:"p5",module:"Events"},winMouseY:{name:"winMouseY",class:"p5",module:"Events"},pwinMouseX:{name:"pwinMouseX",class:"p5",module:"Events"},pwinMouseY:{name:"pwinMouseY",class:"p5",module:"Events"},mouseButton:{name:"mouseButton",class:"p5",module:"Events"},mouseIsPressed:{name:"mouseIsPressed",class:"p5",module:"Events"},mouseMoved:{name:"mouseMoved",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseDragged:{name:"mouseDragged",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mousePressed:{name:"mousePressed",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseReleased:{name:"mouseReleased",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseClicked:{name:"mouseClicked",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},doubleClicked:{name:"doubleClicked",params:[{name:"event",description:"optional MouseEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},mouseWheel:{name:"mouseWheel",params:[{name:"event",description:"optional WheelEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},requestPointerLock:{name:"requestPointerLock",class:"p5",module:"Events"},exitPointerLock:{name:"exitPointerLock",class:"p5",module:"Events"},touches:{name:"touches",class:"p5",module:"Events"},touchStarted:{name:"touchStarted",params:[{name:"event",description:"optional TouchEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},touchMoved:{name:"touchMoved",params:[{name:"event",description:"optional TouchEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},touchEnded:{name:"touchEnded",params:[{name:"event",description:"optional TouchEvent callback argument.
\n",type:"Object",optional:!0}],class:"p5",module:"Events"},createImage:{name:"createImage",params:[{name:"width",description:"width in pixels
\n",type:"Integer"},{name:"height",description:"height in pixels
\n",type:"Integer"}],class:"p5",module:"Image"},saveCanvas:{name:"saveCanvas",class:"p5",module:"Image",overloads:[{params:[{name:"selectedCanvas",description:"a variable\n representing a specific html5 canvas (optional)
\n",type:"p5.Element|HTMLCanvasElement"},{name:"filename",description:"",type:"String",optional:!0},{name:"extension",description:"'jpg' or 'png'
\n",type:"String",optional:!0}]},{params:[{name:"filename",description:"",type:"String",optional:!0},{name:"extension",description:"",type:"String",optional:!0}]}]},saveFrames:{name:"saveFrames",params:[{name:"filename",description:"",type:"String"},{name:"extension",description:"'jpg' or 'png'
\n",type:"String"},{name:"duration",description:"Duration in seconds to save the frames for.
\n",type:"Number"},{name:"framerate",description:"Framerate to save the frames in.
\n",type:"Number"},{name:"callback",description:"A callback function that will be executed\n to handle the image data. This function\n should accept an array as argument. The\n array will contain the specified number of\n frames of objects. Each object has three\n properties: imageData - an\n image/octet-stream, filename and extension.
\n",type:"Function(Array)",optional:!0}],class:"p5",module:"Image"},loadImage:{name:"loadImage",params:[{name:"path",description:"Path of the image to be loaded
\n",type:"String"},{name:"successCallback",description:'Function to be called once\n the image is loaded. Will be passed the\n p5.Image.
\n',type:"function(p5.Image)",optional:!0},{name:"failureCallback",description:"called with event error if\n the image fails to load.
\n",type:"Function(Event)",optional:!0}],class:"p5",module:"Image"},image:{name:"image",class:"p5",module:"Image",overloads:[{params:[{name:"img",description:"the image to display
\n",type:"p5.Image|p5.Element"},{name:"x",description:"the x-coordinate of the top-left corner of the image
\n",type:"Number"},{name:"y",description:"the y-coordinate of the top-left corner of the image
\n",type:"Number"},{name:"width",description:"the width to draw the image
\n",type:"Number",optional:!0},{name:"height",description:"the height to draw the image
\n",type:"Number",optional:!0}]},{params:[{name:"img",description:"",type:"p5.Image|p5.Element"},{name:"dx",description:"the x-coordinate of the destination\n rectangle in which to draw the source image
\n",type:"Number"},{name:"dy",description:"the y-coordinate of the destination\n rectangle in which to draw the source image
\n",type:"Number"},{name:"dWidth",description:"the width of the destination rectangle
\n",type:"Number"},{name:"dHeight",description:"the height of the destination rectangle
\n",type:"Number"},{name:"sx",description:"the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n",type:"Number"},{name:"sy",description:"the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle
\n",type:"Number"},{name:"sWidth",description:"the width of the subsection of the\n source image to draw into the destination\n rectangle
\n",type:"Number",optional:!0},{name:"sHeight",description:"the height of the subsection of the\n source image to draw into the destination rectangle
\n",type:"Number",optional:!0}]}]},tint:{name:"tint",class:"p5",module:"Image",overloads:[{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}]},{params:[{name:"value",description:"a color string
\n",type:"String"}]},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}]},{params:[{name:"values",description:"an array containing the red,green,blue &\n and alpha components of the color
\n",type:"Number[]"}]},{params:[{name:"color",description:"the tint color
\n",type:"p5.Color"}]}]},noTint:{name:"noTint",class:"p5",module:"Image"},imageMode:{name:"imageMode",params:[{name:"mode",description:"either CORNER, CORNERS, or CENTER
\n",type:"Constant"}],class:"p5",module:"Image"},pixels:{name:"pixels",class:"p5",module:"Image"},blend:{name:"blend",class:"p5",module:"Image",overloads:[{params:[{name:"srcImage",description:"source image
\n",type:"p5.Image"},{name:"sx",description:"X coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sy",description:"Y coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sw",description:"source image width
\n",type:"Integer"},{name:"sh",description:"source image height
\n",type:"Integer"},{name:"dx",description:"X coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dy",description:"Y coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dw",description:"destination image width
\n",type:"Integer"},{name:"dh",description:"destination image height
\n",type:"Integer"},{name:"blendMode",description:"the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\n",type:"Constant"}]},{params:[{name:"sx",description:"",type:"Integer"},{name:"sy",description:"",type:"Integer"},{name:"sw",description:"",type:"Integer"},{name:"sh",description:"",type:"Integer"},{name:"dx",description:"",type:"Integer"},{name:"dy",description:"",type:"Integer"},{name:"dw",description:"",type:"Integer"},{name:"dh",description:"",type:"Integer"},{name:"blendMode",description:"",type:"Constant"}]}]},copy:{name:"copy",class:"p5",module:"Image",overloads:[{params:[{name:"srcImage",description:"source image
\n",type:"p5.Image|p5.Element"},{name:"sx",description:"X coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sy",description:"Y coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sw",description:"source image width
\n",type:"Integer"},{name:"sh",description:"source image height
\n",type:"Integer"},{name:"dx",description:"X coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dy",description:"Y coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dw",description:"destination image width
\n",type:"Integer"},{name:"dh",description:"destination image height
\n",type:"Integer"}]},{params:[{name:"sx",description:"",type:"Integer"},{name:"sy",description:"",type:"Integer"},{name:"sw",description:"",type:"Integer"},{name:"sh",description:"",type:"Integer"},{name:"dx",description:"",type:"Integer"},{name:"dy",description:"",type:"Integer"},{name:"dw",description:"",type:"Integer"},{name:"dh",description:"",type:"Integer"}]}]},filter:{name:"filter",params:[{name:"filterType",description:"either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n",type:"Constant"},{name:"filterParam",description:"an optional parameter unique\n to each filter, see above
\n",type:"Number",optional:!0}],class:"p5",module:"Image"},get:{name:"get",class:"p5",module:"Image",overloads:[{params:[{name:"x",description:"x-coordinate of the pixel
\n",type:"Number"},{name:"y",description:"y-coordinate of the pixel
\n",type:"Number"},{name:"w",description:"width
\n",type:"Number"},{name:"h",description:"height
\n",type:"Number"}]},{params:[]},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"}]}]},loadPixels:{name:"loadPixels",class:"p5",module:"Image"},set:{name:"set",params:[{name:"x",description:"x-coordinate of the pixel
\n",type:"Number"},{name:"y",description:"y-coordinate of the pixel
\n",type:"Number"},{name:"c",description:'insert a grayscale value | a pixel array |\n a p5.Color object | a p5.Image to copy
\n',type:"Number|Number[]|Object"}],class:"p5",module:"Image"},updatePixels:{name:"updatePixels",params:[{name:"x",description:"x-coordinate of the upper-left corner of region\n to update
\n",type:"Number",optional:!0},{name:"y",description:"y-coordinate of the upper-left corner of region\n to update
\n",type:"Number",optional:!0},{name:"w",description:"width of region to update
\n",type:"Number",optional:!0},{name:"h",description:"height of region to update
\n",type:"Number",optional:!0}],class:"p5",module:"Image"},loadJSON:{name:"loadJSON",class:"p5",module:"IO",overloads:[{params:[{name:"path",description:"name of the file or url to load
\n",type:"String"},{name:"jsonpOptions",description:"options object for jsonp related settings
\n",type:"Object",optional:!0},{name:"datatype",description:'"json" or "jsonp"
\n',type:"String",optional:!0},{name:"callback",description:'function to be executed after\n loadJSON() completes, data is passed\n in as first argument
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"datatype",description:"",type:"String"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"callback",description:"",type:"Function"},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},loadStrings:{name:"loadStrings",params:[{name:"filename",description:"name of the file or url to load
\n",type:"String"},{name:"callback",description:'function to be executed after loadStrings()\n completes, Array is passed in as first\n argument
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}],class:"p5",module:"IO"},loadTable:{name:"loadTable",params:[{name:"filename",description:"name of the file or URL to load
\n",type:"String"},{name:"extension",description:'parse the table by comma-separated values "csv", semicolon-separated\n values "ssv", or tab-separated values "tsv"
\n',type:"String",optional:!0},{name:"header",description:'"header" to indicate table has header row
\n',type:"String",optional:!0},{name:"callback",description:'function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}],class:"p5",module:"IO"},loadXML:{name:"loadXML",params:[{name:"filename",description:"name of the file or URL to load
\n",type:"String"},{name:"callback",description:'function to be executed after loadXML()\n completes, XML object is passed in as\n first argument
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}],class:"p5",module:"IO"},loadBytes:{name:"loadBytes",params:[{name:"file",description:"name of the file or URL to load
\n",type:"String"},{name:"callback",description:'function to be executed after loadBytes()\n completes
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if there\n is an error
\n",type:"Function",optional:!0}],class:"p5",module:"IO"},httpGet:{name:"httpGet",class:"p5",module:"IO",overloads:[{params:[{name:"path",description:"name of the file or url to load
\n",type:"String"},{name:"datatype",description:'"json", "jsonp", "binary", "arrayBuffer",\n "xml", or "text"
\n',type:"String",optional:!0},{name:"data",description:"param data passed sent with request
\n",type:"Object|Boolean",optional:!0},{name:"callback",description:'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"data",description:"",type:"Object|Boolean"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"callback",description:"",type:"Function"},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},httpPost:{name:"httpPost",class:"p5",module:"IO",overloads:[{params:[{name:"path",description:"name of the file or url to load
\n",type:"String"},{name:"datatype",description:'"json", "jsonp", "xml", or "text".\n If omitted, httpPost() will guess.
\n',type:"String",optional:!0},{name:"data",description:"param data passed sent with request
\n",type:"Object|Boolean",optional:!0},{name:"callback",description:'function to be executed after\n httpPost() completes, data is passed in\n as first argument
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"data",description:"",type:"Object|Boolean"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"callback",description:"",type:"Function"},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},httpDo:{name:"httpDo",class:"p5",module:"IO",overloads:[{params:[{name:"path",description:"name of the file or url to load
\n",type:"String"},{name:"method",description:'either "GET", "POST", or "PUT",\n defaults to "GET"
\n',type:"String",optional:!0},{name:"datatype",description:'"json", "jsonp", "xml", or "text"
\n',type:"String",optional:!0},{name:"data",description:"param data passed sent with request
\n",type:"Object",optional:!0},{name:"callback",description:'function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n',type:"Function",optional:!0},{name:"errorCallback",description:"function to be executed if\n there is an error, response is passed\n in as first argument
\n",type:"Function",optional:!0}]},{params:[{name:"path",description:"",type:"String"},{name:"options",description:'Request object options as documented in the\n "fetch" API\nreference
\n',type:"Object"},{name:"callback",description:"",type:"Function",optional:!0},{name:"errorCallback",description:"",type:"Function",optional:!0}]}]},createWriter:{name:"createWriter",params:[{name:"name",description:"name of the file to be created
\n",type:"String"},{name:"extension",description:"",type:"String",optional:!0}],class:"p5",module:"IO"},save:{name:"save",params:[{name:"objectOrFilename",description:"If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).
\n",type:"Object|String",optional:!0},{name:"filename",description:"If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).
\n",type:"String",optional:!0},{name:"options",description:"Additional options depend on\n filetype. For example, when saving JSON,\n true indicates that the\n output will be optimized for filesize,\n rather than readability.
If true, removes line breaks\n and spaces from the output\n file to optimize filesize\n (but not readability).
\n",type:"Boolean",optional:!0}],class:"p5",module:"IO"},saveStrings:{name:"saveStrings",params:[{name:"list",description:"string array to be written
\n",type:"String[]"},{name:"filename",description:"filename for output
\n",type:"String"},{name:"extension",description:"the filename's extension
\n",type:"String",optional:!0},{name:"isCRLF",description:"if true, change line-break to CRLF
\n",type:"Boolean",optional:!0}],class:"p5",module:"IO"},saveTable:{name:"saveTable",params:[{name:"Table",description:'the Table object to save to a file
\n',type:"p5.Table"},{name:"filename",description:"the filename to which the Table should be saved
\n",type:"String"},{name:"options",description:'can be one of "tsv", "csv", or "html"
\n',type:"String",optional:!0}],class:"p5",module:"IO"},abs:{name:"abs",params:[{name:"n",description:"number to compute
\n",type:"Number"}],class:"p5",module:"Math"},ceil:{name:"ceil",params:[{name:"n",description:"number to round up
\n",type:"Number"}],class:"p5",module:"Math"},constrain:{name:"constrain",params:[{name:"n",description:"number to constrain
\n",type:"Number"},{name:"low",description:"minimum limit
\n",type:"Number"},{name:"high",description:"maximum limit
\n",type:"Number"}],class:"p5",module:"Math"},dist:{name:"dist",class:"p5",module:"Math",overloads:[{params:[{name:"x1",description:"x-coordinate of the first point
\n",type:"Number"},{name:"y1",description:"y-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"x-coordinate of the second point
\n",type:"Number"},{name:"y2",description:"y-coordinate of the second point
\n",type:"Number"}]},{params:[{name:"x1",description:"",type:"Number"},{name:"y1",description:"",type:"Number"},{name:"z1",description:"z-coordinate of the first point
\n",type:"Number"},{name:"x2",description:"",type:"Number"},{name:"y2",description:"",type:"Number"},{name:"z2",description:"z-coordinate of the second point
\n",type:"Number"}]}]},exp:{name:"exp",params:[{name:"n",description:"exponent to raise
\n",type:"Number"}],class:"p5",module:"Math"},floor:{name:"floor",params:[{name:"n",description:"number to round down
\n",type:"Number"}],class:"p5",module:"Math"},lerp:{name:"lerp",params:[{name:"start",description:"first value
\n",type:"Number"},{name:"stop",description:"second value
\n",type:"Number"},{name:"amt",description:"number
\n",type:"Number"}],class:"p5",module:"Math"},log:{name:"log",params:[{name:"n",description:"number greater than 0
\n",type:"Number"}],class:"p5",module:"Math"},mag:{name:"mag",params:[{name:"a",description:"first value
\n",type:"Number"},{name:"b",description:"second value
\n",type:"Number"}],class:"p5",module:"Math"},map:{name:"map",params:[{name:"value",description:"the incoming value to be converted
\n",type:"Number"},{name:"start1",description:"lower bound of the value's current range
\n",type:"Number"},{name:"stop1",description:"upper bound of the value's current range
\n",type:"Number"},{name:"start2",description:"lower bound of the value's target range
\n",type:"Number"},{name:"stop2",description:"upper bound of the value's target range
\n",type:"Number"},{name:"withinBounds",description:"constrain the value to the newly mapped range
\n",type:"Boolean",optional:!0}],class:"p5",module:"Math"},max:{name:"max",class:"p5",module:"Math",overloads:[{params:[{name:"n0",description:"Number to compare
\n",type:"Number"},{name:"n1",description:"Number to compare
\n",type:"Number"}]},{params:[{name:"nums",description:"Numbers to compare
\n",type:"Number[]"}]}]},min:{name:"min",class:"p5",module:"Math",overloads:[{params:[{name:"n0",description:"Number to compare
\n",type:"Number"},{name:"n1",description:"Number to compare
\n",type:"Number"}]},{params:[{name:"nums",description:"Numbers to compare
\n",type:"Number[]"}]}]},norm:{name:"norm",params:[{name:"value",description:"incoming value to be normalized
\n",type:"Number"},{name:"start",description:"lower bound of the value's current range
\n",type:"Number"},{name:"stop",description:"upper bound of the value's current range
\n",type:"Number"}],class:"p5",module:"Math"},pow:{name:"pow",params:[{name:"n",description:"base of the exponential expression
\n",type:"Number"},{name:"e",description:"power by which to raise the base
\n",type:"Number"}],class:"p5",module:"Math"},round:{name:"round",params:[{name:"n",description:"number to round
\n",type:"Number"},{name:"decimals",description:"number of decimal places to round to, default is 0
\n",type:"Number",optional:!0}],class:"p5",module:"Math"},sq:{name:"sq",params:[{name:"n",description:"number to square
\n",type:"Number"}],class:"p5",module:"Math"},sqrt:{name:"sqrt",params:[{name:"n",description:"non-negative number to square root
\n",type:"Number"}],class:"p5",module:"Math"},fract:{name:"fract",params:[{name:"num",description:"Number whose fractional part needs to be found out
\n",type:"Number"}],class:"p5",module:"Math"},createVector:{name:"createVector",params:[{name:"x",description:"x component of the vector
\n",type:"Number",optional:!0},{name:"y",description:"y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"z component of the vector
\n",type:"Number",optional:!0}],class:"p5",module:"Math"},noise:{name:"noise",params:[{name:"x",description:"x-coordinate in noise space
\n",type:"Number"},{name:"y",description:"y-coordinate in noise space
\n",type:"Number",optional:!0},{name:"z",description:"z-coordinate in noise space
\n",type:"Number",optional:!0}],class:"p5",module:"Math"},noiseDetail:{name:"noiseDetail",params:[{name:"lod",description:"number of octaves to be used by the noise
\n",type:"Number"},{name:"falloff",description:"falloff factor for each octave
\n",type:"Number"}],class:"p5",module:"Math"},noiseSeed:{name:"noiseSeed",params:[{name:"seed",description:"the seed value
\n",type:"Number"}],class:"p5",module:"Math"},randomSeed:{name:"randomSeed",params:[{name:"seed",description:"the seed value
\n",type:"Number"}],class:"p5",module:"Math"},random:{name:"random",class:"p5",module:"Math",overloads:[{params:[{name:"min",description:"the lower bound (inclusive)
\n",type:"Number",optional:!0},{name:"max",description:"the upper bound (exclusive)
\n",type:"Number",optional:!0}]},{params:[{name:"choices",description:"the array to choose from
\n",type:"Array"}]}]},randomGaussian:{name:"randomGaussian",params:[{name:"mean",description:"the mean
\n",type:"Number"},{name:"sd",description:"the standard deviation
\n",type:"Number"}],class:"p5",module:"Math"},acos:{name:"acos",params:[{name:"value",description:"the value whose arc cosine is to be returned
\n",type:"Number"}],class:"p5",module:"Math"},asin:{name:"asin",params:[{name:"value",description:"the value whose arc sine is to be returned
\n",type:"Number"}],class:"p5",module:"Math"},atan:{name:"atan",params:[{name:"value",description:"the value whose arc tangent is to be returned
\n",type:"Number"}],class:"p5",module:"Math"},atan2:{name:"atan2",params:[{name:"y",description:"y-coordinate of the point
\n",type:"Number"},{name:"x",description:"x-coordinate of the point
\n",type:"Number"}],class:"p5",module:"Math"},cos:{name:"cos",params:[{name:"angle",description:"the angle
\n",type:"Number"}],class:"p5",module:"Math"},sin:{name:"sin",params:[{name:"angle",description:"the angle
\n",type:"Number"}],class:"p5",module:"Math"},tan:{name:"tan",params:[{name:"angle",description:"the angle
\n",type:"Number"}],class:"p5",module:"Math"},degrees:{name:"degrees",params:[{name:"radians",description:"the radians value to convert to degrees
\n",type:"Number"}],class:"p5",module:"Math"},radians:{name:"radians",params:[{name:"degrees",description:"the degree value to convert to radians
\n",type:"Number"}],class:"p5",module:"Math"},angleMode:{name:"angleMode",params:[{name:"mode",description:"either RADIANS or DEGREES
\n",type:"Constant"}],class:"p5",module:"Math"},textAlign:{name:"textAlign",class:"p5",module:"Typography",overloads:[{params:[{name:"horizAlign",description:"horizontal alignment, either LEFT,\n CENTER, or RIGHT
\n",type:"Constant"},{name:"vertAlign",description:"vertical alignment, either TOP,\n BOTTOM, CENTER, or BASELINE
\n",type:"Constant",optional:!0}],chainable:1},{params:[]}]},textLeading:{name:"textLeading",class:"p5",module:"Typography",overloads:[{params:[{name:"leading",description:"the size in pixels for spacing between lines
\n",type:"Number"}],chainable:1},{params:[]}]},textSize:{name:"textSize",class:"p5",module:"Typography",overloads:[{params:[{name:"theSize",description:"the size of the letters in units of pixels
\n",type:"Number"}],chainable:1},{params:[]}]},textStyle:{name:"textStyle",class:"p5",module:"Typography",overloads:[{params:[{name:"theStyle",description:"styling for text, either NORMAL,\n ITALIC, BOLD or BOLDITALIC
\n",type:"Constant"}],chainable:1},{params:[]}]},textWidth:{name:"textWidth",params:[{name:"theText",description:"the String of characters to measure
\n",type:"String"}],class:"p5",module:"Typography"},textAscent:{name:"textAscent",class:"p5",module:"Typography"},textDescent:{name:"textDescent",class:"p5",module:"Typography"},loadFont:{name:"loadFont",params:[{name:"path",description:"name of the file or url to load
\n",type:"String"},{name:"callback",description:'function to be executed after\n loadFont() completes
\n',type:"Function",optional:!0},{name:"onError",description:"function to be executed if\n an error occurs
\n",type:"Function",optional:!0}],class:"p5",module:"Typography"},text:{name:"text",params:[{name:"str",description:"the alphanumeric\n symbols to be displayed
\n",type:"String|Object|Array|Number|Boolean"},{name:"x",description:"x-coordinate of text
\n",type:"Number"},{name:"y",description:"y-coordinate of text
\n",type:"Number"},{name:"x2",description:'by default, the width of the text box,\n see rectMode() for more info
\n',type:"Number",optional:!0},{name:"y2",description:'by default, the height of the text box,\n see rectMode() for more info
\n',type:"Number",optional:!0}],class:"p5",module:"Typography"},textFont:{name:"textFont",class:"p5",module:"Typography",overloads:[{params:[]},{params:[{name:"font",description:'a font loaded via loadFont(),\nor a String representing a web safe font\n(a font that is generally available across all systems)
\n',type:"Object|String"},{name:"size",description:"the font size to use
\n",type:"Number",optional:!0}],chainable:1}]},append:{name:"append",params:[{name:"array",description:"Array to append
\n",type:"Array"},{name:"value",description:"to be added to the Array
\n",type:"Any"}],class:"p5",module:"Data"},arrayCopy:{name:"arrayCopy",class:"p5",module:"Data",overloads:[{params:[{name:"src",description:"the source Array
\n",type:"Array"},{name:"srcPosition",description:"starting position in the source Array
\n",type:"Integer"},{name:"dst",description:"the destination Array
\n",type:"Array"},{name:"dstPosition",description:"starting position in the destination Array
\n",type:"Integer"},{name:"length",description:"number of Array elements to be copied
\n",type:"Integer"}]},{params:[{name:"src",description:"",type:"Array"},{name:"dst",description:"",type:"Array"},{name:"length",description:"",type:"Integer",optional:!0}]}]},concat:{name:"concat",params:[{name:"a",description:"first Array to concatenate
\n",type:"Array"},{name:"b",description:"second Array to concatenate
\n",type:"Array"}],class:"p5",module:"Data"},reverse:{name:"reverse",params:[{name:"list",description:"Array to reverse
\n",type:"Array"}],class:"p5",module:"Data"},shorten:{name:"shorten",params:[{name:"list",description:"Array to shorten
\n",type:"Array"}],class:"p5",module:"Data"},shuffle:{name:"shuffle",params:[{name:"array",description:"Array to shuffle
\n",type:"Array"},{name:"bool",description:"modify passed array
\n",type:"Boolean",optional:!0}],class:"p5",module:"Data"},sort:{name:"sort",params:[{name:"list",description:"Array to sort
\n",type:"Array"},{name:"count",description:"number of elements to sort, starting from 0
\n",type:"Integer",optional:!0}],class:"p5",module:"Data"},splice:{name:"splice",params:[{name:"list",description:"Array to splice into
\n",type:"Array"},{name:"value",description:"value to be spliced in
\n",type:"Any"},{name:"position",description:"in the array from which to insert data
\n",type:"Integer"}],class:"p5",module:"Data"},subset:{name:"subset",params:[{name:"list",description:"Array to extract from
\n",type:"Array"},{name:"start",description:"position to begin
\n",type:"Integer"},{name:"count",description:"number of values to extract
\n",type:"Integer",optional:!0}],class:"p5",module:"Data"},float:{name:"float",params:[{name:"str",description:"float string to parse
\n",type:"String"}],class:"p5",module:"Data"},int:{name:"int",class:"p5",module:"Data",overloads:[{params:[{name:"n",description:"value to parse
\n",type:"String|Boolean|Number"},{name:"radix",description:"the radix to convert to (default: 10)
\n",type:"Integer",optional:!0}]},{params:[{name:"ns",description:"values to parse
\n",type:"Array"}]}]},str:{name:"str",params:[{name:"n",description:"value to parse
\n",type:"String|Boolean|Number|Array"}],class:"p5",module:"Data"},byte:{name:"byte",class:"p5",module:"Data",overloads:[{params:[{name:"n",description:"value to parse
\n",type:"String|Boolean|Number"}]},{params:[{name:"ns",description:"values to parse
\n",type:"Array"}]}]},char:{name:"char",class:"p5",module:"Data",overloads:[{params:[{name:"n",description:"value to parse
\n",type:"String|Number"}]},{params:[{name:"ns",description:"values to parse
\n",type:"Array"}]}]},unchar:{name:"unchar",class:"p5",module:"Data",overloads:[{params:[{name:"n",description:"value to parse
\n",type:"String"}]},{params:[{name:"ns",description:"values to parse
\n",type:"Array"}]}]},hex:{name:"hex",class:"p5",module:"Data",overloads:[{params:[{name:"n",description:"value to parse
\n",type:"Number"},{name:"digits",description:"",type:"Number",optional:!0}]},{params:[{name:"ns",description:"array of values to parse
\n",type:"Number[]"},{name:"digits",description:"",type:"Number",optional:!0}]}]},unhex:{name:"unhex",class:"p5",module:"Data",overloads:[{params:[{name:"n",description:"value to parse
\n",type:"String"}]},{params:[{name:"ns",description:"values to parse
\n",type:"Array"}]}]},join:{name:"join",params:[{name:"list",description:"array of Strings to be joined
\n",type:"Array"},{name:"separator",description:"String to be placed between each item
\n",type:"String"}],class:"p5",module:"Data"},match:{name:"match",params:[{name:"str",description:"the String to be searched
\n",type:"String"},{name:"regexp",description:"the regexp to be used for matching
\n",type:"String"}],class:"p5",module:"Data"},matchAll:{name:"matchAll",params:[{name:"str",description:"the String to be searched
\n",type:"String"},{name:"regexp",description:"the regexp to be used for matching
\n",type:"String"}],class:"p5",module:"Data"},nf:{name:"nf",class:"p5",module:"Data",overloads:[{params:[{name:"num",description:"the Number to format
\n",type:"Number|String"},{name:"left",description:"number of digits to the left of the\n decimal point
\n",type:"Integer|String",optional:!0},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer|String",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Array"},{name:"left",description:"",type:"Integer|String",optional:!0},{name:"right",description:"",type:"Integer|String",optional:!0}]}]},nfc:{name:"nfc",class:"p5",module:"Data",overloads:[{params:[{name:"num",description:"the Number to format
\n",type:"Number|String"},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer|String",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Array"},{name:"right",description:"",type:"Integer|String",optional:!0}]}]},nfp:{name:"nfp",class:"p5",module:"Data",overloads:[{params:[{name:"num",description:"the Number to format
\n",type:"Number"},{name:"left",description:"number of digits to the left of the decimal\n point
\n",type:"Integer",optional:!0},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Number[]"},{name:"left",description:"",type:"Integer",optional:!0},{name:"right",description:"",type:"Integer",optional:!0}]}]},nfs:{name:"nfs",class:"p5",module:"Data",overloads:[{params:[{name:"num",description:"the Number to format
\n",type:"Number"},{name:"left",description:"number of digits to the left of the decimal\n point
\n",type:"Integer",optional:!0},{name:"right",description:"number of digits to the right of the\n decimal point
\n",type:"Integer",optional:!0}]},{params:[{name:"nums",description:"the Numbers to format
\n",type:"Array"},{name:"left",description:"",type:"Integer",optional:!0},{name:"right",description:"",type:"Integer",optional:!0}]}]},split:{name:"split",params:[{name:"value",description:"the String to be split
\n",type:"String"},{name:"delim",description:"the String used to separate the data
\n",type:"String"}],class:"p5",module:"Data"},splitTokens:{name:"splitTokens",params:[{name:"value",description:"the String to be split
\n",type:"String"},{name:"delim",description:"list of individual Strings that will be used as\n separators
\n",type:"String",optional:!0}],class:"p5",module:"Data"},trim:{name:"trim",class:"p5",module:"Data",overloads:[{params:[{name:"str",description:"a String to be trimmed
\n",type:"String"}]},{params:[{name:"strs",description:"an Array of Strings to be trimmed
\n",type:"Array"}]}]},day:{name:"day",class:"p5",module:"IO"},hour:{name:"hour",class:"p5",module:"IO"},minute:{name:"minute",class:"p5",module:"IO"},millis:{name:"millis",class:"p5",module:"IO"},month:{name:"month",class:"p5",module:"IO"},second:{name:"second",class:"p5",module:"IO"},year:{name:"year",class:"p5",module:"IO"},plane:{name:"plane",params:[{name:"width",description:"width of the plane
\n",type:"Number",optional:!0},{name:"height",description:"height of the plane
\n",type:"Number",optional:!0},{name:"detailX",description:"Optional number of triangle\n subdivisions in x-dimension
\n",type:"Integer",optional:!0},{name:"detailY",description:"Optional number of triangle\n subdivisions in y-dimension
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},box:{name:"box",params:[{name:"width",description:"width of the box
\n",type:"Number",optional:!0},{name:"Height",description:"height of the box
\n",type:"Number",optional:!0},{name:"depth",description:"depth of the box
\n",type:"Number",optional:!0},{name:"detailX",description:"Optional number of triangle\n subdivisions in x-dimension
\n",type:"Integer",optional:!0},{name:"detailY",description:"Optional number of triangle\n subdivisions in y-dimension
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},sphere:{name:"sphere",params:[{name:"radius",description:"radius of circle
\n",type:"Number",optional:!0},{name:"detailX",description:"optional number of subdivisions in x-dimension
\n",type:"Integer",optional:!0},{name:"detailY",description:"optional number of subdivisions in y-dimension
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},cylinder:{name:"cylinder",params:[{name:"radius",description:"radius of the surface
\n",type:"Number",optional:!0},{name:"height",description:"height of the cylinder
\n",type:"Number",optional:!0},{name:"detailX",description:"number of subdivisions in x-dimension;\n default is 24
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of subdivisions in y-dimension;\n default is 1
\n",type:"Integer",optional:!0},{name:"bottomCap",description:"whether to draw the bottom of the cylinder
\n",type:"Boolean",optional:!0},{name:"topCap",description:"whether to draw the top of the cylinder
\n",type:"Boolean",optional:!0}],class:"p5",module:"Shape"},cone:{name:"cone",params:[{name:"radius",description:"radius of the bottom surface
\n",type:"Number",optional:!0},{name:"height",description:"height of the cone
\n",type:"Number",optional:!0},{name:"detailX",description:"number of segments,\n the more segments the smoother geometry\n default is 24
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of segments,\n the more segments the smoother geometry\n default is 1
\n",type:"Integer",optional:!0},{name:"cap",description:"whether to draw the base of the cone
\n",type:"Boolean",optional:!0}],class:"p5",module:"Shape"},ellipsoid:{name:"ellipsoid",params:[{name:"radiusx",description:"x-radius of ellipsoid
\n",type:"Number",optional:!0},{name:"radiusy",description:"y-radius of ellipsoid
\n",type:"Number",optional:!0},{name:"radiusz",description:"z-radius of ellipsoid
\n",type:"Number",optional:!0},{name:"detailX",description:"number of segments,\n the more segments the smoother geometry\n default is 24. Avoid detail number above\n 150, it may crash the browser.
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of segments,\n the more segments the smoother geometry\n default is 16. Avoid detail number above\n 150, it may crash the browser.
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},torus:{name:"torus",params:[{name:"radius",description:"radius of the whole ring
\n",type:"Number",optional:!0},{name:"tubeRadius",description:"radius of the tube
\n",type:"Number",optional:!0},{name:"detailX",description:"number of segments in x-dimension,\n the more segments the smoother geometry\n default is 24
\n",type:"Integer",optional:!0},{name:"detailY",description:"number of segments in y-dimension,\n the more segments the smoother geometry\n default is 16
\n",type:"Integer",optional:!0}],class:"p5",module:"Shape"},orbitControl:{name:"orbitControl",params:[{name:"sensitivityX",description:"sensitivity to mouse movement along X axis
\n",type:"Number",optional:!0},{name:"sensitivityY",description:"sensitivity to mouse movement along Y axis
\n",type:"Number",optional:!0},{name:"sensitivityZ",description:"sensitivity to scroll movement along Z axis
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},debugMode:{name:"debugMode",class:"p5",module:"Lights, Camera",overloads:[{params:[]},{params:[{name:"mode",description:"either GRID or AXES
\n",type:"Constant"}]},{params:[{name:"mode",description:"",type:"Constant"},{name:"gridSize",description:"size of one side of the grid
\n",type:"Number",optional:!0},{name:"gridDivisions",description:"number of divisions in the grid
\n",type:"Number",optional:!0},{name:"xOff",description:"X axis offset from origin (0,0,0)
\n",type:"Number",optional:!0},{name:"yOff",description:"Y axis offset from origin (0,0,0)
\n",type:"Number",optional:!0},{name:"zOff",description:"Z axis offset from origin (0,0,0)
\n",type:"Number",optional:!0}]},{params:[{name:"mode",description:"",type:"Constant"},{name:"axesSize",description:"size of axes icon
\n",type:"Number",optional:!0},{name:"xOff",description:"",type:"Number",optional:!0},{name:"yOff",description:"",type:"Number",optional:!0},{name:"zOff",description:"",type:"Number",optional:!0}]},{params:[{name:"gridSize",description:"",type:"Number",optional:!0},{name:"gridDivisions",description:"",type:"Number",optional:!0},{name:"gridXOff",description:"",type:"Number",optional:!0},{name:"gridYOff",description:"",type:"Number",optional:!0},{name:"gridZOff",description:"",type:"Number",optional:!0},{name:"axesSize",description:"",type:"Number",optional:!0},{name:"axesXOff",description:"",type:"Number",optional:!0},{name:"axesYOff",description:"",type:"Number",optional:!0},{name:"axesZOff",description:"",type:"Number",optional:!0}]}]},noDebugMode:{name:"noDebugMode",class:"p5",module:"Lights, Camera"},ambientLight:{name:"ambientLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"},{name:"alpha",description:"the alpha value
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"values",description:"an array containing the red,green,blue &\n and alpha components of the color
\n",type:"Number[]"}],chainable:1},{params:[{name:"color",description:"the ambient light color
\n",type:"p5.Color"}],chainable:1}]},specularColor:{name:"specularColor",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"}],chainable:1},{params:[{name:"value",description:"a color string
\n",type:"String"}],chainable:1},{params:[{name:"gray",description:"a gray value
\n",type:"Number"}],chainable:1},{params:[{name:"values",description:"an array containing the red,green,blue &\n and alpha components of the color
\n",type:"Number[]"}],chainable:1},{params:[{name:"color",description:"the ambient light color
\n",type:"p5.Color"}],chainable:1}]},directionalLight:{name:"directionalLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value (depending on the current\ncolor mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number"},{name:"v3",description:"blue or brightness value
\n",type:"Number"},{name:"position",description:"the direction of the light
\n",type:"p5.Vector"}],chainable:1},{params:[{name:"color",description:'color Array, CSS color string,\n or p5.Color value
\n',type:"Number[]|String|p5.Color"},{name:"x",description:"x axis direction
\n",type:"Number"},{name:"y",description:"y axis direction
\n",type:"Number"},{name:"z",description:"z axis direction
\n",type:"Number"}],chainable:1},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"position",description:"",type:"p5.Vector"}],chainable:1},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"}],chainable:1}]},pointLight:{name:"pointLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value (depending on the current\ncolor mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number"},{name:"v3",description:"blue or brightness value
\n",type:"Number"},{name:"x",description:"x axis position
\n",type:"Number"},{name:"y",description:"y axis position
\n",type:"Number"},{name:"z",description:"z axis position
\n",type:"Number"}],chainable:1},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"position",description:"the position of the light
\n",type:"p5.Vector"}],chainable:1},{params:[{name:"color",description:'color Array, CSS color string,\nor p5.Color value
\n',type:"Number[]|String|p5.Color"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"}],chainable:1},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"position",description:"",type:"p5.Vector"}],chainable:1}]},lights:{name:"lights",class:"p5",module:"Lights, Camera"},lightFalloff:{name:"lightFalloff",params:[{name:"constant",description:"constant value for determining falloff
\n",type:"Number"},{name:"linear",description:"linear value for determining falloff
\n",type:"Number"},{name:"quadratic",description:"quadratic value for determining falloff
\n",type:"Number"}],class:"p5",module:"Lights, Camera"},spotLight:{name:"spotLight",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"red or hue value (depending on the current\ncolor mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number"},{name:"v3",description:"blue or brightness value
\n",type:"Number"},{name:"x",description:"x axis position
\n",type:"Number"},{name:"y",description:"y axis position
\n",type:"Number"},{name:"z",description:"z axis position
\n",type:"Number"},{name:"rx",description:"x axis direction of light
\n",type:"Number"},{name:"ry",description:"y axis direction of light
\n",type:"Number"},{name:"rz",description:"z axis direction of light
\n",type:"Number"},{name:"angle",description:"optional parameter for angle. Defaults to PI/3
\n",type:"Number",optional:!0},{name:"conc",description:"optional parameter for concentration. Defaults to 100
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:'color Array, CSS color string,\nor p5.Color value
\n',type:"Number[]|String|p5.Color"},{name:"position",description:"the position of the light
\n",type:"p5.Vector"},{name:"direction",description:"the direction of the light
\n",type:"p5.Vector"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"position",description:"",type:"p5.Vector"},{name:"direction",description:"",type:"p5.Vector"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"},{name:"direction",description:"",type:"p5.Vector"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"position",description:"",type:"p5.Vector"},{name:"rx",description:"",type:"Number"},{name:"ry",description:"",type:"Number"},{name:"rz",description:"",type:"Number"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"},{name:"direction",description:"",type:"p5.Vector"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"v1",description:"",type:"Number"},{name:"v2",description:"",type:"Number"},{name:"v3",description:"",type:"Number"},{name:"position",description:"",type:"p5.Vector"},{name:"rx",description:"",type:"Number"},{name:"ry",description:"",type:"Number"},{name:"rz",description:"",type:"Number"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]},{params:[{name:"color",description:"",type:"Number[]|String|p5.Color"},{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number"},{name:"rx",description:"",type:"Number"},{name:"ry",description:"",type:"Number"},{name:"rz",description:"",type:"Number"},{name:"angle",description:"",type:"Number",optional:!0},{name:"conc",description:"",type:"Number",optional:!0}]}]},noLights:{name:"noLights",class:"p5",module:"Lights, Camera"},loadModel:{name:"loadModel",class:"p5",module:"Shape",overloads:[{params:[{name:"path",description:"Path of the model to be loaded
\n",type:"String"},{name:"normalize",description:"If true, scale the model to a\n standardized size when loading
\n",type:"Boolean"},{name:"successCallback",description:"Function to be called\n once the model is loaded. Will be passed\n the 3D model object.
\n",type:"function(p5.Geometry)",optional:!0},{name:"failureCallback",description:"called with event error if\n the model fails to load.
\n",type:"Function(Event)",optional:!0},{name:"fileType",description:"The file extension of the model\n (.stl, .obj).
Loaded 3d model to be rendered
\n",type:"p5.Geometry"}],class:"p5",module:"Shape"},loadShader:{name:"loadShader",params:[{name:"vertFilename",description:"path to file containing vertex shader\nsource code
\n",type:"String"},{name:"fragFilename",description:"path to file containing fragment shader\nsource code
\n",type:"String"},{name:"callback",description:"callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.
\n",type:"Function",optional:!0},{name:"errorCallback",description:"callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.
\n",type:"Function",optional:!0}],class:"p5",module:"Lights, Camera"},createShader:{name:"createShader",params:[{name:"vertSrc",description:"source code for the vertex shader
\n",type:"String"},{name:"fragSrc",description:"source code for the fragment shader
\n",type:"String"}],class:"p5",module:"Lights, Camera"},shader:{name:"shader",params:[{name:"s",description:'the desired p5.Shader to use for rendering\nshapes.
\n',type:"p5.Shader",optional:!0}],class:"p5",module:"Lights, Camera"},resetShader:{name:"resetShader",class:"p5",module:"Lights, Camera"},normalMaterial:{name:"normalMaterial",class:"p5",module:"Lights, Camera"},texture:{name:"texture",params:[{name:"tex",description:"2-dimensional graphics\n to render as texture
\n",type:"p5.Image|p5.MediaElement|p5.Graphics"}],class:"p5",module:"Lights, Camera"},textureMode:{name:"textureMode",params:[{name:"mode",description:"either IMAGE or NORMAL
\n",type:"Constant"}],class:"p5",module:"Lights, Camera"},textureWrap:{name:"textureWrap",params:[{name:"wrapX",description:"either CLAMP, REPEAT, or MIRROR
\n",type:"Constant"},{name:"wrapY",description:"either CLAMP, REPEAT, or MIRROR
\n",type:"Constant",optional:!0}],class:"p5",module:"Lights, Camera"},ambientMaterial:{name:"ambientMaterial",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"gray value, red or hue value\n (depending on the current color mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number",optional:!0},{name:"v3",description:"blue or brightness value
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:"color, color Array, or CSS color string
\n",type:"Number[]|String|p5.Color"}],chainable:1}]},emissiveMaterial:{name:"emissiveMaterial",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"v1",description:"gray value, red or hue value\n (depending on the current color mode),
\n",type:"Number"},{name:"v2",description:"green or saturation value
\n",type:"Number",optional:!0},{name:"v3",description:"blue or brightness value
\n",type:"Number",optional:!0},{name:"a",description:"opacity
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:"color, color Array, or CSS color string
\n",type:"Number[]|String|p5.Color"}],chainable:1}]},specularMaterial:{name:"specularMaterial",class:"p5",module:"Lights, Camera",overloads:[{params:[{name:"gray",description:"number specifying value between white and black.
\n",type:"Number"},{name:"alpha",description:"alpha value relative to current color range\n (default is 0-255)
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"v1",description:"red or hue value relative to\n the current color range
\n",type:"Number"},{name:"v2",description:"green or saturation value\n relative to the current color range
\n",type:"Number"},{name:"v3",description:"blue or brightness value\n relative to the current color range
\n",type:"Number"},{name:"alpha",description:"",type:"Number",optional:!0}],chainable:1},{params:[{name:"color",description:"color Array, or CSS color string
\n",type:"Number[]|String|p5.Color"}],chainable:1}]},shininess:{name:"shininess",params:[{name:"shine",description:"Degree of Shininess.\n Defaults to 1.
\n",type:"Number"}],class:"p5",module:"Lights, Camera"},camera:{name:"camera",params:[{name:"x",description:"camera position value on x axis
\n",type:"Number",optional:!0},{name:"y",description:"camera position value on y axis
\n",type:"Number",optional:!0},{name:"z",description:"camera position value on z axis
\n",type:"Number",optional:!0},{name:"centerX",description:"x coordinate representing center of the sketch
\n",type:"Number",optional:!0},{name:"centerY",description:"y coordinate representing center of the sketch
\n",type:"Number",optional:!0},{name:"centerZ",description:"z coordinate representing center of the sketch
\n",type:"Number",optional:!0},{name:"upX",description:"x component of direction 'up' from camera
\n",type:"Number",optional:!0},{name:"upY",description:"y component of direction 'up' from camera
\n",type:"Number",optional:!0},{name:"upZ",description:"z component of direction 'up' from camera
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},perspective:{name:"perspective",params:[{name:"fovy",description:'camera frustum vertical field of view,\n from bottom to top of view, in angleMode units
\n',type:"Number",optional:!0},{name:"aspect",description:"camera frustum aspect ratio
\n",type:"Number",optional:!0},{name:"near",description:"frustum near plane length
\n",type:"Number",optional:!0},{name:"far",description:"frustum far plane length
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},ortho:{name:"ortho",params:[{name:"left",description:"camera frustum left plane
\n",type:"Number",optional:!0},{name:"right",description:"camera frustum right plane
\n",type:"Number",optional:!0},{name:"bottom",description:"camera frustum bottom plane
\n",type:"Number",optional:!0},{name:"top",description:"camera frustum top plane
\n",type:"Number",optional:!0},{name:"near",description:"camera frustum near plane
\n",type:"Number",optional:!0},{name:"far",description:"camera frustum far plane
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},frustum:{name:"frustum",params:[{name:"left",description:"camera frustum left plane
\n",type:"Number",optional:!0},{name:"right",description:"camera frustum right plane
\n",type:"Number",optional:!0},{name:"bottom",description:"camera frustum bottom plane
\n",type:"Number",optional:!0},{name:"top",description:"camera frustum top plane
\n",type:"Number",optional:!0},{name:"near",description:"camera frustum near plane
\n",type:"Number",optional:!0},{name:"far",description:"camera frustum far plane
\n",type:"Number",optional:!0}],class:"p5",module:"Lights, Camera"},createCamera:{name:"createCamera",class:"p5",module:"Lights, Camera"},setCamera:{name:"setCamera",params:[{name:"cam",description:"p5.Camera object
\n",type:"p5.Camera"}],class:"p5",module:"Lights, Camera"},setAttributes:{name:"setAttributes",class:"p5",module:"Rendering",overloads:[{params:[{name:"key",description:"Name of attribute
\n",type:"String"},{name:"value",description:"New value of named attribute
\n",type:"Boolean"}]},{params:[{name:"obj",description:"object with key-value pairs
\n",type:"Object"}]}]},sampleRate:{name:"sampleRate",class:"p5",module:"p5.sound"},freqToMidi:{name:"freqToMidi",params:[{name:"frequency",description:'A freqeuncy, for example, the "A"\n above Middle C is 440Hz
\n',type:"Number"}],class:"p5",module:"p5.sound"},midiToFreq:{name:"midiToFreq",params:[{name:"midiNote",description:"The number of a MIDI note
\n",type:"Number"}],class:"p5",module:"p5.sound"},soundFormats:{name:"soundFormats",params:[{name:"formats",description:"i.e. 'mp3', 'wav', 'ogg'
\n",type:"String",optional:!0,multiple:!0}],class:"p5",module:"p5.sound"},getAudioContext:{name:"getAudioContext",class:"p5",module:"p5.sound"},userStartAudio:{params:[{name:"element(s)",description:"This argument can be an Element,\n Selector String, NodeList, p5.Element,\n jQuery Element, or an Array of any of those.
\n",type:"Element|Array",optional:!0},{name:"callback",description:"Callback to invoke when the AudioContext\n has started
\n",type:"Function",optional:!0}],name:"userStartAudio",class:"p5",module:"p5.sound"},loadSound:{name:"loadSound",params:[{name:"path",description:"Path to the sound file, or an array with\n paths to soundfiles in multiple formats\n i.e. ['sound.ogg', 'sound.mp3'].\n Alternately, accepts an object: either\n from the HTML5 File API, or a p5.File.
\n",type:"String|Array"},{name:"successCallback",description:"Name of a function to call once file loads
\n",type:"Function",optional:!0},{name:"errorCallback",description:"Name of a function to call if there is\n an error loading the file.
\n",type:"Function",optional:!0},{name:"whileLoading",description:"Name of a function to call while file is loading.\n This function will receive the percentage loaded\n so far, from 0.0 to 1.0.
\n",type:"Function",optional:!0}],class:"p5",module:"p5.sound"},createConvolver:{name:"createConvolver",params:[{name:"path",description:"path to a sound file
\n",type:"String"},{name:"callback",description:"function to call if loading is successful.\n The object will be passed in as the argument\n to the callback function.
\n",type:"Function",optional:!0},{name:"errorCallback",description:"function to call if loading is not successful.\n A custom error will be passed in as the argument\n to the callback function.
\n",type:"Function",optional:!0}],class:"p5",module:"p5.sound"},setBPM:{name:"setBPM",params:[{name:"BPM",description:"Beats Per Minute
\n",type:"Number"},{name:"rampTime",description:"Seconds from now
\n",type:"Number"}],class:"p5",module:"p5.sound"},saveSound:{name:"saveSound",params:[{name:"soundFile",description:"p5.SoundFile that you wish to save
\n",type:"p5.SoundFile"},{name:"fileName",description:"name of the resulting .wav file.
\n",type:"String"}],class:"p5",module:"p5.sound"}},"p5.Color":{toString:{name:"toString",params:[{name:"format",description:"How the color string will be formatted.\nLeaving this empty formats the string as rgba(r, g, b, a).\n'#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes.\n'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode.\n'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels.\n'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages.
\n",type:"String",optional:!0}],class:"p5.Color",module:"Color"},setRed:{name:"setRed",params:[{name:"red",description:"the new red value
\n",type:"Number"}],class:"p5.Color",module:"Color"},setGreen:{name:"setGreen",params:[{name:"green",description:"the new green value
\n",type:"Number"}],class:"p5.Color",module:"Color"},setBlue:{name:"setBlue",params:[{name:"blue",description:"the new blue value
\n",type:"Number"}],class:"p5.Color",module:"Color"},setAlpha:{name:"setAlpha",params:[{name:"alpha",description:"the new alpha value
\n",type:"Number"}],class:"p5.Color",module:"Color"}},"p5.Element":{elt:{name:"elt",class:"p5.Element",module:"DOM"},parent:{name:"parent",class:"p5.Element",module:"DOM",overloads:[{params:[{name:"parent",description:'the ID, DOM node, or p5.Element\n of desired parent element
\n',type:"String|p5.Element|Object"}],chainable:1},{params:[]}]},id:{name:"id",class:"p5.Element",module:"DOM",overloads:[{params:[{name:"id",description:"ID of the element
\n",type:"String"}],chainable:1},{params:[]}]},class:{name:"class",class:"p5.Element",module:"DOM",overloads:[{params:[{name:"class",description:"class to add
\n",type:"String"}],chainable:1},{params:[]}]},mousePressed:{name:"mousePressed",params:[{name:"fxn",description:"function to be fired when mouse is\n pressed over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n double clicked over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n scrolled over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n released over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when mouse is\n clicked over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a mouse moves\n over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a mouse moves\n onto the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a mouse\n moves off of an element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a touch\n starts over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a touch moves over\n the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a touch ends\n over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a file is\n dragged over the element.\n if false is passed instead, the previously\n firing function will no longer fire.
function to be fired when a file is\n dragged off the element.\n if false is passed instead, the previously\n firing function will no longer fire.
name of class to add
\n",type:"String"}],class:"p5.Element",module:"DOM"},removeClass:{name:"removeClass",params:[{name:"class",description:"name of class to remove
\n",type:"String"}],class:"p5.Element",module:"DOM"},hasClass:{name:"hasClass",params:[{name:"c",description:"class name of class to check
\n",type:"String"}],class:"p5.Element",module:"DOM"},toggleClass:{name:"toggleClass",params:[{name:"c",description:"class name to toggle
\n",type:"String"}],class:"p5.Element",module:"DOM"},child:{name:"child",class:"p5.Element",module:"DOM",overloads:[{params:[]},{params:[{name:"child",description:'the ID, DOM node, or p5.Element\n to add to the current element
\n',type:"String|p5.Element",optional:!0}],chainable:1}]},center:{name:"center",params:[{name:"align",description:"passing 'vertical', 'horizontal' aligns element accordingly
\n",type:"String",optional:!0}],class:"p5.Element",module:"DOM"},html:{name:"html",class:"p5.Element",module:"DOM",overloads:[{params:[]},{params:[{name:"html",description:"the HTML to be placed inside the element
\n",type:"String",optional:!0},{name:"append",description:"whether to append HTML to existing
\n",type:"Boolean",optional:!0}],chainable:1}]},position:{name:"position",class:"p5.Element",module:"DOM",overloads:[{params:[]},{params:[{name:"x",description:"x-position relative to upper left of window (optional)
\n",type:"Number",optional:!0},{name:"y",description:"y-position relative to upper left of window (optional)
\n",type:"Number",optional:!0},{name:"positionType",description:"it can be static, fixed, relative, sticky, initial or inherit (optional)
\n",type:"String"}],chainable:1}]},style:{name:"style",class:"p5.Element",module:"DOM",overloads:[{params:[{name:"property",description:"property to be set
\n",type:"String"}]},{params:[{name:"property",description:"",type:"String"},{name:"value",description:"value to assign to property
\n",type:"String|p5.Color"}],chainable:1}]},attribute:{name:"attribute",class:"p5.Element",module:"DOM",overloads:[{params:[]},{params:[{name:"attr",description:"attribute to set
\n",type:"String"},{name:"value",description:"value to assign to attribute
\n",type:"String"}],chainable:1}]},removeAttribute:{name:"removeAttribute",params:[{name:"attr",description:"attribute to remove
\n",type:"String"}],class:"p5.Element",module:"DOM"},value:{name:"value",class:"p5.Element",module:"DOM",overloads:[{params:[]},{params:[{name:"value",description:"",type:"String|Number"}],chainable:1}]},show:{name:"show",class:"p5.Element",module:"DOM"},hide:{name:"hide",class:"p5.Element",module:"DOM"},size:{name:"size",class:"p5.Element",module:"DOM",overloads:[{params:[]},{params:[{name:"w",description:"width of the element, either AUTO, or a number
\n",type:"Number|Constant"},{name:"h",description:"height of the element, either AUTO, or a number
\n",type:"Number|Constant",optional:!0}],chainable:1}]},remove:{name:"remove",class:"p5.Element",module:"DOM"},drop:{name:"drop",params:[{name:"callback",description:"callback to receive loaded file, called for each file dropped.
\n",type:"Function"},{name:"fxn",description:"callback triggered once when files are dropped with the drop event.
\n",type:"Function",optional:!0}],class:"p5.Element",module:"DOM"}},"p5.Graphics":{reset:{name:"reset",class:"p5.Graphics",module:"Rendering"},remove:{name:"remove",class:"p5.Graphics",module:"Rendering"}},JSON:{stringify:{name:"stringify",params:[{name:"object",description:":Javascript object that you would like to convert to JSON
\n",type:"Object"}],class:"JSON",module:"Foundation"}},console:{log:{name:"log",params:[{name:"message",description:":Message that you would like to print to the console
\n",type:"String|Expression|Object"}],class:"console",module:"Foundation"}},"p5.TypedDict":{size:{name:"size",class:"p5.TypedDict",module:"Data"},hasKey:{name:"hasKey",params:[{name:"key",description:"that you want to look up
\n",type:"Number|String"}],class:"p5.TypedDict",module:"Data"},get:{name:"get",params:[{name:"the",description:"key you want to access
\n",type:"Number|String"}],class:"p5.TypedDict",module:"Data"},set:{name:"set",params:[{name:"key",description:"",type:"Number|String"},{name:"value",description:"",type:"Number|String"}],class:"p5.TypedDict",module:"Data"},create:{name:"create",class:"p5.TypedDict",module:"Data",overloads:[{params:[{name:"key",description:"",type:"Number|String"},{name:"value",description:"",type:"Number|String"}]},{params:[{name:"obj",description:"key/value pair
\n",type:"Object"}]}]},clear:{name:"clear",class:"p5.TypedDict",module:"Data"},remove:{name:"remove",params:[{name:"key",description:"for the pair to remove
\n",type:"Number|String"}],class:"p5.TypedDict",module:"Data"},print:{name:"print",class:"p5.TypedDict",module:"Data"},saveTable:{name:"saveTable",class:"p5.TypedDict",module:"Data"},saveJSON:{name:"saveJSON",class:"p5.TypedDict",module:"Data"}},"p5.NumberDict":{add:{name:"add",params:[{name:"Key",description:"for the value you wish to add to
\n",type:"Number"},{name:"Number",description:"to add to the value
\n",type:"Number"}],class:"p5.NumberDict",module:"Data"},sub:{name:"sub",params:[{name:"Key",description:"for the value you wish to subtract from
\n",type:"Number"},{name:"Number",description:"to subtract from the value
\n",type:"Number"}],class:"p5.NumberDict",module:"Data"},mult:{name:"mult",params:[{name:"Key",description:"for value you wish to multiply
\n",type:"Number"},{name:"Amount",description:"to multiply the value by
\n",type:"Number"}],class:"p5.NumberDict",module:"Data"},div:{name:"div",params:[{name:"Key",description:"for value you wish to divide
\n",type:"Number"},{name:"Amount",description:"to divide the value by
\n",type:"Number"}],class:"p5.NumberDict",module:"Data"},minValue:{name:"minValue",class:"p5.NumberDict",module:"Data"},maxValue:{name:"maxValue",class:"p5.NumberDict",module:"Data"},minKey:{name:"minKey",class:"p5.NumberDict",module:"Data"},maxKey:{name:"maxKey",class:"p5.NumberDict",module:"Data"}},"p5.MediaElement":{src:{name:"src",class:"p5.MediaElement",module:"DOM"},play:{name:"play",class:"p5.MediaElement",module:"DOM"},stop:{name:"stop",class:"p5.MediaElement",module:"DOM"},pause:{name:"pause",class:"p5.MediaElement",module:"DOM"},loop:{name:"loop",class:"p5.MediaElement",module:"DOM"},noLoop:{name:"noLoop",class:"p5.MediaElement",module:"DOM"},autoplay:{name:"autoplay",params:[{name:"shouldAutoplay",description:"whether the element should autoplay
\n",type:"Boolean"}],class:"p5.MediaElement",module:"DOM"},volume:{name:"volume",class:"p5.MediaElement",module:"DOM",overloads:[{params:[]},{params:[{name:"val",description:"volume between 0.0 and 1.0
\n",type:"Number"}],chainable:1}]},speed:{name:"speed",class:"p5.MediaElement",module:"DOM",overloads:[{params:[]},{params:[{name:"speed",description:"speed multiplier for element playback
\n",type:"Number"}],chainable:1}]},time:{name:"time",class:"p5.MediaElement",module:"DOM",overloads:[{params:[]},{params:[{name:"time",description:"time to jump to (in seconds)
\n",type:"Number"}],chainable:1}]},duration:{name:"duration",class:"p5.MediaElement",module:"DOM"},onended:{name:"onended",params:[{name:"callback",description:"function to call when the\n soundfile has ended. The\n media element will be passed\n in as the argument to the\n callback.
\n",type:"Function"}],class:"p5.MediaElement",module:"DOM"},connect:{name:"connect",params:[{name:"audioNode",description:"AudioNode from the Web Audio API,\nor an object from the p5.sound library
\n",type:"AudioNode|Object"}],class:"p5.MediaElement",module:"DOM"},disconnect:{name:"disconnect",class:"p5.MediaElement",module:"DOM"},showControls:{name:"showControls",class:"p5.MediaElement",module:"DOM"},hideControls:{name:"hideControls",class:"p5.MediaElement",module:"DOM"},addCue:{name:"addCue",params:[{name:"time",description:"Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n",type:"Number"},{name:"callback",description:"Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n",type:"Function"},{name:"value",description:"An object to be passed as the\n second parameter to the\n callback function.
\n",type:"Object",optional:!0}],class:"p5.MediaElement",module:"DOM"},removeCue:{name:"removeCue",params:[{name:"id",description:"ID of the cue, as returned by addCue
\n",type:"Number"}],class:"p5.MediaElement",module:"DOM"},clearCues:{name:"clearCues",params:[{name:"id",description:"ID of the cue, as returned by addCue
\n",type:"Number"}],class:"p5.MediaElement",module:"DOM"}},"p5.File":{file:{name:"file",class:"p5.File",module:"DOM"},type:{name:"type",class:"p5.File",module:"DOM"},subtype:{name:"subtype",class:"p5.File",module:"DOM"},name:{name:"name",class:"p5.File",module:"DOM"},size:{name:"size",class:"p5.File",module:"DOM"},data:{name:"data",class:"p5.File",module:"DOM"}},"p5.Image":{width:{name:"width",class:"p5.Image",module:"Image"},height:{name:"height",class:"p5.Image",module:"Image"},pixels:{name:"pixels",class:"p5.Image",module:"Image"},loadPixels:{name:"loadPixels",class:"p5.Image",module:"Image"},updatePixels:{name:"updatePixels",class:"p5.Image",module:"Image",overloads:[{params:[{name:"x",description:"x-offset of the target update area for the\n underlying canvas
\n",type:"Integer"},{name:"y",description:"y-offset of the target update area for the\n underlying canvas
\n",type:"Integer"},{name:"w",description:"height of the target update area for the\n underlying canvas
\n",type:"Integer"},{name:"h",description:"height of the target update area for the\n underlying canvas
\n",type:"Integer"}]},{params:[]}]},get:{name:"get",class:"p5.Image",module:"Image",overloads:[{params:[{name:"x",description:"x-coordinate of the pixel
\n",type:"Number"},{name:"y",description:"y-coordinate of the pixel
\n",type:"Number"},{name:"w",description:"width
\n",type:"Number"},{name:"h",description:"height
\n",type:"Number"}]},{params:[]},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"}]}]},set:{name:"set",params:[{name:"x",description:"x-coordinate of the pixel
\n",type:"Number"},{name:"y",description:"y-coordinate of the pixel
\n",type:"Number"},{name:"a",description:'grayscale value | pixel array |\n a p5.Color | image to copy
\n',type:"Number|Number[]|Object"}],class:"p5.Image",module:"Image"},resize:{name:"resize",params:[{name:"width",description:"the resized image width
\n",type:"Number"},{name:"height",description:"the resized image height
\n",type:"Number"}],class:"p5.Image",module:"Image"},copy:{name:"copy",class:"p5.Image",module:"Image",overloads:[{params:[{name:"srcImage",description:"source image
\n",type:"p5.Image|p5.Element"},{name:"sx",description:"X coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sy",description:"Y coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sw",description:"source image width
\n",type:"Integer"},{name:"sh",description:"source image height
\n",type:"Integer"},{name:"dx",description:"X coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dy",description:"Y coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dw",description:"destination image width
\n",type:"Integer"},{name:"dh",description:"destination image height
\n",type:"Integer"}]},{params:[{name:"sx",description:"",type:"Integer"},{name:"sy",description:"",type:"Integer"},{name:"sw",description:"",type:"Integer"},{name:"sh",description:"",type:"Integer"},{name:"dx",description:"",type:"Integer"},{name:"dy",description:"",type:"Integer"},{name:"dw",description:"",type:"Integer"},{name:"dh",description:"",type:"Integer"}]}]},mask:{name:"mask",params:[{name:"srcImage",description:"source image
\n",type:"p5.Image"}],class:"p5.Image",module:"Image"},filter:{name:"filter",params:[{name:"filterType",description:"either THRESHOLD, GRAY, OPAQUE, INVERT,\n POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n See Filters.js for docs on\n each available filter
\n",type:"Constant"},{name:"filterParam",description:"an optional parameter unique\n to each filter, see above
\n",type:"Number",optional:!0}],class:"p5.Image",module:"Image"},blend:{name:"blend",class:"p5.Image",module:"Image",overloads:[{params:[{name:"srcImage",description:"source image
\n",type:"p5.Image"},{name:"sx",description:"X coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sy",description:"Y coordinate of the source's upper left corner
\n",type:"Integer"},{name:"sw",description:"source image width
\n",type:"Integer"},{name:"sh",description:"source image height
\n",type:"Integer"},{name:"dx",description:"X coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dy",description:"Y coordinate of the destination's upper left corner
\n",type:"Integer"},{name:"dw",description:"destination image width
\n",type:"Integer"},{name:"dh",description:"destination image height
\n",type:"Integer"},{name:"blendMode",description:'the blend mode. either\n BLEND, DARKEST, LIGHTEST, DIFFERENCE,\n MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
\nAvailable blend modes are: normal | multiply | screen | overlay |\n darken | lighten | color-dodge | color-burn | hard-light |\n soft-light | difference | exclusion | hue | saturation |\n color | luminosity
\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
\n',type:"Constant"}]},{params:[{name:"sx",description:"",type:"Integer"},{name:"sy",description:"",type:"Integer"},{name:"sw",description:"",type:"Integer"},{name:"sh",description:"",type:"Integer"},{name:"dx",description:"",type:"Integer"},{name:"dy",description:"",type:"Integer"},{name:"dw",description:"",type:"Integer"},{name:"dh",description:"",type:"Integer"},{name:"blendMode",description:"",type:"Constant"}]}]},save:{name:"save",params:[{name:"filename",description:"give your file a name
\n",type:"String"},{name:"extension",description:"'png' or 'jpg'
\n",type:"String"}],class:"p5.Image",module:"Image"},reset:{name:"reset",class:"p5.Image",module:"Image"},getCurrentFrame:{name:"getCurrentFrame",class:"p5.Image",module:"Image"},setFrame:{name:"setFrame",params:[{name:"index",description:"the index for the frame that should be displayed
\n",type:"Number"}],class:"p5.Image",module:"Image"},numFrames:{name:"numFrames",class:"p5.Image",module:"Image"},play:{name:"play",class:"p5.Image",module:"Image"},pause:{name:"pause",class:"p5.Image",module:"Image"},delay:{name:"delay",params:[{name:"d",description:"the amount in milliseconds to delay between switching frames
\n",type:"Number"},{name:"index",description:"the index of the frame that should have the new delay value {optional}
\n",type:"Number",optional:!0}],class:"p5.Image",module:"Image"}},"p5.PrintWriter":{write:{name:"write",params:[{name:"data",description:"all data to be written by the PrintWriter
\n",type:"Array"}],class:"p5.PrintWriter",module:"IO"},print:{name:"print",params:[{name:"data",description:"all data to be printed by the PrintWriter
\n",type:"Array"}],class:"p5.PrintWriter",module:"IO"},clear:{name:"clear",class:"p5.PrintWriter",module:"IO"},close:{name:"close",class:"p5.PrintWriter",module:"IO"}},"p5.Table":{columns:{name:"columns",class:"p5.Table",module:"IO"},rows:{name:"rows",class:"p5.Table",module:"IO"},addRow:{name:"addRow",params:[{name:"row",description:"row to be added to the table
\n",type:"p5.TableRow",optional:!0}],class:"p5.Table",module:"IO"},removeRow:{name:"removeRow",params:[{name:"id",description:"ID number of the row to remove
\n",type:"Integer"}],class:"p5.Table",module:"IO"},getRow:{name:"getRow",params:[{name:"rowID",description:"ID number of the row to get
\n",type:"Integer"}],class:"p5.Table",module:"IO"},getRows:{name:"getRows",class:"p5.Table",module:"IO"},findRow:{name:"findRow",params:[{name:"value",description:"The value to match
\n",type:"String"},{name:"column",description:"ID number or title of the\n column to search
\n",type:"Integer|String"}],class:"p5.Table",module:"IO"},findRows:{name:"findRows",params:[{name:"value",description:"The value to match
\n",type:"String"},{name:"column",description:"ID number or title of the\n column to search
\n",type:"Integer|String"}],class:"p5.Table",module:"IO"},matchRow:{name:"matchRow",params:[{name:"regexp",description:"The regular expression to match
\n",type:"String|RegExp"},{name:"column",description:"The column ID (number) or\n title (string)
\n",type:"String|Integer"}],class:"p5.Table",module:"IO"},matchRows:{name:"matchRows",params:[{name:"regexp",description:"The regular expression to match
\n",type:"String"},{name:"column",description:"The column ID (number) or\n title (string)
\n",type:"String|Integer",optional:!0}],class:"p5.Table",module:"IO"},getColumn:{name:"getColumn",params:[{name:"column",description:"String or Number of the column to return
\n",type:"String|Number"}],class:"p5.Table",module:"IO"},clearRows:{name:"clearRows",class:"p5.Table",module:"IO"},addColumn:{name:"addColumn",params:[{name:"title",description:"title of the given column
\n",type:"String",optional:!0}],class:"p5.Table",module:"IO"},getColumnCount:{name:"getColumnCount",class:"p5.Table",module:"IO"},getRowCount:{name:"getRowCount",class:"p5.Table",module:"IO"},removeTokens:{name:"removeTokens",params:[{name:"chars",description:"String listing characters to be removed
\n",type:"String"},{name:"column",description:"Column ID (number)\n or name (string)
\n",type:"String|Integer",optional:!0}],class:"p5.Table",module:"IO"},trim:{name:"trim",params:[{name:"column",description:"Column ID (number)\n or name (string)
\n",type:"String|Integer",optional:!0}],class:"p5.Table",module:"IO"},removeColumn:{name:"removeColumn",params:[{name:"column",description:"columnName (string) or ID (number)
\n",type:"String|Integer"}],class:"p5.Table",module:"IO"},set:{name:"set",params:[{name:"row",description:"row ID
\n",type:"Integer"},{name:"column",description:"column ID (Number)\n or title (String)
\n",type:"String|Integer"},{name:"value",description:"value to assign
\n",type:"String|Number"}],class:"p5.Table",module:"IO"},setNum:{name:"setNum",params:[{name:"row",description:"row ID
\n",type:"Integer"},{name:"column",description:"column ID (Number)\n or title (String)
\n",type:"String|Integer"},{name:"value",description:"value to assign
\n",type:"Number"}],class:"p5.Table",module:"IO"},setString:{name:"setString",params:[{name:"row",description:"row ID
\n",type:"Integer"},{name:"column",description:"column ID (Number)\n or title (String)
\n",type:"String|Integer"},{name:"value",description:"value to assign
\n",type:"String"}],class:"p5.Table",module:"IO"},get:{name:"get",params:[{name:"row",description:"row ID
\n",type:"Integer"},{name:"column",description:"columnName (string) or\n ID (number)
\n",type:"String|Integer"}],class:"p5.Table",module:"IO"},getNum:{name:"getNum",params:[{name:"row",description:"row ID
\n",type:"Integer"},{name:"column",description:"columnName (string) or\n ID (number)
\n",type:"String|Integer"}],class:"p5.Table",module:"IO"},getString:{name:"getString",params:[{name:"row",description:"row ID
\n",type:"Integer"},{name:"column",description:"columnName (string) or\n ID (number)
\n",type:"String|Integer"}],class:"p5.Table",module:"IO"},getObject:{name:"getObject",params:[{name:"headerColumn",description:"Name of the column which should be used to\n title each row object (optional)
\n",type:"String",optional:!0}],class:"p5.Table",module:"IO"},getArray:{name:"getArray",class:"p5.Table",module:"IO"}},"p5.TableRow":{set:{name:"set",params:[{name:"column",description:"Column ID (Number)\n or Title (String)
\n",type:"String|Integer"},{name:"value",description:"The value to be stored
\n",type:"String|Number"}],class:"p5.TableRow",module:"IO"},setNum:{name:"setNum",params:[{name:"column",description:"Column ID (Number)\n or Title (String)
\n",type:"String|Integer"},{name:"value",description:"The value to be stored\n as a Float
\n",type:"Number|String"}],class:"p5.TableRow",module:"IO"},setString:{name:"setString",params:[{name:"column",description:"Column ID (Number)\n or Title (String)
\n",type:"String|Integer"},{name:"value",description:"The value to be stored\n as a String
\n",type:"String|Number|Boolean|Object"}],class:"p5.TableRow",module:"IO"},get:{name:"get",params:[{name:"column",description:"columnName (string) or\n ID (number)
\n",type:"String|Integer"}],class:"p5.TableRow",module:"IO"},getNum:{name:"getNum",params:[{name:"column",description:"columnName (string) or\n ID (number)
\n",type:"String|Integer"}],class:"p5.TableRow",module:"IO"},getString:{name:"getString",params:[{name:"column",description:"columnName (string) or\n ID (number)
\n",type:"String|Integer"}],class:"p5.TableRow",module:"IO"}},"p5.XML":{getParent:{name:"getParent",class:"p5.XML",module:"IO"},getName:{name:"getName",class:"p5.XML",module:"IO"},setName:{name:"setName",params:[{name:"the",description:"new name of the node
\n",type:"String"}],class:"p5.XML",module:"IO"},hasChildren:{name:"hasChildren",class:"p5.XML",module:"IO"},listChildren:{name:"listChildren",class:"p5.XML",module:"IO"},getChildren:{name:"getChildren",params:[{name:"name",description:"element name
\n",type:"String",optional:!0}],class:"p5.XML",module:"IO"},getChild:{name:"getChild",params:[{name:"name",description:"element name or index
\n",type:"String|Integer"}],class:"p5.XML",module:"IO"},addChild:{name:"addChild",params:[{name:"node",description:'a p5.XML Object which will be the child to be added
\n',type:"p5.XML"}],class:"p5.XML",module:"IO"},removeChild:{name:"removeChild",params:[{name:"name",description:"element name or index
\n",type:"String|Integer"}],class:"p5.XML",module:"IO"},getAttributeCount:{name:"getAttributeCount",class:"p5.XML",module:"IO"},listAttributes:{name:"listAttributes",class:"p5.XML",module:"IO"},hasAttribute:{name:"hasAttribute",params:[{name:"the",description:"attribute to be checked
\n",type:"String"}],class:"p5.XML",module:"IO"},getNum:{name:"getNum",params:[{name:"name",description:"the non-null full name of the attribute
\n",type:"String"},{name:"defaultValue",description:"the default value of the attribute
\n",type:"Number",optional:!0}],class:"p5.XML",module:"IO"},getString:{name:"getString",params:[{name:"name",description:"the non-null full name of the attribute
\n",type:"String"},{name:"defaultValue",description:"the default value of the attribute
\n",type:"Number",optional:!0}],class:"p5.XML",module:"IO"},setAttribute:{name:"setAttribute",params:[{name:"name",description:"the full name of the attribute
\n",type:"String"},{name:"value",description:"the value of the attribute
\n",type:"Number|String|Boolean"}],class:"p5.XML",module:"IO"},getContent:{name:"getContent",params:[{name:"defaultValue",description:"value returned if no content is found
\n",type:"String",optional:!0}],class:"p5.XML",module:"IO"},setContent:{name:"setContent",params:[{name:"text",description:"the new content
\n",type:"String"}],class:"p5.XML",module:"IO"},serialize:{name:"serialize",class:"p5.XML",module:"IO"}},"p5.Vector":{x:{name:"x",class:"p5.Vector",module:"Math"},y:{name:"y",class:"p5.Vector",module:"Math"},z:{name:"z",class:"p5.Vector",module:"Math"},toString:{name:"toString",class:"p5.Vector",module:"Math"},set:{name:"set",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of the vector
\n",type:"Number",optional:!0},{name:"y",description:"the y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"the vector to set
\n",type:"p5.Vector|Number[]"}],chainable:1}]},copy:{name:"copy",class:"p5.Vector",module:"Math"},add:{name:"add",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of the vector to be added
\n",type:"Number"},{name:"y",description:"the y component of the vector to be added
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector to be added
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"the vector to add
\n",type:"p5.Vector|Number[]"}],chainable:1},{params:[{name:"v1",description:'a p5.Vector to add
\n',type:"p5.Vector"},{name:"v2",description:'a p5.Vector to add
\n',type:"p5.Vector"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1}]},rem:{name:"rem",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of divisor vector
\n",type:"Number"},{name:"y",description:"the y component of divisor vector
\n",type:"Number"},{name:"z",description:"the z component of divisor vector
\n",type:"Number"}],chainable:1},{params:[{name:"value",description:"divisor vector
\n",type:"p5.Vector | Number[]"}],chainable:1},{params:[{name:"v1",description:'dividend p5.Vector
\n',type:"p5.Vector"},{name:"v2",description:'divisor p5.Vector
\n',type:"p5.Vector"}],static:1},{params:[{name:"v1",description:"",type:"p5.Vector"},{name:"v2",description:"",type:"p5.Vector"}],static:1}]},sub:{name:"sub",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of the vector to subtract
\n",type:"Number"},{name:"y",description:"the y component of the vector to subtract
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector to subtract
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"value",description:"the vector to subtract
\n",type:"p5.Vector|Number[]"}],chainable:1},{params:[{name:"v1",description:'a p5.Vector to subtract from
\n',type:"p5.Vector"},{name:"v2",description:'a p5.Vector to subtract
\n',type:"p5.Vector"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1}]},mult:{name:"mult",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"n",description:"The number to multiply with the vector
\n",type:"Number"}],chainable:1},{params:[{name:"x",description:"The number to multiply with the x component of the vector
\n",type:"Number"},{name:"y",description:"The number to multiply with the y component of the vector
\n",type:"Number"},{name:"z",description:"The number to multiply with the z component of the vector
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"arr",description:"The array to multiply with the components of the vector
\n",type:"Number[]"}],chainable:1},{params:[{name:"v",description:"The vector to multiply with the components of the original vector
\n",type:"p5.Vector"}],chainable:1},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number",optional:!0}],static:1},{params:[{name:"v",description:"",type:"p5.Vector"},{name:"n",description:"",type:"Number"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"v1",description:"",type:"p5.Vector"},{name:"target",description:"",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"arr",description:"",type:"Number[]"},{name:"target",description:"",type:"p5.Vector",optional:!0}],static:1}]},div:{name:"div",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"n",description:"The number to divide the vector by
\n",type:"Number"}],chainable:1},{params:[{name:"x",description:"The number to divide with the x component of the vector
\n",type:"Number"},{name:"y",description:"The number to divide with the y component of the vector
\n",type:"Number"},{name:"z",description:"The number to divide with the z component of the vector
\n",type:"Number",optional:!0}],chainable:1},{params:[{name:"arr",description:"The array to divide the components of the vector by
\n",type:"Number[]"}],chainable:1},{params:[{name:"v",description:"The vector to divide the components of the original vector by
\n",type:"p5.Vector"}],chainable:1},{params:[{name:"x",description:"",type:"Number"},{name:"y",description:"",type:"Number"},{name:"z",description:"",type:"Number",optional:!0}],static:1},{params:[{name:"v",description:"",type:"p5.Vector"},{name:"n",description:"",type:"Number"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"v1",description:"",type:"p5.Vector"},{name:"target",description:"",type:"p5.Vector",optional:!0}],static:1},{params:[{name:"v0",description:"",type:"p5.Vector"},{name:"arr",description:"",type:"Number[]"},{name:"target",description:"",type:"p5.Vector",optional:!0}],static:1}]},mag:{name:"mag",class:"p5.Vector",module:"Math",overloads:[{params:[]},{params:[{name:"vecT",description:"the vector to return the magnitude of
\n",type:"p5.Vector"}],static:1}]},magSq:{name:"magSq",class:"p5.Vector",module:"Math"},dot:{name:"dot",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"x component of the vector
\n",type:"Number"},{name:"y",description:"y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"z component of the vector
\n",type:"Number",optional:!0}]},{params:[{name:"value",description:'value component of the vector or a p5.Vector
\n',type:"p5.Vector"}]},{params:[{name:"v1",description:'the first p5.Vector
\n',type:"p5.Vector"},{name:"v2",description:'the second p5.Vector
\n',type:"p5.Vector"}],static:1}]},cross:{name:"cross",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"v",description:'p5.Vector to be crossed
\n',type:"p5.Vector"}]},{params:[{name:"v1",description:'the first p5.Vector
\n',type:"p5.Vector"},{name:"v2",description:'the second p5.Vector
\n',type:"p5.Vector"}],static:1}]},dist:{name:"dist",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"v",description:'the x, y, and z coordinates of a p5.Vector
\n',type:"p5.Vector"}]},{params:[{name:"v1",description:'the first p5.Vector
\n',type:"p5.Vector"},{name:"v2",description:'the second p5.Vector
\n',type:"p5.Vector"}],static:1}]},normalize:{name:"normalize",class:"p5.Vector",module:"Math"},limit:{name:"limit",params:[{name:"max",description:"the maximum magnitude for the vector
\n",type:"Number"}],class:"p5.Vector",module:"Math"},setMag:{name:"setMag",params:[{name:"len",description:"the new length for this vector
\n",type:"Number"}],class:"p5.Vector",module:"Math"},heading:{name:"heading",class:"p5.Vector",module:"Math"},rotate:{name:"rotate",params:[{name:"angle",description:"the angle of rotation
\n",type:"Number"}],class:"p5.Vector",module:"Math"},angleBetween:{name:"angleBetween",params:[{name:"value",description:'the x, y, and z components of a p5.Vector
\n',type:"p5.Vector"}],class:"p5.Vector",module:"Math"},lerp:{name:"lerp",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component
\n",type:"Number"},{name:"y",description:"the y component
\n",type:"Number"},{name:"z",description:"the z component
\n",type:"Number"},{name:"amt",description:"the amount of interpolation; some value between 0.0\n (old vector) and 1.0 (new vector). 0.9 is very near\n the new vector. 0.5 is halfway in between.
\n",type:"Number"}],chainable:1},{params:[{name:"v",description:'the p5.Vector to lerp to
\n',type:"p5.Vector"},{name:"amt",description:"",type:"Number"}],chainable:1},{params:[{name:"v1",description:"",type:"p5.Vector"},{name:"v2",description:"",type:"p5.Vector"},{name:"amt",description:"",type:"Number"},{name:"target",description:"the vector to receive the result (Optional)
\n",type:"p5.Vector",optional:!0}],static:1}]},reflect:{name:"reflect",params:[{name:"surfaceNormal",description:'the p5.Vector to reflect about, will be normalized by this method
\n',type:"p5.Vector"}],class:"p5.Vector",module:"Math"},array:{name:"array",class:"p5.Vector",module:"Math"},equals:{name:"equals",class:"p5.Vector",module:"Math",overloads:[{params:[{name:"x",description:"the x component of the vector
\n",type:"Number",optional:!0},{name:"y",description:"the y component of the vector
\n",type:"Number",optional:!0},{name:"z",description:"the z component of the vector
\n",type:"Number",optional:!0}]},{params:[{name:"value",description:"the vector to compare
\n",type:"p5.Vector|Array"}]}]},fromAngle:{name:"fromAngle",params:[{name:"angle",description:'the desired angle, in radians (unaffected by angleMode)
\n',type:"Number"},{name:"length",description:"the length of the new vector (defaults to 1)
\n",type:"Number",optional:!0}],class:"p5.Vector",module:"Math"},fromAngles:{name:"fromAngles",params:[{name:"theta",description:"the polar angle, in radians (zero is up)
\n",type:"Number"},{name:"phi",description:"the azimuthal angle, in radians\n (zero is out of the screen)
\n",type:"Number"},{name:"length",description:"the length of the new vector (defaults to 1)
\n",type:"Number",optional:!0}],class:"p5.Vector",module:"Math"},random2D:{name:"random2D",class:"p5.Vector",module:"Math"},random3D:{name:"random3D",class:"p5.Vector",module:"Math"}},"p5.Font":{font:{name:"font",class:"p5.Font",module:"Typography"},textBounds:{name:"textBounds",params:[{name:"line",description:"a line of text
\n",type:"String"},{name:"x",description:"x-position
\n",type:"Number"},{name:"y",description:"y-position
\n",type:"Number"},{name:"fontSize",description:"font size to use (optional) Default is 12.
\n",type:"Number",optional:!0},{name:"options",description:"opentype options (optional)\n opentype fonts contains alignment and baseline options.\n Default is 'LEFT' and 'alphabetic'
\n",type:"Object",optional:!0}],class:"p5.Font",module:"Typography"},textToPoints:{name:"textToPoints",params:[{name:"txt",description:"a line of text
\n",type:"String"},{name:"x",description:"x-position
\n",type:"Number"},{name:"y",description:"y-position
\n",type:"Number"},{name:"fontSize",description:"font size to use (optional)
\n",type:"Number"},{name:"options",description:"an (optional) object that can contain:
\n
sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise
simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear
amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n',type:"Number"}],class:"p5.Camera",module:"Lights, Camera"},tilt:{name:"tilt",params:[{name:"angle",description:'amount to rotate camera in current\nangleMode units.\nGreater than 0 values rotate counterclockwise (to the left).
\n',type:"Number"}],class:"p5.Camera",module:"Lights, Camera"},lookAt:{name:"lookAt",params:[{name:"x",description:"x position of a point in world space
\n",type:"Number"},{name:"y",description:"y position of a point in world space
\n",type:"Number"},{name:"z",description:"z position of a point in world space
\n",type:"Number"}],class:"p5.Camera",module:"Lights, Camera"},camera:{name:"camera",class:"p5.Camera",module:"Lights, Camera"},move:{name:"move",params:[{name:"x",description:"amount to move along camera's left-right axis
\n",type:"Number"},{name:"y",description:"amount to move along camera's up-down axis
\n",type:"Number"},{name:"z",description:"amount to move along camera's forward-backward axis
\n",type:"Number"}],class:"p5.Camera",module:"Lights, Camera"},setPosition:{name:"setPosition",params:[{name:"x",description:"x position of a point in world space
\n",type:"Number"},{name:"y",description:"y position of a point in world space
\n",type:"Number"},{name:"z",description:"z position of a point in world space
\n",type:"Number"}],class:"p5.Camera",module:"Lights, Camera"}},"p5.Geometry":{computeFaces:{name:"computeFaces",class:"p5.Geometry",module:"Lights, Camera"},computeNormals:{name:"computeNormals",class:"p5.Geometry",module:"Lights, Camera"},averageNormals:{name:"averageNormals",class:"p5.Geometry",module:"Lights, Camera"},averagePoleNormals:{name:"averagePoleNormals",class:"p5.Geometry",module:"Lights, Camera"},normalize:{name:"normalize",class:"p5.Geometry",module:"Lights, Camera"}},"p5.Shader":{setUniform:{name:"setUniform",params:[{name:"uniformName",description:"the name of the uniform in the\nshader program
\n",type:"String"},{name:"data",description:"the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)
\n",type:"Object|Number|Boolean|Number[]"}],class:"p5.Shader",module:"Lights, Camera"}},"p5.sound":{getMasterVolume:{name:"getMasterVolume",class:"p5.sound",module:"p5.sound"},masterVolume:{name:"masterVolume",params:[{name:"volume",description:"Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n",type:"Number|Object"},{name:"rampTime",description:"Fade for t seconds
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"Schedule this event to happen at\n t seconds in the future
\n",type:"Number",optional:!0}],class:"p5.sound",module:"p5.sound"},soundOut:{name:"soundOut",class:"p5.sound",module:"p5.sound"}},"p5.Effect":{amp:{name:"amp",params:[{name:"vol",description:"amplitude between 0 and 1.0
\n",type:"Number",optional:!0},{name:"rampTime",description:"create a fade that lasts until rampTime
\n",type:"Number",optional:!0},{name:"tFromNow",description:"schedule this event to happen in tFromNow seconds
\n",type:"Number",optional:!0}],class:"p5.Effect",module:"p5.sound"},chain:{name:"chain",params:[{name:"arguments",description:"Chain together multiple sound objects
\n",type:"Object",optional:!0}],class:"p5.Effect",module:"p5.sound"},drywet:{name:"drywet",params:[{name:"fade",description:"The desired drywet value (0 - 1.0)
\n",type:"Number",optional:!0}],class:"p5.Effect",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"",type:"Object"}],class:"p5.Effect",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.Effect",module:"p5.sound"}},"p5.Filter":{biquadFilter:{name:"biquadFilter",class:"p5.Filter",module:"p5.sound"},process:{name:"process",params:[{name:"Signal",description:"An object that outputs audio
\n",type:"Object"},{name:"freq",description:"Frequency in Hz, from 10 to 22050
\n",type:"Number",optional:!0},{name:"res",description:"Resonance/Width of the filter frequency\n from 0.001 to 1000
\n",type:"Number",optional:!0}],class:"p5.Filter",module:"p5.sound"},set:{name:"set",params:[{name:"freq",description:"Frequency in Hz, from 10 to 22050
\n",type:"Number",optional:!0},{name:"res",description:"Resonance (Q) from 0.001 to 1000
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Filter",module:"p5.sound"},freq:{name:"freq",params:[{name:"freq",description:"Filter Frequency
\n",type:"Number"},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Filter",module:"p5.sound"},res:{name:"res",params:[{name:"res",description:"Resonance/Width of filter freq\n from 0.001 to 1000
\n",type:"Number"},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Filter",module:"p5.sound"},gain:{name:"gain",params:[{name:"gain",description:"",type:"Number"}],class:"p5.Filter",module:"p5.sound"},toggle:{name:"toggle",class:"p5.Filter",module:"p5.sound"},setType:{name:"setType",params:[{name:"t",description:"",type:"String"}],class:"p5.Filter",module:"p5.sound"}},"p5.Oscillator":{start:{name:"start",params:[{name:"time",description:"startTime in seconds from now.
\n",type:"Number",optional:!0},{name:"frequency",description:"frequency in Hz.
\n",type:"Number",optional:!0}],class:"p5.Oscillator",module:"p5.sound"},stop:{name:"stop",params:[{name:"secondsFromNow",description:"Time, in seconds from now.
\n",type:"Number"}],class:"p5.Oscillator",module:"p5.sound"},amp:{name:"amp",params:[{name:"vol",description:"between 0 and 1.0\n or a modulating signal/oscillator
\n",type:"Number|Object"},{name:"rampTime",description:"create a fade that lasts rampTime
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Oscillator",module:"p5.sound"},freq:{name:"freq",params:[{name:"Frequency",description:"Frequency in Hz\n or modulating signal/oscillator
\n",type:"Number|Object"},{name:"rampTime",description:"Ramp time (in seconds)
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"Schedule this event to happen\n at x seconds from now
\n",type:"Number",optional:!0}],class:"p5.Oscillator",module:"p5.sound"},setType:{name:"setType",params:[{name:"type",description:"'sine', 'triangle', 'sawtooth' or 'square'.
\n",type:"String"}],class:"p5.Oscillator",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"A p5.sound or Web Audio object
\n",type:"Object"}],class:"p5.Oscillator",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.Oscillator",module:"p5.sound"},pan:{name:"pan",params:[{name:"panning",description:"Number between -1 and 1
\n",type:"Number"},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number"}],class:"p5.Oscillator",module:"p5.sound"},phase:{name:"phase",params:[{name:"phase",description:"float between 0.0 and 1.0
\n",type:"Number"}],class:"p5.Oscillator",module:"p5.sound"},add:{name:"add",params:[{name:"number",description:"Constant number to add
\n",type:"Number"}],class:"p5.Oscillator",module:"p5.sound"},mult:{name:"mult",params:[{name:"number",description:"Constant number to multiply
\n",type:"Number"}],class:"p5.Oscillator",module:"p5.sound"},scale:{name:"scale",params:[{name:"inMin",description:"input range minumum
\n",type:"Number"},{name:"inMax",description:"input range maximum
\n",type:"Number"},{name:"outMin",description:"input range minumum
\n",type:"Number"},{name:"outMax",description:"input range maximum
\n",type:"Number"}],class:"p5.Oscillator",module:"p5.sound"}},"p5.MonoSynth":{play:{name:"play",params:[{name:"note",description:'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz.
\n',type:"String | Number"},{name:"velocity",description:"velocity of the note to play (ranging from 0 to 1)
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0},{name:"sustainTime",description:"time to sustain before releasing the envelope. Defaults to 0.15 seconds.
\n",type:"Number",optional:!0}],class:"p5.MonoSynth",module:"p5.sound"},triggerAttack:{params:[{name:"note",description:'the note you want to play, specified as a\n frequency in Hertz (Number) or as a midi\n value in Note/Octave format ("C4", "Eb3"...etc")\n See \n Tone. Defaults to 440 hz
\n',type:"String | Number"},{name:"velocity",description:"velocity of the note to play (ranging from 0 to 1)
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0}],name:"triggerAttack",class:"p5.MonoSynth",module:"p5.sound"},triggerRelease:{params:[{name:"secondsFromNow",description:"time to trigger the release
\n",type:"Number"}],name:"triggerRelease",class:"p5.MonoSynth",module:"p5.sound"},setADSR:{name:"setADSR",params:[{name:"attackTime",description:"Time (in seconds before envelope\n reaches Attack Level
\n",type:"Number"},{name:"decayTime",description:"Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n",type:"Number",optional:!0},{name:"susRatio",description:"Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n",type:"Number",optional:!0}],class:"p5.MonoSynth",module:"p5.sound"},attack:{name:"attack",class:"p5.MonoSynth",module:"p5.sound"},decay:{name:"decay",class:"p5.MonoSynth",module:"p5.sound"},sustain:{name:"sustain",class:"p5.MonoSynth",module:"p5.sound"},release:{name:"release",class:"p5.MonoSynth",module:"p5.sound"},amp:{name:"amp",params:[{name:"vol",description:"desired volume
\n",type:"Number"},{name:"rampTime",description:"Time to reach new volume
\n",type:"Number",optional:!0}],class:"p5.MonoSynth",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"A p5.sound or Web Audio object
\n",type:"Object"}],class:"p5.MonoSynth",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.MonoSynth",module:"p5.sound"},dispose:{name:"dispose",class:"p5.MonoSynth",module:"p5.sound"}},"p5.AudioVoice":{connect:{name:"connect",params:[{name:"unit",description:"",type:"Object"}],class:"p5.AudioVoice",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.AudioVoice",module:"p5.sound"}},"p5.PolySynth":{notes:{name:"notes",class:"p5.PolySynth",module:"p5.sound"},polyvalue:{name:"polyvalue",class:"p5.PolySynth",module:"p5.sound"},AudioVoice:{name:"AudioVoice",class:"p5.PolySynth",module:"p5.sound"},play:{name:"play",params:[{name:"note",description:"midi note to play (ranging from 0 to 127 - 60 being a middle C)
\n",type:"Number",optional:!0},{name:"velocity",description:"velocity of the note to play (ranging from 0 to 1)
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0},{name:"sustainTime",description:"time to sustain before releasing the envelope
\n",type:"Number",optional:!0}],class:"p5.PolySynth",module:"p5.sound"},noteADSR:{name:"noteADSR",params:[{name:"note",description:"Midi note on which ADSR should be set.
\n",type:"Number",optional:!0},{name:"attackTime",description:"Time (in seconds before envelope\n reaches Attack Level
\n",type:"Number",optional:!0},{name:"decayTime",description:"Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n",type:"Number",optional:!0},{name:"susRatio",description:"Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n",type:"Number",optional:!0}],class:"p5.PolySynth",module:"p5.sound"},setADSR:{name:"setADSR",params:[{name:"attackTime",description:"Time (in seconds before envelope\n reaches Attack Level
\n",type:"Number",optional:!0},{name:"decayTime",description:"Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n",type:"Number",optional:!0},{name:"susRatio",description:"Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n",type:"Number",optional:!0}],class:"p5.PolySynth",module:"p5.sound"},noteAttack:{name:"noteAttack",params:[{name:"note",description:"midi note on which attack should be triggered.
\n",type:"Number",optional:!0},{name:"velocity",description:"velocity of the note to play (ranging from 0 to 1)/
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time from now (in seconds)
\n",type:"Number",optional:!0}],class:"p5.PolySynth",module:"p5.sound"},noteRelease:{name:"noteRelease",params:[{name:"note",description:"midi note on which attack should be triggered.\n If no value is provided, all notes will be released.
\n",type:"Number",optional:!0},{name:"secondsFromNow",description:"time to trigger the release
\n",type:"Number",optional:!0}],class:"p5.PolySynth",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"A p5.sound or Web Audio object
\n",type:"Object"}],class:"p5.PolySynth",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.PolySynth",module:"p5.sound"},dispose:{name:"dispose",class:"p5.PolySynth",module:"p5.sound"}},"p5.SoundFile":{isLoaded:{name:"isLoaded",class:"p5.SoundFile",module:"p5.sound"},play:{name:"play",params:[{name:"startTime",description:"(optional) schedule playback to start (in seconds from now).
\n",type:"Number",optional:!0},{name:"rate",description:"(optional) playback rate
\n",type:"Number",optional:!0},{name:"amp",description:"(optional) amplitude (volume)\n of playback
\n",type:"Number",optional:!0},{name:"cueStart",description:"(optional) cue start time in seconds
\n",type:"Number",optional:!0},{name:"duration",description:"(optional) duration of playback in seconds
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},playMode:{name:"playMode",params:[{name:"str",description:"'restart' or 'sustain' or 'untilDone'
\n",type:"String"}],class:"p5.SoundFile",module:"p5.sound"},pause:{name:"pause",params:[{name:"startTime",description:"(optional) schedule event to occur\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},loop:{name:"loop",params:[{name:"startTime",description:"(optional) schedule event to occur\n seconds from now
\n",type:"Number",optional:!0},{name:"rate",description:"(optional) playback rate
\n",type:"Number",optional:!0},{name:"amp",description:"(optional) playback volume
\n",type:"Number",optional:!0},{name:"cueLoopStart",description:"(optional) startTime in seconds
\n",type:"Number",optional:!0},{name:"duration",description:"(optional) loop duration in seconds
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},setLoop:{name:"setLoop",params:[{name:"Boolean",description:"set looping to true or false
\n",type:"Boolean"}],class:"p5.SoundFile",module:"p5.sound"},isLooping:{name:"isLooping",class:"p5.SoundFile",module:"p5.sound"},isPlaying:{name:"isPlaying",class:"p5.SoundFile",module:"p5.sound"},isPaused:{name:"isPaused",class:"p5.SoundFile",module:"p5.sound"},stop:{name:"stop",params:[{name:"startTime",description:"(optional) schedule event to occur\n in seconds from now
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},setVolume:{name:"setVolume",params:[{name:"volume",description:"Volume (amplitude) between 0.0\n and 1.0 or modulating signal/oscillator
\n",type:"Number|Object"},{name:"rampTime",description:"Fade for t seconds
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"Schedule this event to happen at\n t seconds in the future
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},pan:{name:"pan",params:[{name:"panValue",description:"Set the stereo panner
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},getPan:{name:"getPan",class:"p5.SoundFile",module:"p5.sound"},rate:{name:"rate",params:[{name:"playbackRate",description:"Set the playback rate. 1.0 is normal,\n .5 is half-speed, 2.0 is twice as fast.\n Values less than zero play backwards.
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},duration:{name:"duration",class:"p5.SoundFile",module:"p5.sound"},currentTime:{name:"currentTime",class:"p5.SoundFile",module:"p5.sound"},jump:{name:"jump",params:[{name:"cueTime",description:"cueTime of the soundFile in seconds.
\n",type:"Number"},{name:"duration",description:"duration in seconds.
\n",type:"Number"}],class:"p5.SoundFile",module:"p5.sound"},channels:{name:"channels",class:"p5.SoundFile",module:"p5.sound"},sampleRate:{name:"sampleRate",class:"p5.SoundFile",module:"p5.sound"},frames:{name:"frames",class:"p5.SoundFile",module:"p5.sound"},getPeaks:{name:"getPeaks",params:[{name:"length",description:"length is the size of the returned array.\n Larger length results in more precision.\n Defaults to 5*width of the browser window.
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},reverseBuffer:{name:"reverseBuffer",class:"p5.SoundFile",module:"p5.sound"},onended:{name:"onended",params:[{name:"callback",description:"function to call when the\n soundfile has ended.
\n",type:"Function"}],class:"p5.SoundFile",module:"p5.sound"},connect:{name:"connect",params:[{name:"object",description:"Audio object that accepts an input
\n",type:"Object",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.SoundFile",module:"p5.sound"},setPath:{name:"setPath",params:[{name:"path",description:"path to audio file
\n",type:"String"},{name:"callback",description:"Callback
\n",type:"Function"}],class:"p5.SoundFile",module:"p5.sound"},setBuffer:{name:"setBuffer",params:[{name:"buf",description:"Array of Float32 Array(s). 2 Float32 Arrays\n will create a stereo source. 1 will create\n a mono source.
\n",type:"Array"}],class:"p5.SoundFile",module:"p5.sound"},processPeaks:{name:"processPeaks",params:[{name:"callback",description:"a function to call once this data is returned
\n",type:"Function"},{name:"initThreshold",description:"initial threshold defaults to 0.9
\n",type:"Number",optional:!0},{name:"minThreshold",description:"minimum threshold defaults to 0.22
\n",type:"Number",optional:!0},{name:"minPeaks",description:"minimum number of peaks defaults to 200
\n",type:"Number",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},addCue:{name:"addCue",params:[{name:"time",description:"Time in seconds, relative to this media\n element's playback. For example, to trigger\n an event every time playback reaches two\n seconds, pass in the number 2. This will be\n passed as the first parameter to\n the callback function.
\n",type:"Number"},{name:"callback",description:"Name of a function that will be\n called at the given time. The callback will\n receive time and (optionally) param as its\n two parameters.
\n",type:"Function"},{name:"value",description:"An object to be passed as the\n second parameter to the\n callback function.
\n",type:"Object",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},removeCue:{name:"removeCue",params:[{name:"id",description:"ID of the cue, as returned by addCue
\n",type:"Number"}],class:"p5.SoundFile",module:"p5.sound"},clearCues:{name:"clearCues",class:"p5.SoundFile",module:"p5.sound"},save:{name:"save",params:[{name:"fileName",description:"name of the resulting .wav file.
\n",type:"String",optional:!0}],class:"p5.SoundFile",module:"p5.sound"},getBlob:{name:"getBlob",class:"p5.SoundFile",module:"p5.sound"}},"p5.Amplitude":{setInput:{name:"setInput",params:[{name:"snd",description:"set the sound source\n (optional, defaults to\n master output)
\n",type:"SoundObject|undefined",optional:!0},{name:"smoothing",description:"a range between 0.0 and 1.0\n to smooth amplitude readings
\n",type:"Number|undefined",optional:!0}],class:"p5.Amplitude",module:"p5.sound"},getLevel:{name:"getLevel",params:[{name:"channel",description:"Optionally return only channel 0 (left) or 1 (right)
\n",type:"Number",optional:!0}],class:"p5.Amplitude",module:"p5.sound"},toggleNormalize:{name:"toggleNormalize",params:[{name:"boolean",description:"set normalize to true (1) or false (0)
\n",type:"Boolean",optional:!0}],class:"p5.Amplitude",module:"p5.sound"},smooth:{name:"smooth",params:[{name:"set",description:"smoothing from 0.0 <= 1
\n",type:"Number"}],class:"p5.Amplitude",module:"p5.sound"}},"p5.FFT":{setInput:{name:"setInput",params:[{name:"source",description:"p5.sound object (or web audio API source node)
\n",type:"Object",optional:!0}],class:"p5.FFT",module:"p5.sound"},waveform:{name:"waveform",params:[{name:"bins",description:"Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n",type:"Number",optional:!0},{name:"precision",description:"If any value is provided, will return results\n in a Float32 Array which is more precise\n than a regular array.
\n",type:"String",optional:!0}],class:"p5.FFT",module:"p5.sound"},analyze:{name:"analyze",params:[{name:"bins",description:"Must be a power of two between\n 16 and 1024. Defaults to 1024.
\n",type:"Number",optional:!0},{name:"scale",description:'If "dB," returns decibel\n float measurements between\n -140 and 0 (max).\n Otherwise returns integers from 0-255.
\n',type:"Number",optional:!0}],class:"p5.FFT",module:"p5.sound"},getEnergy:{name:"getEnergy",params:[{name:"frequency1",description:'Will return a value representing\n energy at this frequency. Alternately,\n the strings "bass", "lowMid" "mid",\n "highMid", and "treble" will return\n predefined frequency ranges.
\n',type:"Number|String"},{name:"frequency2",description:"If a second frequency is given,\n will return average amount of\n energy that exists between the\n two frequencies.
\n",type:"Number",optional:!0}],class:"p5.FFT",module:"p5.sound"},getCentroid:{name:"getCentroid",class:"p5.FFT",module:"p5.sound"},smooth:{name:"smooth",params:[{name:"smoothing",description:"0.0 < smoothing < 1.0.\n Defaults to 0.8.
\n",type:"Number"}],class:"p5.FFT",module:"p5.sound"},linAverages:{name:"linAverages",params:[{name:"N",description:"Number of returned frequency groups
\n",type:"Number"}],class:"p5.FFT",module:"p5.sound"},logAverages:{name:"logAverages",params:[{name:"octaveBands",description:"Array of Octave Bands objects for grouping
\n",type:"Array"}],class:"p5.FFT",module:"p5.sound"},getOctaveBands:{name:"getOctaveBands",params:[{name:"N",description:"Specifies the 1/N type of generated octave bands
\n",type:"Number"},{name:"fCtr0",description:"Minimum central frequency for the lowest band
\n",type:"Number"}],class:"p5.FFT",module:"p5.sound"}},"p5.Signal":{fade:{name:"fade",params:[{name:"value",description:"Value to set this signal
\n",type:"Number"},{name:"secondsFromNow",description:"Length of fade, in seconds from now
\n",type:"Number",optional:!0}],class:"p5.Signal",module:"p5.sound"},setInput:{name:"setInput",params:[{name:"input",description:"",type:"Object"}],class:"p5.Signal",module:"p5.sound"},add:{name:"add",params:[{name:"number",description:"",type:"Number"}],class:"p5.Signal",module:"p5.sound"},mult:{name:"mult",params:[{name:"number",description:"to multiply
\n",type:"Number"}],class:"p5.Signal",module:"p5.sound"},scale:{name:"scale",params:[{name:"number",description:"to multiply
\n",type:"Number"},{name:"inMin",description:"input range minumum
\n",type:"Number"},{name:"inMax",description:"input range maximum
\n",type:"Number"},{name:"outMin",description:"input range minumum
\n",type:"Number"},{name:"outMax",description:"input range maximum
\n",type:"Number"}],class:"p5.Signal",module:"p5.sound"}},"p5.Envelope":{attackTime:{name:"attackTime",class:"p5.Envelope",module:"p5.sound"},attackLevel:{name:"attackLevel",class:"p5.Envelope",module:"p5.sound"},decayTime:{name:"decayTime",class:"p5.Envelope",module:"p5.sound"},decayLevel:{name:"decayLevel",class:"p5.Envelope",module:"p5.sound"},releaseTime:{name:"releaseTime",class:"p5.Envelope",module:"p5.sound"},releaseLevel:{name:"releaseLevel",class:"p5.Envelope",module:"p5.sound"},set:{name:"set",params:[{name:"attackTime",description:"Time (in seconds) before level\n reaches attackLevel
\n",type:"Number"},{name:"attackLevel",description:"Typically an amplitude between\n 0.0 and 1.0
\n",type:"Number"},{name:"decayTime",description:"Time
\n",type:"Number"},{name:"decayLevel",description:"Amplitude (In a standard ADSR envelope,\n decayLevel = sustainLevel)
\n",type:"Number"},{name:"releaseTime",description:"Release Time (in seconds)
\n",type:"Number"},{name:"releaseLevel",description:"Amplitude
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"},setADSR:{name:"setADSR",params:[{name:"attackTime",description:"Time (in seconds before envelope\n reaches Attack Level
\n",type:"Number"},{name:"decayTime",description:"Time (in seconds) before envelope\n reaches Decay/Sustain Level
\n",type:"Number",optional:!0},{name:"susRatio",description:"Ratio between attackLevel and releaseLevel, on a scale from 0 to 1,\n where 1.0 = attackLevel, 0.0 = releaseLevel.\n The susRatio determines the decayLevel and the level at which the\n sustain portion of the envelope will sustain.\n For example, if attackLevel is 0.4, releaseLevel is 0,\n and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is\n increased to 1.0 (using setRange),\n then decayLevel would increase proportionally, to become 0.5.
Time in seconds from now (defaults to 0)
\n",type:"Number",optional:!0}],class:"p5.Envelope",module:"p5.sound"},setRange:{name:"setRange",params:[{name:"aLevel",description:"attack level (defaults to 1)
\n",type:"Number"},{name:"rLevel",description:"release level (defaults to 0)
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"},setInput:{name:"setInput",params:[{name:"inputs",description:"A p5.sound object or\n Web Audio Param.
\n",type:"Object",optional:!0,multiple:!0}],class:"p5.Envelope",module:"p5.sound"},setExp:{name:"setExp",params:[{name:"isExp",description:"true is exponential, false is linear
\n",type:"Boolean"}],class:"p5.Envelope",module:"p5.sound"},play:{name:"play",params:[{name:"unit",description:"A p5.sound object or\n Web Audio Param.
\n",type:"Object"},{name:"startTime",description:"time from now (in seconds) at which to play
\n",type:"Number",optional:!0},{name:"sustainTime",description:"time to sustain before releasing the envelope
\n",type:"Number",optional:!0}],class:"p5.Envelope",module:"p5.sound"},triggerAttack:{name:"triggerAttack",params:[{name:"unit",description:"p5.sound Object or Web Audio Param
\n",type:"Object"},{name:"secondsFromNow",description:"time from now (in seconds)
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"},triggerRelease:{name:"triggerRelease",params:[{name:"unit",description:"p5.sound Object or Web Audio Param
\n",type:"Object"},{name:"secondsFromNow",description:"time to trigger the release
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"},ramp:{name:"ramp",params:[{name:"unit",description:"p5.sound Object or Web Audio Param
\n",type:"Object"},{name:"secondsFromNow",description:"When to trigger the ramp
\n",type:"Number"},{name:"v",description:"Target value
\n",type:"Number"},{name:"v2",description:"Second target value (optional)
\n",type:"Number",optional:!0}],class:"p5.Envelope",module:"p5.sound"},add:{name:"add",params:[{name:"number",description:"Constant number to add
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"},mult:{name:"mult",params:[{name:"number",description:"Constant number to multiply
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"},scale:{name:"scale",params:[{name:"inMin",description:"input range minumum
\n",type:"Number"},{name:"inMax",description:"input range maximum
\n",type:"Number"},{name:"outMin",description:"input range minumum
\n",type:"Number"},{name:"outMax",description:"input range maximum
\n",type:"Number"}],class:"p5.Envelope",module:"p5.sound"}},"p5.Pulse":{width:{name:"width",params:[{name:"width",description:"Width between the pulses (0 to 1.0,\n defaults to 0)
\n",type:"Number",optional:!0}],class:"p5.Pulse",module:"p5.sound"}},"p5.Noise":{setType:{name:"setType",params:[{name:"type",description:"'white', 'pink' or 'brown'
\n",type:"String",optional:!0}],class:"p5.Noise",module:"p5.sound"}},"p5.AudioIn":{input:{name:"input",class:"p5.AudioIn",module:"p5.sound"},output:{name:"output",class:"p5.AudioIn",module:"p5.sound"},stream:{name:"stream",class:"p5.AudioIn",module:"p5.sound"},mediaStream:{name:"mediaStream",class:"p5.AudioIn",module:"p5.sound"},currentSource:{name:"currentSource",class:"p5.AudioIn",module:"p5.sound"},enabled:{name:"enabled",class:"p5.AudioIn",module:"p5.sound"},amplitude:{name:"amplitude",class:"p5.AudioIn",module:"p5.sound"},start:{name:"start",params:[{name:"successCallback",description:"Name of a function to call on\n success.
\n",type:"Function",optional:!0},{name:"errorCallback",description:"Name of a function to call if\n there was an error. For example,\n some browsers do not support\n getUserMedia.
\n",type:"Function",optional:!0}],class:"p5.AudioIn",module:"p5.sound"},stop:{name:"stop",class:"p5.AudioIn",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"An object that accepts audio input,\n such as an FFT
\n",type:"Object",optional:!0}],class:"p5.AudioIn",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.AudioIn",module:"p5.sound"},getLevel:{name:"getLevel",params:[{name:"smoothing",description:"Smoothing is 0.0 by default.\n Smooths values based on previous values.
\n",type:"Number",optional:!0}],class:"p5.AudioIn",module:"p5.sound"},amp:{name:"amp",params:[{name:"vol",description:"between 0 and 1.0
\n",type:"Number"},{name:"time",description:"ramp time (optional)
\n",type:"Number",optional:!0}],class:"p5.AudioIn",module:"p5.sound"},getSources:{name:"getSources",params:[{name:"successCallback",description:"This callback function handles the sources when they\n have been enumerated. The callback function\n receives the deviceList array as its only argument
\n",type:"Function",optional:!0},{name:"errorCallback",description:"This optional callback receives the error\n message as its argument.
\n",type:"Function",optional:!0}],class:"p5.AudioIn",module:"p5.sound"},setSource:{name:"setSource",params:[{name:"num",description:"position of input source in the array
\n",type:"Number"}],class:"p5.AudioIn",module:"p5.sound"}},"p5.EQ":{bands:{name:"bands",class:"p5.EQ",module:"p5.sound"},process:{name:"process",params:[{name:"src",description:"Audio source
\n",type:"Object"}],class:"p5.EQ",module:"p5.sound"}},"p5.Panner3D":{panner:{name:"panner",class:"p5.Panner3D",module:"p5.sound"},process:{name:"process",params:[{name:"src",description:"Input source
\n",type:"Object"}],class:"p5.Panner3D",module:"p5.sound"},set:{name:"set",params:[{name:"xVal",description:"",type:"Number"},{name:"yVal",description:"",type:"Number"},{name:"zVal",description:"",type:"Number"},{name:"time",description:"",type:"Number"}],class:"p5.Panner3D",module:"p5.sound"},positionX:{name:"positionX",class:"p5.Panner3D",module:"p5.sound"},positionY:{name:"positionY",class:"p5.Panner3D",module:"p5.sound"},positionZ:{name:"positionZ",class:"p5.Panner3D",module:"p5.sound"},orient:{name:"orient",params:[{name:"xVal",description:"",type:"Number"},{name:"yVal",description:"",type:"Number"},{name:"zVal",description:"",type:"Number"},{name:"time",description:"",type:"Number"}],class:"p5.Panner3D",module:"p5.sound"},orientX:{name:"orientX",class:"p5.Panner3D",module:"p5.sound"},orientY:{name:"orientY",class:"p5.Panner3D",module:"p5.sound"},orientZ:{name:"orientZ",class:"p5.Panner3D",module:"p5.sound"},setFalloff:{name:"setFalloff",params:[{name:"maxDistance",description:"",type:"Number",optional:!0},{name:"rolloffFactor",description:"",type:"Number",optional:!0}],class:"p5.Panner3D",module:"p5.sound"},maxDist:{name:"maxDist",params:[{name:"maxDistance",description:"",type:"Number"}],class:"p5.Panner3D",module:"p5.sound"},rollof:{name:"rollof",params:[{name:"rolloffFactor",description:"",type:"Number"}],class:"p5.Panner3D",module:"p5.sound"}},"p5.Delay":{leftDelay:{name:"leftDelay",class:"p5.Delay",module:"p5.sound"},rightDelay:{name:"rightDelay",class:"p5.Delay",module:"p5.sound"},process:{name:"process",params:[{name:"Signal",description:"An object that outputs audio
\n",type:"Object"},{name:"delayTime",description:"Time (in seconds) of the delay/echo.\n Some browsers limit delayTime to\n 1 second.
\n",type:"Number",optional:!0},{name:"feedback",description:"sends the delay back through itself\n in a loop that decreases in volume\n each time.
\n",type:"Number",optional:!0},{name:"lowPass",description:"Cutoff frequency. Only frequencies\n below the lowPass will be part of the\n delay.
\n",type:"Number",optional:!0}],class:"p5.Delay",module:"p5.sound"},delayTime:{name:"delayTime",params:[{name:"delayTime",description:"Time (in seconds) of the delay
\n",type:"Number"}],class:"p5.Delay",module:"p5.sound"},feedback:{name:"feedback",params:[{name:"feedback",description:"0.0 to 1.0, or an object such as an\n Oscillator that can be used to\n modulate this param
\n",type:"Number|Object"}],class:"p5.Delay",module:"p5.sound"},filter:{name:"filter",params:[{name:"cutoffFreq",description:"A lowpass filter will cut off any\n frequencies higher than the filter frequency.
\n",type:"Number|Object"},{name:"res",description:"Resonance of the filter frequency\n cutoff, or an object (i.e. a p5.Oscillator)\n that can be used to modulate this parameter.\n High numbers (i.e. 15) will produce a resonance,\n low numbers (i.e. .2) will produce a slope.
\n",type:"Number|Object"}],class:"p5.Delay",module:"p5.sound"},setType:{name:"setType",params:[{name:"type",description:"'pingPong' (1) or 'default' (0)
\n",type:"String|Number"}],class:"p5.Delay",module:"p5.sound"},amp:{name:"amp",params:[{name:"volume",description:"amplitude between 0 and 1.0
\n",type:"Number"},{name:"rampTime",description:"create a fade that lasts rampTime
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Delay",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"",type:"Object"}],class:"p5.Delay",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.Delay",module:"p5.sound"}},"p5.Reverb":{process:{name:"process",params:[{name:"src",description:"p5.sound / Web Audio object with a sound\n output.
\n",type:"Object"},{name:"seconds",description:"Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n",type:"Number",optional:!0},{name:"decayRate",description:"Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n",type:"Number",optional:!0},{name:"reverse",description:"Play the reverb backwards or forwards.
\n",type:"Boolean",optional:!0}],class:"p5.Reverb",module:"p5.sound"},set:{name:"set",params:[{name:"seconds",description:"Duration of the reverb, in seconds.\n Min: 0, Max: 10. Defaults to 3.
\n",type:"Number",optional:!0},{name:"decayRate",description:"Percentage of decay with each echo.\n Min: 0, Max: 100. Defaults to 2.
\n",type:"Number",optional:!0},{name:"reverse",description:"Play the reverb backwards or forwards.
\n",type:"Boolean",optional:!0}],class:"p5.Reverb",module:"p5.sound"},amp:{name:"amp",params:[{name:"volume",description:"amplitude between 0 and 1.0
\n",type:"Number"},{name:"rampTime",description:"create a fade that lasts rampTime
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Reverb",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"",type:"Object"}],class:"p5.Reverb",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.Reverb",module:"p5.sound"}},"p5.Convolver":{convolverNode:{name:"convolverNode",class:"p5.Convolver",module:"p5.sound"},process:{name:"process",params:[{name:"src",description:"p5.sound / Web Audio object with a sound\n output.
\n",type:"Object"}],class:"p5.Convolver",module:"p5.sound"},impulses:{name:"impulses",class:"p5.Convolver",module:"p5.sound"},addImpulse:{name:"addImpulse",params:[{name:"path",description:"path to a sound file
\n",type:"String"},{name:"callback",description:"function (optional)
\n",type:"Function"},{name:"errorCallback",description:"function (optional)
\n",type:"Function"}],class:"p5.Convolver",module:"p5.sound"},resetImpulse:{name:"resetImpulse",params:[{name:"path",description:"path to a sound file
\n",type:"String"},{name:"callback",description:"function (optional)
\n",type:"Function"},{name:"errorCallback",description:"function (optional)
\n",type:"Function"}],class:"p5.Convolver",module:"p5.sound"},toggleImpulse:{name:"toggleImpulse",params:[{name:"id",description:"Identify the impulse by its original filename\n (String), or by its position in the\n .impulses Array (Number).
Beats Per Minute
\n",type:"Number"},{name:"rampTime",description:"Seconds from now
\n",type:"Number",optional:!0}],class:"p5.Part",module:"p5.sound"},getBPM:{name:"getBPM",class:"p5.Part",module:"p5.sound"},start:{name:"start",params:[{name:"time",description:"seconds from now
\n",type:"Number",optional:!0}],class:"p5.Part",module:"p5.sound"},loop:{name:"loop",params:[{name:"time",description:"seconds from now
\n",type:"Number",optional:!0}],class:"p5.Part",module:"p5.sound"},noLoop:{name:"noLoop",class:"p5.Part",module:"p5.sound"},stop:{name:"stop",params:[{name:"time",description:"seconds from now
\n",type:"Number",optional:!0}],class:"p5.Part",module:"p5.sound"},pause:{name:"pause",params:[{name:"time",description:"seconds from now
\n",type:"Number"}],class:"p5.Part",module:"p5.sound"},addPhrase:{name:"addPhrase",params:[{name:"phrase",description:"reference to a p5.Phrase
\n",type:"p5.Phrase"}],class:"p5.Part",module:"p5.sound"},removePhrase:{name:"removePhrase",params:[{name:"phraseName",description:"",type:"String"}],class:"p5.Part",module:"p5.sound"},getPhrase:{name:"getPhrase",params:[{name:"phraseName",description:"",type:"String"}],class:"p5.Part",module:"p5.sound"},replaceSequence:{name:"replaceSequence",params:[{name:"phraseName",description:"",type:"String"},{name:"sequence",description:"Array of values to pass into the callback\n at each step of the phrase.
\n",type:"Array"}],class:"p5.Part",module:"p5.sound"},onStep:{name:"onStep",params:[{name:"callback",description:"The name of the callback\n you want to fire\n on every beat/tatum.
\n",type:"Function"}],class:"p5.Part",module:"p5.sound"}},"p5.Score":{start:{name:"start",class:"p5.Score",module:"p5.sound"},stop:{name:"stop",class:"p5.Score",module:"p5.sound"},pause:{name:"pause",class:"p5.Score",module:"p5.sound"},loop:{name:"loop",class:"p5.Score",module:"p5.sound"},noLoop:{name:"noLoop",class:"p5.Score",module:"p5.sound"},setBPM:{name:"setBPM",params:[{name:"BPM",description:"Beats Per Minute
\n",type:"Number"},{name:"rampTime",description:"Seconds from now
\n",type:"Number"}],class:"p5.Score",module:"p5.sound"}},"p5.SoundLoop":{musicalTimeMode:{name:"musicalTimeMode",class:"p5.SoundLoop",module:"p5.sound"},maxIterations:{name:"maxIterations",class:"p5.SoundLoop",module:"p5.sound"},start:{name:"start",params:[{name:"timeFromNow",description:"schedule a starting time
\n",type:"Number",optional:!0}],class:"p5.SoundLoop",module:"p5.sound"},stop:{name:"stop",params:[{name:"timeFromNow",description:"schedule a stopping time
\n",type:"Number",optional:!0}],class:"p5.SoundLoop",module:"p5.sound"},pause:{name:"pause",params:[{name:"timeFromNow",description:"schedule a pausing time
\n",type:"Number",optional:!0}],class:"p5.SoundLoop",module:"p5.sound"},syncedStart:{name:"syncedStart",params:[{name:"otherLoop",description:"a p5.SoundLoop to sync with
\n",type:"Object"},{name:"timeFromNow",description:"Start the loops in sync after timeFromNow seconds
\n",type:"Number",optional:!0}],class:"p5.SoundLoop",module:"p5.sound"},bpm:{name:"bpm",class:"p5.SoundLoop",module:"p5.sound"},timeSignature:{name:"timeSignature",class:"p5.SoundLoop",module:"p5.sound"},interval:{name:"interval",class:"p5.SoundLoop",module:"p5.sound"},iterations:{name:"iterations",class:"p5.SoundLoop",module:"p5.sound"}},"p5.Compressor":{compressor:{name:"compressor",class:"p5.Compressor",module:"p5.sound"},process:{name:"process",params:[{name:"src",description:"Sound source to be connected
\n",type:"Object"},{name:"attack",description:"The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n",type:"Number",optional:!0},{name:"knee",description:'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n',type:"Number",optional:!0},{name:"ratio",description:"The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n",type:"Number",optional:!0},{name:"threshold",description:"The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n",type:"Number",optional:!0},{name:"release",description:"The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n",type:"Number",optional:!0}],class:"p5.Compressor",module:"p5.sound"},set:{name:"set",params:[{name:"attack",description:"The amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n",type:"Number"},{name:"knee",description:'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n',type:"Number"},{name:"ratio",description:"The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n",type:"Number"},{name:"threshold",description:"The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n",type:"Number"},{name:"release",description:"The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n",type:"Number"}],class:"p5.Compressor",module:"p5.sound"},attack:{name:"attack",params:[{name:"attack",description:"Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n default = .003, range 0 - 1
\n",type:"Number",optional:!0},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],class:"p5.Compressor",module:"p5.sound"},knee:{name:"knee",params:[{name:"knee",description:'A decibel value representing the range above the\n threshold where the curve smoothly transitions to the "ratio" portion.\n default = 30, range 0 - 40
\n',type:"Number",optional:!0},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],class:"p5.Compressor",module:"p5.sound"},ratio:{name:"ratio",params:[{name:"ratio",description:"The amount of dB change in input for a 1 dB change in output\n default = 12, range 1 - 20
\n",type:"Number",optional:!0},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],class:"p5.Compressor",module:"p5.sound"},threshold:{name:"threshold",params:[{name:"threshold",description:"The decibel value above which the compression will start taking effect\n default = -24, range -100 - 0
\n",type:"Number"},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],class:"p5.Compressor",module:"p5.sound"},release:{name:"release",params:[{name:"release",description:"The amount of time (in seconds) to increase the gain by 10dB\n default = .25, range 0 - 1
\n",type:"Number"},{name:"time",description:"Assign time value to schedule the change in value
\n",type:"Number",optional:!0}],class:"p5.Compressor",module:"p5.sound"},reduction:{name:"reduction",class:"p5.Compressor",module:"p5.sound"}},"p5.SoundRecorder":{setInput:{name:"setInput",params:[{name:"unit",description:"p5.sound object or a web audio unit\n that outputs sound
\n",type:"Object",optional:!0}],class:"p5.SoundRecorder",module:"p5.sound"},record:{name:"record",params:[{name:"soundFile",description:"p5.SoundFile
\n",type:"p5.SoundFile"},{name:"duration",description:"Time (in seconds)
\n",type:"Number",optional:!0},{name:"callback",description:"The name of a function that will be\n called once the recording completes
\n",type:"Function",optional:!0}],class:"p5.SoundRecorder",module:"p5.sound"},stop:{name:"stop",class:"p5.SoundRecorder",module:"p5.sound"}},"p5.PeakDetect":{isDetected:{name:"isDetected",class:"p5.PeakDetect",module:"p5.sound"},update:{name:"update",params:[{name:"fftObject",description:"A p5.FFT object
\n",type:"p5.FFT"}],class:"p5.PeakDetect",module:"p5.sound"},onPeak:{name:"onPeak",params:[{name:"callback",description:"Name of a function that will\n be called when a peak is\n detected.
\n",type:"Function"},{name:"val",description:"Optional value to pass\n into the function when\n a peak is detected.
\n",type:"Object",optional:!0}],class:"p5.PeakDetect",module:"p5.sound"}},"p5.Gain":{setInput:{name:"setInput",params:[{name:"src",description:"p5.sound / Web Audio object with a sound\n output.
\n",type:"Object"}],class:"p5.Gain",module:"p5.sound"},connect:{name:"connect",params:[{name:"unit",description:"",type:"Object"}],class:"p5.Gain",module:"p5.sound"},disconnect:{name:"disconnect",class:"p5.Gain",module:"p5.sound"},amp:{name:"amp",params:[{name:"volume",description:"amplitude between 0 and 1.0
\n",type:"Number"},{name:"rampTime",description:"create a fade that lasts rampTime
\n",type:"Number",optional:!0},{name:"timeFromNow",description:"schedule this event to happen\n seconds from now
\n",type:"Number",optional:!0}],class:"p5.Gain",module:"p5.sound"}},"p5.Distortion":{WaveShaperNode:{name:"WaveShaperNode",class:"p5.Distortion",module:"p5.sound"},process:{name:"process",params:[{name:"amount",description:"Unbounded distortion amount.\n Normal values range from 0-1.
\n",type:"Number",optional:!0,optdefault:"0.25"},{name:"oversample",description:"'none', '2x', or '4x'.
\n",type:"String",optional:!0,optdefault:"'none'"}],class:"p5.Distortion",module:"p5.sound"},set:{name:"set",params:[{name:"amount",description:"Unbounded distortion amount.\n Normal values range from 0-1.
\n",type:"Number",optional:!0,optdefault:"0.25"},{name:"oversample",description:"'none', '2x', or '4x'.
\n",type:"String",optional:!0,optdefault:"'none'"}],class:"p5.Distortion",module:"p5.sound"},getAmount:{name:"getAmount",class:"p5.Distortion",module:"p5.sound"},getOversample:{name:"getOversample",class:"p5.Distortion",module:"p5.sound"}}}},{}],2:[function(e,t,r){"use strict";r.byteLength=function(e){var t=c(e),r=t[0],n=t[1];return 3*(r+n)/4-n},r.toByteArray=function(e){var t,r,n=c(e),a=n[0],o=n[1],i=new u(function(e,t){return 3*(e+t)/4-t}(a,o)),s=0,l=0