P5.js-web-editor: Web Editor welcome experience

[daaain]

Nature of issue?

• New feature request

Feature enhancement details:

I found P5.js via a Mozilla blog post: https://blog.mozilla.org/blog/2019/01/03/moss-2018-year-in-review/

In which it's described as:

The Processing Foundation maintains p5.js, an open-source JavaScript framework that makes creating visual media with code on the web accessible to anyone, especially those without traditional computer science backgrounds. p5.js enables users to quickly prototype interactive applications, data visualizations, and narrative experiences, and share them easily on the web.

So I opened https://p5js.org/ and after reading the intro clicked on the link on the bottom to try the Web Editor.

What I was expecting is maybe some tutorial but definitely something a visual way of working, but what it ended up seeing is a minimal example and not much idea what to do:

So what I'm proposing is creating some sort of welcome / beginner experience, be it a modal window with a short video embedded, an interactive tutorial, or a (moving) visual library of examples, but please make it not be just a blank grey background 🙏

[hellonearthis]

There are videos out there but your right a quick walk through would be nice.
Maybe a mode that had a verbose tip text that followed the pointer to describe the buttons/areas.

I totally missed the power behind the > left of sketch.js above the line numbers.
I thought i was just some kind of graphical highlighter that had no function.
Maybe it should be a different colour and have better tip text.

[catarak]

@daaain i think this is a great idea! the web editor has mostly been used in conjunction with curricula/workshops/classes/etc. which has served this purpose. i made a video that walks through the basic features, and i know @shiffman has made a few one-off shorter videos that show off features of the editor as well.

if you have ideas/reference please add them here!

[LakshSingla]

I totally second this part. I also completely missed that arrow.

I totally missed the power behind the > left of sketch.js above the line numbers.
I thought i was just some kind of graphical highlighter that had no function.
Maybe it should be a different colour and have better tip text.

[shiffman]

I agree with all of the thoughts above! A model for this might be the Processing "Getting Started" tool created by @jaewhyun as part of last year's Google Summer of Code. For more, you can read her medium post Making the Processing Development Environment Better for Beginners.

I think a web editor "welcome experience" would be an excellent project for a future GSoC, fellowship, etc. and would love to help however I can!

[LakshSingla]

That seems like a great idea. I would be interested in undertaking such a project. Just a point of concern though: would the scope of this "welcome experience" be limited to the online editor only or would it also introduce the basic concepts of p5 ?

[catarak]

i think the focus would be the online editor, though it would be impossible to leave the basics of p5.js out. the current landing page for explaining the basic concepts of p5.js is hello.p5js.org

[hellonearthis]

I like the "Making the Processing Development Environment Better for Beginners" article.
The welcome to processing model would make a very good interactive guide.
_I also think the reference tool is also very nicely formatted._

The hello.p5 would be cool as a p5 editor interactive video.
It would take less work to build than having something integrated into the p5 editor.

Having better tooltips would be the easiest thing to do in the short term, I going to try and have a go at that. But still learning GIThub and working out the process of working on an existing repo.

[catarak]

@hellonearthis let me know if you run into issues, and it's okay if the PR(s) are small! one fixed tooltip is better than no fixed tooltips 😸