DEV Community

Processing.js

Johannes Lichtenberger on September 04, 2019

Hi all,

would you recommend using Processing.js for interactive visualizations in the web? I'm not sure if it's really maintained... however a few years ago I wrote some code in Java and embedded the processing core library plus a few more in a Swing-GUI. So maybe, I could reuse some parts.

kind regards
Johannes

Collapse
 
blindfish3 profile image
Ben Calder

Though in theory it can still be used to convert a Processing sketch to JS; ProcessingJS is no longer maintained. Also, since it sounds like you didn't author directly in Processing, you may find it less straightforward to convert your work to ProcessingJS.

p5js is now the JS library officially supported by the Processing foundation. From what I remember they tried to match the Processing API fairly closely; so in theory converting your Processing based code should be easy; but would involve manually re-writing it in JS. If you need help the user forum was always pretty friendly; active and helpful (certainly when I was contributing to it :D )...

I personally think there are better JS-based libraries for data-visualisation. Processing was only ever a framework on which to start building visualisations and I found PixiJS a close-enough match that I prefer that for web-based graphic work: when I last compared it with p5js (admittedly a while ago) it had far better performance.

But looking at the video you posted I suspect D3 would be a natural choice. p5js may have an easier learning curve; but my understanding is that D3 provides pretty much all the tooling you need for managing your data; whilst in p5 you would probably have to write a lot of that from scratch.

Collapse
 
blindfish3 profile image
Ben Calder

And actually you can use D3 with p5 or with other graphics libraries like pixi...

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

Oh thanks for the long reply. The thing is I've never really done front-end stuff, so first learning a bit JavaScript or TypeScript would be good I guess. Preferably transpiling Kotlin ;)

Collapse
 
blindfish3 profile image
Ben Calder

Well I went from ActionScript and basic JS to Processing/Java and back to Vanilla JS; but now use TypeScript at work. Swapping programming languages is good for you :D

Coming from Java/Kotlin I guess TypeScript would be easier for you; though once you understand the freedom you get using VanillaJS you won't want to go back :P
And having a fun project to work on is a good place to start learning.

Thread Thread
 
johanneslichtenberger profile image
Johannes Lichtenberger

Definitely, and now I can use my asynchronous, non-blocking REST API:

medium.com/hackernoon/asynchronous...

The coolest thing however would be to find some users, too... or even contributors ;-)

I'm also not sure if a web front-end might be more useful as the next bigger feature to interact with SirixDB or if horizontal scaling would be on the top-list. Or working on the query optimizer... :-D damn, too much work.

Collapse
 
deciduously profile image
Ben Lovy

I'd imagine most use cases would be instead met by p5, unless you have a specific reason not to use this.

Collapse
 
ben profile image
Ben Halpern

P5 seems to be under the Processing foundation and is well-liked and popular.

GitHub logo processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

Build Status npm version

p5.js

Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.

Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

p5.js is a new interpretation, not an emulation or port, and it is in active development. An official editing environment is coming soon, as well as many more features!

If you already know the basics of JavaScript or Processing, the p5.js overview wiki page is a good place to start.

If you have found a bug in the p5.js library, you…

Seems to be the safer choice. I'm not 100% clear on where processing.js fits in, but p5 seems like the right choice these days.

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

Didn't even notice that it's the official processing JavaScript library in contrary to processing.js. Hm, I think I read that it's also easier to understand than d3 for instance.

Thread Thread
 
ben profile image
Ben Halpern

Yeah, I haven't used it but it has a great reputation in this regard.

Thread Thread
 
johanneslichtenberger profile image
Johannes Lichtenberger

Okay, thank you :-) guess I'll make a 20 years plan for what I want to implement ;)

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

I would love to port my visualizations for comparing revisions of tree-structured documents as for instancd XML and JSON:

youtu.be/l9CXXBkl5vI

Collapse
 
niorad profile image
Antonio Radovcic

D3 is the de-facto standard library for those things. It‘s similar to jQuery learning-wise. I think P5 renders to canvas, while with D3 you also can use DOM/SVG.

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

Just bought a book about D3 :-)

Collapse
 
johanneslichtenberger profile image
Johannes Lichtenberger

So you recommend d3 instead of P5?

Collapse
 
niorad profile image
Antonio Radovcic

You can do pretty great vis with P5, but D3 is closer to the native web, and there are magnitudes more material on datavis with it (examples etc).

Processing has its strengths with generative art and experimental vis. I did lots of it in uni. I‘d try both and see what sticks if you’re not sure. But if you want to do clean and readable infovis on the web, and don’t have a strong preference, use D3. At the very least it’s a good thing to have on your CV.

Thread Thread
 
johanneslichtenberger profile image
Johannes Lichtenberger

I want to port this bssically:

m.youtube.com/watch?v=l9CXXBkl5vI&...

But now also for binary JSON data stored in SirixDB... thus comparing revisions of tree-structured data.