Drawscript - turn Illustrator shapes into code

[Tom_Krcha]

I've just launched a little extension for Illustrator I've been working on called Drawscript - http://drawscri.pt

It converts Illustrator shapes into code (Obj-C, C++, JavaScript, Processing, ActionScript 3, JSON, Bezier array).

It's great for skinning UIs, creating vector assets for gaming and learning/teaching vector graphics programming.

If you have any comments, found bugs, etc. Let me know here or on my Twitter, Facebook, Google+.

Thanks!

Tom

[Mylenium]

Any plans on adding support for After Effects keyframe and mask data or at least a raw export that outputs the positions as 3 component arrays [X,Y,Z]? This would make a nice workflow with that program... Gonna give this a whirl later today or on the weekend....

Mylenium

[Tom_Krcha]

Good point, I need to look into that. Thanks for the feedback!

Can you send me more info on how exactly would you like to structure that data?

[W_J_T]

Looks really nice. There are various other methods floating around for some of the individual options, but nice idea to have it all in one output process from within Illustrator. Makes for a much cleaner approach, good work.

I didn't find what versions of Illustrator this works with? Is this only for CS6? It failed to install on CS5.5 for me.

Is this another case of:

if (installedSoftware < CS6 || installedSoftware != Cloud) {
    abandonWare = true;
}

If so, then it seems quite odd since its just accessing and gathering path data why couldn't it then work in other versions other than CS6? Or am I mistaken that it does indeed work in other versions?

[Tom_Krcha]

Hi W_J_T,

it's currently in Beta and first drop, I am looking into this to see if it could potentially support that case as well. It requires more testing and I think it might be possible. Currently it works on CS6 only.

[W_J_T]

Ok, sounds good, thanks for the response. Looking forward to further releases and seeing it for other installed versions of Illustrator. * If, you can get doing so past the powers to be that is. But technically it seems like it should be doable, one would think. Keep up the good work Tom, thanks again.

[Mylenium]

After Effects only understands basic JavaScript arrays as coordinates. It doesn't have draw primitives or any of that, so no fancies required. Just lines and lines of [X,Y,Z] will do. Also perhaps a simple CSV export? 3D programs like Cinema 4D can use that for shaping splines and polygons...

Mylenium

[jiggy1965]

Tried it on a few old illustrator files of mine and noticed that 'Javacript Canvas' often seems to have problems.

• Selected all objects: no output in Javascript Canvas window
• Selected one brush stroke: no output. Selected another brush stroke made with the same brush: output
• Selected a region: no output. Selected another region of strokes/objects: output
• Shapes seem to work fine so I converted all brush strokes to fills: no output or it makes illustrator freeze with the 'rainbow' cursor
• Drew 50 standard shapes like rectangles, circles, stars, selected them all: output
• Drew 50 brush strokes all made with the same brush: no output
• Converted those 50 brush strokes to fills as it seemed to have less problems with shapes: still no output

Other languages seem to have less problems, though sometimes it takes a while looking at the rainbow cursor. Standard shapes work the best and fastest. More complicated objects like brushes seem to give them more problems. For other languages it takes a while for them to give output. Javascript Canvas often don't give output on brush strokes at all. Also not when converting them to fills.

All things which are still worked on when the final version comes out?

[nuwud1]

Hi,

Will this support Illustrator CS6 masks, too? If so, this could prove very useful over the long run.

Thanks,

Patrick

[Tom_Krcha]

I need to look at it, but as of now, try to simplify structures as much as possible, because remember in order to support all the languages there are definitely some trade offs that you have to take.

[W_J_T]

Any updates concerning CS5/etc? Is the only thing keeping this working for CS5 the "HostList Version" in the "manifest.xml" ?

[Tom_Krcha]

@W_J_T: I looked into that solution, but there is more to make it working on older versions. At least complete UI rewrite and other adjustments regarding missing APIs that were introduced in CS6.

[ourvoyage]

Will this work with Illustrator CS4/CS5?

[carrzkiss]

I am unable to get generate Javascript code.
Is there an issue with the generator and javascript?

[Tom_Krcha]

@carrzkiss yes, there was an issue with Javascript, make sure you try the latest build. Thanks!

[kjrst]

Hi Tom,

I am seeing an issue where my final point (closing the shape) is not a BezierCurveTo where I would expect it (it gets rendered as a straight anchor point instead of a curved one -- bottom image).

I was able to get around this by making my curve points in the middle of the set, rather than the opening/closing point.

I'm looking forward to seeing this tool grow! Thanks for making it.

[Tom_Krcha]

Hi, I am not able to reproduce this,

I did a quick test and it's fine, would you mind sending me your AI file?

[kjrst]

I re-downloaded and installed Drawscript, and now I can't reproduce the issue either. So it's cool!

[niki_marinov]

Hi All,

I'm drawing a rectangular house with rectangular windows.

DrawScript generated this JavaScript code for the house:

ctx.fillStyle="rgb(139,67,94)";

ctx.strokeStyle="rgb(0,0,0)";

ctx.lineWidth=4;

ctx.fillRect(79,255,458,342);

ctx.strokeRect(79,255,458,342);

ctx.fill();

ctx.stroke();

And similar code for the windows. But everything becomes black. Solution was to delete the ctx.fill() command. It is not needed. I think it is a bug.

best regards

[DarrenRichards]

Hey Tom,

I am not using this to it's full potential admittedly, but I am finding it VERY useful.

Drawing in iOS/Core Graphics is new to me but using Illustrator isn't, so I am  using your extension to translate skills between between one 'language' and the other.

Its proven to be a quick way to learn how to use core graphics drawing API - using live example code 🙂

Thank you !

Darren.

[Tom_Krcha]

Thanks Darren, that's a great use case! Glad you like it.

[Tom_Krcha]

Btw, I have posted several tutorials on my blog on how to begin with Drawscript together with different environments:

• Illustrator to iOS, CoreGraphics and Xcode
• Illustrator to C++/OpenFrameworks
• Illustrator to Javascript/HTML5 Canvas
• Illustrator to CreateJS
• Illustrator to ActionScript 3
• Using gradients

[joost_boerhout]

Tom,  are you still actively developing this tool?  It seems awfully quiet on the update/release front.  I wouldn't mind purchasing this tool if it had regular updates...  hint hint.

[melmax1978]

hi

when I export from Illustrator to json format the coordinate x and y lose decimals, is it a bug ?

if no ,  are there  another properties to setup when export ?

thanks

[linguoIsDead]

I LOVE this extension.

Is there any way to change the origin tho? Even when I adjust the origin with the ruler, the numbers come out relative the entire file. I have to export the paths to another file to get them to start at 0,0.