For my Google Summer of Code 2020 Project I worked with my mentors Joey Lee and Yining Shi to expand the scope of the 2019 p5.js showcase to include features like filtering a large number of projects as well as improving the implementation process for the showcase to make it faster to add entries. The 2020 showcase was able to add 10 times more entries than the 2019 showcase (to house a total of 60 entries) and hopefully will continue to grow in the future.
View the p5.js 2020 showcase here to see the wide variety of work created by the p5.js community. View the showcase repository here. The showcase repo is currently being maintained by me (Connie Liu).
Last year, the first p5.js showcase was made, showcasing a gallery of six pieces spanning a variety of categories. The limitation was mostly due to the code used in the p5.js showcase, which consisted of handlebars files. Because of how YAML and handlebars interacted with each other, each showcase details page had to be hardcoded in, which took a lot of time. The need for a new website is detailed in this issue.
In order to increase the showcase to 60 entries without hardcoding everything I created a new standalone website using React and mapped the text content from a JSON file. This meant that each showcase entry and its corresponding detailed page was auto-generated and was not hardcoded like the previous showcase iteration. More details are written below.
- Created documentation for the old p5.js 2019 showcase and how to add to it (PR here)
- Created minor UI improvements to the old p5.js 2019 showcase (created tool tags for each project using handlebars). View all PR's for the p5js-website here.
- For the 2020 showcase, created various marketing materials (view Figma here and here), and recreated the nomination form questions for easier integration of CSV content from autogenerated google form sheet data into a JSON format. View the 2020 form here.
- Reviewed all form submissions to see which ones to add to the showcase and lightly edited 60 final showcase entries for clarity.
- Created various mockups for how the final p5.js showcase would look as well as potential data visualizations of form responses to demonstrate the diversity of the p5.js community with Figma. Lightly user-tested these designs w/ mentors and others to make sure they were understandable.
(view repository here, view live version of the showcase here):
-
Expanded the interactivity of the 2020 showcase by implementing:
- Data visualizations: created a map with leaflet.js, graphs with chart.js, and a word visualizer with p5.js
- Translations with react-i18next
Various improvements specific to 2020 showcase:
- Filters for various project categories. Hand-classified projects to relevant categories.
- Tools tags for relevant niche libraries and functions used in the p5.js projects.
-
Made sure that the 2020 showcase had Spanish and Chinese translation. Currently only the Spanish translation includes a translation of the description and increasing the scope of translations is still a work in progress.
-
Migrated 2019 showcase content to the new website for preservation and included link to reference the original 2019 showcase page.
-
Created documentation on how to add translations to the new showcase as well as a general overview of how i18next works in tandem with React and how to convert form results to the JSON format for adding entries.
-
For the final pull request, updated links to the new p5.js 2020 showcase as entry points for the new website.
- Important packages/libraries used: i18next (translations), react-dom, react-router, react-markdown, react-clamp-lines, various react wrappers
- React.js
- chart.js, leaflet.js, p5.js
Currently I am the maintainer of the p5.js 2020 showcase repo and it exists within my GitHub account. The hope is that next summer's GSoC student can take over as the maintainer, or work to expand the showcase into an official repo/system that can be maintained by a team of people. Another goal is to make sure that the showcase is accessible to everyone as there wasn't enough time to make sure it complied with a11y guidelines.
I hope that the showcase can be expanded every year or two years as a celebration of people's work. I truly believe it's a unique opportunity to bring the p5.js community together to celebrate everyone's work.
Please tag me @connieliu0 on the p5js showcase GitHub repo if you would like to add translations or propose a new issue on the current repository. Feel free to email me at [email protected] for any other matters concerning the showcase!
I am so grateful to the Processing Foundation for providing me with this opportunity to expand and curate a new p5.js showcase. This summer's project was the perfect blend of everything I loved- community engagement, design, and the creative implementation of technology. In fact, it was p5.js that inspired me to pursue coding at the university level. Seeing the community's creative projects and sketches as a high school junior made me fall in love with the world of creative computing.
However, what really made this summer's GSoC experience with p5.js and the Processing Foundation especially special was the community itself. First and foremost I'd like to thank my wonderful and inspiring mentors Joey Lee and Yining Shi! They helped me so much with everything- from the best way to approach a bug to the actual curation of the showcase. In addition, they imparted so much wisdom in regards to a career in creative tech and provided advice on how to approach problems as a novice coder. I'd also like to thank my fellow GSoC-er, Inhwa Yeom, who was working on a similar project for her advice and support. In addition I'd like to thank Nick McIntyre and Kate Hollenbach for their feedback on my proposal, as well as Saber Khan, Aarón Montoya-Moraga, Ashley Kang and the various contributors and maintainers of p5.js for their help. Finally, I'd like to thank Lauren McCarthy and Moira Turner for leading the p5.js project itself.
All in all, this project has provided me with a wonderful first experience in contributing to open source and I'm forever grateful. I can't wait to see where p5.js takes off to next.