Exporting Processing canvas to SVG file?

[blackant]

Hey everyone,

I've got a fairly simple, non-animated visualization tool that I'm
prototyping for a client and one of their wishlist items is for an SVG
export of the current rendering of the visualization (ie. for further
Illustrator post-production). I've been trying to figure out how to
make this happen with SVGKit, but I haven't quite got my head around
that library.

Is this something that is achievable without too much pain?

Thanks in advance,
Jason

[Cary Hull]

Are you using processing.js? If not, how is your question relevant to this list?
You say you are using SVGkit for this. Are you asking how to get the resulting SVG fragments out of the dom?

Also maybe take a look at raphealjs:
http://raphaeljs.com/

--
01100011 01100001 01110010 01111001

[Cary Hull]

Exporting the canvas state would not be too fun, but it would be doable.
There are canvas api calls that will let you grab out the value of each pixel in the canvas,
the result of which can be uploaded somewhere. There are various bitmap to svg converters out there,
though I doubt there are any in js.

Anywho, it doesn't sound like processing.js is the best solution here. Take a look at raphealjs.

[blackant]

Yes I'm using processing.js. Sorry for not explicitly mentioning that
- I sort of assumed that was a given here.

Thanks for the Raphaël pointer - I'll check that out as well.

Jason

[Cary Hull]

On Tue, Jun 30, 2009 at 6:53 PM, blackant <ja...@blackantmedia.com> wrote:

Yes I'm using processing.js. Sorry for not explicitly mentioning that
- I sort of assumed that was a given here.

It was explicit in the subject (my bad).
It looks like you can use processing.js to get a multidimensional array of pixel data:

p.loadPixels()
p.pixels
 

[Cary Hull]

Also interesting is canvas.toDataUrl in HTML5:
http://cow.neondragon.net/index.php/681-Canvas-Todataurl
https://developer.mozilla.org/En/Code_snippets/Canvas (extension code)

[blackant]

Thanks for the further pointers, Cary. Raphaël is also looking
promising for my needs (I even had that library bookmarked and had
forgotten about it) and one of their examples is fairly close to what
I'm trying to accomplish.

Jason


On Jun 30, 11:00 pm, Cary Hull <cary.h...@gmail.com> wrote:
> Also interesting is canvas.toDataUrl in HTML5:http://cow.neondragon.net/index.php/681-Canvas-Todataurlhttps://developer.mozilla.org/En/Code_snippets/Canvas(extension code)

[Felipe López Toledo]

Hi guys,

maybe you could find useful some of these:
http://sixrevisions.com/javascript/10-impressive-javascript-animation-frameworks/

also I have been playing with cake-js:
http://glimr.rubyforge.org/cake/canvas.html#KeyboardTest

felipe

[F1LT3R]

You could record Processing.js paths to SVG paths. That's actually...
a REALLY cool idea. Hmm.. might do some experiments on this.

On Jul 1, 3:08 pm, Felipe López Toledo <zer.subz...@gmail.com> wrote:
> Hi guys,
>

> maybe you could find useful some of these:http://sixrevisions.com/javascript/10-impressive-javascript-animation...

>
> also I have been playing with cake-js:http://glimr.rubyforge.org/cake/canvas.html#KeyboardTest
>
> felipe
>
> On Wed, Jul 1, 2009 at 8:34 AM, blackant <ja...@blackantmedia.com> wrote:
>
> > Thanks for the further pointers, Cary.  Raphaël is also looking
> > promising for my needs (I even had that library bookmarked and had
> > forgotten about it) and one of their examples is fairly close to what
> > I'm trying to accomplish.
>
> > Jason
>
> > On Jun 30, 11:00 pm, Cary Hull <cary.h...@gmail.com> wrote:
> > > Also interesting is canvas.toDataUrl in HTML5:

> >http://cow.neondragon.net/index.php/681-Canvas-Todataurlhttps://devel...<http://cow.neondragon.net/index.php/681-Canvas-Todataurlhttps://devel...>code)

[MySchizoBuddy]

Another option is ASCIISVG. It allows 2D Graphs only and the output is
SVG
http://mathcs.chapman.edu/~jipsen/math/index.php/Main/WikiSandbox.html

[Alexandre Villares]

Hi,

Sorry to resurrect this thread. I'm a Processing user and I'm a bit lost with JS.

Is there a newbie friendly way of exporting PDF or SVG from a Processing.js sketch?

regards,

Alexandre

[Lee Brunjes]

Howdy,

This isn't something that processing.js does natively.

There are several javascript libarires that should be able to do this but its going to take some javascript coding to get it all working like you want

Exporting to a an image is reasonably trivial:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Example.3A_Getting_the_data-url_for_a_canvas

Your best options are going to be the various java script libraries that exist to export canvas to pdf or svg. Some quick goggling brings up:

https://code.google.com/p/canvas-svg/

The pdf stuff seems to be less enjoyable. But, it seems possible to to use:

http://parall.ax/products/jspdf

-Lee

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at http://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/groups/opt_out.