Contributed Tools developed over the summer for Google Summer of Code!


Hi everyone,

My name is Jae and I participated in Google Summer of Code with The Processing Foundation this summer! As part of my project, I created two contributed Tools–Getting Started and Reference Tool–for the PDE.

The Getting Started Tool aims to give a short introduction to the PDE for new/beginner users and the Reference Tool is a built-in reference point for Processing. It eliminates the need to open up a browser to look up references.

I would love it if I could get some feedback on both of the Tools from the community!

They can both be downloaded from the Contribution Manager of the PDE.

Thanks so much!



Both of these are great! The only thing I noticed was there were no pictures in the reference tool.


I’ll try that as soon as possible but it already sounds cool! :slight_smile:


These are great tools, @jae_notjane. Congratulations on such great outcomes to your GSOC project.

A few things that I noticed while testing:

  1. almost all of the images loaded for me in the Getting Started Tool, with one exception: Running an Example. I tried using Previous / Next a few times, and closing and reopening the Tool, but it stayed broken.

  1. I think the reference explanation should be one option: highlight, then right-click. Leave out the 2A version. The reasons are that first, 2A/2B is far too complicated in a beginner tutorial, and more importantly, while the tutorial tool is running the Help > Find in Reference is grayed out. It is confusing to tell someone they could do something that they cannot actually do it at that time.


Super nice work!

The Getting Started Tool is short and simple, it is perfect for people who just start: it puts them on the right track without bothering them :slight_smile:
I did not had problem with broken image like @jeremydouglass.

For the reference tool I only have one regret: it would be cool to be able to highlight a keyword, right-click it and look for the reference in the tool and not the browser.


Thanks!! Could you clarify about the no pictures in the reference tool?


Thank you for the feedback!! I will definitely look into those. Thanks again!


Thank you for your input! That was also my goal but was unable to figure it out for the summer. I’ll look into it though!


In some reference pages, such as the rect() page, there are pictures to demonstrate the command. These are absent from the tool.


Hi @jae_notjane

Really great job. This would be a great idea to do as well in the p5.js online web editor. So this is for the future and your work have just set the bar :slight_smile:

I have a suggestion. Is it possible to add a sort of a progress bar showing what step you are in the tutorial? For example, if there are 9 pages, then you could add in a corner something like 2/9 pages if you are in the second page.

It is great that you use animated gifs for some of your demonstrations. I’d like to suggest having an animated gif in the second page that shows how to run the sketch after you write the ellipse() function. You could keep the description on the side. I feel having this animation just makes it natural for that part of your tutorial. What do you think?



Just to clarify, is it these images that are missing?


Thank you! I think the progress bar is a great idea. I’ll definitely look into it. I was also thinking about an index at the beginning as well but I’m not that sure if that would defeat the purpose of a step by step tutorial. What do you think?

As for the ellipse() function, I also like that suggestion. Do you think I should do the same for the second sketch? I’m thinking that it might not be necessary…


Yes, those are the ones missing from rect(), at least on my computer. These sort of images are missing from other commands too.


Gotcha. I’ll look into those. Thank you!