i18n-tracking.yml

es:
  src/data/en.yml:
    line 1552: '  teach-case6-alt'
    line 1560: '  teach-case8-alt'
    line 1568: '  teach-case9-alt'
    line 1576: '  teach-case11-alt'
    line 1584: '  teach-case12-alt'
    line 1592: '  teach-case13-alt'
    line 1600: '  teach-case14-alt'
    line 1608: '  teach-case15-alt'
    line 1616: '  teach-case16-alt'
    line 1624: '  teach-case17-alt'
    line 1536: '  teach-case2-alt'
    line 1544: '  teach-case4-alt'
    line 1517: '  teach-case1-title'
    line 1527: '  teach-case2-content5-1'
    line 1528: '  teach-case2-content5-2'
    line 1537: '  teach-case4-title'
    line 1545: '  teach-case13-title'
    line 1546: '  teach-case13-lead-name'
    line 1547: '  teach-case13-speech'
    line 1548: '    I''m working on a new series of coding class for Disabled students in South'
    line 1549: '    Korea. I''m researching about the pedagogy and translation. I plan to hold'
    line 1550: '    workshops in December 2020. The project is supported by the Open Society'
    line 1551: '    Foundation Human Rights Initiative and Korea Disability Arts & Culture'
    line 1553: '  teach-case13-content1'
    line 1554: '  teach-case13-content1-1'
    line 1555: '  teach-case13-content2'
    line 1556: '  teach-case13-content3'
    line 1557: '  teach-case13-content4'
    line 1558: '    Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
    line 1559: '  teach-case13-content5'
    line 1561: '  teach-case13-content5-1'
    line 1562: ''
    line 1563: '  teach-case14-title'
    line 1564: '  teach-case14-lead-name'
    line 1565: '  teach-case14-speech'
    line 1566: '    The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
    line 1567: '  teach-case14-content1'
    line 1569: '  teach-case14-content1-2'
    line 1570: '  teach-case14-content2'
    line 1571: '  teach-case14-content3'
    line 1572: '  teach-case14-content4'
    line 1573: '    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 1574: '    the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
    line 1575: '  teach-case14-content5'
    line 1577: '  teach-case14-content5-1'
    line 1578: '    1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
    line 1579: '  teach-case14-content5-2'
    line 1580: '    2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
    line 1581: '  teach-case14-content5-3'
    line 1582: '    3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
    line 1583: '  teach-case14-content5-4'
    line 1585: '  teach-case14-content5-5'
    line 1586: '  teach-case15-title'
    line 1587: '  teach-case15-lead-name'
    line 1588: '  teach-case15-content1'
    line 1589: '   L''École de Design Nantes Atlantique, France'
    line 1590: '  teach-case15-content1-1'
    line 1591: '  teach-case15-content2'
    line 1593: '  teach-case15-content3'
    line 1594: '  teach-case15-content4'
    line 1595: '    To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
    line 1596: '  teach-case15-content5'
    line 1597: '    GitHub Readme File'
    line 1598: '  teach-case15-content5-1'
    line 1599: '  teach-case16-title'
    line 1601: '  teach-case16-lead-name'
    line 1602: '  teach-case16-speech'
    line 1603: '    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 1604: '  teach-case16-content1'
    line 1605: '  teach-case16-content1-1'
    line 1606: '  teach-case16-content2'
    line 1607: '  teach-case16-content2-1'
    line 1609: '  teach-case16-content3'
    line 1610: '  teach-case16-content4'
    line 1611: '    Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
    line 1612: '    this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
    line 1613: '  teach-case16-content5'
    line 1614: '    p5for50+ web app'
    line 1615: '  teach-case16-content5-1'
    line 1617: '  teach-case16-content5-2'
    line 1618: '  teach-case16-content5-3'
    line 1619: '  teach-case16-content5-4'
    line 1620: ''
    line 1621: '  teach-case17-title'
    line 1622: '  teach-case17-lead-name'
    line 1623: '  teach-case17-speech'
    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 1123: '  book-6-title'
    line 1124: '  book-6-authors'
    line 1125: '  book-6-publisher'
    line 1126: '  book-6-pages'
    line 1127: '  book-6-type'
    line 1128: '  book-6-description'
    line 1129: '    Using p5.js, this book introduces and demonstrates the reflexive practice '
    line 1130: '    of aesthetic programming, engaging with learning to program as a way to '
    line 1131: '    understand and question existing technological objects and paradigms, '
    line 1132: '    and to explore the  potential for reprogramming wider eco-socio-technical systems.'
    line 1133: '  book-6-order-a'
    line 1134: '  book-6-order-b'
    line 162: '    library in your html. To learn more visit '
    line 163: '    library in your html. To learn more visit '
    line 164: '  your-first-sketch7'
    line 97: '  get-started-button'
    line 96: '  get-started7'
    line 114: '  environment15'
    line 113: '  environment14'
    line 115: '  environment16'
    line 102: '  download8'
    line 103: '  download9'
    line 104: '  download10'
    line 105: '  download11'
    line 256: '    , the organization that supports p5.js.'
    line 251: '    We need your help! p5.js is free, open-source software. We want to make our community as open'
    line 269: '    Your donation supports software development for p5.js, education resources'
    line 265: '    and inclusive as possible. You can support this work by making a donation to'
    line 266: '    the '
    line 267: '  support-2'
    line 268: '    , the organization that supports p5.js. We need your help!'
    line 275: '  support-3'
    line 276: '  support-4'
    line 277: '  support-5'
    line 37: Editor
    line 55: footer5
    line 123: '  p3xh2'
    line 41: Reference
    line 118: '  p2x3'
    line 128: '  p3xp5'
    line 59: tagline4
    line 136: '  p4xp6'
    line 243: '  settingUp-title'
    line 62: tagline7
    line 45: Books
    line 34: Language-Settings
    line 35: Sidebar-Title
    line 36: Home
    line 38: Download
    line 39: Donate
    line 40: Start
    line 42: Libraries
    line 43: Learn
    line 56: tagline1
    line 60: tagline5
    line 61: tagline6
    line 111: '    identity and expression, sexual orientation, race, ethnicity, language,'
    line 112: '    neuro-type, size, disability, class, religion, culture, subculture,'
    line 116: '    kinds. We facilitate and foster access and empowerment. We are all learners.'
    line 117: '  p2x2'
    line 119: '  p2x4'
    line 120: '  p2x5'
    line 121: '  p2x6'
    line 122: '  p2x7'
    line 124: '  p3xp1'
    line 125: '  p3xp2'
    line 126: '  p3xp3'
    line 127: '  p3xp4'
    line 137: '  sketch_credits'
    line 138: '  sketch_info'
    line 271: '    Open Sublime. Go to the File menu and choose Open... and choose the folder'
    line 272: '    that your html and js files are located in. On the left sidebar, you should'
    line 273: '    find the folder name at the top, with a list of the files contained in the'
    line 282: '  environment12'
    line 283: '  environment13'
    line 284: '  your-first-sketch-title'
    line 285: '  your-first-sketch-intro1'
    line 286: '  your-first-sketch-intro2'
    line 287: '  your-first-sketch-intro3'
    line 288: '  your-first-sketch-intro4'
    line 289: '  your-first-sketch1'
    line 290: '  your-first-sketch2'
    line 291: '  your-first-sketch3'
    line 292: '  your-first-sketch4'
    line 293: '    The line you just added draws an ellipse, with its center 50 pixels over'
    line 294: '    from the left and 50 pixels down from the top, with a width and height of 80'
    line 295: '    pixels.'
    line 296: '  your-first-sketch5'
    line 297: '  your-first-sketch6'
    line 298: '    If you are using a screen reader, you must turn on the accessible outputs in'
    line 299: '    the p5 online editor, outside the editor you must add the accessibility'
    line 300: '    library in your html. To learn more visit'
    line 301: '  your-first-sketch7'
    line 302: '  your-first-sketch8'
    line 303: '    If you''ve typed everything correctly, this will appear in the display'
    line 304: '    window'
    line 305: '  your-first-sketch9'
    line 306: '  your-first-sketch10'
    line 307: '    If nothing appears, the editor may be having trouble understanding what'
    line 308: '    you’ve typed. If this happens, make sure that you''ve copied the example code'
    line 309: '    exactly'
    line 310: '    between each of them, the line should end with a semicolon, and ellipse has'
    line 311: '    to be spelled correctly.'
    line 312: '  your-first-sketch11'
    line 313: '    One of the most difficult things about getting started with programming is'
    line 314: '    that you have to be very specific about the syntax. The browser isn''t always'
    line 315: '    smart enough to know what you mean, and can be quite fussy about the'
    line 316: '    placement of punctuation. You''ll get used to it with a little practice. In'
    line 317: '    the bottom left of the editor you will find the console section. Here, you'
    line 318: '    can find messages from the editor with details about any errors it'
    line 319: '    encounters.'
    line 320: '  your-first-sketch12'
    line 321: '    Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
    line 322: '    last example to try this'
    line 323: '  your-first-sketch13'
    line 324: '    This program creates a canvas that is 400 pixels wide and 400 pixels high,'
    line 325: '    and then starts drawing white circles at the position of the mouse. When a'
    line 326: '    mouse button is pressed, the circle color changes to black. Run the code,'
    line 327: '    move the mouse, and click to experience it.'
    line 328: '  your-first-sketch14'
    line 329: '  first-sketch-heading1'
    line 330: '  first-sketch-heading2'
    line 331: '  first-sketch-heading3'
    line 332: '  what-next-title'
    line 333: '  learn1'
    line 334: '  learn2'
    line 335: '  learn3'
    line 336: '  learn4'
    line 337: '  learn5'
    line 338: '  learn6'
    line 339: '  learn7'
    line 340: '  learn8'
    line 341: '  learn9'
    line 342: '  learn10'
    line 343: '  reference1'
    line 344: '  reference2'
    line 345: '  reference3'
    line 346: '  learn11'
    line 347: '  learn12'
    line 348: '  processing-transition1'
    line 349: '  processing-transition2'
    line 350: '  processing-transition3'
    line 351: '  processing-transition4'
    line 352: '  book1'
    line 353: '    Parts of this tutorial were adapted from the book, Getting Started with'
    line 354: '    p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
    line 355: '    Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
    line 356: '    Contributors Conference.'
    line 44: Examples
    line 57: tagline2
    line 146: '  copyright-title'
    line 231: '  get-started-title'
    line 240: '    . If you would like to work on the the desktop version of p5.js you can'
    line 258: '  download7'
    line 281: '    file manager or type'
    line 54: footer4
    line 110: '    We are a community of, and in solidarity with, people from every gender'
    line 239: '  get-started6'
    line 259: '  environment-title'
    line 274: '    folder directly below.'
    line 875: '  writing-a-tutorial-iframe-4'
    line 233: '    This page walks you through setting up a p5.js project and making your first'
    line 234: '    sketch.'
    line 244: '  download-title'
    line 245: '  hosted-title'
    line 50: footerxh1
    line 98: '  p1x1'
    line 99: '    p5.js is a JavaScript library for creative coding, with a focus on making'
    line 100: '    coding accessible and inclusive for artists, designers, educators,'
    line 109: '  p2x1'
    line 129: '  p3xp6'
    line 148: '    The p5.js library is free software; you can redistribute it and/or modify it'
    line 46: Community
    line 133: '  p4xp3'
    line 134: '  p4xp4'
    line 141: '  project-a-2-5-phuong'
    line 144: '  project-a-2-7-phuong'
    line 64: '  color-p3x3'
    line 70: '  color-rgb-p1x1'
    line 87: '  color-custom-ranges-p2x1'
    line 24: footer1
    line 25: footer2
    line 26: footer3
    line 27: footer4
    line 77: '  color-rgb-p2x1'
    line 82: '  color-transparency-p2x1'
    line 139: '  project-a-2-7-phuong'
    line 76: '  color-transparency-p1x1'
    line 31: tagline7
    line 63: '  hosted-title'
    line 75: '  download9'
    line 140: '  learn5'
    line 142: '  learn7'
    line 143: '  learn8'
    line 145: '  learn10'
    line 159: '  processing-transition1'
    line 160: '  processing-transition2'
    line 161: '  processing-transition3'
    line 357: '  link-2-chung'
    line 358: '  link-3-chung'
    line 359: '  project-a-1-1-chung'
    line 360: '  project-a-1-2-chung'
    line 361: '  project-a-1-3-chung'
    line 362: '  project-a-2-1-chung'
    line 363: '  dan-shiffman-matterjs-tutorial'
    line 364: '  project-a-2-2-chung'
    line 365: '  project-a-3-1-chung'
    line 366: '  project-a-3-2-chung'
    line 367: '  project-a-4-1-chung'
    line 368: '  project-a-4-2-chung'
    line 369: '  project-a-4-3-chung'
    line 370: '  project-a-5-1-chung'
    line 371: '  project-a-5-2-chung'
    line 372: ''
    line 373: '  creator-from-casey-louise'
    line 374: '  project-a-1-1-casey-louise'
    line 375: '  project-a-1-2-casey-louise'
    line 376: '  project-a-1-3-casey-louise'
    line 377: '  project-a-1-4-casey-louise'
    line 378: '  project-a-1-5-casey-louise'
    line 379: '  project-a-2-1-casey-louise'
    line 380: '  project-a-2-2-casey-louise'
    line 381: '  project-a-3-1-casey-louise'
    line 382: '  project-a-3-2-casey-louise'
    line 383: '  project-a-3-3-casey-louise'
    line 384: '  project-a-3-4-casey-louise'
    line 385: '  project-a-3-5-casey-louise'
    line 386: '  project-a-4-1-casey-louise'
    line 387: '  adam-ferris-repo-casey-louise'
    line 388: '  project-a-4-2-casey-louise'
    line 389: '  project-a-4-3-casey-louise'
    line 390: '  project-a-4-4-casey-louise'
    line 391: '  webgl-casey-louise'
    line 392: '  project-a-4-5-casey-louise'
    line 393: '  project-a-4-6-casey-louise'
    line 394: '  openframeworks-book-casey-louise'
    line 395: '  project-a-4-7-casey-louise'
    line 396: '  project-a-5-1-casey-louise'
    line 397: '  project-a-5-2-casey-louise'
    line 398: ''
    line 399: '  pronouns-nonbinary'
    line 400: '  creator-from-moon'
    line 401: '  posters-by'
    line 402: '  project-a-1-1-moon'
    line 403: '  project-a-1-2-moon'
    line 404: '  project-a-1-3-moon'
    line 405: '  project-a-1-4-moon'
    line 406: '  pcd-la-moon'
    line 407: '  project-a-1-5-moon'
    line 408: '  project-a-2-1-moon'
    line 409: '  codetrain-moon'
    line 410: '  project-a-2-2-moon'
    line 411: '  p5-reference-moon'
    line 412: '  project-a-2-3-moon'
    line 413: '  project-a-3-1-moon'
    line 414: '  project-a-3-2-moon'
    line 415: '  project-a-3-3-moon'
    line 416: '  project-a-3-4-moon'
    line 417: '  project-a-4-1-moon'
    line 418: '  project-a-5-1-moon'
    line 419: '  project-a-5-2-moon'
    line 79: '  environment1'
    line 88: '  environment8'
    line 173: '  complete-library-intro1'
    line 182: '  learn3'
    line 191: '  writing-a-tutorial-embedding-7'
    line 197: '  writing-a-tutorial-iframe-1'
    line 204: '  writing-a-tutorial-iframe-7'
    line 213: '  color-description1'
    line 222: '  coordinate-system-description3'
    line 69: '  download5'
    line 74: '  download8'
    line 78: '  environment1'
    line 157: '  learn11'
    line 172: '  complete-library-intro1'
    line 181: '  learn3'
    line 190: '  writing-a-tutorial-embedding-7'
    line 196: '  writing-a-tutorial-iframe-1'
    line 203: '  writing-a-tutorial-iframe-7'
    line 212: '  color-description1'
    line 221: '  coordinate-system-description3'
    line 230: '  coordinate-system-simple-shapes-p1x1'
    line 66: '  sketch_credits'
    line 67: '  sketch_info'
    line 22: footer1
    line 23: footer2
    line 32: '  download-intro'
    line 65: '  color-rgb-p1x1'
    line 72: '  color-rgb-p2x1'
    line 85: '  color-custom-ranges-p4x1'
    line 28: footer5
    line 81: '  color-transparency-p1x1'
    line 90: '  color-custom-ranges-p4x1'
    line 153: '  project-a-4-7-casey-louise'
    line 33: Skip-To-Content
    line 47: Contribute
    line 48: Forum
    line 49: Showcase
    line 51: footer1
    line 52: footer2
    line 53: footer3
    line 58: tagline3
    line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
    line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
    line 107: '    text, input, video, webcam, and sound.'
    line 108: '  p2xh2'
    line 130: '  p4xh2'
    line 131: '  p4xp1'
    line 132: '  p4xp2'
    line 135: '  p4xp5'
    line 147: '  copyright1'
    line 149: '    under the terms of the'
    line 150: '  copyright2'
    line 151: '  copyright3'
    line 152: '  copyright4'
    line 232: '  get-started1'
    line 235: '  get-started2'
    line 236: '  get-started3'
    line 237: '  get-started4'
    line 238: '  get-started5'
    line 241: '    scroll down to'
    line 242: '  get-started7'
    line 246: '  download1'
    line 247: '  download2'
    line 248: '  download3'
    line 249: '  download4'
    line 250: '    If you look in index.html, you''ll notice that it links to the file p5.js. If'
    line 252: '    loading), change the link to p5.min.js.'
    line 253: '  download5'
    line 254: '    Alternatively, you can link to a p5.js file hosted online. All versions of'
    line 255: '    p5.js are stored in a CDN (Content Delivery Network). You can find a history'
    line 257: '  download6'
    line 260: '  environment1'
    line 261: '  environmentlink'
    line 262: '  environment2'
    line 263: '  environment3'
    line 264: '  environment4'
    line 270: '  environment8'
    line 278: '  environment10'
    line 279: '  environment11'
    line 280: '    Open the index.html file in your browser by double clicking on it in your'
    line 436: '  Download'
    line 437: '  download-intro'
    line 438: '    Welcome! While titled "Download" this page actually contains a collection of'
    line 439: '    links to either download the library or begin working with it online. We''ve'
    line 440: '    tried to order things to reflect what a beginner might want first, to'
    line 441: '    resources that more experienced programmers may be looking for.'
    line 442: '  editor-title'
    line 443: '  p5.js-editor'
    line 444: '  p5.js-editor-intro'
    line 445: '    This link redirects you to the p5.js Editor online so you can begin using'
    line 446: '    p5.js immediately.'
    line 447: '  editor-includes'
    line 448: '  complete-library-title'
    line 449: '  complete-library-intro1'
    line 450: '    This is a download containing the p5.js library file, the p5.sound addon,'
    line 451: '    and an example project. It does not contain an editor. Visit'
    line 452: '  complete-library-intro2'
    line 453: '  complete-library-intro3'
    line 454: '  p5.js-complete'
    line 455: '  includes-1'
    line 456: '  includes-2'
    line 457: '  includes-3'
    line 458: '  single-files-title'
    line 459: '  single-files-intro'
    line 460: '    These are downloads or links to the p5.js library file. No additional'
    line 461: '    contents are included.'
    line 462: '  single-file'
    line 463: '  p5.js-uncompressed'
    line 464: '  compressed'
    line 465: '  link'
    line 466: '  statically-hosted-file'
    line 467: '  etc-title'
    line 468: '  older-releases'
    line 469: '  github-repository'
    line 470: '  report-bugs'
    line 471: '  supported-browsers'
    line 472: '  support-title'
    line 473: '  support-options'
    line 474: '  support-1'
    line 475: '    p5.js is free, open-source software. We want to make our community as open'
    line 476: '    and inclusive as possible. You can support this work by'
    line 477: '  support-2'
    line 478: '  support-3'
    line 479: '  support-4'
    line 480: '  support-5'
    line 481: '  support-6'
    line 482: '  support-7'
    line 483: '  support-8'
    line 484: '  support-9'
    line 485: '  support-10'
    line 486: '  support-11'
    line 487: '  support-12'
    line 488: '    Your membership supports software development (for p5.js, Processing,'
    line 489: '    Processing.py, Processing for Android and ARM devices, education resources'
    line 490: '    like code examples and tutorials,'
    line 491: '  support-13'
    line 492: '  support-14'
    line 493: '  support-15'
    line 494: '  support-16'
    line 495: '  support-17'
    line 496: '    p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
    line 497: '    Pittsburgh (Image credit'
    line 498: '  support-18'
    line 499: '    Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
    line 500: '    workshops in London (Image credit'
    line 501: '  support-19'
    line 502: '    Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
    line 503: '    Kira Simon-Kennedy)'
    line 504: '  support-20'
    line 505: '    Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
    line 506: '    (Image credit'
    line 507: '  support-21'
    line 508: '    Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
    line 509: '    credit'
    line 510: '  support-22'
    line 511: '  support-23'
    line 512: '    Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
    line 513: '    (Image credit'
    line 514: '  support-24'
    line 515: '    Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
    line 516: '    workshop led by Taeyoon Choi (Image credit'
    line 517: '  support-25'
    line 518: '    p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
    line 519: '    Pittsburgh (Image credit'
    line 520: '  support-26'
    line 521: '    Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
    line 522: '    International Center of Photography (Image credit'
    line 523: '    Photography)'
    line 524: '  support-27'
    line 525: '    Participants at p5.js workshop in Santiago, Chile, led by Aarón'
    line 526: '    Montoya-Moraga (Image credit'
    line 527: '  support-28'
    line 528: '    Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
    line 529: '    led by Taeyoon Choi (Image credit'
    line 530: '  support-29'
    line 531: '    Processing Foundation Fellow DIY Girls run a creative coding program in Los'
    line 532: '    Angeles (Image credit'
    line 533: '  support-30'
    line 534: '  support-31'
    line 535: '  support-32'
    line 536: '  support-33'
    line 537: '  support-17-alt'
    line 538: '  support-18-alt'
    line 539: '  support-19-alt'
    line 540: '  support-20-alt'
    line 541: '  support-21-alt'
    line 542: '  support-22-alt'
    line 543: '  support-23-alt'
    line 544: '  support-24-alt'
    line 545: '  support-25-alt'
    line 546: '  support-26-alt'
    line 547: '  support-27-alt'
    line 548: '  support-28-alt'
    line 549: '  support-29-alt'
    line 550: '  support-30-alt'
    line 551: '  support-31-alt'
    line 729: '  learn-title'
    line 730: '  teach-title2'
    line 731: '  learn1'
    line 732: '    These tutorials provide more in-depth or step-by-step overviews of'
    line 733: '    particular topics. Check out the '
    line 734: '  learn2'
    line 735: '  learn3'
    line 736: '  introduction-to-p5js-title'
    line 737: '  hello-p5js-title'
    line 738: '  hello-p5js'
    line 739: '    This short video will introduce you to the library and what you can do with'
    line 740: '    it.'
    line 741: '  getting-started-title'
    line 742: '  getting-started'
    line 743: '    Welcome to p5.js! <br> This introduction covers the basics of setting up a'
    line 744: '    p5.js project.'
    line 745: '  p5js-overview-title'
    line 746: '  p5js-overview'
    line 747: '  p5js-processing-title'
    line 748: '  p5js-processing'
    line 749: '    The main differences between the two, and how to convert from one to the'
    line 750: '    other.'
    line 751: '  p5-screen-reader-title'
    line 752: '  p5-screen-reader'
    line 753: '  using-local-server-title'
    line 754: '  using-local-server'
    line 755: '  p5js-wiki-title'
    line 756: '  p5js-wiki'
    line 757: '  connecting-p5js-title'
    line 758: '  creating-libraries-title'
    line 759: '  creating-libraries'
    line 760: '  nodejs-and-socketio-title'
    line 761: '  nodejs-and-socketio'
    line 762: '  programming-topics-title'
    line 763: '  beyond-the-canvas-title'
    line 764: '  beyond-the-canvas'
    line 765: '  3d-webgl-title'
    line 766: '  3d-webgl'
    line 767: '  color-title'
    line 768: '  color'
    line 769: '  coordinate-system-and-shapes-title'
    line 770: '  coordinate-system-and-shapes'
    line 771: '  interactivity-title'
    line 772: '  interactivity'
    line 773: '  program-flow-title'
    line 774: '  program-flow'
    line 775: '  curves-title'
    line 776: '  curves'
    line 777: '    An introduction to the three types of curves in p5.js'
    line 778: '    and Bézier curves.'
    line 779: '  becoming-a-better-programmer-title'
    line 780: '  debugging-title'
    line 781: '  debugging'
    line 782: '  optimizing-title'
    line 783: '  optimizing'
    line 784: '    A tutorial of tips and tricks for optimizing your code to make it run faster'
    line 785: '    and smoother.'
    line 786: '  test-driven-development-title'
    line 787: '  test-driven-development'
    line 788: '    Save yourself from agony on install day. What is unit testing and how to use'
    line 789: '    it? By Andy Timmons.'
    line 790: '  contributing-to-the-community-title'
    line 791: '  development-title'
    line 792: '  development'
    line 793: '  looking-inside-title'
    line 794: '  looking-inside'
    line 795: '    A friendly intro to the file structure and tools for p5.js development, by'
    line 796: '    Luisa Pereira.'
    line 797: '  writing-tutorial-title'
    line 798: '  writing-tutorial'
    line 799: '  writing-a-tutorial-title'
    line 800: '  writing-a-tutorial-author'
    line 801: '  writing-a-tutorial-1'
    line 802: '    We invite educators, contributors and general enthusiasts to contribute p5js'
    line 803: '    tutorials. The p5js project makes creative coding and open source'
    line 804: '    development more accessible to a diverse community and we are excited to'
    line 805: '    publish tutorials on all aspects of the development process. Our learning'
    line 806: '    materials so far include guides on learning p5, programming technique and'
    line 807: '    how to contribute to an open source project.'
    line 808: '  writing-a-tutorial-2'
    line 809: '    We welcome new written tutorial contributions and this guide outlines the'
    line 810: '    steps of how to propose, prepare and contribute.'
    line 811: '  writing-a-tutorial-how-start-title'
    line 812: '  writing-a-tutorial-how-start-1'
    line 813: '  writing-a-tutorial-how-start-2'
    line 814: '  writing-a-tutorial-how-start-3'
    line 815: '    that outlines in progress tutorials. If your topic is listed as in progress,'
    line 816: '    perhaps you can add to work being done and contribute to preparing existing'
    line 817: '    work for publication so please reach out to us.'
    line 818: '  writing-a-tutorial-how-start-4'
    line 819: '    If your topic is not already covered and is not listed as in progress,'
    line 820: '    please write a few sentences on what you propose to cover and email us this'
    line 821: '    description at education@p5js.org.'
    line 822: '  writing-a-tutorial-how-prepare-title'
    line 823: '  writing-a-tutorial-how-prepare-1'
    line 824: '    When your tutorial is ready for publication, please follow these steps to'
    line 825: '    prepare your content for the p5js website.'
    line 826: '  writing-a-tutorial-how-prepare-2'
    line 827: '  writing-a-tutorial-how-prepare-3'
    line 828: '  writing-a-tutorial-how-prepare-4'
    line 829: '  writing-a-tutorial-how-prepare-5'
    line 830: '    The folder containing your tutorial will be placed in the ''tutorials'' folder'
    line 831: '    of the p5js site. The file called index.hbs is the '
    line 832: '  writing-a-tutorial-how-prepare-6'
    line 833: '  writing-a-tutorial-how-prepare-7'
    line 834: '  writing-a-tutorial-how-prepare-8'
    line 835: '  writing-a-tutorial-how-prepare-9'
    line 836: '    tags on the page, with formatting defined by the &lt;h1&gt; and &lt;h2&gt;'
    line 837: '    tags, the &lt;p&gt; paragraph tags as is done shown on the'
    line 838: '  writing-a-tutorial-how-prepare-10'
    line 839: '  writing-a-tutorial-how-prepare-11'
    line 840: '    If your tutorial contains images, they are to be placed in the assets folder'
    line 841: '    of the p5 site, in the location src/assets/learn/test-tutorial/images as'
    line 842: '    shown below.'
    line 843: '  writing-a-tutorial-how-prepare-12'
    line 844: '  writing-a-tutorial-embedding-title'
    line 845: '  writing-a-tutorial-embedding-1'
    line 846: '    Using p5js means you can illustrate your tutorial with animated, interactive'
    line 847: '    or editable code examples to demonstrate programming concepts. Your examples'
    line 848: '    should be prepared as p5.js sketches and can be embedded into the tutorial'
    line 849: '    in two ways.'
    line 850: '  writing-a-tutorial-embedding-2'
    line 851: '  writing-a-tutorial-embedding-3'
    line 852: '  writing-a-tutorial-embedding-4'
    line 853: '  writing-a-tutorial-embedding-5'
    line 854: '  writing-a-tutorial-embedding-6'
    line 855: '  writing-a-tutorial-embedding-7'
    line 856: '  writing-a-tutorial-embedding-8'
    line 857: '  writing-a-tutorial-embedding-9'
    line 858: '  writing-a-tutorial-embedding-10'
    line 859: '    If the example is to be animated and/or interactive but not editable. The'
    line 860: '    p5.js sketch should be embedded into the page as an iframe as described'
    line 861: '    below.'
    line 862: '  writing-a-tutorial-iframe-title'
    line 863: '  writing-a-tutorial-iframe-1'
    line 864: '    An iframe is like creating a window through which you can explore another'
    line 865: '    page, sandboxed from the rest of your page. In this case it will be a window'
    line 866: '    to the index.html containing your p5.js sketch. '
    line 867: '  writing-a-tutorial-iframe-2'
    line 868: '    Put your p5 sketches in the /src/assets/learn folder of the site, in a'
    line 869: '    folder labelled with the name of your sketch as shown in the screenshot.'
    line 870: '    This is where all the images and p5 sketches linked by iframe should be'
    line 871: '    stored.'
    line 872: '  writing-a-tutorial-iframe-3'
    line 873: '    In the subfolders containing your p5 examples there should be a sketch.js'
    line 874: '    file and the embed.html file for the sketch. '
    line 876: '    Make sure your embed.html file has the correct paths to the p5 libraries of'
    line 877: '    the site. If your file structure is the same as above, the path to the p5.js'
    line 878: '    library should be "../../../js/p5.min.js".'
    line 879: '  writing-a-tutorial-iframe-5'
    line 880: '    You can then embed the p5js index files as iframes in the .hbs file that'
    line 881: '    contains your tutorial content. The embed code for the iframe would then'
    line 882: '    be'
    line 883: '  writing-a-tutorial-iframe-6'
    line 884: '    Styling for the iframe (this could directly into the post or in a'
    line 885: '    stylesheet)'
    line 886: '  writing-a-tutorial-iframe-7'
    line 887: '  writing-a-tutorial-iframe-8'
    line 888: '  writing-a-tutorial-iframe-9'
    line 889: '    One thing to note is that you need to manually set the size of the iframe,'
    line 890: '    so it works best if things are a standard size.'
    line 891: '  writing-a-tutorial-iframe-10'
    line 892: '    Also note that the links to the p5.js library files do not happen from the'
    line 893: '    .eps page with all the tutorial content. Instead they will be located in the'
    line 894: '    html page that is rendering your sketch (in this case, called embed.html).'
    line 895: '  writing-a-tutorial-iframe-11'
    line 896: '  writing-a-tutorial-embed-iframe-12'
    line 897: '  writing-a-tutorial-finishing-title'
    line 898: '  writing-a-tutorial-finishing-1'
    line 899: '    Once your have finished writing your tutorial and your content has been'
    line 900: '    given the thumbs up. Fork the p5.js website repository, prepare your content'
    line 901: '    as described above and then issue a pull request to the p5.js website'
    line 902: '    repository so we can publish your contribution!'
    line 903: '  writing-a-tutorial-finishing-2'
    line 904: '  color-description1'
    line 905: '    This tutorial is from the book Learning Processing by Daniel Shiffman,'
    line 906: '    published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
    line 907: '    was ported to P5 by Kelly Chang. If you find any errors or have comments, '
    line 908: '  color-description2'
    line 909: '  color-p1x1'
    line 910: '    In the digital world, when we want to talk about a color, precision is'
    line 911: '    required. Saying "Hey, can you make that circle bluish-green?" will not do.'
    line 912: '    Color, rather, is defined as a range of numbers. Let''s start with the'
    line 913: '    simplest case'
    line 914: '    In between, every other number—50, 87, 162, 209, and so on—is a shade of'
    line 915: '    gray ranging from black to white.'
    line 916: '  color-p2x1'
    line 917: '  color-p2x2'
    line 918: '  color-p2x3'
    line 919: '  color-p2x4'
    line 920: '  color-code1'
    line 921: '    background(255);    // Setting the background to white '
    line 922: '     stroke(0);          // Setting the outline (stroke) to black '
    line 923: '     fill(150);          // Setting the interior of a shape (fill) to grey '
    line 924: '     rect(50,50,75,100); // Drawing the rectangle'
    line 925: '  color-p3x1'
    line 926: '  color-p3x2'
    line 927: '  color-p3x3'
    line 928: '    . Our instinct might be to say "stroke(0)" for no outline, however, it is'
    line 929: '    important to remember that 0 is not "nothing", but rather denotes the color'
    line 930: '    black. Also, remember not to eliminate both—with '
    line 931: '  color-p3x4'
    line 932: '  color-p3x5'
    line 933: '  color-p4x1'
    line 934: '    In addition, if we draw two shapes, p5.js will always use the most recently'
    line 935: '    specified stroke and fill, reading the code from top to bottom.'
    line 936: '  color-rgb-title'
    line 937: '  color-rgb-p1x1'
    line 938: '    Remember finger painting? By mixing three "primary" colors, any color could'
    line 939: '    be generated. Swirling all colors together resulted in a muddy brown. The'
    line 940: '    more paint you added, the darker it got. Digital colors are also constructed'
    line 941: '    by mixing three primary colors, but it works differently from paint. First,'
    line 942: '    the primaries are different'
    line 943: '    with color on the screen, you are mixing light, not paint, so the mixing'
    line 944: '    rules are different as well.'
    line 945: '  color-rgb-li1'
    line 946: '  color-rgb-li2'
    line 947: '  color-rgb-li3'
    line 948: '  color-rgb-li4'
    line 949: '  color-rgb-li5'
    line 950: '  color-rgb-p2x1'
    line 951: '    This assumes that the colors are all as bright as possible, but of course,'
    line 952: '    you have a range of color available, so some red plus some green plus some'
    line 953: '    blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
    line 954: '    While this may take some getting used to, the more you program and'
    line 955: '    experiment with RGB color, the more it will become instinctive, much like'
    line 956: '    swirling colors with your fingers. And of course you can''t say "Mix some red'
    line 957: '    with a bit of blue," you have to provide an exact amount. As with grayscale,'
    line 958: '    the individual color elements are expressed as ranges from 0 (none of that'
    line 959: '    color) to 255 (as much as possible), and they are listed in the order R, G,'
    line 960: '    and B. You will get the hang of RGB color mixing through experimentation,'
    line 961: '    but next we will cover some code using some common colors.'
    line 962: '  color-transparency-title'
    line 963: '  color-transparency-p1x1'
    line 964: '    In addition to the red, green, and blue components of each color, there is'
    line 965: '    an additional optional fourth component, referred to as the color''s "alpha".'
    line 966: '    Alpha means transparency and is particularly useful when you want to draw'
    line 967: '    elements that appear partially see-through on top of one another. The alpha'
    line 968: '    values for an image are sometimes referred to collectively as the "alpha'
    line 969: '    channel" of an image.'
    line 970: '  color-transparency-p2x1'
    line 971: '    It is important to realize that pixels are not literally transparent, this'
    line 972: '    is simply a convenient illusion that is accomplished by blending colors.'
    line 973: '    Behind the scenes, p5.js takes the color numbers and adds a percentage of'
    line 974: '    one to a percentage of another, creating the optical perception of blending.'
    line 975: '    (If you are interested in programming "rose-colored" glasses, this is where'
    line 976: '    you would begin.)'
    line 977: '  color-transparency-p3x1'
    line 978: '    Alpha values also range from 0 to 255, with 0 being completely transparent'
    line 979: '    (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
    line 980: '  color-custom-ranges-title'
    line 981: '  color-custom-ranges-p1x1'
    line 982: '    RGB color with ranges of 0 to 255 is not the only way you can handle color'
    line 983: '    in p5.js, in fact, it allows us to think about color any way we like. For'
    line 984: '    example, you might prefer to think of color as ranging from 0 to 100 (like a'
    line 985: '    percentage). You can do this by specifying a custom '
    line 986: '  color-custom-ranges-p2x1'
    line 987: '    The above function says'
    line 988: '    green, and blue. The range of RGB values will be from 0 to 100."'
    line 989: '  color-custom-ranges-p3x1'
    line 990: '    Although it is rarely convenient to do so, you can also have different'
    line 991: '    ranges for each color component'
    line 992: '  color-custom-ranges-p4x1'
    line 993: '    Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
    line 994: '    from 0 to 10, and alpha from 0 to 255."'
    line 995: '  color-custom-ranges-p5x1'
    line 996: '    Finally, while you will likely only need RGB color for all of your'
    line 997: '    programming needs, you can also specify colors in the HSB (hue, saturation,'
    line 998: '    and brightness) mode. Without getting into too much detail, HSB color works'
    line 999: '    as follows'
    line 1000: '  color-custom-ranges-li1x1'
    line 1001: '  color-custom-ranges-li1x2'
    line 1002: '  color-custom-ranges-li2x1'
    line 1003: '  color-custom-ranges-li2x2'
    line 1004: '  color-custom-ranges-li3x1'
    line 1005: '  color-custom-ranges-li3x2'
    line 1006: '  color-custom-ranges-p6x1'
    line 1007: '  color-custom-ranges-p6x2'
    line 1008: '  coordinate-system-description1'
    line 1009: '  coordinate-system-description2'
    line 1010: '  coordinate-system-description3'
    line 1011: '  coordinate-system-description4'
    line 1012: '  coordinate-system-description5'
    line 1013: '  coordinate-system-description-title'
    line 1014: '  coordinate-system-description-p1x1'
    line 1015: '    Before we begin programming with p5, we must first channel our eighth grade'
    line 1016: '    selves, pull out a piece of graph paper, and draw a line. The shortest'
    line 1017: '    distance between two points is a good old fashioned line, and this is where'
    line 1018: '    we begin, with two points on that graph paper.'
    line 1019: '  coordinate-system-description-p2x1'
    line 1020: '    The above figure shows a line between point A (1,0) and point B (4,5). If'
    line 1021: '    you wanted to direct a friend of yours to draw that same line, you would'
    line 1022: '    give them a shout and say "draw a line from the point one-zero to the point'
    line 1023: '    four-five, please." Well, for the moment, imagine your friend was a computer'
    line 1024: '    and you wanted to instruct this digital pal to display that same line on its'
    line 1025: '    screen. The same command applies (only this time you can skip the'
    line 1026: '    pleasantries and you will be required to employ a precise formatting). Here,'
    line 1027: '    the instruction will look like this'
    line 1028: '  coordinate-system-description-p3x1'
    line 1029: '    Even without having studied the syntax of writing code, the above statement'
    line 1030: '    should make a fair amount of sense. We are providing a command (which we'
    line 1031: '    will refer to as a "function") for the machine to follow entitled "line." In'
    line 1032: '    addition, we are specifying some arguments for how that line should be'
    line 1033: '    drawn, from point A (1,0) to point B (4,5). If you think of that line of'
    line 1034: '    code as a sentence, the function is a verb and the arguments are the objects'
    line 1035: '    of the sentence. The code sentence also ends with a semicolon instead of a'
    line 1036: '    period.'
    line 1037: '  coordinate-system-description-p4x1'
    line 1038: '    The key here is to realize that the computer screen is nothing more than a'
    line 1039: '    fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
    line 1040: '    numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
    line 1041: '    location of a point in space. And it is our job to specify what shapes and'
    line 1042: '    colors should appear at these pixel coordinates.'
    line 1043: '  coordinate-system-description-p5x1'
    line 1044: '    Nevertheless, there is a catch here. The graph paper from eighth grade'
    line 1045: '    ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
    line 1046: '    pointing up and the x-axis pointing to the right (in the positive direction,'
    line 1047: '    negative down and to the left). The coordinate system for pixels in a'
    line 1048: '    computer window, however, is reversed along the y-axis. (0,0) can be found'
    line 1049: '    at the top left with the positive direction to the right horizontally and'
    line 1050: '    down vertically.'
    line 1051: '  coordinate-system-simple-shapes-title'
    line 1052: '  coordinate-system-simple-shapes-p1x1'
    line 1053: '    The vast majority of p5 programming examples are visual in nature. These'
    line 1054: '    examples, at their core, involve drawing shapes and setting pixels. Let''s'
    line 1055: '    begin by looking at four primitive shapes.'
    line 1056: '  coordinate-system-simple-shapes-p2x1'
    line 1057: '    For each shape, we will ask ourselves what information is required to'
    line 1058: '    specify the location and size (and later color) of that shape and learn how'
    line 1059: '    p5 expects to receive that information. In each of the diagrams below, we''ll'
    line 1060: '    assume a window with a width of 100 pixels and height of 100 pixels.'
    line 1061: '  coordinate-system-simple-shapes-p3x1'
    line 1062: '  coordinate-system-simple-shapes-p3x2'
    line 1063: '  coordinate-system-simple-shapes-p4x1'
    line 1064: '  coordinate-system-simple-shapes-p4x2'
    line 1065: '  coordinate-system-simple-shapes-p5x1'
    line 1066: '  coordinate-system-simple-shapes-p5x2'
    line 1067: '    , things become a bit more complicated. In p5, a rectangle is specified by'
    line 1068: '    the coordinate for the top left corner of the rectangle, as well as its'
    line 1069: '    width and height.'
    line 1070: '  coordinate-system-simple-shapes-p6x1'
    line 1071: '    A second way to draw a rectangle involves specifying the centerpoint, along'
    line 1072: '    with width and height. If we prefer this method, we first indicate that we'
    line 1073: '    want to use the '
    line 1074: '  coordinate-system-simple-shapes-p6x2'
    line 1075: '  coordinate-system-simple-shapes-p7x1'
    line 1076: '    Finally, we can also draw a rectangle with two points (the top left corner'
    line 1077: '    and the bottom right corner). The mode here is '
    line 1078: '  coordinate-system-simple-shapes-p7x2'
    line 1079: '  coordinate-system-simple-shapes-p8x1'
    line 1080: '  coordinate-system-simple-shapes-p8x2'
    line 1081: '  coordinate-system-simple-shapes-p8x3'
    line 1082: '  coordinate-system-simple-shapes-p8x4'
    line 1083: '  coordinate-system-simple-shapes-p8x5'
    line 1084: '  coordinate-system-simple-shapes-p8x6'
    line 1085: '  coordinate-system-simple-shapes-p9x1'
    line 1086: '    Now let''s look at what some code with shapes in more complete form, with'
    line 1087: '    canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
    line 1088: '    to specify the width and height of the canvas.'
    line 1089: '  teach-desc'
    line 1090: test-tutorial
    line 1147: '  Libraries'
    line 1148: '  core-libraries'
    line 1149: '  community-libraries'
    line 1150: '  libraries-created-by'
    line 1151: '  p5.sound'
    line 1152: '    p5.sound extends p5 with Web Audio functionality including audio input,'
    line 1153: '    playback, analysis and synthesis.'
    line 1154: '  p5.accessibility'
    line 1155: '    p5.accessibility makes the p5 canvas more accessible to people who are blind'
    line 1156: '    and visually impaired.'
    line 1157: '  asciiart'
    line 1158: '    p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
    line 1159: '    p5js.'
    line 1160: '  p5.ble'
    line 1161: '    A Javascript library that enables communication between BLE devices and p5'
    line 1162: '    sketches.'
    line 1163: '  blizard.js'
    line 1164: '  p5.bots'
    line 1165: '    With p5.bots you can interact with your Arduino (or other microprocessor)'
    line 1166: '    from within the browser. Use sensor data to drive a sketch; use a sketch to'
    line 1167: '    drive LEDs, motors, and more!'
    line 1168: '  p5.clickable'
    line 1169: '  p5.cmyk.js'
    line 1170: '  p5.collide2D'
    line 1171: '    p5.collide2D provides tools for calculating collision detection for 2D'
    line 1172: '    geometry with p5.js.'
    line 1173: '  p5.createloop'
    line 1174: '  p5.dimensions'
    line 1175: '    p5.dimensions extends p5.js'' vector functions to work in any number of'
    line 1176: '    dimensions.'
    line 1177: '  p5.EasyCam'
    line 1178: '    Simple 3D camera control with inertial pan, zoom, and rotate. Major'
    line 1179: '    contributions by Thomas Diewald.'
    line 1180: '  p5.experience'
    line 1181: '    Extensive library for p5.js that adds additional event-listening'
    line 1182: '    functionality for creating canvas-based web applications.'
    line 1183: '  p5.func'
    line 1184: '    p5.func is a p5 extension that provides new objects and utilities for'
    line 1185: '    function generation in the time, frequency, and spatial domains.'
    line 1186: '  p5.geolocation'
    line 1187: '    p5.geolocation provides techniques for acquiring, watching, calculating, and'
    line 1188: '    geofencing user locations for p5.js.'
    line 1189: '  p5.gibber'
    line 1190: '  grafica.js'
    line 1191: '    grafica.js lets you add simple but highly configurable 2D plots to your'
    line 1192: '    p5.js sketches.'
    line 1193: '  p5.gui'
    line 1194: '  p5.localmessage'
    line 1195: '    p5.localmessage provides a simple interface to send messages locally from'
    line 1196: '    one sketch to another for easy multi-window sketching!'
    line 1197: '  marching'
    line 1198: '  mappa'
    line 1199: '    Mappa provides a set of tools for working with static maps, tile maps, and'
    line 1200: '    geo-data. Useful when building geolocation-based visual representations.'
    line 1201: '  ml5.js'
    line 1202: '    ml5.js builds on Tensorflow.js and provides friendly access to machine'
    line 1203: '    learning algorithms and models in the browser.'
    line 1204: '  p5.play'
    line 1205: '    p5.play provides sprites, animations, input and collision functions for'
    line 1206: '    games and gamelike applications.'
    line 1207: '  p5.particle'
    line 1208: '    The Particle and Fountain objects can be used to create data-driven effects'
    line 1209: '    that are defined through user structures or JSON input and user-draw'
    line 1210: '    functions.'
    line 1211: '  p5.Riso'
    line 1212: '    p5.Riso is a library for generating files suitable for Risograph printing.'
    line 1213: '    It helps turn your sketches into multi-color prints.'
    line 1214: '  rita.js'
    line 1215: '    RiTa.js provides a set of natural language processing objects for generative'
    line 1216: '    literature.'
    line 1217: '  Rotating knobs'
    line 1218: '  p5.scenemanager'
    line 1219: '    p5.SceneManager helps you create sketches with multiple states / scenes.'
    line 1220: '    Each scene is a like a sketch within the main sketch.'
    line 1221: '  p5.screenPosition'
    line 1222: '  p5.scribble'
    line 1223: '    Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
    line 1224: '    on a port of the original Processing library'
    line 1225: '  p5.serial'
    line 1226: '    p5.serial enables serial communication between devices that support serial'
    line 1227: '    (RS-232) and p5 sketches running in the browser.'
    line 1228: '  Shape5'
    line 1229: '    Shape5 is a 2D primative library for elementary students who are learning to'
    line 1230: '    code for the first time.'
    line 1231: '  p5.shape.js'
    line 1232: '  p5.speech'
    line 1233: '    p5.speech provides simple, clear access to the Web Speech and Speech'
    line 1234: '    Recognition APIs, allowing for the easy creation of sketches that can talk'
    line 1235: '    and listen.'
    line 1236: '  p5.start2d.js'
    line 1237: '  p5.tiledmap'
    line 1238: '    p5.tiledmap provides drawing and helper functions to include maps in your'
    line 1239: '    sketches.'
    line 1240: '  p5.touchgui'
    line 1241: '  tramontana'
    line 1242: '    Tramontana is a platform for easily use many devices (iOS, Android,'
    line 1243: '    tramontana Board, ...) to create interactive environments, interactive'
    line 1244: '    spaces or just prototype experiences at scale and in space.'
    line 1245: '  vida'
    line 1246: '    Vida is a simple library that adds camera (or video) based motion detection'
    line 1247: '    and blob tracking functionality to p5js.'
    line 1248: '  p5.voronoi'
    line 1249: '    p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
    line 1250: '    your p5.js sketches.'
    line 1251: '  p5.3D'
    line 1252: '  using-a-library-title'
    line 1253: '  using-a-library1'
    line 1254: '    A p5.js library can be any JavaScript code that extends or adds to the p5.js'
    line 1255: '    core functionality. There are two categories of libraries. Core libraries ('
    line 1256: '  using-a-library3'
    line 1257: '    ) are part of the p5.js distribution, while contributed libraries are'
    line 1258: '    developed, owned, and maintained by members of the p5.js community.'
    line 1259: '  using-a-library4'
    line 1260: '    To include a library in your sketch, link it into your HTML file, after you'
    line 1261: '    have linked in p5.js. An example HTML file might look like this'
    line 1262: '  create-your-own-title'
    line 1263: '  create-your-own1'
    line 1264: '  create-your-own2'
    line 1265: '  create-your-own3'
    line 1266: '  create-your-own4'
    line 1267: '    If you have created a library and would like to have it included on this'
    line 1268: '    page, submit this form!'
    line 1420: '  community-title'
    line 1421: '  community-statement-title'
    line 1422: '  community-statement1'
    line 1423: '    p5.js is a community interested in exploring the creation of art and design'
    line 1424: '    with technology.'
    line 1425: '  community-statement2'
    line 1426: '    We are a community of, and in solidarity with, people from every gender'
    line 1427: '    identity and expression, sexual orientation, race, ethnicity, language,'
    line 1428: '    neuro-type, size, ability, class, religion, culture, subculture, political'
    line 1429: '    opinion, age, skill level, occupation, and background. We acknowledge that'
    line 1430: '    not everyone has the time, financial means, or capacity to actively'
    line 1431: '    participate, but we recognize and encourage involvement of all kinds. We'
    line 1432: '    facilitate and foster access and empowerment. We are all learners.'
    line 1433: '  community-statement3'
    line 1434: '    We like these hashtags'
    line 1435: '    efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
    line 1436: '    (because we don''t assume knowledge), and #BlackLivesMatter (because of'
    line 1437: '    course).'
    line 1438: '  in-practice-title'
    line 1439: '  in-practice1'
    line 1440: '  in-practice2'
    line 1441: '    We insist on actively engaging with requests for feedback regardless of'
    line 1442: '    their complexity.'
    line 1443: '  in-practice3'
    line 1444: '    We welcome newcomers and prioritize the education of others. We strive to'
    line 1445: '    approach all tasks with the enthusiasm of a newcomer. Because we believe'
    line 1446: '    that newcomers are just as valuable in this effort as experts.'
    line 1447: '  in-practice4'
    line 1448: '    We consistently make the effort to actively recognize and validate multiple'
    line 1449: '    types of contributions.'
    line 1450: '  in-practice5'
    line 1451: '  in-times-conflict-title'
    line 1452: '  in-times-conflict1'
    line 1453: '  in-times-conflict2'
    line 1454: '  in-times-conflict3'
    line 1455: '    We admit when we''re wrong, apologize, and accept responsibility for our'
    line 1456: '    actions.'
    line 1457: '  in-times-conflict4'
    line 1458: '  in-times-conflict5'
    line 1459: '  in-times-conflict6'
    line 1460: '  in-times-conflict7'
    line 1461: '  in-the-future-title'
    line 1462: '  in-the-future1'
    line 1463: '  notes-title'
    line 1464: '  notes1'
    line 1465: '  notes2'
    line 1466: '  notes3'
    line 1467: '  notes4'
    line 1468: '  notes5'
    line 1469: '  contribute-title'
    line 1470: '  contribute1'
    line 1471: '    Our community is always looking for enthusiasts to help in all different'
    line 1472: '    ways.'
    line 1473: '  develop-title'
    line 1474: '  develop1'
    line 1475: '  develop2'
    line 1476: '  develop3'
    line 1477: '  develop4'
    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 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 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 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 1634: '  2019cc_8'
    line 1635: '  2019cc_9'
    line 1636: '    Participant speaks at a podium in front of projected text about the problem'
    line 1637: '    with anonymyzing data'
    line 1638: '  2019cc_10'
    line 1639: '    Person with a microphone speaking to fellow participants in front of text'
    line 1640: '    that reads p5.js will not add any new features except those that increase'
    line 1641: '    access'
    line 1642: '  2019cc_11'
    line 1643: '  2019cc_12'
    line 1644: '  2019cc_13'
    line 1645: '  2019cc_14'
    line 1646: '  2019cc_15'
    line 1647: '    Woman with microphone speaking to fellow participants with the text sacred'
    line 1648: '    boundaries in the projection behind her'
    line 1649: '  2019cc_16'
    line 1650: '    Overhead view of participants listening to a panel of people with an image'
    line 1651: '    of a 3d rendered man on it'
    line 1652: '  2019cc_17'
    line 1653: '    Participants sit around a table with their laptops and observe code on a'
    line 1654: '    screen'
    line 1655: '  2019cc_18'
    line 1656: '  2019cc_19'
    line 1657: '  2019cc_20'
    line 1658: '  2019cc_21'
    line 1659: '  2019cc_22'
    line 1660: '    Participants sitting around a large U shaped table looking towards the front'
    line 1661: '    of the classroom'
    line 1662: '  2019cc_23'
    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'
    line 1741: '  book-3-type'
    line 1742: '  book-3-description'
    line 1743: '    By using simple languages such as JavaScript in p5.js, artists and makers'
    line 1744: '    can create everything from interactive typography and textiles to 3D-printed'
    line 1745: '    furniture to complex and elegant infographics.'
    line 1746: '  book-3-order-a'
    line 1747: '  book-3-order-b'
    line 1748: '  book-4-title'
    line 1749: '  book-4-authors'
    line 1750: '  book-4-publisher'
    line 1751: '  book-4-pages'
    line 1752: '  book-4-type'
    line 1753: '  book-4-description'
    line 1754: '    By using simple languages such as JavaScript in p5.js, artists and makers'
    line 1755: '    can create everything from interactive typography and textiles to 3D-printed'
    line 1756: '    furniture to complex and elegant infographics.'
    line 1757: '  book-4-order-a'
    line 1758: '  book-4-order-b'
    line 1759: '  book-5-title'
    line 1760: '  book-5-authors'
    line 1761: '  book-5-publisher'
    line 1762: '  book-5-pages'
    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'
    line 1803: '  Form'
    line 1804: '  Data'
    line 1805: '  Arrays'
    line 1806: '  Control'
    line 1807: '  Image'
    line 1808: '  Color'
    line 1809: '  Math'
    line 1810: '  Simulate'
    line 1811: '  Interaction'
    line 1812: '  Objects'
    line 1813: '  Lights'
    line 1814: '  Motion'
    line 1815: '  Instance_Mode'
    line 1816: '  Dom'
    line 1817: '  Drawing'
    line 1818: '  Transform'
    line 1819: '  Typography'
    line 1820: '  3D'
    line 1821: '  Input'
    line 1822: '  Advanced_Data'
    line 1823: '  Sound'
    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 &#x0026; 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'
    line 2521: '  teach-case11-content1-1'
    line 2522: '  teach-case11-content2'
    line 2523: '  teach-case11-content3'
    line 2524: '  teach-case11-content4'
    line 2525: '    Over the course of three workshops, we will draw and create patterns using'
    line 2526: '    p5.js, an open-source graphical library; we will learn and apply'
    line 2527: '    computational concepts to transform patterns and finally, we will bring a'
    line 2528: '    weaving to life with electronic microcontrollers.'
    line 2529: '  teach-case11-content5'
    line 2530: '  teach-case11-content5-1'
    line 2531: '    Materials'
    line 2532: '    pattern weaving tool.'
    line 2533: '  teach-case11-content5-2'
    line 2534: '  teach-case11-content5-3'
    line 2535: '  teach-case11-content5-4'
    line 2536: '  teach-case11-content5-5'
    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'
ko:
  src/data/en.yml:
    line 1552: '  teach-case6-alt'
    line 1560: '  teach-case8-alt'
    line 1568: '  teach-case9-alt'
    line 1576: '  teach-case11-alt'
    line 1584: '  teach-case12-alt'
    line 1592: '  teach-case13-alt'
    line 1600: '  teach-case14-alt'
    line 1608: '  teach-case15-alt'
    line 1616: '  teach-case16-alt'
    line 1624: '  teach-case17-alt'
    line 1536: '  teach-case2-alt'
    line 1544: '  teach-case4-alt'
    line 1517: '  teach-case1-title'
    line 1527: '  teach-case2-content5-1'
    line 1528: '  teach-case2-content5-2'
    line 1537: '  teach-case4-title'
    line 1545: '  teach-case13-title'
    line 1546: '  teach-case13-lead-name'
    line 1547: '  teach-case13-speech'
    line 1548: '    I''m working on a new series of coding class for Disabled students in South'
    line 1549: '    Korea. I''m researching about the pedagogy and translation. I plan to hold'
    line 1550: '    workshops in December 2020. The project is supported by the Open Society'
    line 1551: '    Foundation Human Rights Initiative and Korea Disability Arts & Culture'
    line 1553: '  teach-case13-content1'
    line 1554: '  teach-case13-content1-1'
    line 1555: '  teach-case13-content2'
    line 1556: '  teach-case13-content3'
    line 1557: '  teach-case13-content4'
    line 1558: '    Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
    line 1559: '  teach-case13-content5'
    line 1561: '  teach-case13-content5-1'
    line 1562: ''
    line 1563: '  teach-case14-title'
    line 1564: '  teach-case14-lead-name'
    line 1565: '  teach-case14-speech'
    line 1566: '    The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
    line 1567: '  teach-case14-content1'
    line 1569: '  teach-case14-content1-2'
    line 1570: '  teach-case14-content2'
    line 1571: '  teach-case14-content3'
    line 1572: '  teach-case14-content4'
    line 1573: '    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 1574: '    the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
    line 1575: '  teach-case14-content5'
    line 1577: '  teach-case14-content5-1'
    line 1578: '    1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
    line 1579: '  teach-case14-content5-2'
    line 1580: '    2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
    line 1581: '  teach-case14-content5-3'
    line 1582: '    3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
    line 1583: '  teach-case14-content5-4'
    line 1585: '  teach-case14-content5-5'
    line 1586: '  teach-case15-title'
    line 1587: '  teach-case15-lead-name'
    line 1588: '  teach-case15-content1'
    line 1589: '   L''École de Design Nantes Atlantique, France'
    line 1590: '  teach-case15-content1-1'
    line 1591: '  teach-case15-content2'
    line 1593: '  teach-case15-content3'
    line 1594: '  teach-case15-content4'
    line 1595: '    To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
    line 1596: '  teach-case15-content5'
    line 1597: '    GitHub Readme File'
    line 1598: '  teach-case15-content5-1'
    line 1599: '  teach-case16-title'
    line 1601: '  teach-case16-lead-name'
    line 1602: '  teach-case16-speech'
    line 1603: '    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 1604: '  teach-case16-content1'
    line 1605: '  teach-case16-content1-1'
    line 1606: '  teach-case16-content2'
    line 1607: '  teach-case16-content2-1'
    line 1609: '  teach-case16-content3'
    line 1610: '  teach-case16-content4'
    line 1611: '    Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
    line 1612: '    this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
    line 1613: '  teach-case16-content5'
    line 1614: '    p5for50+ web app'
    line 1615: '  teach-case16-content5-1'
    line 1617: '  teach-case16-content5-2'
    line 1618: '  teach-case16-content5-3'
    line 1619: '  teach-case16-content5-4'
    line 1620: ''
    line 1621: '  teach-case17-title'
    line 1622: '  teach-case17-lead-name'
    line 1623: '  teach-case17-speech'
    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 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&#32;'
    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'
    line 41: Reference
    line 118: '  p2x3'
    line 128: '  p3xp5'
    line 59: tagline4
    line 136: '  p4xp6'
    line 243: '  settingUp-title'
    line 62: tagline7
    line 45: Books
    line 34: Language-Settings
    line 35: Sidebar-Title
    line 36: Home
    line 38: Download
    line 39: Donate
    line 40: Start
    line 42: Libraries
    line 43: Learn
    line 56: tagline1
    line 60: tagline5
    line 61: tagline6
    line 111: '    identity and expression, sexual orientation, race, ethnicity, language,'
    line 112: '    neuro-type, size, disability, class, religion, culture, subculture,'
    line 116: '    kinds. We facilitate and foster access and empowerment. We are all learners.'
    line 117: '  p2x2'
    line 119: '  p2x4'
    line 120: '  p2x5'
    line 121: '  p2x6'
    line 122: '  p2x7'
    line 124: '  p3xp1'
    line 125: '  p3xp2'
    line 126: '  p3xp3'
    line 127: '  p3xp4'
    line 137: '  sketch_credits'
    line 138: '  sketch_info'
    line 270: '  environment8'
    line 271: '    Open Sublime. Go to the File menu and choose Open... and choose the folder'
    line 272: '    that your html and js files are located in. On the left sidebar, you should'
    line 273: '    find the folder name at the top, with a list of the files contained in the'
    line 282: '  environment12'
    line 283: '  environment13'
    line 284: '  your-first-sketch-title'
    line 285: '  your-first-sketch-intro1'
    line 286: '  your-first-sketch-intro2'
    line 287: '  your-first-sketch-intro3'
    line 288: '  your-first-sketch-intro4'
    line 289: '  your-first-sketch1'
    line 290: '  your-first-sketch2'
    line 291: '  your-first-sketch3'
    line 292: '  your-first-sketch4'
    line 293: '    The line you just added draws an ellipse, with its center 50 pixels over'
    line 294: '    from the left and 50 pixels down from the top, with a width and height of 80'
    line 295: '    pixels.'
    line 296: '  your-first-sketch5'
    line 297: '  your-first-sketch6'
    line 298: '    If you are using a screen reader, you must turn on the accessible outputs in'
    line 299: '    the p5 online editor, outside the editor you must add the accessibility'
    line 300: '    library in your html. To learn more visit'
    line 301: '  your-first-sketch7'
    line 302: '  your-first-sketch8'
    line 303: '    If you''ve typed everything correctly, this will appear in the display'
    line 304: '    window'
    line 305: '  your-first-sketch9'
    line 306: '  your-first-sketch10'
    line 307: '    If nothing appears, the editor may be having trouble understanding what'
    line 308: '    you’ve typed. If this happens, make sure that you''ve copied the example code'
    line 309: '    exactly'
    line 310: '    between each of them, the line should end with a semicolon, and ellipse has'
    line 311: '    to be spelled correctly.'
    line 312: '  your-first-sketch11'
    line 313: '    One of the most difficult things about getting started with programming is'
    line 314: '    that you have to be very specific about the syntax. The browser isn''t always'
    line 315: '    smart enough to know what you mean, and can be quite fussy about the'
    line 316: '    placement of punctuation. You''ll get used to it with a little practice. In'
    line 317: '    the bottom left of the editor you will find the console section. Here, you'
    line 318: '    can find messages from the editor with details about any errors it'
    line 319: '    encounters.'
    line 320: '  your-first-sketch12'
    line 321: '    Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
    line 322: '    last example to try this'
    line 323: '  your-first-sketch13'
    line 324: '    This program creates a canvas that is 400 pixels wide and 400 pixels high,'
    line 325: '    and then starts drawing white circles at the position of the mouse. When a'
    line 326: '    mouse button is pressed, the circle color changes to black. Run the code,'
    line 327: '    move the mouse, and click to experience it.'
    line 328: '  your-first-sketch14'
    line 329: '  first-sketch-heading1'
    line 330: '  first-sketch-heading2'
    line 331: '  first-sketch-heading3'
    line 332: '  what-next-title'
    line 333: '  learn1'
    line 334: '  learn2'
    line 335: '  learn3'
    line 336: '  learn4'
    line 337: '  learn5'
    line 338: '  learn6'
    line 339: '  learn7'
    line 340: '  learn8'
    line 341: '  learn9'
    line 342: '  learn10'
    line 343: '  reference1'
    line 344: '  reference2'
    line 345: '  reference3'
    line 346: '  learn11'
    line 347: '  learn12'
    line 348: '  processing-transition1'
    line 349: '  processing-transition2'
    line 350: '  processing-transition3'
    line 351: '  processing-transition4'
    line 352: '  book1'
    line 353: '    Parts of this tutorial were adapted from the book, Getting Started with'
    line 354: '    p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
    line 355: '    Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
    line 356: '    Contributors Conference.'
    line 44: Examples
    line 57: tagline2
    line 146: '  copyright-title'
    line 231: '  get-started-title'
    line 240: '    . If you would like to work on the the desktop version of p5.js you can'
    line 258: '  download7'
    line 281: '    file manager or type'
    line 54: footer4
    line 110: '    We are a community of, and in solidarity with, people from every gender'
    line 239: '  get-started6'
    line 259: '  environment-title'
    line 274: '    folder directly below.'
    line 875: '  writing-a-tutorial-iframe-4'
    line 233: '    This page walks you through setting up a p5.js project and making your first'
    line 234: '    sketch.'
    line 244: '  download-title'
    line 245: '  hosted-title'
    line 50: footerxh1
    line 98: '  p1x1'
    line 99: '    p5.js is a JavaScript library for creative coding, with a focus on making'
    line 100: '    coding accessible and inclusive for artists, designers, educators,'
    line 109: '  p2x1'
    line 129: '  p3xp6'
    line 148: '    The p5.js library is free software; you can redistribute it and/or modify it'
    line 46: Community
    line 133: '  p4xp3'
    line 134: '  p4xp4'
    line 141: '  project-a-2-5-phuong'
    line 144: '  project-a-2-7-phuong'
    line 64: '  color-p3x3'
    line 70: '  color-rgb-p1x1'
    line 87: '  color-custom-ranges-p2x1'
    line 24: footer1
    line 25: footer2
    line 26: footer3
    line 27: footer4
    line 77: '  color-rgb-p2x1'
    line 82: '  color-transparency-p2x1'
    line 139: '  project-a-2-7-phuong'
    line 76: '  color-transparency-p1x1'
    line 31: tagline7
    line 63: '  hosted-title'
    line 75: '  download9'
    line 140: '  learn5'
    line 142: '  learn7'
    line 143: '  learn8'
    line 145: '  learn10'
    line 159: '  processing-transition1'
    line 160: '  processing-transition2'
    line 161: '  processing-transition3'
    line 357: '  link-2-chung'
    line 358: '  link-3-chung'
    line 359: '  project-a-1-1-chung'
    line 360: '  project-a-1-2-chung'
    line 361: '  project-a-1-3-chung'
    line 362: '  project-a-2-1-chung'
    line 363: '  dan-shiffman-matterjs-tutorial'
    line 364: '  project-a-2-2-chung'
    line 365: '  project-a-3-1-chung'
    line 366: '  project-a-3-2-chung'
    line 367: '  project-a-4-1-chung'
    line 368: '  project-a-4-2-chung'
    line 369: '  project-a-4-3-chung'
    line 370: '  project-a-5-1-chung'
    line 371: '  project-a-5-2-chung'
    line 372: ''
    line 373: '  creator-from-casey-louise'
    line 374: '  project-a-1-1-casey-louise'
    line 375: '  project-a-1-2-casey-louise'
    line 376: '  project-a-1-3-casey-louise'
    line 377: '  project-a-1-4-casey-louise'
    line 378: '  project-a-1-5-casey-louise'
    line 379: '  project-a-2-1-casey-louise'
    line 380: '  project-a-2-2-casey-louise'
    line 381: '  project-a-3-1-casey-louise'
    line 382: '  project-a-3-2-casey-louise'
    line 383: '  project-a-3-3-casey-louise'
    line 384: '  project-a-3-4-casey-louise'
    line 385: '  project-a-3-5-casey-louise'
    line 386: '  project-a-4-1-casey-louise'
    line 387: '  adam-ferris-repo-casey-louise'
    line 388: '  project-a-4-2-casey-louise'
    line 389: '  project-a-4-3-casey-louise'
    line 390: '  project-a-4-4-casey-louise'
    line 391: '  webgl-casey-louise'
    line 392: '  project-a-4-5-casey-louise'
    line 393: '  project-a-4-6-casey-louise'
    line 394: '  openframeworks-book-casey-louise'
    line 395: '  project-a-4-7-casey-louise'
    line 396: '  project-a-5-1-casey-louise'
    line 397: '  project-a-5-2-casey-louise'
    line 398: ''
    line 399: '  pronouns-nonbinary'
    line 400: '  creator-from-moon'
    line 401: '  posters-by'
    line 402: '  project-a-1-1-moon'
    line 403: '  project-a-1-2-moon'
    line 404: '  project-a-1-3-moon'
    line 405: '  project-a-1-4-moon'
    line 406: '  pcd-la-moon'
    line 407: '  project-a-1-5-moon'
    line 408: '  project-a-2-1-moon'
    line 409: '  codetrain-moon'
    line 410: '  project-a-2-2-moon'
    line 411: '  p5-reference-moon'
    line 412: '  project-a-2-3-moon'
    line 413: '  project-a-3-1-moon'
    line 414: '  project-a-3-2-moon'
    line 415: '  project-a-3-3-moon'
    line 416: '  project-a-3-4-moon'
    line 417: '  project-a-4-1-moon'
    line 418: '  project-a-5-1-moon'
    line 419: '  project-a-5-2-moon'
    line 79: '  environment1'
    line 88: '  environment8'
    line 173: '  complete-library-intro1'
    line 182: '  learn3'
    line 191: '  writing-a-tutorial-embedding-7'
    line 197: '  writing-a-tutorial-iframe-1'
    line 204: '  writing-a-tutorial-iframe-7'
    line 213: '  color-description1'
    line 222: '  coordinate-system-description3'
    line 69: '  download5'
    line 74: '  download8'
    line 78: '  environment1'
    line 157: '  learn11'
    line 172: '  complete-library-intro1'
    line 181: '  learn3'
    line 190: '  writing-a-tutorial-embedding-7'
    line 196: '  writing-a-tutorial-iframe-1'
    line 203: '  writing-a-tutorial-iframe-7'
    line 212: '  color-description1'
    line 221: '  coordinate-system-description3'
    line 230: '  coordinate-system-simple-shapes-p1x1'
    line 66: '  sketch_credits'
    line 67: '  sketch_info'
    line 22: footer1
    line 23: footer2
    line 32: '  download-intro'
    line 65: '  color-rgb-p1x1'
    line 72: '  color-rgb-p2x1'
    line 85: '  color-custom-ranges-p4x1'
    line 28: footer5
    line 81: '  color-transparency-p1x1'
    line 90: '  color-custom-ranges-p4x1'
    line 153: '  project-a-4-7-casey-louise'
    line 33: Skip-To-Content
    line 47: Contribute
    line 48: Forum
    line 49: Showcase
    line 51: footer1
    line 52: footer2
    line 53: footer3
    line 58: tagline3
    line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
    line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
    line 107: '    text, input, video, webcam, and sound.'
    line 108: '  p2xh2'
    line 130: '  p4xh2'
    line 131: '  p4xp1'
    line 132: '  p4xp2'
    line 135: '  p4xp5'
    line 147: '  copyright1'
    line 149: '    under the terms of the'
    line 150: '  copyright2'
    line 151: '  copyright3'
    line 152: '  copyright4'
    line 232: '  get-started1'
    line 235: '  get-started2'
    line 236: '  get-started3'
    line 237: '  get-started4'
    line 238: '  get-started5'
    line 241: '    scroll down to'
    line 242: '  get-started7'
    line 246: '  download1'
    line 247: '  download2'
    line 248: '  download3'
    line 249: '  download4'
    line 250: '    If you look in index.html, you''ll notice that it links to the file p5.js. If'
    line 252: '    loading), change the link to p5.min.js.'
    line 253: '  download5'
    line 254: '    Alternatively, you can link to a p5.js file hosted online. All versions of'
    line 255: '    p5.js are stored in a CDN (Content Delivery Network). You can find a history'
    line 257: '  download6'
    line 260: '  environment1'
    line 261: '  environmentlink'
    line 262: '  environment2'
    line 263: '  environment3'
    line 264: '  environment4'
    line 278: '  environment10'
    line 279: '  environment11'
    line 280: '    Open the index.html file in your browser by double clicking on it in your'
    line 436: '  Download'
    line 437: '  download-intro'
    line 438: '    Welcome! While titled "Download" this page actually contains a collection of'
    line 439: '    links to either download the library or begin working with it online. We''ve'
    line 440: '    tried to order things to reflect what a beginner might want first, to'
    line 441: '    resources that more experienced programmers may be looking for.'
    line 442: '  editor-title'
    line 443: '  p5.js-editor'
    line 444: '  p5.js-editor-intro'
    line 445: '    This link redirects you to the p5.js Editor online so you can begin using'
    line 446: '    p5.js immediately.'
    line 447: '  editor-includes'
    line 448: '  complete-library-title'
    line 449: '  complete-library-intro1'
    line 450: '    This is a download containing the p5.js library file, the p5.sound addon,'
    line 451: '    and an example project. It does not contain an editor. Visit'
    line 452: '  complete-library-intro2'
    line 453: '  complete-library-intro3'
    line 454: '  p5.js-complete'
    line 455: '  includes-1'
    line 456: '  includes-2'
    line 457: '  includes-3'
    line 458: '  single-files-title'
    line 459: '  single-files-intro'
    line 460: '    These are downloads or links to the p5.js library file. No additional'
    line 461: '    contents are included.'
    line 462: '  single-file'
    line 463: '  p5.js-uncompressed'
    line 464: '  compressed'
    line 465: '  link'
    line 466: '  statically-hosted-file'
    line 467: '  etc-title'
    line 468: '  older-releases'
    line 469: '  github-repository'
    line 470: '  report-bugs'
    line 471: '  supported-browsers'
    line 472: '  support-title'
    line 473: '  support-options'
    line 474: '  support-1'
    line 475: '    p5.js is free, open-source software. We want to make our community as open'
    line 476: '    and inclusive as possible. You can support this work by'
    line 477: '  support-2'
    line 478: '  support-3'
    line 479: '  support-4'
    line 480: '  support-5'
    line 481: '  support-6'
    line 482: '  support-7'
    line 483: '  support-8'
    line 484: '  support-9'
    line 485: '  support-10'
    line 486: '  support-11'
    line 487: '  support-12'
    line 488: '    Your membership supports software development (for p5.js, Processing,'
    line 489: '    Processing.py, Processing for Android and ARM devices, education resources'
    line 490: '    like code examples and tutorials,'
    line 491: '  support-13'
    line 492: '  support-14'
    line 493: '  support-15'
    line 494: '  support-16'
    line 495: '  support-17'
    line 496: '    p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
    line 497: '    Pittsburgh (Image credit'
    line 498: '  support-18'
    line 499: '    Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
    line 500: '    workshops in London (Image credit'
    line 501: '  support-19'
    line 502: '    Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
    line 503: '    Kira Simon-Kennedy)'
    line 504: '  support-20'
    line 505: '    Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
    line 506: '    (Image credit'
    line 507: '  support-21'
    line 508: '    Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
    line 509: '    credit'
    line 510: '  support-22'
    line 511: '  support-23'
    line 512: '    Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
    line 513: '    (Image credit'
    line 514: '  support-24'
    line 515: '    Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
    line 516: '    workshop led by Taeyoon Choi (Image credit'
    line 517: '  support-25'
    line 518: '    p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
    line 519: '    Pittsburgh (Image credit'
    line 520: '  support-26'
    line 521: '    Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
    line 522: '    International Center of Photography (Image credit'
    line 523: '    Photography)'
    line 524: '  support-27'
    line 525: '    Participants at p5.js workshop in Santiago, Chile, led by Aarón'
    line 526: '    Montoya-Moraga (Image credit'
    line 527: '  support-28'
    line 528: '    Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
    line 529: '    led by Taeyoon Choi (Image credit'
    line 530: '  support-29'
    line 531: '    Processing Foundation Fellow DIY Girls run a creative coding program in Los'
    line 532: '    Angeles (Image credit'
    line 533: '  support-30'
    line 534: '  support-31'
    line 535: '  support-32'
    line 536: '  support-33'
    line 537: '  support-17-alt'
    line 538: '  support-18-alt'
    line 539: '  support-19-alt'
    line 540: '  support-20-alt'
    line 541: '  support-21-alt'
    line 542: '  support-22-alt'
    line 543: '  support-23-alt'
    line 544: '  support-24-alt'
    line 545: '  support-25-alt'
    line 546: '  support-26-alt'
    line 547: '  support-27-alt'
    line 548: '  support-28-alt'
    line 549: '  support-29-alt'
    line 550: '  support-30-alt'
    line 551: '  support-31-alt'
    line 729: '  learn-title'
    line 730: '  teach-title2'
    line 731: '  learn1'
    line 732: '    These tutorials provide more in-depth or step-by-step overviews of'
    line 733: '    particular topics. Check out the '
    line 734: '  learn2'
    line 735: '  learn3'
    line 736: '  introduction-to-p5js-title'
    line 737: '  hello-p5js-title'
    line 738: '  hello-p5js'
    line 739: '    This short video will introduce you to the library and what you can do with'
    line 740: '    it.'
    line 741: '  getting-started-title'
    line 742: '  getting-started'
    line 743: '    Welcome to p5.js! <br> This introduction covers the basics of setting up a'
    line 744: '    p5.js project.'
    line 745: '  p5js-overview-title'
    line 746: '  p5js-overview'
    line 747: '  p5js-processing-title'
    line 748: '  p5js-processing'
    line 749: '    The main differences between the two, and how to convert from one to the'
    line 750: '    other.'
    line 751: '  p5-screen-reader-title'
    line 752: '  p5-screen-reader'
    line 753: '  using-local-server-title'
    line 754: '  using-local-server'
    line 755: '  p5js-wiki-title'
    line 756: '  p5js-wiki'
    line 757: '  connecting-p5js-title'
    line 758: '  creating-libraries-title'
    line 759: '  creating-libraries'
    line 760: '  nodejs-and-socketio-title'
    line 761: '  nodejs-and-socketio'
    line 762: '  programming-topics-title'
    line 763: '  beyond-the-canvas-title'
    line 764: '  beyond-the-canvas'
    line 765: '  3d-webgl-title'
    line 766: '  3d-webgl'
    line 767: '  color-title'
    line 768: '  color'
    line 769: '  coordinate-system-and-shapes-title'
    line 770: '  coordinate-system-and-shapes'
    line 771: '  interactivity-title'
    line 772: '  interactivity'
    line 773: '  program-flow-title'
    line 774: '  program-flow'
    line 775: '  curves-title'
    line 776: '  curves'
    line 777: '    An introduction to the three types of curves in p5.js'
    line 778: '    and Bézier curves.'
    line 779: '  becoming-a-better-programmer-title'
    line 780: '  debugging-title'
    line 781: '  debugging'
    line 782: '  optimizing-title'
    line 783: '  optimizing'
    line 784: '    A tutorial of tips and tricks for optimizing your code to make it run faster'
    line 785: '    and smoother.'
    line 786: '  test-driven-development-title'
    line 787: '  test-driven-development'
    line 788: '    Save yourself from agony on install day. What is unit testing and how to use'
    line 789: '    it? By Andy Timmons.'
    line 790: '  contributing-to-the-community-title'
    line 791: '  development-title'
    line 792: '  development'
    line 793: '  looking-inside-title'
    line 794: '  looking-inside'
    line 795: '    A friendly intro to the file structure and tools for p5.js development, by'
    line 796: '    Luisa Pereira.'
    line 797: '  writing-tutorial-title'
    line 798: '  writing-tutorial'
    line 799: '  writing-a-tutorial-title'
    line 800: '  writing-a-tutorial-author'
    line 801: '  writing-a-tutorial-1'
    line 802: '    We invite educators, contributors and general enthusiasts to contribute p5js'
    line 803: '    tutorials. The p5js project makes creative coding and open source'
    line 804: '    development more accessible to a diverse community and we are excited to'
    line 805: '    publish tutorials on all aspects of the development process. Our learning'
    line 806: '    materials so far include guides on learning p5, programming technique and'
    line 807: '    how to contribute to an open source project.'
    line 808: '  writing-a-tutorial-2'
    line 809: '    We welcome new written tutorial contributions and this guide outlines the'
    line 810: '    steps of how to propose, prepare and contribute.'
    line 811: '  writing-a-tutorial-how-start-title'
    line 812: '  writing-a-tutorial-how-start-1'
    line 813: '  writing-a-tutorial-how-start-2'
    line 814: '  writing-a-tutorial-how-start-3'
    line 815: '    that outlines in progress tutorials. If your topic is listed as in progress,'
    line 816: '    perhaps you can add to work being done and contribute to preparing existing'
    line 817: '    work for publication so please reach out to us.'
    line 818: '  writing-a-tutorial-how-start-4'
    line 819: '    If your topic is not already covered and is not listed as in progress,'
    line 820: '    please write a few sentences on what you propose to cover and email us this'
    line 821: '    description at education@p5js.org.'
    line 822: '  writing-a-tutorial-how-prepare-title'
    line 823: '  writing-a-tutorial-how-prepare-1'
    line 824: '    When your tutorial is ready for publication, please follow these steps to'
    line 825: '    prepare your content for the p5js website.'
    line 826: '  writing-a-tutorial-how-prepare-2'
    line 827: '  writing-a-tutorial-how-prepare-3'
    line 828: '  writing-a-tutorial-how-prepare-4'
    line 829: '  writing-a-tutorial-how-prepare-5'
    line 830: '    The folder containing your tutorial will be placed in the ''tutorials'' folder'
    line 831: '    of the p5js site. The file called index.hbs is the '
    line 832: '  writing-a-tutorial-how-prepare-6'
    line 833: '  writing-a-tutorial-how-prepare-7'
    line 834: '  writing-a-tutorial-how-prepare-8'
    line 835: '  writing-a-tutorial-how-prepare-9'
    line 836: '    tags on the page, with formatting defined by the &lt;h1&gt; and &lt;h2&gt;'
    line 837: '    tags, the &lt;p&gt; paragraph tags as is done shown on the'
    line 838: '  writing-a-tutorial-how-prepare-10'
    line 839: '  writing-a-tutorial-how-prepare-11'
    line 840: '    If your tutorial contains images, they are to be placed in the assets folder'
    line 841: '    of the p5 site, in the location src/assets/learn/test-tutorial/images as'
    line 842: '    shown below.'
    line 843: '  writing-a-tutorial-how-prepare-12'
    line 844: '  writing-a-tutorial-embedding-title'
    line 845: '  writing-a-tutorial-embedding-1'
    line 846: '    Using p5js means you can illustrate your tutorial with animated, interactive'
    line 847: '    or editable code examples to demonstrate programming concepts. Your examples'
    line 848: '    should be prepared as p5.js sketches and can be embedded into the tutorial'
    line 849: '    in two ways.'
    line 850: '  writing-a-tutorial-embedding-2'
    line 851: '  writing-a-tutorial-embedding-3'
    line 852: '  writing-a-tutorial-embedding-4'
    line 853: '  writing-a-tutorial-embedding-5'
    line 854: '  writing-a-tutorial-embedding-6'
    line 855: '  writing-a-tutorial-embedding-7'
    line 856: '  writing-a-tutorial-embedding-8'
    line 857: '  writing-a-tutorial-embedding-9'
    line 858: '  writing-a-tutorial-embedding-10'
    line 859: '    If the example is to be animated and/or interactive but not editable. The'
    line 860: '    p5.js sketch should be embedded into the page as an iframe as described'
    line 861: '    below.'
    line 862: '  writing-a-tutorial-iframe-title'
    line 863: '  writing-a-tutorial-iframe-1'
    line 864: '    An iframe is like creating a window through which you can explore another'
    line 865: '    page, sandboxed from the rest of your page. In this case it will be a window'
    line 866: '    to the index.html containing your p5.js sketch. '
    line 867: '  writing-a-tutorial-iframe-2'
    line 868: '    Put your p5 sketches in the /src/assets/learn folder of the site, in a'
    line 869: '    folder labelled with the name of your sketch as shown in the screenshot.'
    line 870: '    This is where all the images and p5 sketches linked by iframe should be'
    line 871: '    stored.'
    line 872: '  writing-a-tutorial-iframe-3'
    line 873: '    In the subfolders containing your p5 examples there should be a sketch.js'
    line 874: '    file and the embed.html file for the sketch. '
    line 876: '    Make sure your embed.html file has the correct paths to the p5 libraries of'
    line 877: '    the site. If your file structure is the same as above, the path to the p5.js'
    line 878: '    library should be "../../../js/p5.min.js".'
    line 879: '  writing-a-tutorial-iframe-5'
    line 880: '    You can then embed the p5js index files as iframes in the .hbs file that'
    line 881: '    contains your tutorial content. The embed code for the iframe would then'
    line 882: '    be'
    line 883: '  writing-a-tutorial-iframe-6'
    line 884: '    Styling for the iframe (this could directly into the post or in a'
    line 885: '    stylesheet)'
    line 886: '  writing-a-tutorial-iframe-7'
    line 887: '  writing-a-tutorial-iframe-8'
    line 888: '  writing-a-tutorial-iframe-9'
    line 889: '    One thing to note is that you need to manually set the size of the iframe,'
    line 890: '    so it works best if things are a standard size.'
    line 891: '  writing-a-tutorial-iframe-10'
    line 892: '    Also note that the links to the p5.js library files do not happen from the'
    line 893: '    .eps page with all the tutorial content. Instead they will be located in the'
    line 894: '    html page that is rendering your sketch (in this case, called embed.html).'
    line 895: '  writing-a-tutorial-iframe-11'
    line 896: '  writing-a-tutorial-embed-iframe-12'
    line 897: '  writing-a-tutorial-finishing-title'
    line 898: '  writing-a-tutorial-finishing-1'
    line 899: '    Once your have finished writing your tutorial and your content has been'
    line 900: '    given the thumbs up. Fork the p5.js website repository, prepare your content'
    line 901: '    as described above and then issue a pull request to the p5.js website'
    line 902: '    repository so we can publish your contribution!'
    line 903: '  writing-a-tutorial-finishing-2'
    line 904: '  color-description1'
    line 905: '    This tutorial is from the book Learning Processing by Daniel Shiffman,'
    line 906: '    published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
    line 907: '    was ported to P5 by Kelly Chang. If you find any errors or have comments, '
    line 908: '  color-description2'
    line 909: '  color-p1x1'
    line 910: '    In the digital world, when we want to talk about a color, precision is'
    line 911: '    required. Saying "Hey, can you make that circle bluish-green?" will not do.'
    line 912: '    Color, rather, is defined as a range of numbers. Let''s start with the'
    line 913: '    simplest case'
    line 914: '    In between, every other number—50, 87, 162, 209, and so on—is a shade of'
    line 915: '    gray ranging from black to white.'
    line 916: '  color-p2x1'
    line 917: '  color-p2x2'
    line 918: '  color-p2x3'
    line 919: '  color-p2x4'
    line 920: '  color-code1'
    line 921: '    background(255);    // Setting the background to white '
    line 922: '     stroke(0);          // Setting the outline (stroke) to black '
    line 923: '     fill(150);          // Setting the interior of a shape (fill) to grey '
    line 924: '     rect(50,50,75,100); // Drawing the rectangle'
    line 925: '  color-p3x1'
    line 926: '  color-p3x2'
    line 927: '  color-p3x3'
    line 928: '    . Our instinct might be to say "stroke(0)" for no outline, however, it is'
    line 929: '    important to remember that 0 is not "nothing", but rather denotes the color'
    line 930: '    black. Also, remember not to eliminate both—with '
    line 931: '  color-p3x4'
    line 932: '  color-p3x5'
    line 933: '  color-p4x1'
    line 934: '    In addition, if we draw two shapes, p5.js will always use the most recently'
    line 935: '    specified stroke and fill, reading the code from top to bottom.'
    line 936: '  color-rgb-title'
    line 937: '  color-rgb-p1x1'
    line 938: '    Remember finger painting? By mixing three "primary" colors, any color could'
    line 939: '    be generated. Swirling all colors together resulted in a muddy brown. The'
    line 940: '    more paint you added, the darker it got. Digital colors are also constructed'
    line 941: '    by mixing three primary colors, but it works differently from paint. First,'
    line 942: '    the primaries are different'
    line 943: '    with color on the screen, you are mixing light, not paint, so the mixing'
    line 944: '    rules are different as well.'
    line 945: '  color-rgb-li1'
    line 946: '  color-rgb-li2'
    line 947: '  color-rgb-li3'
    line 948: '  color-rgb-li4'
    line 949: '  color-rgb-li5'
    line 950: '  color-rgb-p2x1'
    line 951: '    This assumes that the colors are all as bright as possible, but of course,'
    line 952: '    you have a range of color available, so some red plus some green plus some'
    line 953: '    blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
    line 954: '    While this may take some getting used to, the more you program and'
    line 955: '    experiment with RGB color, the more it will become instinctive, much like'
    line 956: '    swirling colors with your fingers. And of course you can''t say "Mix some red'
    line 957: '    with a bit of blue," you have to provide an exact amount. As with grayscale,'
    line 958: '    the individual color elements are expressed as ranges from 0 (none of that'
    line 959: '    color) to 255 (as much as possible), and they are listed in the order R, G,'
    line 960: '    and B. You will get the hang of RGB color mixing through experimentation,'
    line 961: '    but next we will cover some code using some common colors.'
    line 962: '  color-transparency-title'
    line 963: '  color-transparency-p1x1'
    line 964: '    In addition to the red, green, and blue components of each color, there is'
    line 965: '    an additional optional fourth component, referred to as the color''s "alpha".'
    line 966: '    Alpha means transparency and is particularly useful when you want to draw'
    line 967: '    elements that appear partially see-through on top of one another. The alpha'
    line 968: '    values for an image are sometimes referred to collectively as the "alpha'
    line 969: '    channel" of an image.'
    line 970: '  color-transparency-p2x1'
    line 971: '    It is important to realize that pixels are not literally transparent, this'
    line 972: '    is simply a convenient illusion that is accomplished by blending colors.'
    line 973: '    Behind the scenes, p5.js takes the color numbers and adds a percentage of'
    line 974: '    one to a percentage of another, creating the optical perception of blending.'
    line 975: '    (If you are interested in programming "rose-colored" glasses, this is where'
    line 976: '    you would begin.)'
    line 977: '  color-transparency-p3x1'
    line 978: '    Alpha values also range from 0 to 255, with 0 being completely transparent'
    line 979: '    (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
    line 980: '  color-custom-ranges-title'
    line 981: '  color-custom-ranges-p1x1'
    line 982: '    RGB color with ranges of 0 to 255 is not the only way you can handle color'
    line 983: '    in p5.js, in fact, it allows us to think about color any way we like. For'
    line 984: '    example, you might prefer to think of color as ranging from 0 to 100 (like a'
    line 985: '    percentage). You can do this by specifying a custom '
    line 986: '  color-custom-ranges-p2x1'
    line 987: '    The above function says'
    line 988: '    green, and blue. The range of RGB values will be from 0 to 100."'
    line 989: '  color-custom-ranges-p3x1'
    line 990: '    Although it is rarely convenient to do so, you can also have different'
    line 991: '    ranges for each color component'
    line 992: '  color-custom-ranges-p4x1'
    line 993: '    Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
    line 994: '    from 0 to 10, and alpha from 0 to 255."'
    line 995: '  color-custom-ranges-p5x1'
    line 996: '    Finally, while you will likely only need RGB color for all of your'
    line 997: '    programming needs, you can also specify colors in the HSB (hue, saturation,'
    line 998: '    and brightness) mode. Without getting into too much detail, HSB color works'
    line 999: '    as follows'
    line 1000: '  color-custom-ranges-li1x1'
    line 1001: '  color-custom-ranges-li1x2'
    line 1002: '  color-custom-ranges-li2x1'
    line 1003: '  color-custom-ranges-li2x2'
    line 1004: '  color-custom-ranges-li3x1'
    line 1005: '  color-custom-ranges-li3x2'
    line 1006: '  color-custom-ranges-p6x1'
    line 1007: '  color-custom-ranges-p6x2'
    line 1008: '  coordinate-system-description1'
    line 1009: '  coordinate-system-description2'
    line 1010: '  coordinate-system-description3'
    line 1011: '  coordinate-system-description4'
    line 1012: '  coordinate-system-description5'
    line 1013: '  coordinate-system-description-title'
    line 1014: '  coordinate-system-description-p1x1'
    line 1015: '    Before we begin programming with p5, we must first channel our eighth grade'
    line 1016: '    selves, pull out a piece of graph paper, and draw a line. The shortest'
    line 1017: '    distance between two points is a good old fashioned line, and this is where'
    line 1018: '    we begin, with two points on that graph paper.'
    line 1019: '  coordinate-system-description-p2x1'
    line 1020: '    The above figure shows a line between point A (1,0) and point B (4,5). If'
    line 1021: '    you wanted to direct a friend of yours to draw that same line, you would'
    line 1022: '    give them a shout and say "draw a line from the point one-zero to the point'
    line 1023: '    four-five, please." Well, for the moment, imagine your friend was a computer'
    line 1024: '    and you wanted to instruct this digital pal to display that same line on its'
    line 1025: '    screen. The same command applies (only this time you can skip the'
    line 1026: '    pleasantries and you will be required to employ a precise formatting). Here,'
    line 1027: '    the instruction will look like this'
    line 1028: '  coordinate-system-description-p3x1'
    line 1029: '    Even without having studied the syntax of writing code, the above statement'
    line 1030: '    should make a fair amount of sense. We are providing a command (which we'
    line 1031: '    will refer to as a "function") for the machine to follow entitled "line." In'
    line 1032: '    addition, we are specifying some arguments for how that line should be'
    line 1033: '    drawn, from point A (1,0) to point B (4,5). If you think of that line of'
    line 1034: '    code as a sentence, the function is a verb and the arguments are the objects'
    line 1035: '    of the sentence. The code sentence also ends with a semicolon instead of a'
    line 1036: '    period.'
    line 1037: '  coordinate-system-description-p4x1'
    line 1038: '    The key here is to realize that the computer screen is nothing more than a'
    line 1039: '    fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
    line 1040: '    numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
    line 1041: '    location of a point in space. And it is our job to specify what shapes and'
    line 1042: '    colors should appear at these pixel coordinates.'
    line 1043: '  coordinate-system-description-p5x1'
    line 1044: '    Nevertheless, there is a catch here. The graph paper from eighth grade'
    line 1045: '    ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
    line 1046: '    pointing up and the x-axis pointing to the right (in the positive direction,'
    line 1047: '    negative down and to the left). The coordinate system for pixels in a'
    line 1048: '    computer window, however, is reversed along the y-axis. (0,0) can be found'
    line 1049: '    at the top left with the positive direction to the right horizontally and'
    line 1050: '    down vertically.'
    line 1051: '  coordinate-system-simple-shapes-title'
    line 1052: '  coordinate-system-simple-shapes-p1x1'
    line 1053: '    The vast majority of p5 programming examples are visual in nature. These'
    line 1054: '    examples, at their core, involve drawing shapes and setting pixels. Let''s'
    line 1055: '    begin by looking at four primitive shapes.'
    line 1056: '  coordinate-system-simple-shapes-p2x1'
    line 1057: '    For each shape, we will ask ourselves what information is required to'
    line 1058: '    specify the location and size (and later color) of that shape and learn how'
    line 1059: '    p5 expects to receive that information. In each of the diagrams below, we''ll'
    line 1060: '    assume a window with a width of 100 pixels and height of 100 pixels.'
    line 1061: '  coordinate-system-simple-shapes-p3x1'
    line 1062: '  coordinate-system-simple-shapes-p3x2'
    line 1063: '  coordinate-system-simple-shapes-p4x1'
    line 1064: '  coordinate-system-simple-shapes-p4x2'
    line 1065: '  coordinate-system-simple-shapes-p5x1'
    line 1066: '  coordinate-system-simple-shapes-p5x2'
    line 1067: '    , things become a bit more complicated. In p5, a rectangle is specified by'
    line 1068: '    the coordinate for the top left corner of the rectangle, as well as its'
    line 1069: '    width and height.'
    line 1070: '  coordinate-system-simple-shapes-p6x1'
    line 1071: '    A second way to draw a rectangle involves specifying the centerpoint, along'
    line 1072: '    with width and height. If we prefer this method, we first indicate that we'
    line 1073: '    want to use the '
    line 1074: '  coordinate-system-simple-shapes-p6x2'
    line 1075: '  coordinate-system-simple-shapes-p7x1'
    line 1076: '    Finally, we can also draw a rectangle with two points (the top left corner'
    line 1077: '    and the bottom right corner). The mode here is '
    line 1078: '  coordinate-system-simple-shapes-p7x2'
    line 1079: '  coordinate-system-simple-shapes-p8x1'
    line 1080: '  coordinate-system-simple-shapes-p8x2'
    line 1081: '  coordinate-system-simple-shapes-p8x3'
    line 1082: '  coordinate-system-simple-shapes-p8x4'
    line 1083: '  coordinate-system-simple-shapes-p8x5'
    line 1084: '  coordinate-system-simple-shapes-p8x6'
    line 1085: '  coordinate-system-simple-shapes-p9x1'
    line 1086: '    Now let''s look at what some code with shapes in more complete form, with'
    line 1087: '    canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
    line 1088: '    to specify the width and height of the canvas.'
    line 1089: '  teach-desc'
    line 1090: test-tutorial
    line 1147: '  Libraries'
    line 1148: '  core-libraries'
    line 1149: '  community-libraries'
    line 1150: '  libraries-created-by'
    line 1151: '  p5.sound'
    line 1152: '    p5.sound extends p5 with Web Audio functionality including audio input,'
    line 1153: '    playback, analysis and synthesis.'
    line 1154: '  p5.accessibility'
    line 1155: '    p5.accessibility makes the p5 canvas more accessible to people who are blind'
    line 1156: '    and visually impaired.'
    line 1157: '  asciiart'
    line 1158: '    p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
    line 1159: '    p5js.'
    line 1160: '  p5.ble'
    line 1161: '    A Javascript library that enables communication between BLE devices and p5'
    line 1162: '    sketches.'
    line 1163: '  blizard.js'
    line 1164: '  p5.bots'
    line 1165: '    With p5.bots you can interact with your Arduino (or other microprocessor)'
    line 1166: '    from within the browser. Use sensor data to drive a sketch; use a sketch to'
    line 1167: '    drive LEDs, motors, and more!'
    line 1168: '  p5.clickable'
    line 1169: '  p5.cmyk.js'
    line 1170: '  p5.collide2D'
    line 1171: '    p5.collide2D provides tools for calculating collision detection for 2D'
    line 1172: '    geometry with p5.js.'
    line 1173: '  p5.createloop'
    line 1174: '  p5.dimensions'
    line 1175: '    p5.dimensions extends p5.js'' vector functions to work in any number of'
    line 1176: '    dimensions.'
    line 1177: '  p5.EasyCam'
    line 1178: '    Simple 3D camera control with inertial pan, zoom, and rotate. Major'
    line 1179: '    contributions by Thomas Diewald.'
    line 1180: '  p5.experience'
    line 1181: '    Extensive library for p5.js that adds additional event-listening'
    line 1182: '    functionality for creating canvas-based web applications.'
    line 1183: '  p5.func'
    line 1184: '    p5.func is a p5 extension that provides new objects and utilities for'
    line 1185: '    function generation in the time, frequency, and spatial domains.'
    line 1186: '  p5.geolocation'
    line 1187: '    p5.geolocation provides techniques for acquiring, watching, calculating, and'
    line 1188: '    geofencing user locations for p5.js.'
    line 1189: '  p5.gibber'
    line 1190: '  grafica.js'
    line 1191: '    grafica.js lets you add simple but highly configurable 2D plots to your'
    line 1192: '    p5.js sketches.'
    line 1193: '  p5.gui'
    line 1194: '  p5.localmessage'
    line 1195: '    p5.localmessage provides a simple interface to send messages locally from'
    line 1196: '    one sketch to another for easy multi-window sketching!'
    line 1197: '  marching'
    line 1198: '  mappa'
    line 1199: '    Mappa provides a set of tools for working with static maps, tile maps, and'
    line 1200: '    geo-data. Useful when building geolocation-based visual representations.'
    line 1201: '  ml5.js'
    line 1202: '    ml5.js builds on Tensorflow.js and provides friendly access to machine'
    line 1203: '    learning algorithms and models in the browser.'
    line 1204: '  p5.play'
    line 1205: '    p5.play provides sprites, animations, input and collision functions for'
    line 1206: '    games and gamelike applications.'
    line 1207: '  p5.particle'
    line 1208: '    The Particle and Fountain objects can be used to create data-driven effects'
    line 1209: '    that are defined through user structures or JSON input and user-draw'
    line 1210: '    functions.'
    line 1211: '  p5.Riso'
    line 1212: '    p5.Riso is a library for generating files suitable for Risograph printing.'
    line 1213: '    It helps turn your sketches into multi-color prints.'
    line 1214: '  rita.js'
    line 1215: '    RiTa.js provides a set of natural language processing objects for generative'
    line 1216: '    literature.'
    line 1217: '  Rotating knobs'
    line 1218: '  p5.scenemanager'
    line 1219: '    p5.SceneManager helps you create sketches with multiple states / scenes.'
    line 1220: '    Each scene is a like a sketch within the main sketch.'
    line 1221: '  p5.screenPosition'
    line 1222: '  p5.scribble'
    line 1223: '    Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
    line 1224: '    on a port of the original Processing library'
    line 1225: '  p5.serial'
    line 1226: '    p5.serial enables serial communication between devices that support serial'
    line 1227: '    (RS-232) and p5 sketches running in the browser.'
    line 1228: '  Shape5'
    line 1229: '    Shape5 is a 2D primative library for elementary students who are learning to'
    line 1230: '    code for the first time.'
    line 1231: '  p5.shape.js'
    line 1232: '  p5.speech'
    line 1233: '    p5.speech provides simple, clear access to the Web Speech and Speech'
    line 1234: '    Recognition APIs, allowing for the easy creation of sketches that can talk'
    line 1235: '    and listen.'
    line 1236: '  p5.start2d.js'
    line 1237: '  p5.tiledmap'
    line 1238: '    p5.tiledmap provides drawing and helper functions to include maps in your'
    line 1239: '    sketches.'
    line 1240: '  p5.touchgui'
    line 1241: '  tramontana'
    line 1242: '    Tramontana is a platform for easily use many devices (iOS, Android,'
    line 1243: '    tramontana Board, ...) to create interactive environments, interactive'
    line 1244: '    spaces or just prototype experiences at scale and in space.'
    line 1245: '  vida'
    line 1246: '    Vida is a simple library that adds camera (or video) based motion detection'
    line 1247: '    and blob tracking functionality to p5js.'
    line 1248: '  p5.voronoi'
    line 1249: '    p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
    line 1250: '    your p5.js sketches.'
    line 1251: '  p5.3D'
    line 1252: '  using-a-library-title'
    line 1253: '  using-a-library1'
    line 1254: '    A p5.js library can be any JavaScript code that extends or adds to the p5.js'
    line 1255: '    core functionality. There are two categories of libraries. Core libraries ('
    line 1256: '  using-a-library3'
    line 1257: '    ) are part of the p5.js distribution, while contributed libraries are'
    line 1258: '    developed, owned, and maintained by members of the p5.js community.'
    line 1259: '  using-a-library4'
    line 1260: '    To include a library in your sketch, link it into your HTML file, after you'
    line 1261: '    have linked in p5.js. An example HTML file might look like this'
    line 1262: '  create-your-own-title'
    line 1263: '  create-your-own1'
    line 1264: '  create-your-own2'
    line 1265: '  create-your-own3'
    line 1266: '  create-your-own4'
    line 1267: '    If you have created a library and would like to have it included on this'
    line 1268: '    page, submit this form!'
    line 1420: '  community-title'
    line 1421: '  community-statement-title'
    line 1422: '  community-statement1'
    line 1423: '    p5.js is a community interested in exploring the creation of art and design'
    line 1424: '    with technology.'
    line 1425: '  community-statement2'
    line 1426: '    We are a community of, and in solidarity with, people from every gender'
    line 1427: '    identity and expression, sexual orientation, race, ethnicity, language,'
    line 1428: '    neuro-type, size, ability, class, religion, culture, subculture, political'
    line 1429: '    opinion, age, skill level, occupation, and background. We acknowledge that'
    line 1430: '    not everyone has the time, financial means, or capacity to actively'
    line 1431: '    participate, but we recognize and encourage involvement of all kinds. We'
    line 1432: '    facilitate and foster access and empowerment. We are all learners.'
    line 1433: '  community-statement3'
    line 1434: '    We like these hashtags'
    line 1435: '    efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
    line 1436: '    (because we don''t assume knowledge), and #BlackLivesMatter (because of'
    line 1437: '    course).'
    line 1438: '  in-practice-title'
    line 1439: '  in-practice1'
    line 1440: '  in-practice2'
    line 1441: '    We insist on actively engaging with requests for feedback regardless of'
    line 1442: '    their complexity.'
    line 1443: '  in-practice3'
    line 1444: '    We welcome newcomers and prioritize the education of others. We strive to'
    line 1445: '    approach all tasks with the enthusiasm of a newcomer. Because we believe'
    line 1446: '    that newcomers are just as valuable in this effort as experts.'
    line 1447: '  in-practice4'
    line 1448: '    We consistently make the effort to actively recognize and validate multiple'
    line 1449: '    types of contributions.'
    line 1450: '  in-practice5'
    line 1451: '  in-times-conflict-title'
    line 1452: '  in-times-conflict1'
    line 1453: '  in-times-conflict2'
    line 1454: '  in-times-conflict3'
    line 1455: '    We admit when we''re wrong, apologize, and accept responsibility for our'
    line 1456: '    actions.'
    line 1457: '  in-times-conflict4'
    line 1458: '  in-times-conflict5'
    line 1459: '  in-times-conflict6'
    line 1460: '  in-times-conflict7'
    line 1461: '  in-the-future-title'
    line 1462: '  in-the-future1'
    line 1463: '  notes-title'
    line 1464: '  notes1'
    line 1465: '  notes2'
    line 1466: '  notes3'
    line 1467: '  notes4'
    line 1468: '  notes5'
    line 1469: '  contribute-title'
    line 1470: '  contribute1'
    line 1471: '    Our community is always looking for enthusiasts to help in all different'
    line 1472: '    ways.'
    line 1473: '  develop-title'
    line 1474: '  develop1'
    line 1475: '  develop2'
    line 1476: '  develop3'
    line 1477: '  develop4'
    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 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 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 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 1634: '  2019cc_8'
    line 1635: '  2019cc_9'
    line 1636: '    Participant speaks at a podium in front of projected text about the problem'
    line 1637: '    with anonymyzing data'
    line 1638: '  2019cc_10'
    line 1639: '    Person with a microphone speaking to fellow participants in front of text'
    line 1640: '    that reads p5.js will not add any new features except those that increase'
    line 1641: '    access'
    line 1642: '  2019cc_11'
    line 1643: '  2019cc_12'
    line 1644: '  2019cc_13'
    line 1645: '  2019cc_14'
    line 1646: '  2019cc_15'
    line 1647: '    Woman with microphone speaking to fellow participants with the text sacred'
    line 1648: '    boundaries in the projection behind her'
    line 1649: '  2019cc_16'
    line 1650: '    Overhead view of participants listening to a panel of people with an image'
    line 1651: '    of a 3d rendered man on it'
    line 1652: '  2019cc_17'
    line 1653: '    Participants sit around a table with their laptops and observe code on a'
    line 1654: '    screen'
    line 1655: '  2019cc_18'
    line 1656: '  2019cc_19'
    line 1657: '  2019cc_20'
    line 1658: '  2019cc_21'
    line 1659: '  2019cc_22'
    line 1660: '    Participants sitting around a large U shaped table looking towards the front'
    line 1661: '    of the classroom'
    line 1662: '  2019cc_23'
    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'
    line 1741: '  book-3-type'
    line 1742: '  book-3-description'
    line 1743: '    By using simple languages such as JavaScript in p5.js, artists and makers'
    line 1744: '    can create everything from interactive typography and textiles to 3D-printed'
    line 1745: '    furniture to complex and elegant infographics.'
    line 1746: '  book-3-order-a'
    line 1747: '  book-3-order-b'
    line 1748: '  book-4-title'
    line 1749: '  book-4-authors'
    line 1750: '  book-4-publisher'
    line 1751: '  book-4-pages'
    line 1752: '  book-4-type'
    line 1753: '  book-4-description'
    line 1754: '    By using simple languages such as JavaScript in p5.js, artists and makers'
    line 1755: '    can create everything from interactive typography and textiles to 3D-printed'
    line 1756: '    furniture to complex and elegant infographics.'
    line 1757: '  book-4-order-a'
    line 1758: '  book-4-order-b'
    line 1759: '  book-5-title'
    line 1760: '  book-5-authors'
    line 1761: '  book-5-publisher'
    line 1762: '  book-5-pages'
    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'
    line 1803: '  Form'
    line 1804: '  Data'
    line 1805: '  Arrays'
    line 1806: '  Control'
    line 1807: '  Image'
    line 1808: '  Color'
    line 1809: '  Math'
    line 1810: '  Simulate'
    line 1811: '  Interaction'
    line 1812: '  Objects'
    line 1813: '  Lights'
    line 1814: '  Motion'
    line 1815: '  Instance_Mode'
    line 1816: '  Dom'
    line 1817: '  Drawing'
    line 1818: '  Transform'
    line 1819: '  Typography'
    line 1820: '  3D'
    line 1821: '  Input'
    line 1822: '  Advanced_Data'
    line 1823: '  Sound'
    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 &#x0026; 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'
    line 2521: '  teach-case11-content1-1'
    line 2522: '  teach-case11-content2'
    line 2523: '  teach-case11-content3'
    line 2524: '  teach-case11-content4'
    line 2525: '    Over the course of three workshops, we will draw and create patterns using'
    line 2526: '    p5.js, an open-source graphical library; we will learn and apply'
    line 2527: '    computational concepts to transform patterns and finally, we will bring a'
    line 2528: '    weaving to life with electronic microcontrollers.'
    line 2529: '  teach-case11-content5'
    line 2530: '  teach-case11-content5-1'
    line 2531: '    Materials'
    line 2532: '    pattern weaving tool.'
    line 2533: '  teach-case11-content5-2'
    line 2534: '  teach-case11-content5-3'
    line 2535: '  teach-case11-content5-4'
    line 2536: '  teach-case11-content5-5'
    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'
zh-Hans:
  src/data/en.yml:
    line 1552: '  teach-case6-alt'
    line 1560: '  teach-case8-alt'
    line 1568: '  teach-case9-alt'
    line 1576: '  teach-case11-alt'
    line 1584: '  teach-case12-alt'
    line 1592: '  teach-case13-alt'
    line 1600: '  teach-case14-alt'
    line 1608: '  teach-case15-alt'
    line 1616: '  teach-case16-alt'
    line 1624: '  teach-case17-alt'
    line 1536: '  teach-case2-alt'
    line 1544: '  teach-case4-alt'
    line 1517: '  teach-case1-title'
    line 1527: '  teach-case2-content5-1'
    line 1528: '  teach-case2-content5-2'
    line 1537: '  teach-case4-title'
    line 1545: '  teach-case13-title'
    line 1546: '  teach-case13-lead-name'
    line 1547: '  teach-case13-speech'
    line 1548: '    I''m working on a new series of coding class for Disabled students in South'
    line 1549: '    Korea. I''m researching about the pedagogy and translation. I plan to hold'
    line 1550: '    workshops in December 2020. The project is supported by the Open Society'
    line 1551: '    Foundation Human Rights Initiative and Korea Disability Arts & Culture'
    line 1553: '  teach-case13-content1'
    line 1554: '  teach-case13-content1-1'
    line 1555: '  teach-case13-content2'
    line 1556: '  teach-case13-content3'
    line 1557: '  teach-case13-content4'
    line 1558: '    Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
    line 1559: '  teach-case13-content5'
    line 1561: '  teach-case13-content5-1'
    line 1562: ''
    line 1563: '  teach-case14-title'
    line 1564: '  teach-case14-lead-name'
    line 1565: '  teach-case14-speech'
    line 1566: '    The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
    line 1567: '  teach-case14-content1'
    line 1569: '  teach-case14-content1-2'
    line 1570: '  teach-case14-content2'
    line 1571: '  teach-case14-content3'
    line 1572: '  teach-case14-content4'
    line 1573: '    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 1574: '    the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
    line 1575: '  teach-case14-content5'
    line 1577: '  teach-case14-content5-1'
    line 1578: '    1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
    line 1579: '  teach-case14-content5-2'
    line 1580: '    2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
    line 1581: '  teach-case14-content5-3'
    line 1582: '    3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
    line 1583: '  teach-case14-content5-4'
    line 1585: '  teach-case14-content5-5'
    line 1586: '  teach-case15-title'
    line 1587: '  teach-case15-lead-name'
    line 1588: '  teach-case15-content1'
    line 1589: '   L''École de Design Nantes Atlantique, France'
    line 1590: '  teach-case15-content1-1'
    line 1591: '  teach-case15-content2'
    line 1593: '  teach-case15-content3'
    line 1594: '  teach-case15-content4'
    line 1595: '    To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
    line 1596: '  teach-case15-content5'
    line 1597: '    GitHub Readme File'
    line 1598: '  teach-case15-content5-1'
    line 1599: '  teach-case16-title'
    line 1601: '  teach-case16-lead-name'
    line 1602: '  teach-case16-speech'
    line 1603: '    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 1604: '  teach-case16-content1'
    line 1605: '  teach-case16-content1-1'
    line 1606: '  teach-case16-content2'
    line 1607: '  teach-case16-content2-1'
    line 1609: '  teach-case16-content3'
    line 1610: '  teach-case16-content4'
    line 1611: '    Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
    line 1612: '    this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
    line 1613: '  teach-case16-content5'
    line 1614: '    p5for50+ web app'
    line 1615: '  teach-case16-content5-1'
    line 1617: '  teach-case16-content5-2'
    line 1618: '  teach-case16-content5-3'
    line 1619: '  teach-case16-content5-4'
    line 1620: ''
    line 1621: '  teach-case17-title'
    line 1622: '  teach-case17-lead-name'
    line 1623: '  teach-case17-speech'
    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 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&#32;'
    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'
    line 41: Reference
    line 118: '  p2x3'
    line 128: '  p3xp5'
    line 59: tagline4
    line 136: '  p4xp6'
    line 62: tagline7
    line 45: Books
    line 34: Language-Settings
    line 35: Sidebar-Title
    line 36: Home
    line 38: Download
    line 39: Donate
    line 40: Start
    line 42: Libraries
    line 43: Learn
    line 56: tagline1
    line 60: tagline5
    line 61: tagline6
    line 111: '    identity and expression, sexual orientation, race, ethnicity, language,'
    line 112: '    neuro-type, size, disability, class, religion, culture, subculture,'
    line 116: '    kinds. We facilitate and foster access and empowerment. We are all learners.'
    line 117: '  p2x2'
    line 119: '  p2x4'
    line 120: '  p2x5'
    line 121: '  p2x6'
    line 122: '  p2x7'
    line 124: '  p3xp1'
    line 125: '  p3xp2'
    line 126: '  p3xp3'
    line 127: '  p3xp4'
    line 137: '  sketch_credits'
    line 138: '  sketch_info'
    line 270: '  environment8'
    line 271: '    Open Sublime. Go to the File menu and choose Open... and choose the folder'
    line 272: '    that your html and js files are located in. On the left sidebar, you should'
    line 273: '    find the folder name at the top, with a list of the files contained in the'
    line 282: '  environment12'
    line 283: '  environment13'
    line 284: '  your-first-sketch-title'
    line 285: '  your-first-sketch-intro1'
    line 286: '  your-first-sketch-intro2'
    line 287: '  your-first-sketch-intro3'
    line 288: '  your-first-sketch-intro4'
    line 289: '  your-first-sketch1'
    line 290: '  your-first-sketch2'
    line 291: '  your-first-sketch3'
    line 292: '  your-first-sketch4'
    line 293: '    The line you just added draws an ellipse, with its center 50 pixels over'
    line 294: '    from the left and 50 pixels down from the top, with a width and height of 80'
    line 295: '    pixels.'
    line 296: '  your-first-sketch5'
    line 297: '  your-first-sketch6'
    line 298: '    If you are using a screen reader, you must turn on the accessible outputs in'
    line 299: '    the p5 online editor, outside the editor you must add the accessibility'
    line 300: '    library in your html. To learn more visit'
    line 301: '  your-first-sketch7'
    line 302: '  your-first-sketch8'
    line 303: '    If you''ve typed everything correctly, this will appear in the display'
    line 304: '    window'
    line 305: '  your-first-sketch9'
    line 306: '  your-first-sketch10'
    line 307: '    If nothing appears, the editor may be having trouble understanding what'
    line 308: '    you’ve typed. If this happens, make sure that you''ve copied the example code'
    line 309: '    exactly'
    line 310: '    between each of them, the line should end with a semicolon, and ellipse has'
    line 311: '    to be spelled correctly.'
    line 312: '  your-first-sketch11'
    line 313: '    One of the most difficult things about getting started with programming is'
    line 314: '    that you have to be very specific about the syntax. The browser isn''t always'
    line 315: '    smart enough to know what you mean, and can be quite fussy about the'
    line 316: '    placement of punctuation. You''ll get used to it with a little practice. In'
    line 317: '    the bottom left of the editor you will find the console section. Here, you'
    line 318: '    can find messages from the editor with details about any errors it'
    line 319: '    encounters.'
    line 320: '  your-first-sketch12'
    line 321: '    Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
    line 322: '    last example to try this'
    line 323: '  your-first-sketch13'
    line 324: '    This program creates a canvas that is 400 pixels wide and 400 pixels high,'
    line 325: '    and then starts drawing white circles at the position of the mouse. When a'
    line 326: '    mouse button is pressed, the circle color changes to black. Run the code,'
    line 327: '    move the mouse, and click to experience it.'
    line 328: '  your-first-sketch14'
    line 329: '  first-sketch-heading1'
    line 330: '  first-sketch-heading2'
    line 331: '  first-sketch-heading3'
    line 332: '  what-next-title'
    line 333: '  learn1'
    line 334: '  learn2'
    line 335: '  learn3'
    line 336: '  learn4'
    line 337: '  learn5'
    line 338: '  learn6'
    line 339: '  learn7'
    line 340: '  learn8'
    line 341: '  learn9'
    line 342: '  learn10'
    line 343: '  reference1'
    line 344: '  reference2'
    line 345: '  reference3'
    line 346: '  learn11'
    line 347: '  learn12'
    line 348: '  processing-transition1'
    line 349: '  processing-transition2'
    line 350: '  processing-transition3'
    line 351: '  processing-transition4'
    line 352: '  book1'
    line 353: '    Parts of this tutorial were adapted from the book, Getting Started with'
    line 354: '    p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
    line 355: '    Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
    line 356: '    Contributors Conference.'
    line 44: Examples
    line 57: tagline2
    line 146: '  copyright-title'
    line 231: '  get-started-title'
    line 240: '    . If you would like to work on the the desktop version of p5.js you can'
    line 258: '  download7'
    line 281: '    file manager or type'
    line 54: footer4
    line 110: '    We are a community of, and in solidarity with, people from every gender'
    line 239: '  get-started6'
    line 259: '  environment-title'
    line 274: '    folder directly below.'
    line 875: '  writing-a-tutorial-iframe-4'
    line 233: '    This page walks you through setting up a p5.js project and making your first'
    line 234: '    sketch.'
    line 244: '  download-title'
    line 245: '  hosted-title'
    line 50: footerxh1
    line 98: '  p1x1'
    line 99: '    p5.js is a JavaScript library for creative coding, with a focus on making'
    line 100: '    coding accessible and inclusive for artists, designers, educators,'
    line 109: '  p2x1'
    line 129: '  p3xp6'
    line 148: '    The p5.js library is free software; you can redistribute it and/or modify it'
    line 46: Community
    line 133: '  p4xp3'
    line 134: '  p4xp4'
    line 141: '  project-a-2-5-phuong'
    line 144: '  project-a-2-7-phuong'
    line 64: '  color-p3x3'
    line 70: '  color-rgb-p1x1'
    line 87: '  color-custom-ranges-p2x1'
    line 24: footer1
    line 25: footer2
    line 26: footer3
    line 27: footer4
    line 77: '  color-rgb-p2x1'
    line 82: '  color-transparency-p2x1'
    line 139: '  project-a-2-7-phuong'
    line 76: '  color-transparency-p1x1'
    line 31: tagline7
    line 63: '  hosted-title'
    line 75: '  download9'
    line 140: '  learn5'
    line 142: '  learn7'
    line 143: '  learn8'
    line 145: '  learn10'
    line 159: '  processing-transition1'
    line 160: '  processing-transition2'
    line 161: '  processing-transition3'
    line 357: '  link-2-chung'
    line 358: '  link-3-chung'
    line 359: '  project-a-1-1-chung'
    line 360: '  project-a-1-2-chung'
    line 361: '  project-a-1-3-chung'
    line 362: '  project-a-2-1-chung'
    line 363: '  dan-shiffman-matterjs-tutorial'
    line 364: '  project-a-2-2-chung'
    line 365: '  project-a-3-1-chung'
    line 366: '  project-a-3-2-chung'
    line 367: '  project-a-4-1-chung'
    line 368: '  project-a-4-2-chung'
    line 369: '  project-a-4-3-chung'
    line 370: '  project-a-5-1-chung'
    line 371: '  project-a-5-2-chung'
    line 372: ''
    line 373: '  creator-from-casey-louise'
    line 374: '  project-a-1-1-casey-louise'
    line 375: '  project-a-1-2-casey-louise'
    line 376: '  project-a-1-3-casey-louise'
    line 377: '  project-a-1-4-casey-louise'
    line 378: '  project-a-1-5-casey-louise'
    line 379: '  project-a-2-1-casey-louise'
    line 380: '  project-a-2-2-casey-louise'
    line 381: '  project-a-3-1-casey-louise'
    line 382: '  project-a-3-2-casey-louise'
    line 383: '  project-a-3-3-casey-louise'
    line 384: '  project-a-3-4-casey-louise'
    line 385: '  project-a-3-5-casey-louise'
    line 386: '  project-a-4-1-casey-louise'
    line 387: '  adam-ferris-repo-casey-louise'
    line 388: '  project-a-4-2-casey-louise'
    line 389: '  project-a-4-3-casey-louise'
    line 390: '  project-a-4-4-casey-louise'
    line 391: '  webgl-casey-louise'
    line 392: '  project-a-4-5-casey-louise'
    line 393: '  project-a-4-6-casey-louise'
    line 394: '  openframeworks-book-casey-louise'
    line 395: '  project-a-4-7-casey-louise'
    line 396: '  project-a-5-1-casey-louise'
    line 397: '  project-a-5-2-casey-louise'
    line 398: ''
    line 399: '  pronouns-nonbinary'
    line 400: '  creator-from-moon'
    line 401: '  posters-by'
    line 402: '  project-a-1-1-moon'
    line 403: '  project-a-1-2-moon'
    line 404: '  project-a-1-3-moon'
    line 405: '  project-a-1-4-moon'
    line 406: '  pcd-la-moon'
    line 407: '  project-a-1-5-moon'
    line 408: '  project-a-2-1-moon'
    line 409: '  codetrain-moon'
    line 410: '  project-a-2-2-moon'
    line 411: '  p5-reference-moon'
    line 412: '  project-a-2-3-moon'
    line 413: '  project-a-3-1-moon'
    line 414: '  project-a-3-2-moon'
    line 415: '  project-a-3-3-moon'
    line 416: '  project-a-3-4-moon'
    line 417: '  project-a-4-1-moon'
    line 418: '  project-a-5-1-moon'
    line 419: '  project-a-5-2-moon'
    line 79: '  environment1'
    line 88: '  environment8'
    line 173: '  complete-library-intro1'
    line 182: '  learn3'
    line 191: '  writing-a-tutorial-embedding-7'
    line 197: '  writing-a-tutorial-iframe-1'
    line 204: '  writing-a-tutorial-iframe-7'
    line 213: '  color-description1'
    line 222: '  coordinate-system-description3'
    line 69: '  download5'
    line 74: '  download8'
    line 78: '  environment1'
    line 157: '  learn11'
    line 172: '  complete-library-intro1'
    line 181: '  learn3'
    line 190: '  writing-a-tutorial-embedding-7'
    line 196: '  writing-a-tutorial-iframe-1'
    line 203: '  writing-a-tutorial-iframe-7'
    line 212: '  color-description1'
    line 221: '  coordinate-system-description3'
    line 230: '  coordinate-system-simple-shapes-p1x1'
    line 66: '  sketch_credits'
    line 67: '  sketch_info'
    line 22: footer1
    line 23: footer2
    line 32: '  download-intro'
    line 65: '  color-rgb-p1x1'
    line 72: '  color-rgb-p2x1'
    line 85: '  color-custom-ranges-p4x1'
    line 28: footer5
    line 81: '  color-transparency-p1x1'
    line 90: '  color-custom-ranges-p4x1'
    line 153: '  project-a-4-7-casey-louise'
    line 33: Skip-To-Content
    line 47: Contribute
    line 48: Forum
    line 49: Showcase
    line 51: footer1
    line 52: footer2
    line 53: footer3
    line 58: tagline3
    line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
    line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
    line 107: '    text, input, video, webcam, and sound.'
    line 108: '  p2xh2'
    line 130: '  p4xh2'
    line 131: '  p4xp1'
    line 132: '  p4xp2'
    line 135: '  p4xp5'
    line 147: '  copyright1'
    line 149: '    under the terms of the'
    line 150: '  copyright2'
    line 151: '  copyright3'
    line 152: '  copyright4'
    line 232: '  get-started1'
    line 235: '  get-started2'
    line 236: '  get-started3'
    line 237: '  get-started4'
    line 238: '  get-started5'
    line 241: '    scroll down to'
    line 242: '  get-started7'
    line 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 261: '  environmentlink'
    line 262: '  environment2'
    line 263: '  environment3'
    line 264: '  environment4'
    line 278: '  environment10'
    line 279: '  environment11'
    line 280: '    Open the index.html file in your browser by double clicking on it in your'
    line 436: '  Download'
    line 437: '  download-intro'
    line 438: '    Welcome! While titled "Download" this page actually contains a collection of'
    line 439: '    links to either download the library or begin working with it online. We''ve'
    line 440: '    tried to order things to reflect what a beginner might want first, to'
    line 441: '    resources that more experienced programmers may be looking for.'
    line 442: '  editor-title'
    line 443: '  p5.js-editor'
    line 444: '  p5.js-editor-intro'
    line 445: '    This link redirects you to the p5.js Editor online so you can begin using'
    line 446: '    p5.js immediately.'
    line 447: '  editor-includes'
    line 448: '  complete-library-title'
    line 449: '  complete-library-intro1'
    line 450: '    This is a download containing the p5.js library file, the p5.sound addon,'
    line 451: '    and an example project. It does not contain an editor. Visit'
    line 452: '  complete-library-intro2'
    line 453: '  complete-library-intro3'
    line 454: '  p5.js-complete'
    line 455: '  includes-1'
    line 456: '  includes-2'
    line 457: '  includes-3'
    line 458: '  single-files-title'
    line 459: '  single-files-intro'
    line 460: '    These are downloads or links to the p5.js library file. No additional'
    line 461: '    contents are included.'
    line 462: '  single-file'
    line 463: '  p5.js-uncompressed'
    line 464: '  compressed'
    line 465: '  link'
    line 466: '  statically-hosted-file'
    line 467: '  etc-title'
    line 468: '  older-releases'
    line 469: '  github-repository'
    line 470: '  report-bugs'
    line 471: '  supported-browsers'
    line 472: '  support-title'
    line 473: '  support-options'
    line 474: '  support-1'
    line 475: '    p5.js is free, open-source software. We want to make our community as open'
    line 476: '    and inclusive as possible. You can support this work by'
    line 477: '  support-2'
    line 478: '  support-3'
    line 479: '  support-4'
    line 480: '  support-5'
    line 481: '  support-6'
    line 482: '  support-7'
    line 483: '  support-8'
    line 484: '  support-9'
    line 485: '  support-10'
    line 486: '  support-11'
    line 487: '  support-12'
    line 488: '    Your membership supports software development (for p5.js, Processing,'
    line 489: '    Processing.py, Processing for Android and ARM devices, education resources'
    line 490: '    like code examples and tutorials,'
    line 491: '  support-13'
    line 492: '  support-14'
    line 493: '  support-15'
    line 494: '  support-16'
    line 495: '  support-17'
    line 496: '    p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
    line 497: '    Pittsburgh (Image credit'
    line 498: '  support-18'
    line 499: '    Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
    line 500: '    workshops in London (Image credit'
    line 501: '  support-19'
    line 502: '    Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
    line 503: '    Kira Simon-Kennedy)'
    line 504: '  support-20'
    line 505: '    Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
    line 506: '    (Image credit'
    line 507: '  support-21'
    line 508: '    Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
    line 509: '    credit'
    line 510: '  support-22'
    line 511: '  support-23'
    line 512: '    Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
    line 513: '    (Image credit'
    line 514: '  support-24'
    line 515: '    Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
    line 516: '    workshop led by Taeyoon Choi (Image credit'
    line 517: '  support-25'
    line 518: '    p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
    line 519: '    Pittsburgh (Image credit'
    line 520: '  support-26'
    line 521: '    Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
    line 522: '    International Center of Photography (Image credit'
    line 523: '    Photography)'
    line 524: '  support-27'
    line 525: '    Participants at p5.js workshop in Santiago, Chile, led by Aarón'
    line 526: '    Montoya-Moraga (Image credit'
    line 527: '  support-28'
    line 528: '    Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
    line 529: '    led by Taeyoon Choi (Image credit'
    line 530: '  support-29'
    line 531: '    Processing Foundation Fellow DIY Girls run a creative coding program in Los'
    line 532: '    Angeles (Image credit'
    line 533: '  support-30'
    line 534: '  support-31'
    line 535: '  support-32'
    line 536: '  support-33'
    line 537: '  support-17-alt'
    line 538: '  support-18-alt'
    line 539: '  support-19-alt'
    line 540: '  support-20-alt'
    line 541: '  support-21-alt'
    line 542: '  support-22-alt'
    line 543: '  support-23-alt'
    line 544: '  support-24-alt'
    line 545: '  support-25-alt'
    line 546: '  support-26-alt'
    line 547: '  support-27-alt'
    line 548: '  support-28-alt'
    line 549: '  support-29-alt'
    line 550: '  support-30-alt'
    line 551: '  support-31-alt'
    line 729: '  learn-title'
    line 730: '  teach-title2'
    line 731: '  learn1'
    line 732: '    These tutorials provide more in-depth or step-by-step overviews of'
    line 733: '    particular topics. Check out the '
    line 734: '  learn2'
    line 735: '  learn3'
    line 736: '  introduction-to-p5js-title'
    line 737: '  hello-p5js-title'
    line 738: '  hello-p5js'
    line 739: '    This short video will introduce you to the library and what you can do with'
    line 740: '    it.'
    line 741: '  getting-started-title'
    line 742: '  getting-started'
    line 743: '    Welcome to p5.js! <br> This introduction covers the basics of setting up a'
    line 744: '    p5.js project.'
    line 745: '  p5js-overview-title'
    line 746: '  p5js-overview'
    line 747: '  p5js-processing-title'
    line 748: '  p5js-processing'
    line 749: '    The main differences between the two, and how to convert from one to the'
    line 750: '    other.'
    line 751: '  p5-screen-reader-title'
    line 752: '  p5-screen-reader'
    line 753: '  using-local-server-title'
    line 754: '  using-local-server'
    line 755: '  p5js-wiki-title'
    line 756: '  p5js-wiki'
    line 757: '  connecting-p5js-title'
    line 758: '  creating-libraries-title'
    line 759: '  creating-libraries'
    line 760: '  nodejs-and-socketio-title'
    line 761: '  nodejs-and-socketio'
    line 762: '  programming-topics-title'
    line 763: '  beyond-the-canvas-title'
    line 764: '  beyond-the-canvas'
    line 765: '  3d-webgl-title'
    line 766: '  3d-webgl'
    line 767: '  color-title'
    line 768: '  color'
    line 769: '  coordinate-system-and-shapes-title'
    line 770: '  coordinate-system-and-shapes'
    line 771: '  interactivity-title'
    line 772: '  interactivity'
    line 773: '  program-flow-title'
    line 774: '  program-flow'
    line 775: '  curves-title'
    line 776: '  curves'
    line 777: '    An introduction to the three types of curves in p5.js'
    line 778: '    and Bézier curves.'
    line 779: '  becoming-a-better-programmer-title'
    line 780: '  debugging-title'
    line 781: '  debugging'
    line 782: '  optimizing-title'
    line 783: '  optimizing'
    line 784: '    A tutorial of tips and tricks for optimizing your code to make it run faster'
    line 785: '    and smoother.'
    line 786: '  test-driven-development-title'
    line 787: '  test-driven-development'
    line 788: '    Save yourself from agony on install day. What is unit testing and how to use'
    line 789: '    it? By Andy Timmons.'
    line 790: '  contributing-to-the-community-title'
    line 791: '  development-title'
    line 792: '  development'
    line 793: '  looking-inside-title'
    line 794: '  looking-inside'
    line 795: '    A friendly intro to the file structure and tools for p5.js development, by'
    line 796: '    Luisa Pereira.'
    line 797: '  writing-tutorial-title'
    line 798: '  writing-tutorial'
    line 799: '  writing-a-tutorial-title'
    line 800: '  writing-a-tutorial-author'
    line 801: '  writing-a-tutorial-1'
    line 802: '    We invite educators, contributors and general enthusiasts to contribute p5js'
    line 803: '    tutorials. The p5js project makes creative coding and open source'
    line 804: '    development more accessible to a diverse community and we are excited to'
    line 805: '    publish tutorials on all aspects of the development process. Our learning'
    line 806: '    materials so far include guides on learning p5, programming technique and'
    line 807: '    how to contribute to an open source project.'
    line 808: '  writing-a-tutorial-2'
    line 809: '    We welcome new written tutorial contributions and this guide outlines the'
    line 810: '    steps of how to propose, prepare and contribute.'
    line 811: '  writing-a-tutorial-how-start-title'
    line 812: '  writing-a-tutorial-how-start-1'
    line 813: '  writing-a-tutorial-how-start-2'
    line 814: '  writing-a-tutorial-how-start-3'
    line 815: '    that outlines in progress tutorials. If your topic is listed as in progress,'
    line 816: '    perhaps you can add to work being done and contribute to preparing existing'
    line 817: '    work for publication so please reach out to us.'
    line 818: '  writing-a-tutorial-how-start-4'
    line 819: '    If your topic is not already covered and is not listed as in progress,'
    line 820: '    please write a few sentences on what you propose to cover and email us this'
    line 821: '    description at education@p5js.org.'
    line 822: '  writing-a-tutorial-how-prepare-title'
    line 823: '  writing-a-tutorial-how-prepare-1'
    line 824: '    When your tutorial is ready for publication, please follow these steps to'
    line 825: '    prepare your content for the p5js website.'
    line 826: '  writing-a-tutorial-how-prepare-2'
    line 827: '  writing-a-tutorial-how-prepare-3'
    line 828: '  writing-a-tutorial-how-prepare-4'
    line 829: '  writing-a-tutorial-how-prepare-5'
    line 830: '    The folder containing your tutorial will be placed in the ''tutorials'' folder'
    line 831: '    of the p5js site. The file called index.hbs is the '
    line 832: '  writing-a-tutorial-how-prepare-6'
    line 833: '  writing-a-tutorial-how-prepare-7'
    line 834: '  writing-a-tutorial-how-prepare-8'
    line 835: '  writing-a-tutorial-how-prepare-9'
    line 836: '    tags on the page, with formatting defined by the &lt;h1&gt; and &lt;h2&gt;'
    line 837: '    tags, the &lt;p&gt; paragraph tags as is done shown on the'
    line 838: '  writing-a-tutorial-how-prepare-10'
    line 839: '  writing-a-tutorial-how-prepare-11'
    line 840: '    If your tutorial contains images, they are to be placed in the assets folder'
    line 841: '    of the p5 site, in the location src/assets/learn/test-tutorial/images as'
    line 842: '    shown below.'
    line 843: '  writing-a-tutorial-how-prepare-12'
    line 844: '  writing-a-tutorial-embedding-title'
    line 845: '  writing-a-tutorial-embedding-1'
    line 846: '    Using p5js means you can illustrate your tutorial with animated, interactive'
    line 847: '    or editable code examples to demonstrate programming concepts. Your examples'
    line 848: '    should be prepared as p5.js sketches and can be embedded into the tutorial'
    line 849: '    in two ways.'
    line 850: '  writing-a-tutorial-embedding-2'
    line 851: '  writing-a-tutorial-embedding-3'
    line 852: '  writing-a-tutorial-embedding-4'
    line 853: '  writing-a-tutorial-embedding-5'
    line 854: '  writing-a-tutorial-embedding-6'
    line 855: '  writing-a-tutorial-embedding-7'
    line 856: '  writing-a-tutorial-embedding-8'
    line 857: '  writing-a-tutorial-embedding-9'
    line 858: '  writing-a-tutorial-embedding-10'
    line 859: '    If the example is to be animated and/or interactive but not editable. The'
    line 860: '    p5.js sketch should be embedded into the page as an iframe as described'
    line 861: '    below.'
    line 862: '  writing-a-tutorial-iframe-title'
    line 863: '  writing-a-tutorial-iframe-1'
    line 864: '    An iframe is like creating a window through which you can explore another'
    line 865: '    page, sandboxed from the rest of your page. In this case it will be a window'
    line 866: '    to the index.html containing your p5.js sketch. '
    line 867: '  writing-a-tutorial-iframe-2'
    line 868: '    Put your p5 sketches in the /src/assets/learn folder of the site, in a'
    line 869: '    folder labelled with the name of your sketch as shown in the screenshot.'
    line 870: '    This is where all the images and p5 sketches linked by iframe should be'
    line 871: '    stored.'
    line 872: '  writing-a-tutorial-iframe-3'
    line 873: '    In the subfolders containing your p5 examples there should be a sketch.js'
    line 874: '    file and the embed.html file for the sketch. '
    line 876: '    Make sure your embed.html file has the correct paths to the p5 libraries of'
    line 877: '    the site. If your file structure is the same as above, the path to the p5.js'
    line 878: '    library should be "../../../js/p5.min.js".'
    line 879: '  writing-a-tutorial-iframe-5'
    line 880: '    You can then embed the p5js index files as iframes in the .hbs file that'
    line 881: '    contains your tutorial content. The embed code for the iframe would then'
    line 882: '    be'
    line 883: '  writing-a-tutorial-iframe-6'
    line 884: '    Styling for the iframe (this could directly into the post or in a'
    line 885: '    stylesheet)'
    line 886: '  writing-a-tutorial-iframe-7'
    line 887: '  writing-a-tutorial-iframe-8'
    line 888: '  writing-a-tutorial-iframe-9'
    line 889: '    One thing to note is that you need to manually set the size of the iframe,'
    line 890: '    so it works best if things are a standard size.'
    line 891: '  writing-a-tutorial-iframe-10'
    line 892: '    Also note that the links to the p5.js library files do not happen from the'
    line 893: '    .eps page with all the tutorial content. Instead they will be located in the'
    line 894: '    html page that is rendering your sketch (in this case, called embed.html).'
    line 895: '  writing-a-tutorial-iframe-11'
    line 896: '  writing-a-tutorial-embed-iframe-12'
    line 897: '  writing-a-tutorial-finishing-title'
    line 898: '  writing-a-tutorial-finishing-1'
    line 899: '    Once your have finished writing your tutorial and your content has been'
    line 900: '    given the thumbs up. Fork the p5.js website repository, prepare your content'
    line 901: '    as described above and then issue a pull request to the p5.js website'
    line 902: '    repository so we can publish your contribution!'
    line 903: '  writing-a-tutorial-finishing-2'
    line 904: '  color-description1'
    line 905: '    This tutorial is from the book Learning Processing by Daniel Shiffman,'
    line 906: '    published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
    line 907: '    was ported to P5 by Kelly Chang. If you find any errors or have comments, '
    line 908: '  color-description2'
    line 909: '  color-p1x1'
    line 910: '    In the digital world, when we want to talk about a color, precision is'
    line 911: '    required. Saying "Hey, can you make that circle bluish-green?" will not do.'
    line 912: '    Color, rather, is defined as a range of numbers. Let''s start with the'
    line 913: '    simplest case'
    line 914: '    In between, every other number—50, 87, 162, 209, and so on—is a shade of'
    line 915: '    gray ranging from black to white.'
    line 916: '  color-p2x1'
    line 917: '  color-p2x2'
    line 918: '  color-p2x3'
    line 919: '  color-p2x4'
    line 920: '  color-code1'
    line 921: '    background(255);    // Setting the background to white '
    line 922: '     stroke(0);          // Setting the outline (stroke) to black '
    line 923: '     fill(150);          // Setting the interior of a shape (fill) to grey '
    line 924: '     rect(50,50,75,100); // Drawing the rectangle'
    line 925: '  color-p3x1'
    line 926: '  color-p3x2'
    line 927: '  color-p3x3'
    line 928: '    . Our instinct might be to say "stroke(0)" for no outline, however, it is'
    line 929: '    important to remember that 0 is not "nothing", but rather denotes the color'
    line 930: '    black. Also, remember not to eliminate both—with '
    line 931: '  color-p3x4'
    line 932: '  color-p3x5'
    line 933: '  color-p4x1'
    line 934: '    In addition, if we draw two shapes, p5.js will always use the most recently'
    line 935: '    specified stroke and fill, reading the code from top to bottom.'
    line 936: '  color-rgb-title'
    line 937: '  color-rgb-p1x1'
    line 938: '    Remember finger painting? By mixing three "primary" colors, any color could'
    line 939: '    be generated. Swirling all colors together resulted in a muddy brown. The'
    line 940: '    more paint you added, the darker it got. Digital colors are also constructed'
    line 941: '    by mixing three primary colors, but it works differently from paint. First,'
    line 942: '    the primaries are different'
    line 943: '    with color on the screen, you are mixing light, not paint, so the mixing'
    line 944: '    rules are different as well.'
    line 945: '  color-rgb-li1'
    line 946: '  color-rgb-li2'
    line 947: '  color-rgb-li3'
    line 948: '  color-rgb-li4'
    line 949: '  color-rgb-li5'
    line 950: '  color-rgb-p2x1'
    line 951: '    This assumes that the colors are all as bright as possible, but of course,'
    line 952: '    you have a range of color available, so some red plus some green plus some'
    line 953: '    blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
    line 954: '    While this may take some getting used to, the more you program and'
    line 955: '    experiment with RGB color, the more it will become instinctive, much like'
    line 956: '    swirling colors with your fingers. And of course you can''t say "Mix some red'
    line 957: '    with a bit of blue," you have to provide an exact amount. As with grayscale,'
    line 958: '    the individual color elements are expressed as ranges from 0 (none of that'
    line 959: '    color) to 255 (as much as possible), and they are listed in the order R, G,'
    line 960: '    and B. You will get the hang of RGB color mixing through experimentation,'
    line 961: '    but next we will cover some code using some common colors.'
    line 962: '  color-transparency-title'
    line 963: '  color-transparency-p1x1'
    line 964: '    In addition to the red, green, and blue components of each color, there is'
    line 965: '    an additional optional fourth component, referred to as the color''s "alpha".'
    line 966: '    Alpha means transparency and is particularly useful when you want to draw'
    line 967: '    elements that appear partially see-through on top of one another. The alpha'
    line 968: '    values for an image are sometimes referred to collectively as the "alpha'
    line 969: '    channel" of an image.'
    line 970: '  color-transparency-p2x1'
    line 971: '    It is important to realize that pixels are not literally transparent, this'
    line 972: '    is simply a convenient illusion that is accomplished by blending colors.'
    line 973: '    Behind the scenes, p5.js takes the color numbers and adds a percentage of'
    line 974: '    one to a percentage of another, creating the optical perception of blending.'
    line 975: '    (If you are interested in programming "rose-colored" glasses, this is where'
    line 976: '    you would begin.)'
    line 977: '  color-transparency-p3x1'
    line 978: '    Alpha values also range from 0 to 255, with 0 being completely transparent'
    line 979: '    (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
    line 980: '  color-custom-ranges-title'
    line 981: '  color-custom-ranges-p1x1'
    line 982: '    RGB color with ranges of 0 to 255 is not the only way you can handle color'
    line 983: '    in p5.js, in fact, it allows us to think about color any way we like. For'
    line 984: '    example, you might prefer to think of color as ranging from 0 to 100 (like a'
    line 985: '    percentage). You can do this by specifying a custom '
    line 986: '  color-custom-ranges-p2x1'
    line 987: '    The above function says'
    line 988: '    green, and blue. The range of RGB values will be from 0 to 100."'
    line 989: '  color-custom-ranges-p3x1'
    line 990: '    Although it is rarely convenient to do so, you can also have different'
    line 991: '    ranges for each color component'
    line 992: '  color-custom-ranges-p4x1'
    line 993: '    Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
    line 994: '    from 0 to 10, and alpha from 0 to 255."'
    line 995: '  color-custom-ranges-p5x1'
    line 996: '    Finally, while you will likely only need RGB color for all of your'
    line 997: '    programming needs, you can also specify colors in the HSB (hue, saturation,'
    line 998: '    and brightness) mode. Without getting into too much detail, HSB color works'
    line 999: '    as follows'
    line 1000: '  color-custom-ranges-li1x1'
    line 1001: '  color-custom-ranges-li1x2'
    line 1002: '  color-custom-ranges-li2x1'
    line 1003: '  color-custom-ranges-li2x2'
    line 1004: '  color-custom-ranges-li3x1'
    line 1005: '  color-custom-ranges-li3x2'
    line 1006: '  color-custom-ranges-p6x1'
    line 1007: '  color-custom-ranges-p6x2'
    line 1008: '  coordinate-system-description1'
    line 1009: '  coordinate-system-description2'
    line 1010: '  coordinate-system-description3'
    line 1011: '  coordinate-system-description4'
    line 1012: '  coordinate-system-description5'
    line 1013: '  coordinate-system-description-title'
    line 1014: '  coordinate-system-description-p1x1'
    line 1015: '    Before we begin programming with p5, we must first channel our eighth grade'
    line 1016: '    selves, pull out a piece of graph paper, and draw a line. The shortest'
    line 1017: '    distance between two points is a good old fashioned line, and this is where'
    line 1018: '    we begin, with two points on that graph paper.'
    line 1019: '  coordinate-system-description-p2x1'
    line 1020: '    The above figure shows a line between point A (1,0) and point B (4,5). If'
    line 1021: '    you wanted to direct a friend of yours to draw that same line, you would'
    line 1022: '    give them a shout and say "draw a line from the point one-zero to the point'
    line 1023: '    four-five, please." Well, for the moment, imagine your friend was a computer'
    line 1024: '    and you wanted to instruct this digital pal to display that same line on its'
    line 1025: '    screen. The same command applies (only this time you can skip the'
    line 1026: '    pleasantries and you will be required to employ a precise formatting). Here,'
    line 1027: '    the instruction will look like this'
    line 1028: '  coordinate-system-description-p3x1'
    line 1029: '    Even without having studied the syntax of writing code, the above statement'
    line 1030: '    should make a fair amount of sense. We are providing a command (which we'
    line 1031: '    will refer to as a "function") for the machine to follow entitled "line." In'
    line 1032: '    addition, we are specifying some arguments for how that line should be'
    line 1033: '    drawn, from point A (1,0) to point B (4,5). If you think of that line of'
    line 1034: '    code as a sentence, the function is a verb and the arguments are the objects'
    line 1035: '    of the sentence. The code sentence also ends with a semicolon instead of a'
    line 1036: '    period.'
    line 1037: '  coordinate-system-description-p4x1'
    line 1038: '    The key here is to realize that the computer screen is nothing more than a'
    line 1039: '    fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
    line 1040: '    numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
    line 1041: '    location of a point in space. And it is our job to specify what shapes and'
    line 1042: '    colors should appear at these pixel coordinates.'
    line 1043: '  coordinate-system-description-p5x1'
    line 1044: '    Nevertheless, there is a catch here. The graph paper from eighth grade'
    line 1045: '    ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
    line 1046: '    pointing up and the x-axis pointing to the right (in the positive direction,'
    line 1047: '    negative down and to the left). The coordinate system for pixels in a'
    line 1048: '    computer window, however, is reversed along the y-axis. (0,0) can be found'
    line 1049: '    at the top left with the positive direction to the right horizontally and'
    line 1050: '    down vertically.'
    line 1051: '  coordinate-system-simple-shapes-title'
    line 1052: '  coordinate-system-simple-shapes-p1x1'
    line 1053: '    The vast majority of p5 programming examples are visual in nature. These'
    line 1054: '    examples, at their core, involve drawing shapes and setting pixels. Let''s'
    line 1055: '    begin by looking at four primitive shapes.'
    line 1056: '  coordinate-system-simple-shapes-p2x1'
    line 1057: '    For each shape, we will ask ourselves what information is required to'
    line 1058: '    specify the location and size (and later color) of that shape and learn how'
    line 1059: '    p5 expects to receive that information. In each of the diagrams below, we''ll'
    line 1060: '    assume a window with a width of 100 pixels and height of 100 pixels.'
    line 1061: '  coordinate-system-simple-shapes-p3x1'
    line 1062: '  coordinate-system-simple-shapes-p3x2'
    line 1063: '  coordinate-system-simple-shapes-p4x1'
    line 1064: '  coordinate-system-simple-shapes-p4x2'
    line 1065: '  coordinate-system-simple-shapes-p5x1'
    line 1066: '  coordinate-system-simple-shapes-p5x2'
    line 1067: '    , things become a bit more complicated. In p5, a rectangle is specified by'
    line 1068: '    the coordinate for the top left corner of the rectangle, as well as its'
    line 1069: '    width and height.'
    line 1070: '  coordinate-system-simple-shapes-p6x1'
    line 1071: '    A second way to draw a rectangle involves specifying the centerpoint, along'
    line 1072: '    with width and height. If we prefer this method, we first indicate that we'
    line 1073: '    want to use the '
    line 1074: '  coordinate-system-simple-shapes-p6x2'
    line 1075: '  coordinate-system-simple-shapes-p7x1'
    line 1076: '    Finally, we can also draw a rectangle with two points (the top left corner'
    line 1077: '    and the bottom right corner). The mode here is '
    line 1078: '  coordinate-system-simple-shapes-p7x2'
    line 1079: '  coordinate-system-simple-shapes-p8x1'
    line 1080: '  coordinate-system-simple-shapes-p8x2'
    line 1081: '  coordinate-system-simple-shapes-p8x3'
    line 1082: '  coordinate-system-simple-shapes-p8x4'
    line 1083: '  coordinate-system-simple-shapes-p8x5'
    line 1084: '  coordinate-system-simple-shapes-p8x6'
    line 1085: '  coordinate-system-simple-shapes-p9x1'
    line 1086: '    Now let''s look at what some code with shapes in more complete form, with'
    line 1087: '    canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
    line 1088: '    to specify the width and height of the canvas.'
    line 1089: '  teach-desc'
    line 1090: test-tutorial
    line 1147: '  Libraries'
    line 1148: '  core-libraries'
    line 1149: '  community-libraries'
    line 1150: '  libraries-created-by'
    line 1151: '  p5.sound'
    line 1152: '    p5.sound extends p5 with Web Audio functionality including audio input,'
    line 1153: '    playback, analysis and synthesis.'
    line 1154: '  p5.accessibility'
    line 1155: '    p5.accessibility makes the p5 canvas more accessible to people who are blind'
    line 1156: '    and visually impaired.'
    line 1157: '  asciiart'
    line 1158: '    p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
    line 1159: '    p5js.'
    line 1160: '  p5.ble'
    line 1161: '    A Javascript library that enables communication between BLE devices and p5'
    line 1162: '    sketches.'
    line 1163: '  blizard.js'
    line 1164: '  p5.bots'
    line 1165: '    With p5.bots you can interact with your Arduino (or other microprocessor)'
    line 1166: '    from within the browser. Use sensor data to drive a sketch; use a sketch to'
    line 1167: '    drive LEDs, motors, and more!'
    line 1168: '  p5.clickable'
    line 1169: '  p5.cmyk.js'
    line 1170: '  p5.collide2D'
    line 1171: '    p5.collide2D provides tools for calculating collision detection for 2D'
    line 1172: '    geometry with p5.js.'
    line 1173: '  p5.createloop'
    line 1174: '  p5.dimensions'
    line 1175: '    p5.dimensions extends p5.js'' vector functions to work in any number of'
    line 1176: '    dimensions.'
    line 1177: '  p5.EasyCam'
    line 1178: '    Simple 3D camera control with inertial pan, zoom, and rotate. Major'
    line 1179: '    contributions by Thomas Diewald.'
    line 1180: '  p5.experience'
    line 1181: '    Extensive library for p5.js that adds additional event-listening'
    line 1182: '    functionality for creating canvas-based web applications.'
    line 1183: '  p5.func'
    line 1184: '    p5.func is a p5 extension that provides new objects and utilities for'
    line 1185: '    function generation in the time, frequency, and spatial domains.'
    line 1186: '  p5.geolocation'
    line 1187: '    p5.geolocation provides techniques for acquiring, watching, calculating, and'
    line 1188: '    geofencing user locations for p5.js.'
    line 1189: '  p5.gibber'
    line 1190: '  grafica.js'
    line 1191: '    grafica.js lets you add simple but highly configurable 2D plots to your'
    line 1192: '    p5.js sketches.'
    line 1193: '  p5.gui'
    line 1194: '  p5.localmessage'
    line 1195: '    p5.localmessage provides a simple interface to send messages locally from'
    line 1196: '    one sketch to another for easy multi-window sketching!'
    line 1197: '  marching'
    line 1198: '  mappa'
    line 1199: '    Mappa provides a set of tools for working with static maps, tile maps, and'
    line 1200: '    geo-data. Useful when building geolocation-based visual representations.'
    line 1201: '  ml5.js'
    line 1202: '    ml5.js builds on Tensorflow.js and provides friendly access to machine'
    line 1203: '    learning algorithms and models in the browser.'
    line 1204: '  p5.play'
    line 1205: '    p5.play provides sprites, animations, input and collision functions for'
    line 1206: '    games and gamelike applications.'
    line 1207: '  p5.particle'
    line 1208: '    The Particle and Fountain objects can be used to create data-driven effects'
    line 1209: '    that are defined through user structures or JSON input and user-draw'
    line 1210: '    functions.'
    line 1211: '  p5.Riso'
    line 1212: '    p5.Riso is a library for generating files suitable for Risograph printing.'
    line 1213: '    It helps turn your sketches into multi-color prints.'
    line 1214: '  rita.js'
    line 1215: '    RiTa.js provides a set of natural language processing objects for generative'
    line 1216: '    literature.'
    line 1217: '  Rotating knobs'
    line 1218: '  p5.scenemanager'
    line 1219: '    p5.SceneManager helps you create sketches with multiple states / scenes.'
    line 1220: '    Each scene is a like a sketch within the main sketch.'
    line 1221: '  p5.screenPosition'
    line 1222: '  p5.scribble'
    line 1223: '    Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
    line 1224: '    on a port of the original Processing library'
    line 1225: '  p5.serial'
    line 1226: '    p5.serial enables serial communication between devices that support serial'
    line 1227: '    (RS-232) and p5 sketches running in the browser.'
    line 1228: '  Shape5'
    line 1229: '    Shape5 is a 2D primative library for elementary students who are learning to'
    line 1230: '    code for the first time.'
    line 1231: '  p5.shape.js'
    line 1232: '  p5.speech'
    line 1233: '    p5.speech provides simple, clear access to the Web Speech and Speech'
    line 1234: '    Recognition APIs, allowing for the easy creation of sketches that can talk'
    line 1235: '    and listen.'
    line 1236: '  p5.start2d.js'
    line 1237: '  p5.tiledmap'
    line 1238: '    p5.tiledmap provides drawing and helper functions to include maps in your'
    line 1239: '    sketches.'
    line 1240: '  p5.touchgui'
    line 1241: '  tramontana'
    line 1242: '    Tramontana is a platform for easily use many devices (iOS, Android,'
    line 1243: '    tramontana Board, ...) to create interactive environments, interactive'
    line 1244: '    spaces or just prototype experiences at scale and in space.'
    line 1245: '  vida'
    line 1246: '    Vida is a simple library that adds camera (or video) based motion detection'
    line 1247: '    and blob tracking functionality to p5js.'
    line 1248: '  p5.voronoi'
    line 1249: '    p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
    line 1250: '    your p5.js sketches.'
    line 1251: '  p5.3D'
    line 1252: '  using-a-library-title'
    line 1253: '  using-a-library1'
    line 1254: '    A p5.js library can be any JavaScript code that extends or adds to the p5.js'
    line 1255: '    core functionality. There are two categories of libraries. Core libraries ('
    line 1256: '  using-a-library3'
    line 1257: '    ) are part of the p5.js distribution, while contributed libraries are'
    line 1258: '    developed, owned, and maintained by members of the p5.js community.'
    line 1259: '  using-a-library4'
    line 1260: '    To include a library in your sketch, link it into your HTML file, after you'
    line 1261: '    have linked in p5.js. An example HTML file might look like this'
    line 1262: '  create-your-own-title'
    line 1263: '  create-your-own1'
    line 1264: '  create-your-own2'
    line 1265: '  create-your-own3'
    line 1266: '  create-your-own4'
    line 1267: '    If you have created a library and would like to have it included on this'
    line 1268: '    page, submit this form!'
    line 1420: '  community-title'
    line 1421: '  community-statement-title'
    line 1422: '  community-statement1'
    line 1423: '    p5.js is a community interested in exploring the creation of art and design'
    line 1424: '    with technology.'
    line 1425: '  community-statement2'
    line 1426: '    We are a community of, and in solidarity with, people from every gender'
    line 1427: '    identity and expression, sexual orientation, race, ethnicity, language,'
    line 1428: '    neuro-type, size, ability, class, religion, culture, subculture, political'
    line 1429: '    opinion, age, skill level, occupation, and background. We acknowledge that'
    line 1430: '    not everyone has the time, financial means, or capacity to actively'
    line 1431: '    participate, but we recognize and encourage involvement of all kinds. We'
    line 1432: '    facilitate and foster access and empowerment. We are all learners.'
    line 1433: '  community-statement3'
    line 1434: '    We like these hashtags'
    line 1435: '    efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
    line 1436: '    (because we don''t assume knowledge), and #BlackLivesMatter (because of'
    line 1437: '    course).'
    line 1438: '  in-practice-title'
    line 1439: '  in-practice1'
    line 1440: '  in-practice2'
    line 1441: '    We insist on actively engaging with requests for feedback regardless of'
    line 1442: '    their complexity.'
    line 1443: '  in-practice3'
    line 1444: '    We welcome newcomers and prioritize the education of others. We strive to'
    line 1445: '    approach all tasks with the enthusiasm of a newcomer. Because we believe'
    line 1446: '    that newcomers are just as valuable in this effort as experts.'
    line 1447: '  in-practice4'
    line 1448: '    We consistently make the effort to actively recognize and validate multiple'
    line 1449: '    types of contributions.'
    line 1450: '  in-practice5'
    line 1451: '  in-times-conflict-title'
    line 1452: '  in-times-conflict1'
    line 1453: '  in-times-conflict2'
    line 1454: '  in-times-conflict3'
    line 1455: '    We admit when we''re wrong, apologize, and accept responsibility for our'
    line 1456: '    actions.'
    line 1457: '  in-times-conflict4'
    line 1458: '  in-times-conflict5'
    line 1459: '  in-times-conflict6'
    line 1460: '  in-times-conflict7'
    line 1461: '  in-the-future-title'
    line 1462: '  in-the-future1'
    line 1463: '  notes-title'
    line 1464: '  notes1'
    line 1465: '  notes2'
    line 1466: '  notes3'
    line 1467: '  notes4'
    line 1468: '  notes5'
    line 1469: '  contribute-title'
    line 1470: '  contribute1'
    line 1471: '    Our community is always looking for enthusiasts to help in all different'
    line 1472: '    ways.'
    line 1473: '  develop-title'
    line 1474: '  develop1'
    line 1475: '  develop2'
    line 1476: '  develop3'
    line 1477: '  develop4'
    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 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 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 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 1634: '  2019cc_8'
    line 1635: '  2019cc_9'
    line 1636: '    Participant speaks at a podium in front of projected text about the problem'
    line 1637: '    with anonymyzing data'
    line 1638: '  2019cc_10'
    line 1639: '    Person with a microphone speaking to fellow participants in front of text'
    line 1640: '    that reads p5.js will not add any new features except those that increase'
    line 1641: '    access'
    line 1642: '  2019cc_11'
    line 1643: '  2019cc_12'
    line 1644: '  2019cc_13'
    line 1645: '  2019cc_14'
    line 1646: '  2019cc_15'
    line 1647: '    Woman with microphone speaking to fellow participants with the text sacred'
    line 1648: '    boundaries in the projection behind her'
    line 1649: '  2019cc_16'
    line 1650: '    Overhead view of participants listening to a panel of people with an image'
    line 1651: '    of a 3d rendered man on it'
    line 1652: '  2019cc_17'
    line 1653: '    Participants sit around a table with their laptops and observe code on a'
    line 1654: '    screen'
    line 1655: '  2019cc_18'
    line 1656: '  2019cc_19'
    line 1657: '  2019cc_20'
    line 1658: '  2019cc_21'
    line 1659: '  2019cc_22'
    line 1660: '    Participants sitting around a large U shaped table looking towards the front'
    line 1661: '    of the classroom'
    line 1662: '  2019cc_23'
    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'
    line 1741: '  book-3-type'
    line 1742: '  book-3-description'
    line 1743: '    By using simple languages such as JavaScript in p5.js, artists and makers'
    line 1744: '    can create everything from interactive typography and textiles to 3D-printed'
    line 1745: '    furniture to complex and elegant infographics.'
    line 1746: '  book-3-order-a'
    line 1747: '  book-3-order-b'
    line 1748: '  book-4-title'
    line 1749: '  book-4-authors'
    line 1750: '  book-4-publisher'
    line 1751: '  book-4-pages'
    line 1752: '  book-4-type'
    line 1753: '  book-4-description'
    line 1754: '    By using simple languages such as JavaScript in p5.js, artists and makers'
    line 1755: '    can create everything from interactive typography and textiles to 3D-printed'
    line 1756: '    furniture to complex and elegant infographics.'
    line 1757: '  book-4-order-a'
    line 1758: '  book-4-order-b'
    line 1759: '  book-5-title'
    line 1760: '  book-5-authors'
    line 1761: '  book-5-publisher'
    line 1762: '  book-5-pages'
    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'
    line 1803: '  Form'
    line 1804: '  Data'
    line 1805: '  Arrays'
    line 1806: '  Control'
    line 1807: '  Image'
    line 1808: '  Color'
    line 1809: '  Math'
    line 1810: '  Simulate'
    line 1811: '  Interaction'
    line 1812: '  Objects'
    line 1813: '  Lights'
    line 1814: '  Motion'
    line 1815: '  Instance_Mode'
    line 1816: '  Dom'
    line 1817: '  Drawing'
    line 1818: '  Transform'
    line 1819: '  Typography'
    line 1820: '  3D'
    line 1821: '  Input'
    line 1822: '  Advanced_Data'
    line 1823: '  Sound'
    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 &#x0026; 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'
    line 2521: '  teach-case11-content1-1'
    line 2522: '  teach-case11-content2'
    line 2523: '  teach-case11-content3'
    line 2524: '  teach-case11-content4'
    line 2525: '    Over the course of three workshops, we will draw and create patterns using'
    line 2526: '    p5.js, an open-source graphical library; we will learn and apply'
    line 2527: '    computational concepts to transform patterns and finally, we will bring a'
    line 2528: '    weaving to life with electronic microcontrollers.'
    line 2529: '  teach-case11-content5'
    line 2530: '  teach-case11-content5-1'
    line 2531: '    Materials'
    line 2532: '    pattern weaving tool.'
    line 2533: '  teach-case11-content5-2'
    line 2534: '  teach-case11-content5-3'
    line 2535: '  teach-case11-content5-4'
    line 2536: '  teach-case11-content5-5'
    line 2537: '  teach-case12-title'
    line 2538: '  teach-case12-lead-name'
    line 2539: '  teach-case12-speech'
    line 2540: '  teach-case12-content1'
    line 2541: '  teach-case12-content1-1'
    line 2542: '  teach-case12-content2'
    line 2543: '  teach-case12-content3'
    line 2544: '  teach-case12-content4'
    line 2545: '  teach-case12-content5-1'
    line 2546: '  teach-case12-content5-2'
    line 2547: '  teach-case13-title'
    line 2548: '  teach-case13-lead-name'
    line 2549: '  teach-case13-speech'
    line 2550: '  teach-case13-content1'
    line 2551: '  teach-case13-content1-1'
    line 2552: '  teach-case13-content2'
    line 2553: '  teach-case13-content3'
    line 2554: '  teach-case13-content4'
    line 2555: '  teach-case13-content5-1'
    line 2556: '  teach-case13-content5-2'
    line 2557: '  teach-case14-title'
    line 2558: '  teach-case14-lead-name'
    line 2559: '  teach-case14-speech'
    line 2560: '  teach-case14-content1'
    line 2561: '  teach-case14-content1-1'
    line 2562: '  teach-case14-content2'
    line 2563: '  teach-case14-content3'
    line 2564: '  teach-case14-content4'
    line 2565: '  teach-case14-content5-1'
    line 2566: '  teach-case14-content5-2'
    line 2567: '  teach-case15-title'
    line 2568: '  teach-case15-lead-name'
    line 2569: '  teach-case15-speech'
    line 2570: '  teach-case15-content1'
    line 2571: '  teach-case15-content1-1'
    line 2572: '  teach-case15-content2'
    line 2573: '  teach-case15-content3'
    line 2574: '  teach-case15-content4'
    line 2575: '  teach-case15-content5-1'
    line 2576: '  teach-case15-content5-2'
    line 2577: '  teach-case16-title'
    line 2578: '  teach-case16-lead-name'
    line 2579: '  teach-case16-speech'
    line 2580: '  teach-case16-content1'
    line 2581: '  teach-case16-content1-1'
    line 2582: '  teach-case16-content2'
    line 2583: '  teach-case16-content3'
    line 2584: '  teach-case16-content4'
    line 2585: '  teach-case16-content5-1'
    line 2586: '  teach-case16-content5-2'
    line 2587: '  teach-case17-title'
    line 2588: '  teach-case17-lead-name'
    line 2589: '  teach-case17-speech'
    line 2590: '  teach-case17-content1'
    line 2591: '  teach-case17-content1-1'
    line 2592: '  teach-case17-content2'
    line 2593: '  teach-case17-content3'
    line 2594: '  teach-case17-content4'
    line 2595: '  teach-case17-content5-1'
    line 2596: '  teach-case17-content5-2'
    line 2597: '  teach-case1-alt'
    line 2598: '  teach-case2-alt'
    line 2599: '  teach-case3-alt'
    line 2600: '  teach-case4-alt'
    line 2601: '  teach-case5-alt'
    line 2602: '  teach-case6-alt'
    line 2603: '  teach-case7-alt'
    line 2604: '  teach-case8-alt'
    line 2605: '  teach-case9-alt'
    line 2606: '  teach-case10-alt'
    line 2607: '  teach-case11-alt'
    line 2608: '  teach-case12-alt'
    line 2609: '  teach-case13-alt'
    line 2610: '  teach-case14-alt'
    line 2611: '  teach-case15-alt'
    line 2612: '  teach-case16-alt'
    line 2613: '  teach-case17-alt'
    line 598: '  color-custom-ranges-li1x2'
    line 601: '  color-custom-ranges-li2x2'
    line 604: '  color-custom-ranges-li3x2'