Increasing the Organization and Scope of the p5.js Showcase
by Connie Liu, Google Summer of Code 2020
mentored by by Joey Lee and Yining Shi
2020 marks the Processing Foundation’s ninth year participating in Google Summer of Code, where we work with students on open-source projects that range from software development to community outreach. We’ve been posting articles written by some of the GSoC students, explaining their projects in detail, which you can read here. The series will conclude with a wrap-up post of all the work done by this year’s cohort.
When I learned I was selected to be a GSoC student for p5.js I was absolutely ecstatic. p5.js has always held a special part of my heart. Ever since discovering it in junior year of high school, it’s always reminded me that art and code can intersect, that there is a space in the world for interdisciplinary creativity.
The Development Process
Initially, I was going to integrate the Showcase into the original codebase of the p5.js website. However, after a month of auditing and trying different solutions (and contacting many people in the community to make sense of it), I came to the conclusion that for what I wanted to do—which was autogenerating 50 projects and having a filter for each—it would be very difficult within the current Handlebars framework. As a result, I planned a new proposal to use a React Framework in which I would be able to autogenerate different UI using content from the JSON files.
i18next
Figuring out how to integrate i18next into the React framework was one of the biggest challenges I faced. It took three days of rereading the same docs over and over again, and I still could not figure out how translations worked with nested JSON arrays. After stumbling onto a GitHub thread from a couple of years ago, I was finally able to figure out the syntax.
Because of the problems I had with figuring out the previous tech stack of the website and with creating the new one, as part of my project I wrote up brief documentation here about how i18next worked with the JSON files.
Designing the Showcase and Data Visualizations
Another challenge was figuring out what data visualizations I wanted in the beginning. In my original iteration, I focused on splitting it up into three different categories. However, that ruined the linear narrative flow and all the different visualizations felt very separate from one another. At one point, I just had a series of graphs that were auto-generated by the Google Form. I also had planned to use d3.js, but my mentors encouraged me to change my approach to different JS libraries that were more tailored towards the graph types I was planning for.
The one advice my mentor told me that really stuck with me was to design the visualizations for a story. In my final iteration, I made sure that the visualizations acted as part of a narrative, and incorporated it with a sentence that explained the significance of the visuals.
As a result, I was able to steer away from creating a generic graph with a title and description.
Organizing the Submissions
Another thing that changed this year was that I reached out to many different institutions and people to try to increase the number of submissions. As a result, the Showcase grew to 60 submissions! In order to make it easier for people to find what they were interested in among all the submissions, I split them up into 11 different categories. I also put tags on the bottom of each entry to give more context to the technologies used.
In order to get more people to submit and also check out the Showcase, I created some marketing graphics. It was a challenge for me, as someone who hadn’t created graphic design in a while, but it was worth it and I learned a lot.
The Final Product
In the final p5.js Showcase I was able to improve it in the following ways:
- Added translation support and implemented translations for Spanish and Chinese
- Implemented data visualizations with Leaflet.js, p5.js, and Chart.js
- Added filters for various project categories
- Added tool tags for various niche libraries and functions used in p5.js
- Created documentation for translation contributions
Conclusions and the Future
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 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 as a celebration of people’s work. I truly believe it’s a unique opportunity to bring the p5.js community together to recognize everyone’s work.
Support
Please tag me @connieliu0 on the p5.js 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 cliu55567@gmail.com for any other matters concerning the Showcase!
Acknowledgments
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.
Furthermore, I’d like to extend my deepest thanks to my mentors, Joey Lee and Yining Shi for helping me throughout the whole process and providing advice for everything from curation to career. There are many others I’d also like to thank, click here for the full list!
All in all, it was a wonderful summer, and I’m so excited to see how p5.js grows in the future!
