{"id":26716440,"url":"https://github.com/processing/p5.js-example","last_synced_at":"2025-03-27T15:27:14.834Z","repository":{"id":212060497,"uuid":"709098459","full_name":"processing/p5.js-example","owner":"processing","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-15T20:40:27.000Z","size":267625,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-04-14T05:52:45.709Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"GLSL","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/processing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-24T02:21:06.000Z","updated_at":"2024-01-05T17:05:37.000Z","dependencies_parsed_at":"2023-12-29T00:32:44.613Z","dependency_job_id":null,"html_url":"https://github.com/processing/p5.js-example","commit_stats":null,"previous_names":["processing/p5.js-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/processing%2Fp5.js-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/processing%2Fp5.js-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/processing%2Fp5.js-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/processing%2Fp5.js-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/processing","download_url":"https://codeload.github.com/processing/p5.js-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245870569,"owners_count":20686052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-27T15:27:14.330Z","updated_at":"2025-03-27T15:27:14.823Z","avatar_url":"https://github.com/processing.png","language":"GLSL","readme":"# p5.js Example Revision Project 2023\n\nContributors: Amy Chen, Lance Cole, [Caleb Foss](https://githubb.com/calebfoss) (lead), [Darren Kessner](https://github.com/dkessner), [Kathryn Lichlyter](https://github.com/katlich112358)\n\nThis 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.\n\n## Contents\n\n- [Review \u0026 Analysis](#review--analysis)\n- [Editing Criteria](#editing-criteria)\n- [Organizational Structure](#organizational-structure)\n- [Suggestions for Content \u0026 Design](#suggestions-for-content--design)\n- [Preview](#preview)\n\n## Review \u0026 Analysis\n\nWe 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.\n\nTo 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).\n\nAs we selected examples to edit and highlight on the new Examples page, we focused on these two priority areas:\n\nMaximize variety of demonstrations in terms of skill level, area of API, and category (typography, 3D, physics, etc.)\nMinimize revision needed for example to be accessible, clear, documented, etc.\n\n## Editing Criteria\n\nWe edited the curated p5 examples and wrote additional new examples from scratch using the following criteria:\n\n- Content created follows accessibility guidelines:\n  - Content rendered on a canvas includes a screen reader accessible description (via describe(), describeElement(), gridOutput(), or textOutput())\n  - Color contrast meets WCAG AA requirements\n  - 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\n- Readability score of Grade 8 or lower following tools like Hemingway App\n- Has an image thumbnail depicting what the example creates\n- Named to clearly identify its primary focus\n- Includes an introduction paragraph that meets p5’s technical writing guidelines with links to relevant resources (within p5 reference and external like MDN)\n- 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\n- Includes minimal code beyond its primary focus\n- 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).\n  (let vs var, prototype vs class, etc.)\n- Invites remixing by avoiding unnecessary code that causes more fragility with change\n\n## Organizational Structure\n\nThe revised examples page will contain 60 examples distributed into 15 categories.\n\nThe 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”.\n\nThe examples directory in this repo contains a subdirectory for each category with a numbered name to maintain their order.\n\nEach 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.\n\n## Suggestions for Content \u0026 Design\n\nWe tried to avoid sketches that start animating without user interaction, as this goes against [WCAG 2.3.3](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html), and found some creative ways to do so. Some sketches do still start animating on load. We would suggest a button to completely stop the preview of the sketch, similar to the \"run\", \"reset\", and \"copy\" buttons currently used.\n\nThe git history on the examples has been maintained, and many files include contributions going back several years. If the page for each example listed all contributors for that file, this could be a great way to highlight the community collaborative nature of p5's development.\n\nWe would like to see the examples page communicate the progression from beginner to advanced to the visitor. Some introduction text at the top of the page would help, and there may be design choices that would help emphasize the progression.\n\nWe discussed the possibility of a future p5 Editor widget as a replacement for the current Ace editor. Before that is developed, we recommend adding a link/button to open the current example in the p5 Editor in a new tab. This will help visitors to remix examples and save them to their p5 Editor account.\n\n## Preview\n\n### Shapes \u0026 Color\n\n|                                                                                                                                                                         |                                                                                                                                        |     |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --- |\n| \u003ca href=\"examples\\01_Shapes_And_Color\\00_Shape_Primitives\\code.js\"\u003e\u003cimg src=\"examples\\01_Shapes_And_Color\\00_Shape_Primitives\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eShape Primitives\u003c/a\u003e | \u003ca href=\"examples\\01_Shapes_And_Color\\01_Color\\code.js\"\u003e\u003cimg src=\"examples\\01_Shapes_And_Color\\01_Color\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eColor\u003c/a\u003e |\n\n### Animation \u0026 Variables\n\n|                                                                                                                                                                              |                                                                                                                                                                                                      |                                                                                                                                                                                                         |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\02_Animation_And_Variables\\00_Drawing_Lines\\code.js\"\u003e\u003cimg src=\"examples\\02_Animation_And_Variables\\00_Drawing_Lines\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eDrawing Lines\u003c/a\u003e | \u003ca href=\"examples\\02_Animation_And_Variables\\01_Animation_With_Events\\code.js\"\u003e\u003cimg src=\"examples\\02_Animation_And_Variables\\01_Animation_With_Events\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eAnimation With Events\u003c/a\u003e | \u003ca href=\"examples\\02_Animation_And_Variables\\02_Mobile_Device_Movement\\code.js\"\u003e\u003cimg src=\"examples\\02_Animation_And_Variables\\02_Mobile_Device_Movement\\thumbnail.jpg\" height=\"100\" /\u003e\u003cbr /\u003eMobile Device Movement\u003c/a\u003e |\n| \u003ca href=\"examples\\02_Animation_And_Variables\\03_Conditions\\code.js\"\u003e\u003cimg src=\"examples\\02_Animation_And_Variables\\03_Conditions\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eConditions\u003c/a\u003e          |\n\n### Imported Media\n\n|                                                                                                                                                                           |                                                                                                                                                                  |                                                                                                                                                   |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\03_Imported_Media\\00_Words\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\00_Words\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eWords\u003c/a\u003e                                        | \u003ca href=\"examples\\03_Imported_Media\\01_Copy_Image_Data\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\01_Copy_Image_Data\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eCopy Image Data\u003c/a\u003e | \u003ca href=\"examples\\03_Imported_Media\\02_Alpha_Mask\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\02_Alpha_Mask\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eAlpha Mask\u003c/a\u003e |\n| \u003ca href=\"examples\\03_Imported_Media\\03_Image_Transparency\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\03_Image_Transparency\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eImage Transparency\u003c/a\u003e | \u003ca href=\"examples\\03_Imported_Media\\04_Create_Audio\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\04_Create_Audio\\thumbnail.jpg\" width=\"180\" /\u003e\u003cbr /\u003eCreate Audio\u003c/a\u003e           | \u003ca href=\"examples\\03_Imported_Media\\05_Video\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\05_Video\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eVideo\u003c/a\u003e                |\n| \u003ca href=\"examples\\03_Imported_Media\\06_Video_Canvas\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\06_Video_Canvas\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eVideo Canvas\u003c/a\u003e                   | \u003ca href=\"examples\\03_Imported_Media\\07_Video_Capture\\code.js\"\u003e\u003cimg src=\"examples\\03_Imported_Media\\07_Video_Capture\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eVideo Capture\u003c/a\u003e       |\n\n### Input Elements\n\n|                                                                                                                                                   |                                                                                                                                                         |                                                                                                                                                                        |\n| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\04_Input_Elements\\00_Image_Drop\\code.js\"\u003e\u003cimg src=\"examples\\04_Input_Elements\\00_Image_Drop\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eImage Drop\u003c/a\u003e | \u003ca href=\"examples\\04_Input_Elements\\01_Input_Button\\code.js\"\u003e\u003cimg src=\"examples\\04_Input_Elements\\01_Input_Button\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eInput Button\u003c/a\u003e | \u003ca href=\"examples\\04_Input_Elements\\02_DOM_Form_Elements\\code.js\"\u003e\u003cimg src=\"examples\\04_Input_Elements\\02_DOM_Form_Elements\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eDOM Form Elements\u003c/a\u003e |\n\n### Transformation\n\n|                                                                                                                                                |                                                                                                                                       |                                                                                                                                    |\n| ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\05_Transformation\\00_Translate\\code.js\"\u003e\u003cimg src=\"examples\\05_Transformation\\00_Translate\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eTranslate\u003c/a\u003e | \u003ca href=\"examples\\05_Transformation\\01_Rotate\\code.js\"\u003e\u003cimg src=\"examples\\05_Transformation\\01_Rotate\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eRotate\u003c/a\u003e | \u003ca href=\"examples\\05_Transformation\\02_Scale\\code.js\"\u003e\u003cimg src=\"examples\\05_Transformation\\02_Scale\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eScale\u003c/a\u003e |\n\n### Calculating Values\n\n|                                                                                                                                                              |                                                                                                                                            |                                                                                                                                               |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\06_Calculating_Values\\00_Interpolate\\code.js\"\u003e\u003cimg src=\"examples\\06_Calculating_Values\\00_Interpolate\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eInterpolate\u003c/a\u003e | \u003ca href=\"examples\\06_Calculating_Values\\01_Map\\code.js\"\u003e\u003cimg src=\"examples\\06_Calculating_Values\\01_Map\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eMap\u003c/a\u003e       | \u003ca href=\"examples\\06_Calculating_Values\\02_Random\\code.js\"\u003e\u003cimg src=\"examples\\06_Calculating_Values\\02_Random\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eRandom\u003c/a\u003e |\n| \u003ca href=\"examples\\06_Calculating_Values\\03_Constrain\\code.js\"\u003e\u003cimg src=\"examples\\06_Calculating_Values\\03_Constrain\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eConstrain\u003c/a\u003e       | \u003ca href=\"examples\\06_Calculating_Values\\04_Clock\\code.js\"\u003e\u003cimg src=\"examples\\06_Calculating_Values\\04_Clock\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eClock\u003c/a\u003e |\n\n### Repetition\n\n|                                                                                                                                                                      |                                                                                                                                              |                                                                                                                                                       |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\07_Repetition\\00_Color_Interpolation\\code.js\"\u003e\u003cimg src=\"examples\\07_Repetition\\00_Color_Interpolation\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eColor Interpolation\u003c/a\u003e | \u003ca href=\"examples\\07_Repetition\\01_Color_Wheel\\code.js\"\u003e\u003cimg src=\"examples\\07_Repetition\\01_Color_Wheel\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eColor Wheel\u003c/a\u003e | \u003ca href=\"examples\\07_Repetition\\02_Bezier\\code.js\"\u003e\u003cimg src=\"examples\\07_Repetition\\02_Bezier\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eBezier\u003c/a\u003e                         |\n| \u003ca href=\"examples\\07_Repetition\\03_Kaleidoscope\\code.js\"\u003e\u003cimg src=\"examples\\07_Repetition\\03_Kaleidoscope\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eKaleidoscope\u003c/a\u003e                      | \u003ca href=\"examples\\07_Repetition\\04_Noise\\code.js\"\u003e\u003cimg src=\"examples\\07_Repetition\\04_Noise\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eNoise\u003c/a\u003e                   | \u003ca href=\"examples\\07_Repetition\\05_Recursive_Tree\\code.js\"\u003e\u003cimg src=\"examples\\07_Repetition\\05_Recursive_Tree\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eRecursive Tree\u003c/a\u003e |\n\n### Listing Data with Arrays\n\n|                                                                                                                                                                                |     |     |\n| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | --- |\n| \u003ca href=\"examples\\08_Listing_Data_with_Arrays\\00_Random_Poetry\\code.js\"\u003e\u003cimg src=\"examples\\08_Listing_Data_with_Arrays\\00_Random_Poetry\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eRandom Poetry\u003c/a\u003e |\n\n### Angles \u0026 Motion\n\n|                                                                                                                                                            |                                                                                                                                    |                                                                                                                                                                     |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\09_Angles_And_Motion\\00_Sine_Cosine\\code.js\"\u003e\u003cimg src=\"examples\\09_Angles_And_Motion\\00_Sine_Cosine\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eSine Cosine\u003c/a\u003e | \u003ca href=\"examples\\09_Angles_And_Motion\\01_Aim\\code.js\"\u003e\u003cimg src=\"examples\\09_Angles_And_Motion\\01_Aim\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eAim\u003c/a\u003e | \u003ca href=\"examples\\09_Angles_And_Motion\\02_Triangle_Strip\\code.js\"\u003e\u003cimg src=\"examples\\09_Angles_And_Motion\\02_Triangle_Strip\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eTriangle Strip\u003c/a\u003e |\n\n### Games\n\n|                                                                                                                                             |                                                                                                                              |                                                                                                                  |\n| ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\10_Games\\00_Circle_Clicker\\code.js\"\u003e\u003cimg src=\"examples\\10_Games\\00_Circle_Clicker\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eCircle Clicker\u003c/a\u003e | \u003ca href=\"examples\\10_Games\\01_Ping_Pong\\code.js\"\u003e\u003cimg src=\"examples\\10_Games\\01_Ping_Pong\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003ePing Pong\u003c/a\u003e | \u003ca href=\"examples\\10_Games\\02_Snake\\code.js\"\u003e\u003cimg src=\"examples\\10_Games\\02_Snake\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eSnake\u003c/a\u003e |\n\n### 3D\n\n|                                                                                                                                             |                                                                                                                                          |                                                                                                                                                                                                |\n| ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\11_3D\\00_Geometries\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\00_Geometries\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eGeometries\u003c/a\u003e                   | \u003ca href=\"examples\\11_3D\\01_Custom_Geometry\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\01_Custom_Geometry\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eCustom Geometry\u003c/a\u003e | \u003ca href=\"examples\\11_3D\\02_Materials\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\02_Materials\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eMaterials\u003c/a\u003e                                                                         |\n| \u003ca href=\"examples\\11_3D\\03_Orbit_Control\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\03_Orbit_Control\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eOrbit Control\u003c/a\u003e          | \u003ca href=\"examples\\11_3D\\04_Filter_Shader\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\04_Filter_Shader\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eFilter Shader\u003c/a\u003e       | \u003ca href=\"examples\\11_3D\\05_Adjusting_Positions_With_A_Shader\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\05_Adjusting_Positions_With_A_Shader\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eAdjusting Positions With A Shader\u003c/a\u003e |\n| \u003ca href=\"examples\\11_3D\\06_Framebuffer_Blur\\code.js\"\u003e\u003cimg src=\"examples\\11_3D\\06_Framebuffer_Blur\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eFramebuffer Blur\u003c/a\u003e |\n\n### Advanced Canvas Rendering\n\n|                                                                                                                                                                                        |                                                                                                                                                                                              |                                                                                                                                                                                                    |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\12_Advanced_Canvas_Rendering\\00_Create_Graphics\\code.js\"\u003e\u003cimg src=\"examples\\12_Advanced_Canvas_Rendering\\00_Create_Graphics\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eCreate Graphics\u003c/a\u003e | \u003ca href=\"examples\\12_Advanced_Canvas_Rendering\\01_Multiple_Canvases\\code.js\"\u003e\u003cimg src=\"examples\\12_Advanced_Canvas_Rendering\\01_Multiple_Canvases\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eMultiple Canvases\u003c/a\u003e | \u003ca href=\"examples\\12_Advanced_Canvas_Rendering\\02_Shader_As_A_Texture\\code.js\"\u003e\u003cimg src=\"examples\\12_Advanced_Canvas_Rendering\\02_Shader_As_A_Texture\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eShader As A Texture\u003c/a\u003e |\n\n### Classes \u0026 Objects\n\n|                                                                                                                                                             |                                                                                                                                                                                  |                                                                                                                                                                                        |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\13_Classes_And_Objects\\00_Snowflakes\\code.js\"\u003e\u003cimg src=\"examples\\13_Classes_And_Objects\\00_Snowflakes\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eSnowflakes\u003c/a\u003e | \u003ca href=\"examples\\13_Classes_And_Objects\\01_Shake_Ball_Bounce\\code.js\"\u003e\u003cimg src=\"examples\\13_Classes_And_Objects\\01_Shake_Ball_Bounce\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eShake Ball Bounce\u003c/a\u003e | \u003ca href=\"examples\\13_Classes_And_Objects\\02_Connected_Particles\\code.js\"\u003e\u003cimg src=\"examples\\13_Classes_And_Objects\\02_Connected_Particles\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eConnected Particles\u003c/a\u003e |\n| \u003ca href=\"examples\\13_Classes_And_Objects\\03_Flocking\\code.js\"\u003e\u003cimg src=\"examples\\13_Classes_And_Objects\\03_Flocking\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eFlocking\u003c/a\u003e       |\n\n### Loading \u0026 Saving Data\n\n|                                                                                                                                                                                          |                                                                                                                                                                                 |                                                                                                                                                                                       |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\14_Loading_And_Saving_Data\\00_Local_Storage\\code.js\"\u003e\u003cimg src=\"examples\\14_Loading_And_Saving_Data\\00_Local_Storage\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eLoad Save Storage\u003c/a\u003e | \u003ca href=\"examples\\14_Loading_And_Saving_Data\\01_JSON\\code.js\"\u003e\u003cimg src=\"examples\\14_Loading_And_Saving_Data\\01_JSON\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eLoad Save JSON\u003c/a\u003e | \u003ca href=\"examples\\14_Loading_And_Saving_Data\\02_Table\\code.js\"\u003e\u003cimg src=\"examples\\14_Loading_And_Saving_Data\\02_Table\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eLoad Saved Table\u003c/a\u003e |\n\n### Math \u0026 Physics\n\n|                                                                                                                                                                                                    |                                                                                                                                                             |                                                                                                                                                       |\n| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"examples\\15_Math_And_Physics\\00_Non_Orthogonal_Reflection\\code.js\"\u003e\u003cimg src=\"examples\\15_Math_And_Physics\\00_Non_Orthogonal_Reflection\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eNon Orthogonal Reflection\u003c/a\u003e | \u003ca href=\"examples\\15_Math_And_Physics\\01_Soft_Body\\code.js\"\u003e\u003cimg src=\"examples\\15_Math_And_Physics\\01_Soft_Body\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eSoft Body\u003c/a\u003e          | \u003ca href=\"examples\\15_Math_And_Physics\\02_Forces\\code.js\"\u003e\u003cimg src=\"examples\\15_Math_And_Physics\\02_Forces\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eForces\u003c/a\u003e             |\n| \u003ca href=\"examples\\15_Math_And_Physics\\03_Smoke_Particle_System\\code.js\"\u003e\u003cimg src=\"examples\\15_Math_And_Physics\\03_Smoke_Particle_System\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eSmoke Particle System\u003c/a\u003e             | \u003ca href=\"examples\\15_Math_And_Physics\\04_Game_Of_Life\\code.js\"\u003e\u003cimg src=\"examples\\15_Math_And_Physics\\04_Game_Of_Life\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eGame Of Life\u003c/a\u003e | \u003ca href=\"examples\\15_Math_And_Physics\\05_Mandelbrot\\code.js\"\u003e\u003cimg src=\"examples\\15_Math_And_Physics\\05_Mandelbrot\\thumbnail.png\" height=\"100\" /\u003e\u003cbr /\u003eMandelbrot\u003c/a\u003e |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocessing%2Fp5.js-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprocessing%2Fp5.js-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprocessing%2Fp5.js-example/lists"}