Skip to content

Commit fe15388

Browse files
committed
Add written sections
1 parent f361bf5 commit fe15388

1 file changed

Lines changed: 49 additions & 1 deletion

File tree

README.md

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,55 @@
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
242

343
## Organizational Structure
444

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+
553
## Preview
654

755
### Shapes & Color

0 commit comments

Comments
 (0)