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

**URL:** https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380
**Category:** Gallery
**Created:** [September 8, 2018, 8:48pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380 "2018-09-08T20:48:14Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 8, 2018, 8:48pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/1 "2018-09-08T20:48:14Z")

</div>

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!

Best,  
Jae

---

<div class="post-metadata">

### Author: ![Quillbert1](https://avatars.discourse-cdn.com/v4/letter/q/f475e1/32.png) [@Quillbert1](https://discourse.processing.org/u/Quillbert1)
#### Post date: [September 10, 2018, 3:27am UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/2 "2018-09-10T03:27:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 10, 2018, 6:17am UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/3 "2018-09-10T06:17:10Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [September 10, 2018, 6:10pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/4 "2018-09-10T18:10:38Z")

</div>

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.

 ![30%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/229d518d20e4792b75307b3b246be6c67f17ee39.jpeg)

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.

 ![05%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d091b00075af19f0f9ddab0fdd7618c1381e1e6f.png)

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 10, 2018, 6:29pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/5 "2018-09-10T18:29:09Z")

</div>

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 🙂  
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.

---

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 11, 2018, 8:22pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/6 "2018-09-11T20:22:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 11, 2018, 8:23pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/7 "2018-09-11T20:23:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 11, 2018, 8:24pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/8 "2018-09-11T20:24:35Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Quillbert1](https://avatars.discourse-cdn.com/v4/letter/q/f475e1/32.png) [@Quillbert1](https://discourse.processing.org/u/Quillbert1)
#### Post date: [September 11, 2018, 11:08pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/9 "2018-09-11T23:08:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [September 12, 2018, 2:26am UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/10 "2018-09-12T02:26:08Z")

</div>

Hi @jae_notjane

Really great job. This would be a great idea to do as well in the [p5.js online web editor](https://editor.p5js.org/). So this is for the future and your work have just set the bar 🙂

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?

Kf

---

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 12, 2018, 2:06pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/11 "2018-09-12T14:06:46Z")

</div>

![17%20AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0fb2899cae8cf76f3585e27e5ca42599eac2b8f6.png)

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

---

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 12, 2018, 2:12pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/12 "2018-09-12T14:12:31Z")

</div>

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…

---

<div class="post-metadata">

### Author: ![Quillbert1](https://avatars.discourse-cdn.com/v4/letter/q/f475e1/32.png) [@Quillbert1](https://discourse.processing.org/u/Quillbert1)
#### Post date: [September 14, 2018, 12:02pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/13 "2018-09-14T12:02:27Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jae\_notjane](https://avatars.discourse-cdn.com/v4/letter/j/a88e4f/32.png) [@jae\_notjane](https://discourse.processing.org/u/jae_notjane)
#### Post date: [September 14, 2018, 5:27pm UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/14 "2018-09-14T17:27:18Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)
#### Post date: [September 24, 2018, 3:13am UTC](https://discourse.processing.org/t/contributed-tools-developed-over-the-summer-for-google-summer-of-code/3380/15 "2018-09-24T03:13:46Z")

</div>

> [@jae\_notjane](#):
>
> 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

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](https://app.sqldbm.com) 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.

> [@jae\_notjane](#):
>
> Do you think I should do the same for the second sketch?

Are you referring to this one?

![secsketch](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f24c4e5fa7c695ea9f8c43eb1be513efbd7b9f23.png)

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.

Kf
