Jan 9, 2012

paper.js with pressure + SVG generation

Yesterday, I read about getting a tablet pressure data with javascript using Wacom webtablet plugin.  I was just thinking if there were pressure function in paper.js, so I tried using them in combination.  The link below is a implementation for now.  The touch of drawing requires further tuning.

Also I added SVG data generation function which I'm working on it these days.  Please click the link "generate svg" to show a textarea.  Then copy the text and create a new file.

(It doesn't work with Internet Explorer on my environment. I'm sorry for that.)

Could you draw...?
Wacom says that webtablet plugin is installed at the same time in installation of recent wacom tablet drivers.  Why I said "says" is because I couldn't get it working at first.  If wacom's demo page also doesn't work , please try a different way to install.

Searching related articles, I realized that getting a tablet pressure data with javascript was a topic from almost 1 year ago.  Since I thought I couldn't keep up with Web technology, I had been keeping away from it.  But if I can implement such a thing easily with it, It would be a waste not to use it.

About SVG data generation function, TextItem, GradientColor and several minor svg attributes aren't supported yet.  According to the mailing list of paper.js, SVG output function is under planning.  Even if it is implemented, the function of mine will be useful for my study about SVG.
Generating the data that properly open with Illustrator or Inkscape was hard work for me.  I'll write about it another time.  For now, in Illustrator, there's a problem that the size of the symbol is not correct.

Jan 8, 2012

paper.js -> svg

Finally recently, I'm playing with HTML5 Canvas.
I thought there must be a drawing tool like Illustrator which created with HTML5.
But I couldn't find it for now.  So I decided to try creating it.

A svg data which is being edited with Inkscape in above image was generated from "Arcs.html" which is one of the examples included in paper.js download.

This one is from SpiralRaster.html.

It can be useful even if it only has a function that output a svg data.
I'll post the code when I can properly implement it.