Howdy, Stranger!
We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Categories
- All Categories 25.7K
- Announcements & Guidelines 13
- Common Questions 30
- Using Processing 22.1K
- Programming Questions 12.2K
- Questions about Code 6.4K
- How To... 4.2K
- Hello Processing 72
- GLSL / Shaders 292
- Library Questions 4K
- Hardware, Integration & Other Languages 2.7K
- Kinect 668
- Arduino 1K
- Raspberry PI 188
- Questions about Modes 2K
- Android Mode 1.3K
- JavaScript Mode 413
- Python Mode 205
- Questions about Tools 100
- Espanol 5
- Developing Processing 548
- Create & Announce Libraries 211
- Create & Announce Modes 19
- Create & Announce Tools 29
- Summer of Code 2018 93
- Rails Girls Summer of Code 2017 3
- Summer of Code 2017 49
- Summer of Code 2016 4
- Summer of Code 2015 40
- Summer of Code 2014 22
- p5.js 1.6K
- p5.js Programming Questions 947
- p5.js Library Questions 315
- p5.js Development Questions 31
- General 1.4K
- Events & Opportunities 288
- General Discussion 365
In this Discussion
- jeremydouglass April 2017
- littlebrain April 2017
Reproducing visualization inspired from open processing in a web app
I'm working to make a visualization but I'm not sure what type of library would be suitable for what I'm trying to do. For a little scope I like to make a viz along this https://www.openprocessing.org/sketch/402014 or something like an arc type https://www.openprocessing.org/sketch/144359
I'm not trying to use charts but just more on the art side of data viz. Any suggestions on what html or javascript library is going to work best? I've been checking online and all these names came up but I don't know which is the most suitable. I'm basically wanting to reproduce some of the visuals I've seen on open processing but I'm not sure which route to take canvas or svg and then which javascript library is suitable. What if I wrote a processing pde file would there be a way to integrate that on a web app?
Canvas HTML 5
SVG
SVG.js SVGjs
Javascript library
1.Raphael.js 2.Paper.js 3.Progress.js 4.Velocity.js 5.Snap.js
Answers
I would suggest using the Processing JavaScript mode -- p5.js.
You can install the mode right into the normal Processing IDE and then select "p5.js" from the modes dropdown in the upper-righthand side of the window.
Keep in mind that you can cut-paste the code from those two openprocessing sketches that you linked into Processing PDE in Java mode. Play with them and try changing things, then move on to creating a JavaScript version. If you are already familiar with Processing in Java mode then you can find detailed tips on how to transition a Java sketch into a JavaScript (p5.js) sketch here:
Also keep in mind that if you don't need an independent web app and just want your content on the web, you could simply post a sketch to openprocessing!
Is there some way of exporting this visualization as a svg?
Try using the SVG library to export as per this example:
https://forum.processing.org/two/discussion/16227/how-to-export-to-svg-using-library-processing-svg
https://github.com/processing/processing-docs/issues/406