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.

1 Like

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!

Hi @jae_notjane I apologize not getting back to you before. I am not sure about an index either… I envision a beginner would run the tutorial and he/she will follow it step by step in a linear and smooth fashion. It should not be rushed, but also it should not be too long. It shows the basics as how to get started. I have seen a tutorial like that before here and I am sure there are also so many other places that have the same concept. So I think what you have is good.

One thought: Not sure if you need the slide for save/save as…

I think the slide of sketchbook is good and it could be expanded. Not sure… just an idea. Sketchbook is important but not sure how much info to provide. I am thinking like: “Sketchbook is independent of the Processing engine, it saves your current libraries and modes and it should also be used to store your own sketches” Then the other key point is that when a PDE is saved, the folder will match the name of the pde file." Now, this could be probably too much info to place in your feature so I just mention it for your consideration.

Are you referring to this one?


Yes, I think that could be a good idea, if you can replace the image and play a gif file instead… Then the gif could end with a long pause and indicating the user to try by himself/herself.

Just my thoughts… great effort. I hope they can place it as a first option in the File menu (big change… good to consider it) or a link in the splash screen when running Processing for the very first time.