Skip navigation
Currently Being Moderated

Drawscript - turn Illustrator shapes into code

Mar 21, 2013 1:17 PM

Tags: #script #javascript #c++ #code #json #skinning #programming #bezier #processing #vector_art #drawscript #obj-c

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

 

star.png

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

 
Replies
  • Currently Being Moderated
    Mar 22, 2013 1:45 AM   in reply to Tom.Krcha

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 1:57 PM   in reply to Tom.Krcha

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 22, 2013 3:40 PM   in reply to Tom.Krcha

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 23, 2013 12:32 AM   in reply to Tom.Krcha

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 26, 2013 5:41 AM   in reply to Tom.Krcha

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 10:56 AM   in reply to Tom.Krcha

    Hi,

     

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

     

    Thanks,

    Patrick

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 29, 2013 9:09 PM   in reply to Tom.Krcha

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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2013 3:28 AM   in reply to Tom.Krcha

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 10, 2013 10:12 AM   in reply to Tom.Krcha

    Will this work with Illustrator CS4/CS5?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2013 10:28 AM   in reply to Tom.Krcha

    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.

     

    beziers.jpg

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2013 9:37 AM   in reply to Tom.Krcha

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2013 3:46 PM   in reply to Tom.Krcha

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 1:44 PM   in reply to kjrst

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2013 7:08 AM   in reply to Tom.Krcha

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 13, 2013 2:06 PM   in reply to Tom.Krcha

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 14, 2013 1:51 PM   in reply to Tom.Krcha

    This is awesome! Any chance of a port to the Corona sdk? In the past they have focused on bitmap but have recently released Graphics.2.0 which now includes newPolygon with fill options plus stroke and shape functions. Take a look at this about newPolygon.

     

    http://docs.coronalabs.com/tachyon/api/library/display/newPolygon.html

     

    I would be most willing to pay for a Corona ready version of Drawscript.

     

    Keep up the good work.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 25, 2013 10:02 AM   in reply to Tom.Krcha

    Has anyone written a transformation in javascript to convert Drawscript's JSON into EaselJS's graphics code?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 4, 2013 1:37 PM   in reply to Tom.Krcha

    The processing code is much cleaner then the bezier editor tool inside processing. but I have fond it better to use C++ OpenFrameworks Shape becasue that takes shapes in to account.  The processing mode creates lines which are unfillable as objects.  C++ OpenFrameworks Shapes creates a shape using ofBeginShape, ofEndShape, ofVertex, which just need to be converted to beginShape, endShape, and vertex

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 30, 2013 6:51 PM   in reply to Tom.Krcha

    As adrock42 says, the Processing conversion should be using the beginShape, endShape and vertex format rather than just lines. Lines won't accept a fill color and aren't grouped into objects.

    e.g.

     

    fill(247,170,243,80);
    beginShape();
    vertex(84,317);
    vertex(105,290);
    vertex(90,269);
    vertex(110,306);
    vertex(97,261);
    vertex(155,275);
    vertex(84,317);
    endShape();
     
    |
    Mark as:
  • Currently Being Moderated
    Dec 6, 2013 4:38 PM   in reply to Tom.Krcha

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points