|
1 | | -# p5.js - Example Revision Project 2023 |
| 1 | +# p5.js Example Revision Project 2023 |
| 2 | + |
| 3 | +Contributors: Amy Chen, Lance Cole, [Caleb Foss](https://githubb.com/calebfoss) (lead), [Darren Kessner](https://github.com/dkessner), [Kathryn Lichlyter](https://github.com/katlich112358) |
| 4 | + |
| 5 | +This document describes the process for revising the p5.js examples for the 2023 Sovereign Tech Fund project and outlines the structure for the new examples included in this repo. |
| 6 | + |
| 7 | +## Contents |
| 8 | + |
| 9 | +- [Review & Analysis](#review--analysis) |
| 10 | +- [Editing Criteria](#editing-criteria) |
| 11 | +- [Organizational Structure](#organizational-structure) |
| 12 | +- [Preview](#preview) |
| 13 | + |
| 14 | +## Review & Analysis |
| 15 | + |
| 16 | +We reviewed all 190 current examples for the base p5 library (excluding the sound library), as well as the 29 examples revised/written by Malay Vassa for GSoC: [review data](https://docs.google.com/spreadsheets/d/1HJMtTNhSRh-jJM25fSvpKvge65Ee5F93CuB75TNnfM0/edit?usp=sharing). We gathered data to inform both the curation and editing processes. |
| 17 | + |
| 18 | +To maintain wide coverage of the API while curating a smaller list of examples, we analyzed the coverage of different parts of the API: [API coverage data](https://docs.google.com/spreadsheets/d/1XbpgV2pWfUex_C9OYr6WlX_RAOE1Sl4X-4BJiwLWeiA/edit?usp=sharing). |
| 19 | + |
| 20 | +As we selected examples to edit and highlight on the new Examples page, we focused on these two priority areas: |
| 21 | + |
| 22 | +Maximize variety of demonstrations in terms of skill level, area of API, and category (typography, 3D, physics, etc.) |
| 23 | +Minimize revision needed for example to be accessible, clear, documented, etc. |
| 24 | + |
| 25 | +## Editing Criteria |
| 26 | + |
| 27 | +We edited the curated p5 examples and wrote additional new examples from scratch using the following criteria: |
| 28 | + |
| 29 | +- Content created follows accessibility guidelines: |
| 30 | + - Content rendered on a canvas includes a screen reader accessible description (via describe(), describeElement(), gridOutput(), or textOutput()) |
| 31 | + - Color contrast meets WCAG AA requirements |
| 32 | + - Animations meet WCAG [2.3.1](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html) and [2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html) requirements |
| 33 | +- Readability score of Grade 8 or lower following tools like Hemingway App |
| 34 | +- Has an image thumbnail depicting what the example creates |
| 35 | +- Named to clearly identify its primary focus |
| 36 | +- Includes an introduction paragraph that meets p5’s technical writing guidelines with links to relevant resources (within p5 reference and external like MDN) |
| 37 | +- Includes comments that meet [p5’s technical writing guidelines](https://docs.google.com/document/d/1aHyeh9UcKjICippuAvC9iurKfl3RQNHQaj170Ri_7hE/edit?usp=sharing) and help the reader follow the code |
| 38 | +- Includes minimal code beyond its primary focus |
| 39 | +- Is up-to-date with contemporary JS conventions/syntax and follows [p5's Code Style Guide](https://github.com/processing/p5.js/blob/main/contributor_docs/documentation_style_guide.md#code). |
| 40 | + (let vs var, prototype vs class, etc.) |
| 41 | +- Invites remixing by avoiding unnecessary code that causes more fragility with change |
2 | 42 |
|
3 | 43 | ## Organizational Structure |
4 | 44 |
|
| 45 | +The revised examples page will contain 60 examples distributed into 15 categories. |
| 46 | + |
| 47 | +The overall order of examples progresses from beginner to advanced. Someone new to p5 can start from the top and work their way down. The examples introduce a broad range of the API piece by piece. They also introduce programming concepts. Each example builds on what has been introduced so far. We conceptualized this structure as a p5 “story”. |
| 48 | + |
| 49 | +The examples directory in this repo contains a subdirectory for each category with a numbered name to maintain their order. |
| 50 | + |
| 51 | +Each category directory contains a 'More' subdirectory with additional examples related to that category. These are unedited and do not meet all out evaluation criteria. We recommend including them as an optionally revealed section for site visitors who want to explore further variety. |
| 52 | + |
5 | 53 | ## Preview |
6 | 54 |
|
7 | 55 | ### Shapes & Color |
|
0 commit comments