i18n-tracking.yml

es:
  src/data/en.yml:
    line 26: footer6
    line 25: footer2
    line 27: footer4
    line 31: footer8
    line 32: footer9
    line 28: footer5
    line 29: footer6
    line 30: footer7
    line 1174: '    The Summer 2021 Showcase'
    line 288: '    to the index.html containing your p5.js sketch.'
    line 297: '    file and the embed.html file for the sketch.'
    line 306: '    be'
    line 310: '    stylesheet)'
    line 319: '    was ported to P5 by Kelly Chang. If you find any errors or have comments,'
    line 330: '    background(255);    // Setting the background to white'
    line 331: '     stroke(0);          // Setting the outline (stroke) to black'
    line 332: '     fill(150);          // Setting the interior of a shape (fill) to grey'
    line 340: '    black. Also, remember not to eliminate both—with'
    line 349: '    percentage). You can do this by specifying a custom'
    line 358: '    want to use the'
    line 363: '    and the bottom right corner). The mode here is'
    line 374: '    Using p5.js, this book introduces and demonstrates the reflexive practice'
    line 375: '    of aesthetic programming, engaging with learning to program as a way to'
    line 376: '    understand and question existing technological objects and paradigms,'
    line 385: '    p5.js work or your own to be featured here! If Google is not available in your region, please email chankati@usc.edu to submit!'
    line 394: '    environments.'
    line 398: '    better connect the p5.js learner and educator communities around the world.'
    line 407: '    examples.'
    line 415: '    links available in'
    line 261: '    the'
    line 270: '    particular topics. Check out the'
    line 279: '    of the p5js site. The file called index.hbs is the'
    line 442: '    .pdf format, all hosted publicly on GitHub.'
    line 1536: '  teach-case2-image-alt'
    line 1544: '  teach-case4-image-alt'
    line 1552: '  teach-case6-image-alt'
    line 1560: '  teach-case8-image-alt'
    line 1568: '  teach-case9-image-alt'
    line 1576: '  teach-case11-image-alt'
    line 1584: '  teach-case12-image-alt'
    line 1123: '  book-6-title'
    line 1124: '  book-6-authors'
    line 1125: '  book-6-publisher'
    line 1126: '  book-6-pages'
    line 1127: '  book-6-type'
    line 1128: '  book-6-description'
    line 1129: '    Using p5.js, this book introduces and demonstrates the reflexive practice '
    line 1130: '    of aesthetic programming, engaging with learning to program as a way to '
    line 1131: '    understand and question existing technological objects and paradigms, '
    line 1132: '    and to explore the  potential for reprogramming wider eco-socio-technical systems.'
    line 1133: '  book-6-order-a'
    line 1134: '  book-6-order-b'
    line 162: '    library in your html. To learn more visit '
    line 163: '    library in your html. To learn more visit '
    line 164: '  your-first-sketch7'
    line 97: '  get-started-button'
    line 96: '  get-started7'
    line 114: '  environment15'
    line 113: '  environment14'
    line 115: '  environment16'
    line 102: '  download8'
    line 103: '  download9'
    line 104: '  download10'
    line 105: '  download11'
    line 256: '    , the organization that supports p5.js.'
    line 251: '    We need your help! p5.js is free, open-source software. We want to make our community as open'
    line 269: '    Your donation supports software development for p5.js, education resources'
    line 265: '    and inclusive as possible. You can support this work by making a donation to'
    line 266: '    the '
    line 267: '  support-2'
    line 268: '    , the organization that supports p5.js. We need your help!'
    line 275: '  support-3'
    line 276: '  support-4'
    line 277: '  support-5'
    line 37: Editor
    line 55: footer5
    line 123: '  p3xh2'
    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 289: '  your-first-sketch1'
    line 290: '  your-first-sketch2'
    line 291: '  your-first-sketch3'
    line 292: '  your-first-sketch4'
    line 293: '    The line you just added draws an ellipse, with its center 50 pixels over'
    line 294: '    from the left and 50 pixels down from the top, with a width and height of 80'
    line 295: '    pixels.'
    line 296: '  your-first-sketch5'
    line 298: '    If you are using a screen reader, you must turn on the accessible outputs in'
    line 299: '    the p5 online editor, outside the editor you must add the accessibility'
    line 300: '    library in your html. To learn more visit'
    line 301: '  your-first-sketch7'
    line 302: '  your-first-sketch8'
    line 303: '    If you''ve typed everything correctly, this will appear in the display'
    line 304: '    window'
    line 305: '  your-first-sketch9'
    line 307: '    If nothing appears, the editor may be having trouble understanding what'
    line 308: '    you’ve typed. If this happens, make sure that you''ve copied the example code'
    line 309: '    exactly'
    line 311: '    to be spelled correctly.'
    line 312: '  your-first-sketch11'
    line 313: '    One of the most difficult things about getting started with programming is'
    line 314: '    that you have to be very specific about the syntax. The browser isn''t always'
    line 315: '    smart enough to know what you mean, and can be quite fussy about the'
    line 316: '    placement of punctuation. You''ll get used to it with a little practice. In'
    line 317: '    the bottom left of the editor you will find the console section. Here, you'
    line 318: '    can find messages from the editor with details about any errors it'
    line 320: '  your-first-sketch12'
    line 321: '    Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
    line 322: '    last example to try this'
    line 323: '  your-first-sketch13'
    line 324: '    This program creates a canvas that is 400 pixels wide and 400 pixels high,'
    line 325: '    and then starts drawing white circles at the position of the mouse. When a'
    line 326: '    mouse button is pressed, the circle color changes to black. Run the code,'
    line 327: '    move the mouse, and click to experience it.'
    line 328: '  your-first-sketch14'
    line 329: '  first-sketch-heading1'
    line 333: '  learn1'
    line 334: '  learn2'
    line 335: '  learn3'
    line 336: '  learn4'
    line 337: '  learn5'
    line 338: '  learn6'
    line 339: '  learn7'
    line 341: '  learn9'
    line 342: '  learn10'
    line 343: '  reference1'
    line 344: '  reference2'
    line 345: '  reference3'
    line 346: '  learn11'
    line 347: '  learn12'
    line 348: '  processing-transition1'
    line 350: '  processing-transition3'
    line 351: '  processing-transition4'
    line 352: '  book1'
    line 353: '    Parts of this tutorial were adapted from the book, Getting Started with'
    line 354: '    p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
    line 355: '    Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
    line 356: '    Contributors Conference.'
    line 44: Examples
    line 57: tagline2
    line 146: '  copyright-title'
    line 231: '  get-started-title'
    line 240: '    . If you would like to work on the the desktop version of p5.js you can'
    line 258: '  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 77: '  color-rgb-p2x1'
    line 82: '  color-transparency-p2x1'
    line 139: '  project-a-2-7-phuong'
    line 76: '  color-transparency-p1x1'
    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 359: '  project-a-1-1-chung'
    line 360: '  project-a-1-2-chung'
    line 361: '  project-a-1-3-chung'
    line 362: '  project-a-2-1-chung'
    line 364: '  project-a-2-2-chung'
    line 365: '  project-a-3-1-chung'
    line 366: '  project-a-3-2-chung'
    line 367: '  project-a-4-1-chung'
    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 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 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 395: '  project-a-4-7-casey-louise'
    line 396: '  project-a-5-1-casey-louise'
    line 397: '  project-a-5-2-casey-louise'
    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 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 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 65: '  color-rgb-p1x1'
    line 72: '  color-rgb-p2x1'
    line 85: '  color-custom-ranges-p4x1'
    line 81: '  color-transparency-p1x1'
    line 90: '  color-custom-ranges-p4x1'
    line 153: '  project-a-4-7-casey-louise'
    line 33: Skip-To-Content
    line 47: Contribute
    line 48: Forum
    line 49: Showcase
    line 51: footer1
    line 52: footer2
    line 53: footer3
    line 58: tagline3
    line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
    line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
    line 107: '    text, input, video, webcam, and sound.'
    line 108: '  p2xh2'
    line 130: '  p4xh2'
    line 131: '  p4xp1'
    line 132: '  p4xp2'
    line 135: '  p4xp5'
    line 147: '  copyright1'
    line 149: '    under the terms of the'
    line 150: '  copyright2'
    line 151: '  copyright3'
    line 152: '  copyright4'
    line 232: '  get-started1'
    line 235: '  get-started2'
    line 236: '  get-started3'
    line 237: '  get-started4'
    line 238: '  get-started5'
    line 241: '    scroll down to'
    line 242: '  get-started7'
    line 246: '  download1'
    line 247: '  download2'
    line 248: '  download3'
    line 249: '  download4'
    line 250: '    If you look in index.html, you''ll notice that it links to the file p5.js. If'
    line 252: '    loading), change the link to p5.min.js.'
    line 253: '  download5'
    line 254: '    Alternatively, you can link to a p5.js file hosted online. All versions of'
    line 255: '    p5.js are stored in a CDN (Content Delivery Network). You can find a history'
    line 257: '  download6'
    line 260: '  environment1'
    line 262: '  environment2'
    line 263: '  environment3'
    line 264: '  environment4'
    line 278: '  environment10'
    line 280: '    Open the index.html file in your browser by double clicking on it in your'
    line 436: '  Download'
    line 437: '  download-intro'
    line 438: '    Welcome! While titled "Download" this page actually contains a collection of'
    line 439: '    links to either download the library or begin working with it online. We''ve'
    line 440: '    tried to order things to reflect what a beginner might want first, to'
    line 441: '    resources that more experienced programmers may be looking for.'
    line 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 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 1517: '  2015contributors-conference-title'
    line 1518: '  2015contributors-conference-date'
    line 1519: '  2015contributors-conference1'
    line 1520: '  2015contributors-conference2'
    line 1521: '    , advancing the code, documentation, and community outreach tools of the'
    line 1522: '    p5.js programming environment. Participants came from as far away as Hong'
    line 1523: '    Kong, Seattle, Los Angeles, Boston and New York. Most were working'
    line 1524: '    professionals in the fields of creative technology, interaction design, and'
    line 1525: '    new-media arts, but the group also included a half-dozen undergraduate and'
    line 1526: '    graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
    line 1527: '  2015contributors-conference3'
    line 1528: '  2015contributors-conference-diversity-title'
    line 1529: '  2015contributors-conference-diversity1'
    line 1530: '    Alongside technical development, one of the main focuses of this conference'
    line 1531: '    was outreach, community, and diversity. The conference began with a panel'
    line 1532: '  2015contributors-conference-diversity2'
    line 1533: '    Diversity'
    line 1534: '    the Internet'
    line 1535: '  2015contributors-conference-diversity3'
    line 1537: '  2015contributors-conference-diversity5'
    line 1538: '  2015contributors-conference-diversity6'
    line 1539: '  2015contributors-conference-diversity7'
    line 1540: '    the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
    line 1541: '    Mellon University. Speakers included'
    line 1542: '  2015contributors-conference-diversity8'
    line 1543: '  2015contributors-conference-diversity9'
    line 1545: '  2015cc_2'
    line 1546: '  2015cc_3'
    line 1547: '  2015cc_4'
    line 1548: '    Woman expressively speaks into a microphone while two male collaborators'
    line 1549: '    look on'
    line 1550: '  2015cc_5'
    line 1551: '  2015cc_6'
    line 1553: '    Participants sit in a circle around a white board with sticky notes on it'
    line 1554: '    while a female student speaks into a microphone'
    line 1555: '  2015cc_8'
    line 1556: '    Participants sit around a table looking at each others laptops and compare'
    line 1557: '    code'
    line 1558: '  2015cc_9'
    line 1559: '  2015cc_10'
    line 1561: '    group of participants with laptops look at her powerpoint in a classroom'
    line 1562: '  2015cc_11'
    line 1563: '    Woman speaks at a podium in an auditorium while three participants sit on'
    line 1564: '    the stage and another three are skyping in on the stage screen'
    line 1565: '  2015cc_12'
    line 1566: '  2015cc_13'
    line 1567: '  2015cc_14'
    line 1569: '  2019contributors-conference-title'
    line 1570: '  2019contributors-conference-date'
    line 1571: '  2019contributors-conference1'
    line 1572: '  2019contributors-conference2'
    line 1573: '    , advancing the code, documentation, and community outreach tools and'
    line 1574: '    exploring the current landscape of the p5.js programming environment.'
    line 1575: '    Comprising a diverse range of participants within the fields of creative'
    line 1577: '    at fostering dialogue through a multidisciplinary lens. Working groups'
    line 1578: '    focused on several topic areas'
    line 1579: '    Landscape of Creative Tech; and Internationalization.'
    line 1580: '  2019contributors-conference3'
    line 1581: '  2019contributors-conference4'
    line 1582: '  outputs'
    line 1583: '  output1'
    line 1585: '    octagon girds for p5.js. Created by Aren Davey.'
    line 1586: '  output2'
    line 1587: '    . A set of template files for building a multi-device, multiplayer game'
    line 1588: '    where multiple clients can connect to a specified host page. Created by L05.'
    line 1589: '  output3'
    line 1590: '  output3-1'
    line 1591: '    , testing early implementations of softCompile, OSC interfacing and added'
    line 1592: '    connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
    line 1593: '    environment! Created by Ted Davis.'
    line 1594: '  output4'
    line 1595: '    A panel on Blackness and Gender in Virtual Space led by American Artist,'
    line 1596: '    with shawné michaelain holloway and LaJuné McMillian.'
    line 1597: '  output5'
    line 1598: '  output6'
    line 1599: '  output6-1'
    line 1600: '  output6-2'
    line 1601: '  output7'
    line 1602: '    New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
    line 1603: '    Jon Chambers.'
    line 1604: '  output8'
    line 1605: '  output8-1'
    line 1606: '    Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
    line 1607: '    Ye,  Dorothy R. Santos, and Yasheng She.'
    line 1608: '  output9'
    line 1609: '  output9-1'
    line 1610: '  output10'
    line 1611: '    An overhaul of the p5.js website for accessibility. Including updates for'
    line 1612: '    screen reader accessibility, and improvements to the home, download, getting'
    line 1613: '    started, and reference pages. With contributions from Claire Kearney-Volpe,'
    line 1614: '    Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
    line 1615: '    McCarthy, and Evelyn Masso.'
    line 1616: '  output11'
    line 1617: '    Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
    line 1618: '    Sona Lee, Ted Davis, and Carlos Garcia.'
    line 1619: '  output12'
    line 1620: '  output13'
    line 1621: '    A design of the p5.js library system for the p5 Editor. Created by Cassie'
    line 1622: '    Tarakajian and Luca Damasco.'
    line 1623: '  output14'
    line 1624: '    Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
    line 1625: '    Lauren Valley.'
    line 1626: '  output15'
    line 1627: '  2019cc_1'
    line 1628: '  2019cc_2'
    line 1629: '  2019cc_3'
    line 1630: '  2019cc_4'
    line 1631: '  2019cc_5'
    line 1632: '  2019cc_6'
    line 1633: '  2019cc_7'
    line 1634: '  2019cc_8'
    line 1635: '  2019cc_9'
    line 1636: '    Participant speaks at a podium in front of projected text about the problem'
    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'
    line 424: '    with p5.js.'
    line 433: '    presentations. I used'
hi:
  src/data/en.yml:
    line 26: footer6
    line 25: footer2
    line 27: footer4
    line 28: footer5
    line 29: footer6
    line 30: footer7
    line 31: footer8
    line 32: footer9
ko:
  src/data/en.yml:
    line 26: footer6
    line 25: footer2
    line 27: footer4
    line 31: footer8
    line 32: footer9
    line 28: footer5
    line 29: footer6
    line 30: footer7
    line 1174: '    The Summer 2021 Showcase'
    line 270: '    particular topics. Check out the'
    line 288: '    to the index.html containing your p5.js sketch.'
    line 297: '    file and the embed.html file for the sketch.'
    line 306: '    be'
    line 310: '    stylesheet)'
    line 319: '    was ported to P5 by Kelly Chang. If you find any errors or have comments,'
    line 330: '    background(255);    // Setting the background to white'
    line 331: '     stroke(0);          // Setting the outline (stroke) to black'
    line 332: '     fill(150);          // Setting the interior of a shape (fill) to grey'
    line 340: '    black. Also, remember not to eliminate both—with'
    line 349: '    percentage). You can do this by specifying a custom'
    line 358: '    want to use the'
    line 363: '    and the bottom right corner). The mode here is'
    line 374: '    Using p5.js, this book introduces and demonstrates the reflexive practice'
    line 375: '    of aesthetic programming, engaging with learning to program as a way to'
    line 376: '    understand and question existing technological objects and paradigms,'
    line 385: '    p5.js work or your own to be featured here! If Google is not available in your region, please email chankati@usc.edu to submit!'
    line 394: '    environments.'
    line 398: '    better connect the p5.js learner and educator communities around the world.'
    line 407: '    examples.'
    line 415: '    links available in'
    line 261: '    the'
    line 279: '    of the p5js site. The file called index.hbs is the'
    line 442: '    .pdf format, all hosted publicly on GitHub.'
    line 1536: '  teach-case2-image-alt'
    line 1544: '  teach-case4-image-alt'
    line 1552: '  teach-case6-image-alt'
    line 1560: '  teach-case8-image-alt'
    line 1568: '  teach-case9-image-alt'
    line 1576: '  teach-case11-image-alt'
    line 1584: '  teach-case12-image-alt'
    line 1123: '  book-6-title'
    line 1124: '  book-6-authors'
    line 1125: '  book-6-publisher'
    line 1126: '  book-6-pages'
    line 1127: '  book-6-type'
    line 1128: '  book-6-description'
    line 1129: '    Using p5.js, this book introduces and demonstrates the reflexive practice '
    line 1130: '    of aesthetic programming, engaging with learning to program as a way to '
    line 1131: '    understand and question existing technological objects and paradigms, '
    line 1132: '    and to explore the  potential for reprogramming wider eco-socio-technical systems.'
    line 1133: '  book-6-order-a'
    line 1134: '  book-6-order-b'
    line 162: '    library in your html. To learn more visit&#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 271: '    Open Sublime. Go to the File menu and choose Open... and choose the folder'
    line 272: '    that your html and js files are located in. On the left sidebar, you should'
    line 273: '    find the folder name at the top, with a list of the files contained in the'
    line 282: '  environment12'
    line 283: '  environment13'
    line 284: '  your-first-sketch-title'
    line 285: '  your-first-sketch-intro1'
    line 286: '  your-first-sketch-intro2'
    line 287: '  your-first-sketch-intro3'
    line 289: '  your-first-sketch1'
    line 290: '  your-first-sketch2'
    line 291: '  your-first-sketch3'
    line 292: '  your-first-sketch4'
    line 293: '    The line you just added draws an ellipse, with its center 50 pixels over'
    line 294: '    from the left and 50 pixels down from the top, with a width and height of 80'
    line 295: '    pixels.'
    line 296: '  your-first-sketch5'
    line 298: '    If you are using a screen reader, you must turn on the accessible outputs in'
    line 299: '    the p5 online editor, outside the editor you must add the accessibility'
    line 300: '    library in your html. To learn more visit'
    line 301: '  your-first-sketch7'
    line 302: '  your-first-sketch8'
    line 303: '    If you''ve typed everything correctly, this will appear in the display'
    line 304: '    window'
    line 305: '  your-first-sketch9'
    line 307: '    If nothing appears, the editor may be having trouble understanding what'
    line 308: '    you’ve typed. If this happens, make sure that you''ve copied the example code'
    line 309: '    exactly'
    line 311: '    to be spelled correctly.'
    line 312: '  your-first-sketch11'
    line 313: '    One of the most difficult things about getting started with programming is'
    line 314: '    that you have to be very specific about the syntax. The browser isn''t always'
    line 315: '    smart enough to know what you mean, and can be quite fussy about the'
    line 316: '    placement of punctuation. You''ll get used to it with a little practice. In'
    line 317: '    the bottom left of the editor you will find the console section. Here, you'
    line 318: '    can find messages from the editor with details about any errors it'
    line 320: '  your-first-sketch12'
    line 321: '    Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
    line 322: '    last example to try this'
    line 323: '  your-first-sketch13'
    line 324: '    This program creates a canvas that is 400 pixels wide and 400 pixels high,'
    line 325: '    and then starts drawing white circles at the position of the mouse. When a'
    line 326: '    mouse button is pressed, the circle color changes to black. Run the code,'
    line 327: '    move the mouse, and click to experience it.'
    line 328: '  your-first-sketch14'
    line 329: '  first-sketch-heading1'
    line 333: '  learn1'
    line 334: '  learn2'
    line 335: '  learn3'
    line 336: '  learn4'
    line 337: '  learn5'
    line 338: '  learn6'
    line 339: '  learn7'
    line 341: '  learn9'
    line 342: '  learn10'
    line 343: '  reference1'
    line 344: '  reference2'
    line 345: '  reference3'
    line 346: '  learn11'
    line 347: '  learn12'
    line 348: '  processing-transition1'
    line 350: '  processing-transition3'
    line 351: '  processing-transition4'
    line 352: '  book1'
    line 353: '    Parts of this tutorial were adapted from the book, Getting Started with'
    line 354: '    p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
    line 355: '    Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
    line 356: '    Contributors Conference.'
    line 44: Examples
    line 57: tagline2
    line 146: '  copyright-title'
    line 231: '  get-started-title'
    line 240: '    . If you would like to work on the the desktop version of p5.js you can'
    line 258: '  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 77: '  color-rgb-p2x1'
    line 82: '  color-transparency-p2x1'
    line 139: '  project-a-2-7-phuong'
    line 76: '  color-transparency-p1x1'
    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 359: '  project-a-1-1-chung'
    line 360: '  project-a-1-2-chung'
    line 361: '  project-a-1-3-chung'
    line 362: '  project-a-2-1-chung'
    line 364: '  project-a-2-2-chung'
    line 365: '  project-a-3-1-chung'
    line 366: '  project-a-3-2-chung'
    line 367: '  project-a-4-1-chung'
    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 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 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 395: '  project-a-4-7-casey-louise'
    line 396: '  project-a-5-1-casey-louise'
    line 397: '  project-a-5-2-casey-louise'
    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 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 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 65: '  color-rgb-p1x1'
    line 72: '  color-rgb-p2x1'
    line 85: '  color-custom-ranges-p4x1'
    line 81: '  color-transparency-p1x1'
    line 90: '  color-custom-ranges-p4x1'
    line 153: '  project-a-4-7-casey-louise'
    line 33: Skip-To-Content
    line 47: Contribute
    line 48: Forum
    line 49: Showcase
    line 51: footer1
    line 52: footer2
    line 53: footer3
    line 58: tagline3
    line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
    line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
    line 107: '    text, input, video, webcam, and sound.'
    line 108: '  p2xh2'
    line 130: '  p4xh2'
    line 131: '  p4xp1'
    line 132: '  p4xp2'
    line 135: '  p4xp5'
    line 147: '  copyright1'
    line 149: '    under the terms of the'
    line 150: '  copyright2'
    line 151: '  copyright3'
    line 152: '  copyright4'
    line 232: '  get-started1'
    line 235: '  get-started2'
    line 236: '  get-started3'
    line 237: '  get-started4'
    line 238: '  get-started5'
    line 241: '    scroll down to'
    line 242: '  get-started7'
    line 246: '  download1'
    line 247: '  download2'
    line 248: '  download3'
    line 249: '  download4'
    line 250: '    If you look in index.html, you''ll notice that it links to the file p5.js. If'
    line 252: '    loading), change the link to p5.min.js.'
    line 253: '  download5'
    line 254: '    Alternatively, you can link to a p5.js file hosted online. All versions of'
    line 255: '    p5.js are stored in a CDN (Content Delivery Network). You can find a history'
    line 257: '  download6'
    line 260: '  environment1'
    line 262: '  environment2'
    line 263: '  environment3'
    line 264: '  environment4'
    line 278: '  environment10'
    line 280: '    Open the index.html file in your browser by double clicking on it in your'
    line 436: '  Download'
    line 437: '  download-intro'
    line 438: '    Welcome! While titled "Download" this page actually contains a collection of'
    line 439: '    links to either download the library or begin working with it online. We''ve'
    line 440: '    tried to order things to reflect what a beginner might want first, to'
    line 441: '    resources that more experienced programmers may be looking for.'
    line 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 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 1517: '  2015contributors-conference-title'
    line 1518: '  2015contributors-conference-date'
    line 1519: '  2015contributors-conference1'
    line 1520: '  2015contributors-conference2'
    line 1521: '    , advancing the code, documentation, and community outreach tools of the'
    line 1522: '    p5.js programming environment. Participants came from as far away as Hong'
    line 1523: '    Kong, Seattle, Los Angeles, Boston and New York. Most were working'
    line 1524: '    professionals in the fields of creative technology, interaction design, and'
    line 1525: '    new-media arts, but the group also included a half-dozen undergraduate and'
    line 1526: '    graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
    line 1527: '  2015contributors-conference3'
    line 1528: '  2015contributors-conference-diversity-title'
    line 1529: '  2015contributors-conference-diversity1'
    line 1530: '    Alongside technical development, one of the main focuses of this conference'
    line 1531: '    was outreach, community, and diversity. The conference began with a panel'
    line 1532: '  2015contributors-conference-diversity2'
    line 1533: '    Diversity'
    line 1534: '    the Internet'
    line 1535: '  2015contributors-conference-diversity3'
    line 1537: '  2015contributors-conference-diversity5'
    line 1538: '  2015contributors-conference-diversity6'
    line 1539: '  2015contributors-conference-diversity7'
    line 1540: '    the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
    line 1541: '    Mellon University. Speakers included'
    line 1542: '  2015contributors-conference-diversity8'
    line 1543: '  2015contributors-conference-diversity9'
    line 1545: '  2015cc_2'
    line 1546: '  2015cc_3'
    line 1547: '  2015cc_4'
    line 1548: '    Woman expressively speaks into a microphone while two male collaborators'
    line 1549: '    look on'
    line 1550: '  2015cc_5'
    line 1551: '  2015cc_6'
    line 1553: '    Participants sit in a circle around a white board with sticky notes on it'
    line 1554: '    while a female student speaks into a microphone'
    line 1555: '  2015cc_8'
    line 1556: '    Participants sit around a table looking at each others laptops and compare'
    line 1557: '    code'
    line 1558: '  2015cc_9'
    line 1559: '  2015cc_10'
    line 1561: '    group of participants with laptops look at her powerpoint in a classroom'
    line 1562: '  2015cc_11'
    line 1563: '    Woman speaks at a podium in an auditorium while three participants sit on'
    line 1564: '    the stage and another three are skyping in on the stage screen'
    line 1565: '  2015cc_12'
    line 1566: '  2015cc_13'
    line 1567: '  2015cc_14'
    line 1569: '  2019contributors-conference-title'
    line 1570: '  2019contributors-conference-date'
    line 1571: '  2019contributors-conference1'
    line 1572: '  2019contributors-conference2'
    line 1573: '    , advancing the code, documentation, and community outreach tools and'
    line 1574: '    exploring the current landscape of the p5.js programming environment.'
    line 1575: '    Comprising a diverse range of participants within the fields of creative'
    line 1577: '    at fostering dialogue through a multidisciplinary lens. Working groups'
    line 1578: '    focused on several topic areas'
    line 1579: '    Landscape of Creative Tech; and Internationalization.'
    line 1580: '  2019contributors-conference3'
    line 1581: '  2019contributors-conference4'
    line 1582: '  outputs'
    line 1583: '  output1'
    line 1585: '    octagon girds for p5.js. Created by Aren Davey.'
    line 1586: '  output2'
    line 1587: '    . A set of template files for building a multi-device, multiplayer game'
    line 1588: '    where multiple clients can connect to a specified host page. Created by L05.'
    line 1589: '  output3'
    line 1590: '  output3-1'
    line 1591: '    , testing early implementations of softCompile, OSC interfacing and added'
    line 1592: '    connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
    line 1593: '    environment! Created by Ted Davis.'
    line 1594: '  output4'
    line 1595: '    A panel on Blackness and Gender in Virtual Space led by American Artist,'
    line 1596: '    with shawné michaelain holloway and LaJuné McMillian.'
    line 1597: '  output5'
    line 1598: '  output6'
    line 1599: '  output6-1'
    line 1600: '  output6-2'
    line 1601: '  output7'
    line 1602: '    New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
    line 1603: '    Jon Chambers.'
    line 1604: '  output8'
    line 1605: '  output8-1'
    line 1606: '    Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
    line 1607: '    Ye,  Dorothy R. Santos, and Yasheng She.'
    line 1608: '  output9'
    line 1609: '  output9-1'
    line 1610: '  output10'
    line 1611: '    An overhaul of the p5.js website for accessibility. Including updates for'
    line 1612: '    screen reader accessibility, and improvements to the home, download, getting'
    line 1613: '    started, and reference pages. With contributions from Claire Kearney-Volpe,'
    line 1614: '    Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
    line 1615: '    McCarthy, and Evelyn Masso.'
    line 1616: '  output11'
    line 1617: '    Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
    line 1618: '    Sona Lee, Ted Davis, and Carlos Garcia.'
    line 1619: '  output12'
    line 1620: '  output13'
    line 1621: '    A design of the p5.js library system for the p5 Editor. Created by Cassie'
    line 1622: '    Tarakajian and Luca Damasco.'
    line 1623: '  output14'
    line 1624: '    Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
    line 1625: '    Lauren Valley.'
    line 1626: '  output15'
    line 1627: '  2019cc_1'
    line 1628: '  2019cc_2'
    line 1629: '  2019cc_3'
    line 1630: '  2019cc_4'
    line 1631: '  2019cc_5'
    line 1632: '  2019cc_6'
    line 1633: '  2019cc_7'
    line 1634: '  2019cc_8'
    line 1635: '  2019cc_9'
    line 1636: '    Participant speaks at a podium in front of projected text about the problem'
    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'
    line 424: '    with p5.js.'
    line 433: '    presentations. I used'
zh-Hans:
  src/data/en.yml:
    line 26: footer6
    line 25: footer2
    line 27: footer4
    line 31: footer8
    line 32: footer9
    line 28: footer5
    line 29: footer6
    line 30: footer7
    line 1174: '    The Summer 2021 Showcase'
    line 270: '    particular topics. Check out the'
    line 288: '    to the index.html containing your p5.js sketch.'
    line 297: '    file and the embed.html file for the sketch.'
    line 306: '    be'
    line 310: '    stylesheet)'
    line 319: '    was ported to P5 by Kelly Chang. If you find any errors or have comments,'
    line 330: '    background(255);    // Setting the background to white'
    line 331: '     stroke(0);          // Setting the outline (stroke) to black'
    line 332: '     fill(150);          // Setting the interior of a shape (fill) to grey'
    line 340: '    black. Also, remember not to eliminate both—with'
    line 349: '    percentage). You can do this by specifying a custom'
    line 358: '    want to use the'
    line 363: '    and the bottom right corner). The mode here is'
    line 374: '    Using p5.js, this book introduces and demonstrates the reflexive practice'
    line 375: '    of aesthetic programming, engaging with learning to program as a way to'
    line 376: '    understand and question existing technological objects and paradigms,'
    line 385: '    p5.js work or your own to be featured here! If Google is not available in your region, please email chankati@usc.edu to submit!'
    line 394: '    environments.'
    line 398: '    better connect the p5.js learner and educator communities around the world.'
    line 407: '    examples.'
    line 415: '    links available in'
    line 261: '    the'
    line 279: '    of the p5js site. The file called index.hbs is the'
    line 442: '    .pdf format, all hosted publicly on GitHub.'
    line 1536: '  teach-case2-image-alt'
    line 1544: '  teach-case4-image-alt'
    line 1552: '  teach-case6-image-alt'
    line 1560: '  teach-case8-image-alt'
    line 1568: '  teach-case9-image-alt'
    line 1576: '  teach-case11-image-alt'
    line 1584: '  teach-case12-image-alt'
    line 1123: '  book-6-title'
    line 1124: '  book-6-authors'
    line 1125: '  book-6-publisher'
    line 1126: '  book-6-pages'
    line 1127: '  book-6-type'
    line 1128: '  book-6-description'
    line 1129: '    Using p5.js, this book introduces and demonstrates the reflexive practice '
    line 1130: '    of aesthetic programming, engaging with learning to program as a way to '
    line 1131: '    understand and question existing technological objects and paradigms, '
    line 1132: '    and to explore the  potential for reprogramming wider eco-socio-technical systems.'
    line 1133: '  book-6-order-a'
    line 1134: '  book-6-order-b'
    line 162: '    library in your html. To learn more visit&#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 271: '    Open Sublime. Go to the File menu and choose Open... and choose the folder'
    line 272: '    that your html and js files are located in. On the left sidebar, you should'
    line 273: '    find the folder name at the top, with a list of the files contained in the'
    line 282: '  environment12'
    line 283: '  environment13'
    line 284: '  your-first-sketch-title'
    line 285: '  your-first-sketch-intro1'
    line 286: '  your-first-sketch-intro2'
    line 287: '  your-first-sketch-intro3'
    line 289: '  your-first-sketch1'
    line 290: '  your-first-sketch2'
    line 291: '  your-first-sketch3'
    line 292: '  your-first-sketch4'
    line 293: '    The line you just added draws an ellipse, with its center 50 pixels over'
    line 294: '    from the left and 50 pixels down from the top, with a width and height of 80'
    line 295: '    pixels.'
    line 296: '  your-first-sketch5'
    line 298: '    If you are using a screen reader, you must turn on the accessible outputs in'
    line 299: '    the p5 online editor, outside the editor you must add the accessibility'
    line 300: '    library in your html. To learn more visit'
    line 301: '  your-first-sketch7'
    line 302: '  your-first-sketch8'
    line 303: '    If you''ve typed everything correctly, this will appear in the display'
    line 304: '    window'
    line 305: '  your-first-sketch9'
    line 307: '    If nothing appears, the editor may be having trouble understanding what'
    line 308: '    you’ve typed. If this happens, make sure that you''ve copied the example code'
    line 309: '    exactly'
    line 311: '    to be spelled correctly.'
    line 312: '  your-first-sketch11'
    line 313: '    One of the most difficult things about getting started with programming is'
    line 314: '    that you have to be very specific about the syntax. The browser isn''t always'
    line 315: '    smart enough to know what you mean, and can be quite fussy about the'
    line 316: '    placement of punctuation. You''ll get used to it with a little practice. In'
    line 317: '    the bottom left of the editor you will find the console section. Here, you'
    line 318: '    can find messages from the editor with details about any errors it'
    line 320: '  your-first-sketch12'
    line 321: '    Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
    line 322: '    last example to try this'
    line 323: '  your-first-sketch13'
    line 324: '    This program creates a canvas that is 400 pixels wide and 400 pixels high,'
    line 325: '    and then starts drawing white circles at the position of the mouse. When a'
    line 326: '    mouse button is pressed, the circle color changes to black. Run the code,'
    line 327: '    move the mouse, and click to experience it.'
    line 328: '  your-first-sketch14'
    line 329: '  first-sketch-heading1'
    line 333: '  learn1'
    line 334: '  learn2'
    line 335: '  learn3'
    line 336: '  learn4'
    line 337: '  learn5'
    line 338: '  learn6'
    line 339: '  learn7'
    line 341: '  learn9'
    line 342: '  learn10'
    line 343: '  reference1'
    line 344: '  reference2'
    line 345: '  reference3'
    line 346: '  learn11'
    line 347: '  learn12'
    line 348: '  processing-transition1'
    line 350: '  processing-transition3'
    line 351: '  processing-transition4'
    line 352: '  book1'
    line 353: '    Parts of this tutorial were adapted from the book, Getting Started with'
    line 354: '    p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
    line 355: '    Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
    line 356: '    Contributors Conference.'
    line 44: Examples
    line 57: tagline2
    line 146: '  copyright-title'
    line 231: '  get-started-title'
    line 240: '    . If you would like to work on the the desktop version of p5.js you can'
    line 258: '  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 77: '  color-rgb-p2x1'
    line 82: '  color-transparency-p2x1'
    line 139: '  project-a-2-7-phuong'
    line 76: '  color-transparency-p1x1'
    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 359: '  project-a-1-1-chung'
    line 360: '  project-a-1-2-chung'
    line 361: '  project-a-1-3-chung'
    line 362: '  project-a-2-1-chung'
    line 364: '  project-a-2-2-chung'
    line 365: '  project-a-3-1-chung'
    line 366: '  project-a-3-2-chung'
    line 367: '  project-a-4-1-chung'
    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 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 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 395: '  project-a-4-7-casey-louise'
    line 396: '  project-a-5-1-casey-louise'
    line 397: '  project-a-5-2-casey-louise'
    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 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 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 65: '  color-rgb-p1x1'
    line 72: '  color-rgb-p2x1'
    line 85: '  color-custom-ranges-p4x1'
    line 81: '  color-transparency-p1x1'
    line 90: '  color-custom-ranges-p4x1'
    line 153: '  project-a-4-7-casey-louise'
    line 33: Skip-To-Content
    line 47: Contribute
    line 48: Forum
    line 49: Showcase
    line 51: footer1
    line 52: footer2
    line 53: footer3
    line 58: tagline3
    line 101: '    beginners, and anyone else! p5.js is free and open-source because we believe'
    line 106: '    think of your whole browser page as your sketch, including HTML5 objects for'
    line 107: '    text, input, video, webcam, and sound.'
    line 108: '  p2xh2'
    line 130: '  p4xh2'
    line 131: '  p4xp1'
    line 132: '  p4xp2'
    line 135: '  p4xp5'
    line 147: '  copyright1'
    line 149: '    under the terms of the'
    line 150: '  copyright2'
    line 151: '  copyright3'
    line 152: '  copyright4'
    line 232: '  get-started1'
    line 235: '  get-started2'
    line 236: '  get-started3'
    line 237: '  get-started4'
    line 238: '  get-started5'
    line 241: '    scroll down to'
    line 242: '  get-started7'
    line 243: '  settingUp-title'
    line 246: '  download1'
    line 247: '  download2'
    line 248: '  download3'
    line 249: '  download4'
    line 250: '    If you look in index.html, you''ll notice that it links to the file p5.js. If'
    line 252: '    loading), change the link to p5.min.js.'
    line 253: '  download5'
    line 254: '    Alternatively, you can link to a p5.js file hosted online. All versions of'
    line 255: '    p5.js are stored in a CDN (Content Delivery Network). You can find a history'
    line 257: '  download6'
    line 260: '  environment1'
    line 262: '  environment2'
    line 263: '  environment3'
    line 264: '  environment4'
    line 278: '  environment10'
    line 280: '    Open the index.html file in your browser by double clicking on it in your'
    line 436: '  Download'
    line 437: '  download-intro'
    line 438: '    Welcome! While titled "Download" this page actually contains a collection of'
    line 439: '    links to either download the library or begin working with it online. We''ve'
    line 440: '    tried to order things to reflect what a beginner might want first, to'
    line 441: '    resources that more experienced programmers may be looking for.'
    line 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 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 1517: '  2015contributors-conference-title'
    line 1518: '  2015contributors-conference-date'
    line 1519: '  2015contributors-conference1'
    line 1520: '  2015contributors-conference2'
    line 1521: '    , advancing the code, documentation, and community outreach tools of the'
    line 1522: '    p5.js programming environment. Participants came from as far away as Hong'
    line 1523: '    Kong, Seattle, Los Angeles, Boston and New York. Most were working'
    line 1524: '    professionals in the fields of creative technology, interaction design, and'
    line 1525: '    new-media arts, but the group also included a half-dozen undergraduate and'
    line 1526: '    graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
    line 1527: '  2015contributors-conference3'
    line 1528: '  2015contributors-conference-diversity-title'
    line 1529: '  2015contributors-conference-diversity1'
    line 1530: '    Alongside technical development, one of the main focuses of this conference'
    line 1531: '    was outreach, community, and diversity. The conference began with a panel'
    line 1532: '  2015contributors-conference-diversity2'
    line 1533: '    Diversity'
    line 1534: '    the Internet'
    line 1535: '  2015contributors-conference-diversity3'
    line 1537: '  2015contributors-conference-diversity5'
    line 1538: '  2015contributors-conference-diversity6'
    line 1539: '  2015contributors-conference-diversity7'
    line 1540: '    the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
    line 1541: '    Mellon University. Speakers included'
    line 1542: '  2015contributors-conference-diversity8'
    line 1543: '  2015contributors-conference-diversity9'
    line 1545: '  2015cc_2'
    line 1546: '  2015cc_3'
    line 1547: '  2015cc_4'
    line 1548: '    Woman expressively speaks into a microphone while two male collaborators'
    line 1549: '    look on'
    line 1550: '  2015cc_5'
    line 1551: '  2015cc_6'
    line 1553: '    Participants sit in a circle around a white board with sticky notes on it'
    line 1554: '    while a female student speaks into a microphone'
    line 1555: '  2015cc_8'
    line 1556: '    Participants sit around a table looking at each others laptops and compare'
    line 1557: '    code'
    line 1558: '  2015cc_9'
    line 1559: '  2015cc_10'
    line 1561: '    group of participants with laptops look at her powerpoint in a classroom'
    line 1562: '  2015cc_11'
    line 1563: '    Woman speaks at a podium in an auditorium while three participants sit on'
    line 1564: '    the stage and another three are skyping in on the stage screen'
    line 1565: '  2015cc_12'
    line 1566: '  2015cc_13'
    line 1567: '  2015cc_14'
    line 1569: '  2019contributors-conference-title'
    line 1570: '  2019contributors-conference-date'
    line 1571: '  2019contributors-conference1'
    line 1572: '  2019contributors-conference2'
    line 1573: '    , advancing the code, documentation, and community outreach tools and'
    line 1574: '    exploring the current landscape of the p5.js programming environment.'
    line 1575: '    Comprising a diverse range of participants within the fields of creative'
    line 1577: '    at fostering dialogue through a multidisciplinary lens. Working groups'
    line 1578: '    focused on several topic areas'
    line 1579: '    Landscape of Creative Tech; and Internationalization.'
    line 1580: '  2019contributors-conference3'
    line 1581: '  2019contributors-conference4'
    line 1582: '  outputs'
    line 1583: '  output1'
    line 1585: '    octagon girds for p5.js. Created by Aren Davey.'
    line 1586: '  output2'
    line 1587: '    . A set of template files for building a multi-device, multiplayer game'
    line 1588: '    where multiple clients can connect to a specified host page. Created by L05.'
    line 1589: '  output3'
    line 1590: '  output3-1'
    line 1591: '    , testing early implementations of softCompile, OSC interfacing and added'
    line 1592: '    connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj'
    line 1593: '    environment! Created by Ted Davis.'
    line 1594: '  output4'
    line 1595: '    A panel on Blackness and Gender in Virtual Space led by American Artist,'
    line 1596: '    with shawné michaelain holloway and LaJuné McMillian.'
    line 1597: '  output5'
    line 1598: '  output6'
    line 1599: '  output6-1'
    line 1600: '  output6-2'
    line 1601: '  output7'
    line 1602: '    New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and'
    line 1603: '    Jon Chambers.'
    line 1604: '  output8'
    line 1605: '  output8-1'
    line 1606: '    Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian'
    line 1607: '    Ye,  Dorothy R. Santos, and Yasheng She.'
    line 1608: '  output9'
    line 1609: '  output9-1'
    line 1610: '  output10'
    line 1611: '    An overhaul of the p5.js website for accessibility. Including updates for'
    line 1612: '    screen reader accessibility, and improvements to the home, download, getting'
    line 1613: '    started, and reference pages. With contributions from Claire Kearney-Volpe,'
    line 1614: '    Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren'
    line 1615: '    McCarthy, and Evelyn Masso.'
    line 1616: '  output11'
    line 1617: '    Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,'
    line 1618: '    Sona Lee, Ted Davis, and Carlos Garcia.'
    line 1619: '  output12'
    line 1620: '  output13'
    line 1621: '    A design of the p5.js library system for the p5 Editor. Created by Cassie'
    line 1622: '    Tarakajian and Luca Damasco.'
    line 1623: '  output14'
    line 1624: '    Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and'
    line 1625: '    Lauren Valley.'
    line 1626: '  output15'
    line 1627: '  2019cc_1'
    line 1628: '  2019cc_2'
    line 1629: '  2019cc_3'
    line 1630: '  2019cc_4'
    line 1631: '  2019cc_5'
    line 1632: '  2019cc_6'
    line 1633: '  2019cc_7'
    line 1634: '  2019cc_8'
    line 1635: '  2019cc_9'
    line 1636: '    Participant speaks at a podium in front of projected text about the problem'
    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'
    line 424: '    with p5.js.'
    line 433: '    presentations. I used'