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.

paper.js with pressure + SVG generation example

(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.

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.

connect_centers_nearest_modified 2

Here's a little tutorial about the script that I uploaded yesterday.
The source objects are the brush objects in Fig.1.  The red one is the foreground (last drawn).  And the distance between the farthest removed objects is about 88pt.
Select all the brush objects, then run the script.
A prompt dialog appears.  Input 80 and hit OK.
Fig.2 is the result.  Paths are separated because the distance between the nearest object is longer than the specified value (80pt).

connect_centers_nearest_modified

I thought about how to create the objects to connect these centers by the script that I wrote previous time. And remembered a software Voronoi Stippler that I used a few years ago. (For some reason, it seems that it is unavailable for download now.)

I made the objects from an image with this tool, then applied the connect_centers_nearest.js script to them ... and got an error due to the upper limit of the number of points that setEntirePath function allows.

So I rewrote a part of the script as follows. Then I ran it again.

//path.setEntirePath(points);
for(i=0; i<points.length; i++){
with(path.pathPoints.add()){
anchor = points[i];
rightDirection = anchor;
leftDirection = anchor;
}
}

It seemed to be interesting. But it looked also like an ugly entangled string. So I implemented the idea of the maximum distance of the line to the script. If the distance between the points is longer than the limit, the script finishes the path and begins a new path from the next point.

This seems to be good? I posted this script at the end of this article.

In the archive, the script with .js extention is for windows. And .jsx is for Mac. When you run this script, you are asked the maximum distance in point. (Actually, it is the maximum squared distance. This is not appropriate. But I leave it as it is for now.)

Talking about the code, I put 0 instead of the coordinate [x, y], at the point that separates the paths.

download: aics_script_connect_centers_nearest_modified2.zip

2011.06.12 -- fixes length_limit to be squared 

connect centers in various order

These scripts create a path that traces the center of the selected objects. The path starts from the center of the foreground object. And the order of the connection vary from script to script. If the number of points is greater than two, the path is closed.

I thought the "farthest" is unexpectedly interesting.

download: b_aics_script_connect_centers.zip

Tested with Adobe Illustrator CS5 15.0.1 / Windows 7 Pro 64bit

This is a beta software. Please use it carefully, at your own risk.

And

I bought macbook pro recently. Though I don't have Illustrator works on it yet. I must be familiar with Xcode first.

angleScaler Tool Plugin for CS5 Windows

In Adobe Illustrator, a transform like above is a boring task. So I made a plug-in.

You can scale selected paths only toward the dragging direction with this plugin tool.

If you want to shrink the paths, keep pressing the shift-key while dragging.

The starting point for scaling is the location where the mouse button was pressed.

download: ai_plugin_anglescaler_cs5_01b.zip

Tested with Adobe Illustrator CS5 15.0.1 / Windows 7 Pro 64bit

This is a beta software. Please use it carefully, at your own risk.

For more information, please read the included readme file.

Metaball Plug-in 0.31b for CS

I ported Metaball LiveEffect plug-in to Ai CS. The modification of the code was nothing but the About menu part, and some suite version strings.

Tested with Adobe Illustrator CS 11.0.1 / Windows XP SP3.

This is a beta software. Please use it carefully, at your own risk.

For more information, please read the included readme file.

download: aics_plugin_effect_metaball_031b_cs.zip