GSoC 2023: Join the Processing Foundation as a Summer of Code Contributor!

Hi @wonger, great to see you interested in this one! I think your understanding of the task is correct, and I think that task is a good size and scope for GSoC.

While that sketch you linked is a great starting point (and probably will be faster than the current filter implementation), I’d probably also recommend allocating some R&D time into your timeline to see if there’s a way to replace the get() call on line 69. That currently creates a new image with a new canvas and pastes the current canvas onto it. I think there’s potential to speed that up by keeping a special second canvas around that you reuse just for this purpose, or once this PR is merged in, using a framebuffer for WebGL canvases to avoid the data ever leaving the WebGL context on the GPU.

Let me know if you have any questions or need any pointers navigating the p5 codebase – I’m generally always monitoring the #contribute-to-p5 channel on the p5 discord!

1 Like

Hi all!

I’m Greg Stanton. I’m so excited that the Processing Foundation is participating again in GSoC! I’ll share a bit about myself and my project idea, in case any of you would be kind enough to provide feedback.

My background and motivation
I’m a professional tutor of higher-level math and a YouTuber. I have experience with the technologies I’d be using for my project, but I’m new to making open source contributions to others’ projects. So, I was really happy to learn that GSoC is now open to any open source beginner!

My long-term ambition is to share my education online with learners around the world, for free. Programming and mathematical visualizations are an important component of that. Many learners already know the benefits of watching mathematical animations on YouTube; I want to show them the joy and usefulness of programming their own! Especially interactive ones.

The problem I want to solve
Starting from graphical primitives means that basic mathematical visualizations can require an intimidating amount of programming.

In Python, manim has become a popular solution, and for good reason. But, there are still unmet needs, all of which the p5.js community prioritizes highly.

  • Accessibility: It must be easy for total beginners to use in the browser, with no setup.
  • Interactivity: It must support interactivity! Interacting > watching.
  • Expressiveness: It must be easy to customize for different aesthetics.

Prior work by others
A p5.js library would be the perfect way to address these needs, and the potential for such a library is huge! So, I’ve been following others’ work in this area with great interest. I’ll list the most relevant GSoC projects below.

  • Dynamic learning, GSoC 2018—Jithin K.S. (mentor: Saber Khan)
  • Dynamic learning, GSoC 2019— Ashneel Das (mentor: Nick McIntyre)
  • Math in Motion, GSoC 2019—A. Cheng, O. Garcia (mentors: G. Benedis-Grab, E. Nickles)
  • p5.teach, GSoC 2021— Aditya Siddheshwar (mentors: Jithin K.S., N. McIntyre)

My prior work
I wrote my own software library years ago to address the needs I outlined. To make it easy for beginners, the basic functionality requires no programming experience. For example, they can create an axis with a simple command like drawAxis().

I’ve already used the library to create sketches in the following subjects (many of these have really improved my tutoring!):

  • algebra
  • analytic geometry
  • single variable, multivariable, and vector calculus
  • probability
  • differential equations

I wrote my library in ProcessingJS, using what I learned on Khan Academy. Later, I learned p5.js from The Coding Train, and a lot more about software development. I used what I learned to develop more of the functionality I want for the library. An example is below.

My proposal (in a nutshell)
The ProcessingJS library that I wrote is 7000 lines of code, including comprehensive inline documentation. I propose to rewrite it in p5.js so that it will be more accessible, both to contributors and users.

I’ll need to refactor it using a different design pattern and run new tests. I’ll also want to create video tutorials to show how to use it, but I expect that would fall outside the scope of GSoC 2023.

Before I finish my formal proposal, I’d like to learn more about the design of p5.teach to determine if it would make sense to add to that, or if it would be better to create a separate library. If you’re around to talk about this @two.ticks, that’d be amazing!

My main question
Will work on a p5.js community library be considered for GSoC 2023? GSoC funding would make my project possible, and the mentorship would make it better! I’m asking because I don’t see libraries listed under p5.js project ideas this year. I do see libraries listed under Processing project ideas.

Thanks everyone!!
Greg

Edits:

  • If my proposal would be more suitable for a Processing Foundation Fellowship, please let me know. I’m very interested in that program as well.
  • A video of the interactive simulation pictured above, and a few more details can be found in my Twitter thread about this proposal.
9 Likes

Background:

I have a Bachelor’s degree in Computer Science, and I am passionate about interactive geometric drawing and graphic demonstrations. I have developed various graphical projects using open-source libraries that illustrate algorithms, data structures, and mathematical concepts. I am continuously exploring new methods to create engaging user experiences through interactive visualization and animations. Here are some links to my past works:

https://www.netpad.net.cn/zone_web/user/#/28165 (1000+ works)

and geogebra @ asukaminato (new user can only post 2 links)

In addition to my skills in computer science, I am interested in contributing to the open-source community. I have previous contributions to open-source projects, and I have a good understanding of how different tools and frameworks come together for a project’s success.

Problem I Want to Solve:

Through my experience with the p5.js library, I have noticed that there is some old legacy code, which results in challenges in maintaining and updating the library. The old code can make it challenging for new developers to understand and can also slow down the development cycle. Therefore, I propose to port the p5.js library to modern standards, which will reduce future maintenance workloads and increase its performance.

Porting the library will involve updating the primary language constructs, using modern JavaScript syntax, and also making the codebase more modular. A benefit of modernizing the codebase is that it will make it more understandable to new developers, and the maintenance process will be more manageable.

Prior work

My prior experience with code refactoring and documentation will be vital to the success of this project. As a computer science student, I have experience with multiple languages and frameworks, which also include p5.js. I have previously contributed to the p5 project by submitting a Pull Request, which was merged successfully (https://github.com/processing/p5.js/pull/6075). During this process, I realized that there is a need to port the code base.

I intend to start the project by analyzing the existing codebase and identifying potential issues and areas that would benefit from modularization and documentation. I will prioritize the identified problems in conjunction with the community to have the most significant impact on the development process. I will also ensure that automated testing and quality assurance processes are introduced to the p5.js library to avoid problems in the future.

By contributing to this project, I hope to make a notable impact on p5.js, which, in turn, contributes to the advancement of the open-source community.

Thank you for considering my proposal, and I look forward to working with you on this project.

Sincerely,

Wu YuDi

possible mentors: @davepagurek

1 Like

Thanks for your work so far on this @AsukaMinato and your interest in continuing!

As part of making the codebase more modular, for the proposal you submit, it might be interesting taking a look at the discussion in this issue Minimising p5.min.js further for production · Issue #5740 · processing/p5.js · GitHub about the potential of making smaller, more modular p5 builds. Actually making modular builds is likely out of scope for GSoC, but if you have any ideas on how we might want to do that in the future, it would be an added bonus if your project also makes steps towards that. It also might help motivate decisions you make when making structural changes to the code.

Hey @Jithin and @mcintyre:

I’m pinging you here to let you know I cited your work/mentorship. Also, if you happen to have any feedback on my project idea, I’d love to hear it!

(I couldn’t tag you before because I’m a new user on Discourse and can only tag two people per post.)

2 Likes

Then there are several ways(or maybe they are the same proposal)

  1. continue porting the remaining prototype to class, as Minimising p5.min.js further for production · Issue #5740 · processing/p5.js · GitHub said, p5.C.prototype.method = function () { } vs method(){ }
    , which will make the code more readable. And more likely to be minified. And maybe the test also needed to be modified. (There are some tests that failed before).
  2. make the p5 js library more modular to take the advantage of modern bundle tools (webpack, rollup, etc.) They can tree-shake the code base to reduce the final production size. p5.C = xxx vs export const C
  3. use more es6 style API to shorten the code. for example, arr.find() vs for + break.
    Thanks for considering my ideas.

Hello everyone! My name is Yash , consider me as a beginner eager to contribute to the community not just for GSoC but also in general.
I looked for projects and "Web Accessibility on p5js.org and documentation " is the one I’m willing contribute for.I have knowledge of HTML, CSS, JS and also I’ve worked with bootstrap and NodeJs for portfolio projects. From documentation I read on GitHub there are many mentors possible for this project so can anyone help me out what should I do further, and also ways to contact mentors. Thank you in Advance :slightly_smiling_face:

1 Like

Hello everyone! My name is Kunal Tiwari. I was playing around with the p5.js web-editor for a while. I saw in the idea list of the GSOC page, that there is no priority given for the projects under the p5.js web-editor project. Will the proposals in this domain given less priority or you guys are willing to take proposals in these projects as well.

What’s up, Greg!

This looks like a fantastic idea. Bringing manim level animation and interaction to the web is actually a thing I’ve been thinking about for a long time. I am a seasoned Manim user myself, I work on the Reducible youtube channel.

I can agree that Manim is not the most accessible piece of software out there, but well, it’s programming! And programming is hard. We gotta start somewhere.

As for interactivity, Manim is actually interactive via the IPy console and more. You can see that in the last videos Grant has been putting.

Finally, as for expressiveness, well, it’s just a matter of creating a design pattern. I worked on the design pattern and choices behind the Reducible videos, so they could be immediately identified when you see any frame. Whether I did a good job or not is totally subjective, but I surely was able to do it!

All this is to say that Manim is definitely capable of those, BUT that doesn’t mean that I don’t want a web-flavoured manim. I am all in for it and you have my full support.

Last year I was a contributor, so I don’t know if that allows me to be mentor this year, but I would absolutely love to help you on this topic regardless.

Hit me up whenever you wanna chat, please!!

Also, some other references of mathematical stuff for web development:

Mafs: React components for interactive math
Manim Web
This is a completely nuts example of how interactive these can get. You are literally inside the video and you can move freely while the explanation is being told. This is completely mind blowing.

Okay, have a nice day!!

1 Like

Hi Greg!

Thanks for tagging me and for sharing your passion for teaching technical subjects. Unfortunately, I can’t answer your first question. I’m happy to provide a little feedback on your idea, though.

At first glance, it seems like your goals align with Aditya’s when he proposed p5.teach. What do you think about building on the foundation he created a couple of years ago? His library is very capable and could be taken in new directions based on your teaching experience.

Cheers,
Nick

1 Like

Hi,
I’m writing a proposal on Resolve Issues / Fix Bugs on Area:Typography Issue.

I wanted to know who could be possible mentors for this?.. as I need some help and feedback on the proposal which I’ll be sharing here soon.

Thanks

Hi Jesús!

It’d be amazing to have your help, as a mentor or in any other capacity. Actually, you already helped me, since you resolved the issue I was having with GIF exports in your GSoC project, and your YouTube work is incredible too! I’m honored that you want to work with me on this.

I guess I should mention that after MATLAB and C, Python was my next language; I used it to build projects including an interactive 3D physics simulation. But, I don’t have direct experience with manim like you do, so your detailed insights are invaluable.

One of the great things about p5.js is that it provides an onramp for beginners to create increasingly sophisticated projects. I want to extend this to mathematical visualizations, so that basic tasks are not only possible, but also easy for beginners. I’ll elaborate a bit on the main points below.

Accessibility:

For those who are unfamiliar, I think it’s instructive to compare the manim quickstart page to the p5.js get-started page. Both pages show the user how to draw a circle. When comparing the complexity of the setup and the amount of knowledge assumed, it’s like night and day.

Interactivity:

As an example, I made a graphing calculator with p5.js. Zooming works great with a touchpad or mouse, a grab cursor indicates the user can pan by clicking and dragging, and more.

This required no extra setup and the app can run anywhere on the web without any special environment, since javascript is a core web technology. How would you say this compares with manim? I was under the impression that implementing interactivity with manim requires setup, and that it can be slow.

There’s another aspect of accessibility that I didn’t mention. Since math is permanent in many ways, we also have the opportunity to create applications that will be useful to future generations, as long as they’re able to access them. The tricky part is that web technology is impermanent (just ask the developers of all the Java web applets that no longer work). Fortunately, JS is backwards compatible, since breaking JS means breaking the web.

Also, since you mentioned the interactive videos from Grant Sanderson and Ben Eater, have you seen Liqvid? Andy Matuschak also maintains a list of what he calls narrated explorables. (Thanks so much for the other references as well. I added them to my internal planning document.)

Expressiveness:
It’s so cool that you created the custom aesthetic for Reducible, and that you managed to make it immediately identifiable.

To illustrate what I had in mind, let’s consider drawing an axis.

  • How easy is it to create different types of arrows at the ends of an axis, of different sizes and shapes?
  • How easy is it to make the axes look as if they’re in a graphing calculator, with no arrows, and tick labels at the ends?
  • How easy is it to make the axes look as if they’re hand drawn? (Actually, this can be done in Python with Matplotlib.)

Questions like these arise with basically every graphical math object, and there are always many possible answers, which forces design choices at the library level. If we parameterize more options so that users can easily tweak them in different combinations, then we’ll increase the expressiveness.

Following up
If you have any other follow-up thoughts, even on considerations I haven’t addressed at all, I’d love to hear them.

Thanks again!!!
Greg

P.S. I linked to the various things I mentioned and also embedded a few pictures to illustrate the point about expressiveness, but I’m still not allowed to include more than one image or two links (Discourse is telling me I’m still a relatively new user).

Hi Nick!

Thank you so much for your thoughts! I’d like to build on existing work whenever possible.

Since I also developed a library for personal use (that was before Aditya’s work existed), it’s possible that there will be some design conflicts that will be hard to reconcile. However, I’m already planning to significantly refactor my code, so it may not be a problem. I’ll have to sort this out (hopefully before I formalize my proposal).

Aditya was also kind enough to share a few other related libraries, and Jesús did as well, so I’d also like to look through those for additional inspiration.

Thanks again!
Greg

1 Like

Hey all,
I’m Will Rabalais, an undergraduate computer science and mathematics student at the University of Maryland. Processing’s mission appeals to me because before I began studying computer science in college, I bounced between a few different resources to learn programming concepts but didn’t find one as comprehensive as Processing so I appreciate how it can help aspiring developers learn to code faster.

I’m interested in participating Google’s Summer of Code as a first-time contributor and find the projects, “Friendlier Error Messages for Processing” and “Update the Shader mode for Processing4” with @Andres .
I have experience with Java and have familiarized myself with the Processing4 codebase, especially the debugger. I made a pull request to fix issue #606 (Bugfix for Issue #606 by WillRabalais04 · Pull Request #692 · processing/processing4 · GitHub) and will continue to contribute to open issues with the tag help wanted.

Questions:

  1. I would be interested in contributing to the Processing for Android however I have experience with Java and not Kotlin. Is knowledge of Kotlin required (if it is, to what degree) or just recommended?
  2. When submitting a proposal do we need to generate an entirely new project idea or can we choose one we are interested in from the project list?
  3. How involved are the mentors? Roughly how much guidance or communication are we expected to have with them?
  4. How many people work on each project and do they work together?
  5. I see there’s a discord for p5.js, are there ones for other specific Processing projects or a general one?

Looking forward to contributing!

It seems that besides p5.js, there is also a p5py project, which I am also willing to contribute to.
Here is my proposal for it.

@tushar55

Hello! I’m a grad student in digital communication in Basel. As a complete beginner at p5.js, I’d like to use this to my advantage and contribute to the Web Accessibility on p5js.org and documentation. I have experience in UX research, design, and art direction. While I am not an expert, I understand HTML, CSS, and javascript well, having previously worked on a few projects.

My proposal for this project will be focused mainly on the following:

  • Accessibility audit, checking WCAG compliance
  • Adding alt attributes where necessary, especially on images
  • Usability testing

I would like to expand my proposal by March 31st and I’m willing to commit either 175 or 350 hours, to the effort of improving p5js. I look forward to being mentored by Claire Kearney-Volpe/Caleb Foss/Paula Isabel Signo.

1 Like

Hello, @AsukaMinato ! villares and I are mentors for py5, not pyp5, so we are the wrong people to review this. Still, we welcome your contribution to the community!

1 Like

Hello,
I’m interested in the Internationalization and Localization.

I’m very excited to contribute with your organization.

My proposal:

Include Spanish translations to the web editor

Add the framework for adding localization

Integration of React internationalization library

I look forward to hearing from you about next steps, and if there is anything that I can clarify about my experience or qualifications for the open source contribution, please don’t hesitate to reach out. :slightly_smiling_face:

Thank you,
Rosy

Hey guys! My name is Nikhil Rastogi. I quite proficient at full stack web development so I am quite interested in applying to [Project List · processing/processing Wiki · GitHub](Adding Test Coverage). Can you please provide me with some way of communicating with the mentor (Rachel Lim) so that I can talk to her about the project to understand it better and also for proposal review.
Thank You
Nikhil Rastogi

Hi, thank you for your interest in p5py. The projects requires a medium level understanding of python language. I would like to see some of your past projects / experience in it (you can also contribute to p5py to show that as well). Also, can you be more detailed on what issues are you planning to pick and test coverage part, this would help me evaluate better.