search

processing / processing-website

Repository for the processing.org website
https://processing.org
GNU General Public License v2.0
65 stars 95 forks source link

Make interactive live sketch for Shape examples #314

Open SableRaf opened 2 years ago

SableRaf commented 2 years ago

The following examples still need to be ported to JavaScript:

However, since there is currently no support for SVGs in p5.js this has to be done another way.

I made a brief attempt at porting the Scale Shape example using p5.js-svg but it was too slow for real-time interaction. You might need to use a different library like paper.js or snap.svg

The following examples are not animated nor interactive so porting them is not strictly necessary:

For information on how to make live sketches for examples, please check the README on examples

trikaphundo commented 2 years ago

Is it allowed to use external libraries for loading SVG files in P5js? I remember you asked this in #235, but @REAS did not give an answer to that.

Sorry if this sounds redundant or stupid, I just want to make sure it is permitted before spending time on this ^^'.

SableRaf commented 2 years ago

I thought about it. We're just trying to emulate the behavior of Processing in a web page so I can't see why we would have to use p5.js if another lib gets the job done. I would say just do it 😉

trikaphundo commented 2 years ago

I thought about it. We're just trying to emulate the behavior of Processing in a web page so I can't see why we would have to use p5.js if another lib gets the job done. I would say just do it wink

Sounds reasonable, can't argue that ^^', but wanted some confirmation.

I made a brief attempt at porting the Scale Shape example using p5.js-svg but it was too slow for real-time interaction. You might need to use a different library like paper.js or snap.svg

The slowness may be due to this: every draw() call inserts nodes in the DOM. Have you tried the "workaround" with your tests? Here is a recent blog post explaining the issue (see the penultimate section).

I still think the best option for working with SVGs is p5.js-svg, as it is (or seems to be) the least cumbersome to use and include in a project (no need for Nodejs dependencies). Thus, if the workaround fixes the slowness, I would stick to p5.js-svg. Do you agree?

trikaphundo commented 2 years ago

Working examples

Hello, after trying out some of the libraries, I finally chose Paperjs. I have made a repository with working examples for both tasks: "scale shape" and "shape vertices". These examples a very minimal. Instructions on how to get them running are explained there.

Why Paperjs?

The reasons why I decided to choose Paperjs, which I think is the best option, are partially explained in my repo's readme file. But I will be a slightly more precise here

  1. The "scale shape" example is so easy any library will just do, because we do not need to get into the details of the SVG file, but rather render it as an SVG and transform it.
  2. The "shape vertices", though, requires having access to the details/contents of the SVG: paths, path instructions and path segments. That's because the "vertices" are actually anchor points and handle points of paths. Paperjs allows an easy way of doing that.
  3. Paperjs renders things on a canvas, so we can make P5js and Paperjs share the very same canvas html element, which comes in very handy with the "shape vertices" example.
  4. Easy to use, full-featured, well documented and flexible syntax.

Will I issue a PR to processing-website repo?

No. The website is built with nodejs, reactjs and some other tools I have very little idea of. Therefore, either somebody volunteers to give me a hand with it, or that somebody makes the changes to the website by him/herself.

Relation to issue #310

I think it is worth to mention that if you run the example "scale shape" of my repository, the problem in issue #310 does not happen. But that is another topic.

SableRaf commented 2 years ago

Thanks @trikaphundo that looks great!

Asking @runemadsen: what would be the best way to allow examples to import other libraries than p5.js if needed?

How about adding a line to the .json?

Assuming we add the library files to the example folder, it would look something like this:

{
  "name": "",
  "title": "",
  "author": "",
  "description": "",
  "featured": ["", "", ""]
  "import": ["libs/paper-core.min.js"]
}

Ideally it could also support importing via a CDN, like this: 

"import": ["https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-core.js"]
runemadsen commented 2 years ago

Since we're already loading p5 from a CDN I would suggest the second option. It shouldn't be too hard to add an array of imports to inject onto the page in the same way that we do now.