tag:blogger.com,1999:blog-197274412024-03-17T20:03:49.269-07:00Scripting Illustrator<a href="http://www.wundes.com">John Wundes</a> blathers about the trials and tribulations of developing JavaScript for Adobe Illustrator. Read all about it, or peruse through his script archive <a href="http://www.wundes.com/js4ai/">here</a>.Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.comBlogger74125tag:blogger.com,1999:blog-19727441.post-16353591112467048762022-12-01T17:49:00.012-08:002022-12-01T20:26:11.874-08:00On the speed of change. <p>Hi all, I haven't posted in a while, as I've been focused in other things, but I had an experience I thought needed sharing. Please indulge me, I promise, there is a nice script at the end of the story. :) </p><p>A couple nights ago, I was working on an illustration, and wanted to 'explode' all the objects, such that they were spaced out from each other instead of touching, like this: </p><p><br /></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmki1m70ZYcZySLFLcIni9FZtdMSk6dzmgj69igiGonNRe_kYTjoZq5nbwUArmcKMguD0-5cTmdJ7DQic9RBgc-gHQQky9n3wC43jqf2DfAYJbMj11uZKlF2QaASpDSTt9hlsXycAHuRnWrOH_UVn0_OmXCsS1dOoJsQV3r7g3b9G0ZPyGFw/s296/explode.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="171" data-original-width="296" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmki1m70ZYcZySLFLcIni9FZtdMSk6dzmgj69igiGonNRe_kYTjoZq5nbwUArmcKMguD0-5cTmdJ7DQic9RBgc-gHQQky9n3wC43jqf2DfAYJbMj11uZKlF2QaASpDSTt9hlsXycAHuRnWrOH_UVn0_OmXCsS1dOoJsQV3r7g3b9G0ZPyGFw/s1600/explode.png" width="296" /></a></div>I fired up my editor and started coding, and quickly realized, it has been so long, I've forgotten most of the Adobe scripting API. I looked at a few of my old examples, and re-looked up a quick script for creating vectors so I could calculate distances, and about 20 or so minutes in, realized how fiddly js4ai can be, and this was more effort than I wanted to spend right now on this, and that would have likely been the end of that.<p></p><p></p><p>...until today, when a friend at work posted a link to <a href="http://chat.openai.com">chat.openai.com</a>, saying "Check this out, it's cool."</p><p>"Cool" might have been the understatement of the year. The site, exposes a conversational AI agent that can dialog. It was like talking to c3p0, but for real. So, I ran it through the gauntlet. </p><p><br /></p><p>It intelligently refused to predict the stock market.<br /></p><p>It gave a logical response about the nature of consciousness.</p><p>It gave me a nice haiku about the nature of consciousness.</p><p>So I gave it some coding questions. I asked it to give me a regex that could parse a url. It did so, along with a nice explanation of what it was doing. </p><p>... ok well this information is well known, google can do that. So I thought, let's give it something harder.</p><p><br /></p><p>Here's where the magic happens. I entered into the prompt, something like: </p><p></p><blockquote>"Write me a javascript for Adobe Illustrator that moves each element in the selection 30 percent away from the selections center"</blockquote><br />Four seconds later, it poops out the following script, and it WORKS!<p></p>
<pre id="htmlViewer" style="color:rgb(139, 135, 146); font-weight:400;background-color:rgb(25, 23, 28);background:rgb(25, 23, 28);display:block;padding: .5em;">
<span style="color:rgb(149, 90, 231); font-weight:400;">if</span> (app.documents.length > <span style="color:rgb(170, 87, 60); font-weight:400;">0</span>) {
<span style="color:rgb(126, 120, 135); font-weight:400;">// Get the current document and selection</span>
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> doc = app.activeDocument;
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> sel = doc.selection;
<span style="color:rgb(126, 120, 135); font-weight:400;">// Calculate the center of the selection</span>
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> xCenter = <span style="color:rgb(170, 87, 60); font-weight:400;">0</span>;
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> yCenter = <span style="color:rgb(170, 87, 60); font-weight:400;">0</span>;
<span style="color:rgb(149, 90, 231); font-weight:400;">for</span> (<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> i = <span style="color:rgb(170, 87, 60); font-weight:400;">0</span>; i < sel.length; i++) {
xCenter += sel[i].position[<span style="color:rgb(170, 87, 60); font-weight:400;">0</span>];
yCenter += sel[i].position[<span style="color:rgb(170, 87, 60); font-weight:400;">1</span>];
}
xCenter /= sel.length;
yCenter /= sel.length;
<span style="color:rgb(126, 120, 135); font-weight:400;">// Move each selected object by 30% of its current distance from the center of the selection</span>
<span style="color:rgb(149, 90, 231); font-weight:400;">for</span> (<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> i = <span style="color:rgb(170, 87, 60); font-weight:400;">0</span>; i < sel.length; i++) {
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> xDist = sel[i].position[<span style="color:rgb(170, 87, 60); font-weight:400;">0</span>] - xCenter;
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> yDist = sel[i].position[<span style="color:rgb(170, 87, 60); font-weight:400;">1</span>] - yCenter;
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> dist = <span style="color:rgb(170, 87, 60); font-weight:400;">Math</span>.sqrt(xDist * xDist + yDist * yDist);
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> xMove = xDist * <span style="color:rgb(170, 87, 60); font-weight:400;">0.3</span>;
<span style="color:rgb(149, 90, 231); font-weight:400;">var</span> yMove = yDist * <span style="color:rgb(170, 87, 60); font-weight:400;">0.3</span>;
sel[i].position = [sel[i].position[<span style="color:rgb(170, 87, 60); font-weight:400;">0</span>] + xMove, sel[i].position[<span style="color:rgb(170, 87, 60); font-weight:400;">1</span>] + yMove];
}
}</pre>
<div><br /></div><p>Please appreciate what this is doing. Based on a text description, an ai, in real time is writing a script using a proprietary API, and it added code comments too!!!</p><p>OMG. @#JNK$U)(@# :mind-blown: JFC <br /><br />Anyway. If you're a designer that wants a script, I am now obsolete. Sign up for an account with openai, and have fun! The sky is the limit. Link in the comments if you create anything cool! <br /><br /></p><pre></pre>
<p></p>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com1tag:blogger.com,1999:blog-19727441.post-2671081879547538692014-02-26T20:48:00.002-08:002014-03-19T21:10:46.993-07:00Select Text By Size<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://wundes.com/JS4AI/images/selectTextBySize.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://wundes.com/JS4AI/images/selectTextBySize.gif" /></a></div>
<br />
Hi All,<br />
<br />
I was just asked by user Seth if it was possible to write a script that would select text by a given size in Adobe Illustrator.<br />
So I now present to you, my newly added script "<a href="http://wundes.com/JS4AI/#selectTextBySize.jsx">selectTextBySize</a>." Honestly, I'm not sure why I didn't write this years ago... I would assume that I didn't because someone else had already written something similar. In any case, now you have my version...<br />
<br />
This simple script just scours the current open document and selects all text of a given pixel size.<br />
The default behavior of the script is to unlock text and layers if the correct sized text is locked or hidden.<br />
This behavior can be changed by swapping the variables at the top of the script.<br />
<br />
Hope you find this useful.<br />
<br />
Update 3/19/14:<br />
Just added range selection so you can grab text between, for example, 5px and 25px, or whatever...<br />
<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com4tag:blogger.com,1999:blog-19727441.post-41220922339278510702012-12-20T21:27:00.002-08:002012-12-20T21:27:45.972-08:00Hey All,<br />
<br />
I just got a message on <a href="http://wundes.com/">wundes.com</a> from user Vaughn, who was having problems getting <a href="http://www.wundes.com/JS4AI/#copyToObject.js">copyToObject</a> working in CS6. He didn't leave an email, so I'm responding here. I've tested the script in CS6 on PC, and it seems to be working fine. Vaughn, if you read this, please send me the problematic file so I can troubleshoot further. Otherwise, is anyone else having CS6 script issues?<br />
<br />
Also, got a neat request from user <a href="http://kreviii.com/">Blair</a>, who wanted a script to do multiple offsets like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-XYvN23yjtEY/UNPwtHLOdEI/AAAAAAAABsQ/OhsYB8asu6c/s1600/multiOffset.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-XYvN23yjtEY/UNPwtHLOdEI/AAAAAAAABsQ/OhsYB8asu6c/s1600/multiOffset.png" /></a></div>
<br />
It's a great idea for an action, but sadly when you create an action, and select "Path>Offset Path..." from the Object menu, when you run the action, Illustrator stupidly keeps the source object selected, so multiple runs would create extra useless geometry. <br />
<br />
I goofed around with the actions pallet, and discovered that when creating your action, if you use the actions fly-out to select "Insert Menu Item", and type in "Offset Path", you'll get a slightly different version of Offset Path with the expected behavior of only having the offset geometry selected, so the action can be run again immediately.<br />
<br />
While recording your action, do this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-GMw6ksuGqu4/UNPuInIUXAI/AAAAAAAABsA/qk8V7wLYrhs/s1600/insertMenuItem.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="219" src="http://3.bp.blogspot.com/-GMw6ksuGqu4/UNPuInIUXAI/AAAAAAAABsA/qk8V7wLYrhs/s320/insertMenuItem.png" width="320" /></a></div>
<br />
When you run your new action, the "Offset" dialog cannot be suppressed but this can be made negligible by hitting return/enter to close. If you find that you often need to do lots of custom multi-offsets this might be a good workflow.<br />
<br />
<geek mode="mode"></geek><br />
If you just want the same type of multiple offset for many objects, you'd be better served manually creating several offset stroke/fill combos in the appearance pallet, and saving it as a style. (which could be expanded later if you needed the geometry.) If this sounds confusing, Google "create custom styles in illustrator". It's one of Illustrator's killer features.<br />
<br />
<br />
Thanks for the inspiration, and happy illustrating.<br />
<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-33522645980197686802012-08-08T21:02:00.001-07:002012-08-08T21:02:22.551-07:00Update to Vary HuesMinor update. <a href="http://www.wundes.com/JS4AI/#vary_hues.js" target="_blank">Vary Hues</a> will now create color variations on compound objects, and on objects in groups. Soon, I'll add some controls to give you better control.<br />
<br />
Sorry about not posting more, I've been busy writing a <a href="https://play.google.com/store/apps/details?id=com.wundes.android.YearClock" target="_blank">circular calendar widget</a> for Android OS...<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-37349214710508164022012-04-15T14:28:00.000-07:002012-04-15T14:28:13.634-07:00js4ai.zipHey All!<br />
Yes, I know... You like using my scripts, but you get a new computer with a fresh install of Illustrator, and you loathe having to download all my scripts individually. Have I got news for you...<br />
<br />
I've finally joined the 21st century and created a GitHub repository for all my scripts. If you've never used GitHub, don't worry, all you need to know is that now you can download ALL of my public scripts in one handy zip file. Get them ALL <a href="https://github.com/johnwun/js4ai" target="_blank">here</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://github.com/johnwun/js4ai" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TQDBFXH0of0/T4sqrkhK8bI/AAAAAAAABkE/QV2Ph-nbclU/s1600/download.png" /></a></div><br />
<br />
If you customize any of my scripts and think the modified version would be helpful for someone else, please feel free to fork the code. I believe strongly in the community of JS4AI developers, and have been a little surprised at how that the playing field has been so sparse for so long. I know there are a lot of awesome JS developers out there, so hopefully GitHub will provide a connection point to facilitate more co-development for the benefit illustrator community. Let me know if you have any custom scripts that you want to add. Otherwise, get to downloading, and as always, happy illustrating!!!Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com7tag:blogger.com,1999:blog-19727441.post-66176070361877307892012-03-29T23:14:00.004-07:002012-04-01T13:56:30.230-07:00Matthew Ericson's MultiExport<div style="text-align: left;">Reader Dan just alerted me to the existence of Matthew Erickson's awesome multiExport script. His script is very similar to my exportLayers script in that it will export selected layers as various image files, but his script also manages to export layers as PDF files, and can handle multiple artboards at the same time. <br />
<br />
The only downside is, I believe it only works for CS5 and above. So if you're rocking CS5, check out Matt's script and his incredibly clear and thorough walk-through of how it works on <a href="http://www.ericson.net/content/2011/06/export-illustrator-layers-andor-artboards-as-pngs-and-pdfs/" target="_blank">Matt's blog</a>.</div><div style="text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://www.ericson.net/content/wp-content/uploads/2011/06/multiexporter-box-500x280.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="http://www.ericson.net/content/wp-content/uploads/2011/06/multiexporter-box-500x280.png" width="400" /></a></div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">I had a lot of fun looking through how he solved the dialogue/ persistent data issue. My solution was to write an entire script on the fly, and then export the script and execute it remotely. I think Matt's closure solution is much more elegant.<br />
<br />
Also, to save variable state between runs, his script generates an XML string, and stores it in a new textField in a hidden layer on the top of the document and then on the next run, the dialog can remember the selected values. Mad Genius. I love seeing solutions that think farther outside the box than my own efforts. </div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Props to Matt for providing this open source, and for sharing his work with the world. Matt, you sir, are a Hacker with a capital 'H', and I mean that in the best possible way. </div>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-39060246089074105562012-03-17T13:53:00.002-07:002012-03-17T13:58:37.026-07:00Draw control handles as geometry<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><span style="text-align: -webkit-auto;">All the anchor points and control handles below are actual geometry!</span><a href="http://forums.adobe.com/servlet/JiveServlet/showImage/2-3175744-43144/Screen+shot+2010-09-30+at+8.32.31+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="209" src="http://forums.adobe.com/servlet/JiveServlet/showImage/2-3175744-43144/Screen+shot+2010-09-30+at+8.32.31+PM.png" width="320" /></a></div><a href="http://wundes.com/JS4AI/images/ZoomAndCenterSelection.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="http://wundes.com/JS4AI/images/ZoomAndCenterSelection.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
</a><img border="0" src="http://wundes.com/JS4AI/images/ZoomAndCenterSelection.gif" /><br />
Want to be able to actually draw an objects control handles AS geometry? I have occasionally wanted this functionality while creating my script icon illustrations for 'scallop' and 'zoom and center', but I always did so by hand. <br />
<br />
It occurred to me that this would be a good script to write, but after doing a little Googling, I discovered that GFBroo of Jongware beat me to the punch on this one.<br />
<br />
<br />
<a href="http://wundes.com/JS4AI/images/scallopTemplate.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://wundes.com/JS4AI/images/scallopTemplate.gif" /></a>The discussion on the Adobe forums is <a href="http://forums.adobe.com/message/3174677" target="_blank">here</a>, and the direct download to the script is <a href="http://www.jongware.com/binaries/drawArtHandles.zip" target="_blank">here</a>.<br />
<br />
Very handy.... Thank's GFBroo!<br />
<br />
enjoy!<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-22071446920125527982012-03-13T12:12:00.002-07:002012-03-13T21:10:58.006-07:00Flow Text box to fit contentsA few days ago, Johan Ronsse requested a script that expands a text area's size to match it's containing text when some of the text is hidden by overflow. I realized the utility of such a script, but after checking illustrator's API, I could find no native way to do it. A few hours later, Johan sent me this link.<br />
http://kelsocartography.com/blog/?p=316<br />
<br />
Nathaniel Kelso found a way to make it work. Nathaniel's script used a really cool trick in which he grows the container, then makes a copy of the text, and flattens the text into geometry. Once the text has become a collection of graphic objects, it becomes trivial to get it's correct size. The script then deletes the geometry, and re-sizes the original text box to the correct dimensions. Brilliance!!!<br />
<br />
<a href="http://kelsocartography.com/scripts/scripts/nvkelso/FitToTextContent2.jsx" target="_blank">Download </a>it... Use it, and remember to send Nathaniel a thank you if you use it.<br />
For me this was a great reminder that if you're against a wall, ask someone else. There are always so many creative ways to solve a problem.<br />
Stay inspired!!!<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com2tag:blogger.com,1999:blog-19727441.post-21133540334881356082012-03-13T12:02:00.001-07:002012-03-13T21:14:29.587-07:00How to permanently tie a script to an action in Illustrator<b> </b>Over the years, the number one request from my followers has been the ability to permanently connect a script to an action.<b> </b> <br />
(Note: This post is only slightly tongue in cheek)<br />
<br />
<b>Step 1: Go here:</b><br />
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform<br />
<br />
<b>Step 2: Enter this:</b><br />
<blockquote class="tr_bq">*****Bug Report*****<br />
Steps to reproduce bug:<br />
<br />
1. Make a new Action<br />
2. Open Action panel fly-out <br />
3. Select "Insert menu Item"<br />
4. Insert the name of a custom script from the scripts folder.<br />
5. Stop recording, and test the new Action. It properly runs the script.<br />
6. Close, and re-open Illustrator.<br />
7. Run the Action... Watch it fail.</blockquote><br />
<b>Step 3: </b>Repeat as needed until it's fixed.<br />
<br />
Seriously, do this at least once, and when it's finally fixed, you can claim that you played a part in making AI a better product. I'd totally put that on my resume. :)<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com3tag:blogger.com,1999:blog-19727441.post-42552168877908356222012-03-07T00:20:00.001-08:002012-03-07T00:24:38.682-08:00The "Select Anything" Plug-in<div class="separator" style="clear: both; text-align: center;"><a href="http://rj-graffix.com/software/images_plugins/selectmenu.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://rj-graffix.com/software/images_plugins/selectmenu.jpg" width="156" /></a></div>While the script in the previous post can be easily modified for any object type, Egor just pointed out that there is a cross platform plugin called <a href="http://rj-graffix.com/software/plugins.html" target="_blank">selectMenu.aip</a> available for free from Rick Johnson/Graffix that will allow you to select many different object types. I'd perused the bevy of handy tools on Rick's site a long time ago, but had forgotten the treasures to be found there. To avoid such foolish oversight in the future, I will add Rick's site to the blogs link panel.<br />
<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-73245086859905290982012-03-06T13:07:00.000-08:002012-03-06T13:07:25.429-08:00Select Compound Paths only<span class="gI"><span class="go">I got a request today to write a script that selects only compound paths. Here's the quickie script:</span></span><br />
<span class="gI"><span class="go"><br />
</span></span><br />
<pre style="background: #ffffff; color: black;"><span style="color: maroon; font-weight: bold;">var</span> doc<span style="color: #808030;">=</span>activeDocument<span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">var</span> sel <span style="color: #808030;">=</span> doc<span style="color: #808030;">.</span>selection<span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">var</span> len <span style="color: #808030;">=</span> sel<span style="color: #808030;">.</span>length<span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">while</span><span style="color: #808030;">(</span>len<span style="color: #808030;">--</span><span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
<span style="color: maroon; font-weight: bold;">if</span><span style="color: #808030;">(</span>sel<span style="color: #808030;">[</span>len<span style="color: #808030;">]</span><span style="color: #808030;">.</span>typename <span style="color: #808030;">===</span><span style="color: maroon;">"</span><span style="color: #0000e6;">CompoundPathItem</span><span style="color: maroon;">"</span><span style="color: #808030;">)</span><span style="color: purple;">{</span>
sel<span style="color: #808030;">[</span>len<span style="color: #808030;">]</span><span style="color: #808030;">.</span>selected<span style="color: #808030;">=</span><span style="color: #0f4d75;">false</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span>
<span style="color: purple;">}</span>
alert<span style="color: #808030;">(</span><span style="color: maroon;">"</span><span style="color: #0000e6;">Only non-compound items are selected.</span><span style="color: maroon;">"</span><span style="color: #808030;">)</span><span style="color: purple;">;</span> </pre><pre style="background: none repeat scroll 0% 0% rgb(255, 255, 255); color: black;"> </pre><br />
<br />
It should work for all versions of illustrator, and can easily be modified to other object types.<br />
<br />
enjoy!<br />
<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com1tag:blogger.com,1999:blog-19727441.post-81139590171745452002012-03-01T19:02:00.003-08:002012-03-02T00:25:48.041-08:00Export Layers (up to 700% larger)Since I posted the <a href="http://www.wundes.com/JS4AI/#exportLayers.jsx" target="_blank">Export Layers</a> script, a few people have asked me to add an option to export at a higher resolution. There is no DPI export option listed in the Adobe scripting guide, so it didn't seem likely to happen.<br />
Yesterday, however, I received an email from Mike Moreau Jr. at HarvestMedia, who pointed out that there was an option to scale exported images. Aaaannd, shortly thereafter, I added scaling sliders to the scripts UI.<br />
<br />
If you need an image exported at, say, 300dpi, just calculate (desiredResolution/currentResolution) eg, 300/72 gives you 4.17. By Setting the scale slider to 417%, your output should export at the correct size.<br />
<br />
Note: Technically, your image is still at 72 dpi, it's just much larger, so if you want true 300dpi images, you'll need to batch process your exported images using Photoshop to adjust the size and dpi.<br />
<br />
Also, I updated my previous post on 'organize', adding a new pic, and some notes on pro mode.Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-52067157756941323862012-02-25T14:36:00.003-08:002012-03-01T17:27:56.318-08:00OrganizeEgor from Russia has been sending me some really good ideas for scripts lately. Last week he sent a request for a script that would 'sort by size'. I immediately slapped my forehead and wondered how I didn't think of that.<br />
<br />
Here was his request illustration:<br />
<div><br />
</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-LG3u65LlcCg/T0lfPoqM68I/AAAAAAAABco/PImXe6FgWOQ/s1600/SortBySize.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-LG3u65LlcCg/T0lfPoqM68I/AAAAAAAABco/PImXe6FgWOQ/s1600/SortBySize.png" /></a></div><br />
After goofing around a little, I thought, why settle for just positioning?<br />
Let's make something that allows you to sort a collection of objects ALONG any attribute, BY any attribute. <br />
Thus <a href="http://www.wundes.com/JS4AI/#organize.jsx" target="_blank">organize</a> was born. Below are a few test runs to get your juices flowing. Oh, and I added random distribution too.<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-xg0rOifMAo4/T0liQhe-7RI/AAAAAAAABdA/YTYrUudMlik/s1600/organize.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-xg0rOifMAo4/T0liQhe-7RI/AAAAAAAABdA/YTYrUudMlik/s1600/organize.png" /></a></div><br />
Edit: Adding another example:<br />
I've added a 'shortcuts' option, so once you get used to the options, you can enter a four digit sequence into the first prompt and the items will be sorted. I believe this interface is a good balance between hand-holding for the beginner, and speed/ efficiency for the power user.<br />
<br />
Below I use the code to shuffle a deck of cards, and then sort their z-order depth from left to right based on their x-position. I start with a properly sorted deck:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-W0lDLY35uRc/T1AhtR106FI/AAAAAAAABdQ/-NZJzGELJgQ/s1600/shuffle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-W0lDLY35uRc/T1AhtR106FI/AAAAAAAABdQ/-NZJzGELJgQ/s1600/shuffle.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-j3K0gG5PEjg/T1AgsGE9I_I/AAAAAAAABdI/4hETzzWbyso/s1600/shuffle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div><br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="" style="clear: both; text-align: left;">Let me know if/how you use it in the comments, and as always, happy illustrating!</div>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-88515446666284994092012-01-25T23:01:00.000-08:002012-01-25T23:01:55.716-08:00For the BirdsDaniel van Willigen's up to his old tricks with a new script, and it seems, a nice new <a href="http://www.behance.net/danielvanwilligen" target="_blank">place </a>to show them off on the Behance Network. Daniel has really taken JS4AI, and dialogues to the next level with this one.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-TOdcyZIKDjI/TyD4mYfGVMI/AAAAAAAABcU/Qdcmmk2eFro/s1600/1fd2ce056c7062e30b9438d80a8f3d1a.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-TOdcyZIKDjI/TyD4mYfGVMI/AAAAAAAABcU/Qdcmmk2eFro/s1600/1fd2ce056c7062e30b9438d80a8f3d1a.png" /></a></div><br />
<br />
<br />
I'll leave it as an exercise for the reader to come up with a use for it. Personally I'd just keep it around to run when I'm feeling down. Those silly birds just exude 'everything's gonna be alright...'<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://behance.vo.llnwd.net/profiles6/260400/projects/2964869/aa92602272c300e9d3a64d4f37e09506.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="http://behance.vo.llnwd.net/profiles6/260400/projects/2964869/aa92602272c300e9d3a64d4f37e09506.png" width="320" /></a></div><br />
Also, if you're on a Mac, check out his cool new 'InfoPanel' script, which prints out assorted bits of standard printing info in a panel beneath your illustration.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://behance.vo.llnwd.net/profiles6/260400/projects/806732/6dc8daf5338c93a34e4e69ae7a2df200.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://behance.vo.llnwd.net/profiles6/260400/projects/806732/6dc8daf5338c93a34e4e69ae7a2df200.png" width="320" /></a></div><br />
Very professional looking.<br />
Daniel assures me this will work on PC in it's next iteration.<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-77291369842703703822012-01-07T00:12:00.000-08:002012-01-15T18:57:21.714-08:00Set ALL the Things<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-EhbZe8RV52s/Twf82guzQAI/AAAAAAAABa8/-e5L0mZvH5I/s1600/allTheThings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-EhbZe8RV52s/Twf82guzQAI/AAAAAAAABa8/-e5L0mZvH5I/s1600/allTheThings.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://wundes.com/JS4AI/#setAllTheThings.jsx" target="_blank">Set All the Things!</a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div>Ironically, the use case for this script is very specific, but, read on...<br />
I wanted a script that would allow me to set a bunch of differently sized objects to an exact width.<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-L3FhF0EaQ9A/TwoIlGzfZOI/AAAAAAAABbM/vs7M2xULyxM/s1600/setthingsexamplechart.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-L3FhF0EaQ9A/TwoIlGzfZOI/AAAAAAAABbM/vs7M2xULyxM/s1600/setthingsexamplechart.png" /></a></div><br />
<br />
In illustrator it is easy to scale multiple objects at once, but if they are already placed, and I just want to shrink them to an exact size... I draw a blank.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div>So I wrote this to fix my problem, but while I was at it, I thought it might be fun to make it a little more flexible. You can use this script to bulk re-size things to specific dimensions. Or, if you're feeling a little more adventurous...<br />
<br />
For more advanced (or masochistic) users:<br />
You can also pass functions as values, for instance, assuming you entered:<br />
<br />
<b>fillColor</b><br />
<br />
as your attribute,<br />
The following value will set color of all selected objects to red:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span><span style="color: maroon; font-weight: bold;">var</span> c<span style="color: #808030;">=</span><span style="color: maroon; font-weight: bold;">new</span> RGBColor<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>red<span style="color: #808030;">=</span><span style="color: #008c00;">255</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>green<span style="color: #808030;">=</span><span style="color: #008c00;">0</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>blue<span style="color: #808030;">=</span><span style="color: #008c00;">30</span><span style="color: purple;">;</span><span style="color: maroon; font-weight: bold;">return</span> c<span style="color: purple;">;</span><span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
</pre><br />
Not super exciting, I know, but it's a start.<br />
Another slightly more interesting example:<br />
<br />
For attributes enter:<br />
<br />
<b>fillColor,strokeColor</b><br />
<b><br />
</b><br />
for values enter:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span><span style="color: maroon; font-weight: bold;">var</span> c<span style="color: #808030;">=</span><span style="color: maroon; font-weight: bold;">new</span> RGBColor<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span> <span style="color: maroon; font-weight: bold;">var</span> r <span style="color: #808030;">=</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span>n<span style="color: #808030;">)</span><span style="color: purple;">{</span><span style="color: maroon; font-weight: bold;">return</span> <span style="color: #797997;">Math</span><span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">floor</span><span style="color: #808030;">(</span><span style="color: #797997;">Math</span><span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">random</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">*</span>n<span style="color: #808030;">)</span><span style="color: purple;">;</span><span style="color: purple;">}</span> c<span style="color: #808030;">.</span>red<span style="color: #808030;">=</span>r<span style="color: #808030;">(</span><span style="color: #008c00;">255</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>green<span style="color: #808030;">=</span>r<span style="color: #808030;">(</span><span style="color: #008c00;">255</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>blue<span style="color: #808030;">=</span>r<span style="color: #808030;">(</span><span style="color: #008c00;">255</span><span style="color: #808030;">)</span><span style="color: purple;">;</span><span style="color: maroon; font-weight: bold;">return</span> c<span style="color: purple;">;</span><span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
</pre><br />
The above will assign a random color to both the fill and stroke of each selected object. (assuming the object had a stroke to begin with.)<br />
<br />
Let's try an even more complex example:<br />
To set stroke, then set random stroke thicknessess and a random stroke color, do this:<br />
<br />
attributes:<br />
<br />
<b> stroked,strokeWidth,strokeColor</b><br />
<b><br />
</b><br />
values:<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: #0f4d75;">true</span><span style="color: #808030;">,</span><span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span><span style="color: maroon; font-weight: bold;">return</span> <span style="color: #797997;">Math</span><span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">random</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">*</span><span style="color: #008c00;">20</span><span style="color: purple;">;</span><span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">,</span><span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">{</span><span style="color: maroon; font-weight: bold;">var</span> c<span style="color: #808030;">=</span><span style="color: maroon; font-weight: bold;">new</span> RGBColor<span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: purple;">;</span> <span style="color: maroon; font-weight: bold;">var</span> r <span style="color: #808030;">=</span> <span style="color: maroon; font-weight: bold;">function</span><span style="color: #808030;">(</span>n<span style="color: #808030;">)</span><span style="color: purple;">{</span><span style="color: maroon; font-weight: bold;">return</span> <span style="color: #797997;">Math</span><span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">floor</span><span style="color: #808030;">(</span><span style="color: #797997;">Math</span><span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">random</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span><span style="color: #808030;">*</span>n<span style="color: #808030;">)</span><span style="color: purple;">;</span><span style="color: purple;">}</span> c<span style="color: #808030;">.</span>red<span style="color: #808030;">=</span>r<span style="color: #808030;">(</span><span style="color: #008c00;">255</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>green<span style="color: #808030;">=</span>r<span style="color: #808030;">(</span><span style="color: #008c00;">255</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>c<span style="color: #808030;">.</span>blue<span style="color: #808030;">=</span>r<span style="color: #808030;">(</span><span style="color: #008c00;">255</span><span style="color: #808030;">)</span><span style="color: purple;">;</span><span style="color: maroon; font-weight: bold;">return</span> c<span style="color: purple;">;</span><span style="color: purple;">}</span><span style="color: #808030;">)</span><span style="color: #808030;">(</span><span style="color: #808030;">)</span>
</pre> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-phljZk6BvkU/TwoK_iewqjI/AAAAAAAABbU/TAxjtBJH0bw/s1600/setallthingsexample_adv.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="136" src="http://2.bp.blogspot.com/-phljZk6BvkU/TwoK_iewqjI/AAAAAAAABbU/TAxjtBJH0bw/s320/setallthingsexample_adv.png" width="320" /></a></div><br />
Granted, this is super messy, very error prone, and way overkill. If you want to do something this advanced, and you have the skills to write function closures in a prompt, you could easily just write your own custom script, but for quick 'one-off' tasks that don't need a script, maybe this 'advanced use' will come in handy for someone. If not, then maybe it's a good learning exercise.<br />
<br />
Simple, or complex, let me know how you use it in the comments. Just remember, the advanced stuff is not required, the script just defaults to 'width,height', so you don't have to do anything complicated to use it.<br />
<br />
Update: Script now takes any standard units, so '20mm' and '6ft' are valid values.<br />
Script now also gives you the option to transform objects from their center, rather than defaulting to top,left.Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com21tag:blogger.com,1999:blog-19727441.post-55688850085347815542011-12-14T14:41:00.000-08:002011-12-14T14:41:15.836-08:00Unscaling pasted imagesIn the past few releases of the CS suite, I've found that when I paste an image from the windows clipboard into Illustrator, the pasted image size is reduced to about 70%. I hope there is just some setting that can turn this off, but being the lazy programmer that I am, I just wrote a <a href="http://wundes.com/JS4AI/#to100Pct.jsx" target="_blank">couple lines of code</a> to knock the imported graphic back to 100%.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-axQtMY0Ew6A/Tukl-D60L6I/AAAAAAAABXQ/tY8pOrbuKN4/s1600/to100_Example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="http://3.bp.blogspot.com/-axQtMY0Ew6A/Tukl-D60L6I/AAAAAAAABXQ/tY8pOrbuKN4/s320/to100_Example.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-gbpSxLvHIuA/TukliDivdsI/AAAAAAAABXI/QzB-wwDqzMo/s1600/to100Example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-sJEpA0_ZnTM/TuklT2jH-9I/AAAAAAAABXA/p1dxts2expw/s1600/to100Example.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div><br />
This script can be run on multiple selected items at a time, and will only affect Raster Items.<br />
If the selected item is already at 100% it will not be transformed.<br />
<br />
Enjoy,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com3tag:blogger.com,1999:blog-19727441.post-23304856514059062742011-11-23T16:16:00.000-08:002011-11-23T16:26:15.964-08:00Generate Color Legend from SwatchesHere's a simple script that will <a href="http://wundes.com/JS4AI/#renderSwatchLegend.jsx" target="_blank">generate color rectangles</a> in a document for every color in the main swatch palette.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-pW3sw0CBt6M/Ts2MzelRabI/AAAAAAAABW4/cQ5DsbVK5Oo/s1600/colorSwatches.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="http://1.bp.blogspot.com/-pW3sw0CBt6M/Ts2MzelRabI/AAAAAAAABW4/cQ5DsbVK5Oo/s400/colorSwatches.png" width="400" /></a></div><br />
Suppose that you want to create a visual legend of some colors. This script will make a map of ALL the swatches in the documents swatch palette. (If you want to skip the "none" and "registration" values, just edit the script so the "for" loop start at 2 instead of 0.)<br />
<br />
Just run this script, and a legend of named swatch rectangles with (by default) their CMYK values will appear in a nicely grouped object on the top of your document.<br />
<br />
Sound off in the comments if you find this one useful.<br />
<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com14tag:blogger.com,1999:blog-19727441.post-75603452071761630952011-11-10T17:16:00.000-08:002011-11-10T17:16:20.969-08:00Script Bay: Run Any Script from a PanelOne of my users just sent me a message about a new (free) Illustrator plug-in that allows you to run any script on your hard drive from a unified panel.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://in-tools.com/wordpress/wp-content/uploads/2010/07/script_bay_illy.png" imageanchor="1"><img border="0" height="372" src="http://in-tools.com/wordpress/wp-content/uploads/2010/07/script_bay_illy.png" width="223" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://in-tools.com/wordpress/wp-content/uploads/2010/07/script_bay_illy.png" imageanchor="1"></a></div><br />
The website says that it is only compatible with CS4 and above, but this sounds like a huge convenience for those with compatible versions. <a href="http://in-tools.com/article/script-bay/script-panel-replacement-for-the-entire-creative-suite/">Check it out</a>!Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-79245200416364446652011-10-29T13:57:00.000-07:002011-10-29T13:57:33.107-07:00Expand a raster tracing objectThis week Hugo Tait sent me an excellent question about how to expand a tracing object. <br />
<br />
Unfortunately, there wasn't much of an example in the javascript guide.<br />
It took a little experimentation, but I came up with the following script, and thought I'd share it with all of you here. This will take the current selected Raster object (embedded not placed) and convert it into 4 color geometry.<br />
<br />
var doc = activeDocument;<br />
var obj = doc.selection[0];<br />
var r = obj.trace(); <br />
var options = r.tracing.tracingOptions;<br />
options.tracingMode = TracingModeType.TRACINGMODECOLOR;<br />
options.ignoreWhite=true;<br />
options.maxColors=4;<br />
redraw(); <br />
r.tracing.expandTracing();<br />
<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com2tag:blogger.com,1999:blog-19727441.post-14514368088128462352011-07-21T21:02:00.000-07:002011-07-21T21:15:28.702-07:00Update to Scallop TemplateI was thinking about Hiroyuki's '<a href="http://js4ai.blogspot.com/2011/05/connecting-dots.html">connect the dots</a>' script, and was wondering, what happens if you have a reverse need, where you have a spline, and you want to distribute an object across all the anchor points.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-cuMbJnqmkYE/Tij1D8wc9mI/AAAAAAAABTM/nQ9KsHFpUpI/s1600/scallopV2_Layer-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-cuMbJnqmkYE/Tij1D8wc9mI/AAAAAAAABTM/nQ9KsHFpUpI/s1600/scallopV2_Layer-1.png" /></a></div><br />
I remembered I had written something like that when I made the Scallop Template script, but I dialed it down to only sharp corners, because it seemed silly to put a scallop in the middle of a rounded segment. I have now updated <a href="http://www.wundes.com/JS4AI/#scallopTemplate.jsx">scallopTemplate.js</a> with the option to draw a circle around sharp corners only, or around all anchor points.<br />
<br />
If you have a line graph, you can use scallopTemplate to drop circles over the anchors like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-Ki5jcQXwMdw/Tij3VY0XIJI/AAAAAAAABTY/6f-BRtqPmGU/s1600/scallopV2_Layer-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Ki5jcQXwMdw/Tij3VY0XIJI/AAAAAAAABTY/6f-BRtqPmGU/s1600/scallopV2_Layer-2.png" /></a></div><br />
<br />
If you then ungroup the circle objects, you can then use <a href="http://www.wundes.com/JS4AI/#copyToMultipleObjects.js">copyToMultipleObjects</a> to replace the circles with whatever object suits your fancy...<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-2lxWSL6a_zg/Tij1EMZytaI/AAAAAAAABTU/4KeceOjXCko/s1600/scallopV2_Layer-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-2lxWSL6a_zg/Tij1EMZytaI/AAAAAAAABTU/4KeceOjXCko/s1600/scallopV2_Layer-3.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">If for some reason, you don't like the extra click, and plan to only use one or the other, you can edit line 26 of the script from:</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><blockquote><pre style='color:#000000;background:#ffffff;'>var selectAll <span style='color:#808030; '>=</span> confirm<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Scallop corners only?</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></blockquote><div class="separator" style="clear: both; text-align: left;"></div><div class="separator" style="clear: both; text-align: left;">to</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><blockquote> <pre style='color:#000000;background:#ffffff;'>var selectAll <span style='color:#808030; '>=</span> true<span style='color:#800080; '>;</span>
</pre></blockquote><div class="separator" style="clear: both; text-align: left;">Have fun!</div><div class="separator" style="clear: both; text-align: left;">-J</div>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-44981892513948044602011-07-21T20:36:00.000-07:002011-07-22T00:20:40.507-07:00Showcase: Scott DarisHey All,<br />
<br />
I got a wonderful email from Scott Daris, a graphic designer who is using my scripts for a variety of designs ranging from editorial illustration to non-profit work. Upon request, Scott was kind enough to send me some examples of his work.<br />
<br />
I like seeing what people do with my scripts, and hopefully you do too, because I'm posting them here.<br />
<br />
Scott used <a href="http://www.wundes.com/JS4AI/#vary_hues.js">vary_hues.js</a> to quickly turn this collection of grey blocks:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-P7lQBMEXGXY/TijskApPcYI/AAAAAAAABTA/V7XqlLczQao/s1600/ScottDaris_Dubai_vary_hues_before.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="208" src="http://1.bp.blogspot.com/-P7lQBMEXGXY/TijskApPcYI/AAAAAAAABTA/V7XqlLczQao/s320/ScottDaris_Dubai_vary_hues_before.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div style="text-align: left;">...into this one:</div><br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><a href="http://3.bp.blogspot.com/-C66yGal4CY8/TijsjpIwkPI/AAAAAAAABS8/8irRMVLQAjI/s1600/ScottDaris_Dubai_vary_hues_after.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="208" src="http://3.bp.blogspot.com/-C66yGal4CY8/TijsjpIwkPI/AAAAAAAABS8/8irRMVLQAjI/s320/ScottDaris_Dubai_vary_hues_after.png" width="320" /></a><br />
<br />
<div class="separator" style="clear: both; text-align: left;">In his words:</div><blockquote><span class="Apple-style-span" style="border-collapse: collapse; font-family: Calibri, sans-serif; font-size: 14px;">I used it for quickly colorizing the squares in the buildings for a little editorial illustration. I know you can achieve this effect in other ways, such as object mosaic, Recolor Artwork, etc, but your script was great because I quickly did a bunch of them, automatically randomizing the colors so each one was different, and then just picked my favorite one. Easy!</span></blockquote><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Scott is also a fan of <a href="http://www.wundes.com/JS4AI/#textTweaker.js">textTweaker.js</a>, which he used as a starting point to add a playful feel to the typography below, creating cool blocks of text that ooze with personality.</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-MVUbltz5pvU/TijsktaveBI/AAAAAAAABTE/TQ4o0qKeGZY/s1600/ScottDaris_textTweaker_example_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="http://3.bp.blogspot.com/-MVUbltz5pvU/TijsktaveBI/AAAAAAAABTE/TQ4o0qKeGZY/s320/ScottDaris_textTweaker_example_1.gif" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-TQ9HfPv9GME/Tijsk2SsmVI/AAAAAAAABTI/8XtAWfT--6w/s1600/ScottDaris_textTweaker_example_2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-TQ9HfPv9GME/Tijsk2SsmVI/AAAAAAAABTI/8XtAWfT--6w/s320/ScottDaris_textTweaker_example_2.gif" width="317" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">I hope these use cases inspire you, as they inspire me, to create something new.</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">cheers,</div><div class="separator" style="clear: both; text-align: left;">-J</div>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-24506810550141687232011-06-13T21:37:00.000-07:002011-06-13T22:19:59.045-07:00Connect the Dots II<div class="separator" style="clear: both; text-align: center;"></div><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">Hiroyuki posted an <a href="http://lines-about-to-be-generated.blogspot.com/2011/06/connectcentersnearestmodified-2.html">update </a>to the connect the dots script, which sets a maximum difference between connectors.</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"> </span><span class="Apple-style-span" style="font-family: arial, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">This allows for some REALLY COOL stuff.</span></div><div class="separator" style="clear: both; text-align: center;"><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"></span><a href="http://2.bp.blogspot.com/-4qBDzctY5T0/Tfbmb3xLpYI/AAAAAAAAA_c/wsWuc8fgQfM/s1600/20110606234313.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="111" src="http://2.bp.blogspot.com/-4qBDzctY5T0/Tfbmb3xLpYI/AAAAAAAAA_c/wsWuc8fgQfM/s320/20110606234313.png" width="320" /></a></div><span class="Apple-style-span" style="font-family: arial, sans-serif;"><span class="Apple-style-span" style="font-size: x-small;"><span class="Apple-style-span" style="border-collapse: collapse;"><br />
</span></span> </span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">I found a copy of a <a href="http://mrl.nyu.edu/~ajsecord/stipples.html">voronoi stipple</a> program similar to the one mentioned, which makes VECTOR pointallized svgs using the command line. (these CAN absolutely be loaded by Illustrator)</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"> </span><br />
<span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-6Wyh3BMvFVo/TfblUJy5v7I/AAAAAAAAA_Y/2FraFr2RA64/s1600/plant4h_5000.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-6Wyh3BMvFVo/TfblUJy5v7I/AAAAAAAAA_Y/2FraFr2RA64/s1600/plant4h_5000.png" /></a></div><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><br />
<span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><br />
<span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">The advanced options didn't seem to work for me on initial try, but after opening a 'cmd' window and navigating to the containing folder, the following ran fine, although it took about 3 minutes to finish.</span><br />
<span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><br />
<blockquote><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">voronoi.exe test.png out.svg</span></blockquote><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">I also ran across a really neat way to take things a step further using a Traveling Salesman Solver python script for Inkscape at the <a href="http://wiki.evilmadscience.com/Generating_TSP_art_from_a_stippled_image">EvilMadScience</a> site. I didn't try this one because I don't have inkscape installed, but after seeing that you can write scripts for it in python, I might just take it for a whirl...</span><br />
<div class="separator" style="clear: both; text-align: center;"></div><div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-EM47sbFJEzU/TfbvdymVLnI/AAAAAAAAA_g/jSmVJ1UPjRc/s1600/zebra.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="http://4.bp.blogspot.com/-EM47sbFJEzU/TfbvdymVLnI/AAAAAAAAA_g/jSmVJ1UPjRc/s320/zebra.png" width="320" /></a></div><span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="border-collapse: collapse;"><br />
</span></span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"><br />
</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;">Anyway, cool art abounds. I am in awe.</span><span class="Apple-style-span" style="border-collapse: collapse; font-family: arial, sans-serif; font-size: 13px;"> </span></div>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-49947346488662417982011-06-02T20:42:00.000-07:002011-06-02T20:54:58.919-07:00Distribute Stacked Objects to a grid (sort of...)Hey All,<br />
<br />
New script goodness!!!<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-nyN9HgLOQXw/Teha80NBWXI/AAAAAAAAA-Q/keZbmMhwrb0/s1600/distributeObjects.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="http://4.bp.blogspot.com/-nyN9HgLOQXw/Teha80NBWXI/AAAAAAAAA-Q/keZbmMhwrb0/s320/distributeObjects.png" width="320" /></a></div><br />
<br />
<a href="http://www.wundes.com/JS4AI/#distributeStackedObjects.jsx">Distribute Stacked Objects</a> is a script I cooked up to take any number of selected objects, and spread them out a bit. The script doesn't create an exact grid, but it does prevent objects from overlapping, which is handy if you've just imported 50 .eps icons. Take it for a spin and see if it improves your quality of life. I've tested it on CS5 for Windows. Good luck, and happy illustrating.<br />
<br />
right click <a href="http://www.wundes.com/JS4AI/distributeStackedObjects.jsx">here </a>to acquire.<br />
<br />
cheers,<br />
-JJohnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com15tag:blogger.com,1999:blog-19727441.post-81129966480007761642011-05-28T12:46:00.000-07:002011-05-28T12:47:42.110-07:00Connecting the Dots<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 18px;">Hiroyuki just posted a new script that <a href="http://lines-about-to-be-generated.blogspot.com/2011/05/connect-centers-in-various-order.html">connects the dots</a>, literally. It draws a line through the centers of a collection of selected objects with options such as nearest horizontal, nearest vertical, nearest, farthest, etc...</span></span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 18px;"><br />
</span></span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-xGx5SJkqYfQ/TeFRSdjADCI/AAAAAAAAA-M/tJdJqHgmS-o/s1600/110528_connect_centers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-xGx5SJkqYfQ/TeFRSdjADCI/AAAAAAAAA-M/tJdJqHgmS-o/s320/110528_connect_centers.png" width="223" /></a></div><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 18px;">I haven't played with it yet, but it looks like it could be a really fun toy, and possibly even a handy visualization tool. </span></span><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 18px;">I'm going to run it on a few of my latest logo projects and see if I can get it to do something unexpected. </span></span><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: x-small; line-height: 18px;">Post in the comments if you find an interesting way to use this script. Mad props to Hiroyuki, dude, keep on script'n!</span><br />
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: x-small;"><span class="Apple-style-span" style="line-height: 18px;"><br />
</span></span>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com0tag:blogger.com,1999:blog-19727441.post-13733086224481352152011-04-16T01:03:00.000-07:002011-04-16T01:12:29.294-07:00Save Layer StatesOK, here's a <i>really quick</i> shot at saving layer states. <br />
<br />
The script doesn't track by layer name, so if you add or remove a layer between uses, your layer visibility will be shifted. Fortunately, I'm using a simple system of 1's and 0's to track visibility, so you can easily edit the saved values if you added or removed a layer between runs.<br />
<br />
Another limitation/caveat: This version doesn't look at sub-layers, just top level layers.<br />
<br />
Someone who know how to write plugins should probably write something like this, but until then, if you're dying for a layer "save state" script, this should get you started.<br />
<br />
Just run the script posted below and a prompt will come up with a bunch of ones and zeros in the text entry field. These represent the visibility of each root layer in your document. If you want to save your layer state, just manually copy the prompt data to a text document for use later.<br />
<br />
When you want to reset your visibility to an older saved state, just rerun the script, and paste your saved string back into the prompt window, (erasing the existing data) and your layers will return to the original visibility settings.<br />
<br />
Enjoy, and if you have any suggestions, requests or improvements, please email me, or post in the comments below.<br />
cheers,<br />
-J<br />
<br />
<pre style="background: #ffffff; color: black;"><span style="color: maroon; font-weight: bold;">var</span> doc <span style="color: #808030;">=</span> activeDocument<span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">var</span> binArr<span style="color: #808030;">=</span><span style="color: #808030;">[</span><span style="color: #808030;">]</span><span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">var</span> i <span style="color: #808030;">=</span> <span style="color: #008c00;">0</span><span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">for</span><span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">var</span> d<span style="color: #808030;">=</span>doc<span style="color: #808030;">.</span>layers<span style="color: #808030;">.</span>length<span style="color: #808030;">-</span><span style="color: #008c00;">1</span><span style="color: purple;">;</span>d<span style="color: #808030;">>=</span><span style="color: #008c00;">0</span><span style="color: purple;">;</span>d<span style="color: #808030;">--</span><span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
i<span style="color: #808030;">=</span> doc<span style="color: #808030;">.</span>layers<span style="color: #808030;">[</span>d<span style="color: #808030;">]</span><span style="color: #808030;">.</span>visible <span style="color: purple;">?</span> <span style="color: #008c00;">1</span><span style="color: purple;">:</span><span style="color: #008c00;">0</span><span style="color: purple;">;</span>
binArr<span style="color: #808030;">.</span>unshift<span style="color: #808030;">(</span>i<span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span>
<span style="color: maroon; font-weight: bold;">var</span> p<span style="color: #808030;">=</span>prompt<span style="color: #808030;">(</span><span style="color: #0000e6;">"Copy values to store layer visibility states, paste new data below to change."</span><span style="color: #808030;">,</span>binArr<span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">join</span><span style="color: #808030;">(</span><span style="color: #0000e6;">""</span><span style="color: #808030;">)</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">if</span> <span style="color: #808030;">(</span>p<span style="color: #808030;">!=</span><span style="color: #0f4d75;">null</span><span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
binArr <span style="color: #808030;">=</span> p<span style="color: #808030;">.</span><span style="color: maroon; font-weight: bold;">split</span><span style="color: #808030;">(</span><span style="color: #0000e6;">""</span><span style="color: #808030;">)</span><span style="color: purple;">;</span>
<span style="color: maroon; font-weight: bold;">for</span><span style="color: #808030;">(</span><span style="color: maroon; font-weight: bold;">var</span> d<span style="color: #808030;">=</span>binArr<span style="color: #808030;">.</span>length<span style="color: #808030;">-</span><span style="color: #008c00;">1</span><span style="color: purple;">;</span>d<span style="color: #808030;">>=</span><span style="color: #008c00;">0</span><span style="color: purple;">;</span>d<span style="color: #808030;">--</span><span style="color: #808030;">)</span>
<span style="color: purple;">{</span>
<span style="color: maroon; font-weight: bold;">if</span><span style="color: #808030;">(</span>doc<span style="color: #808030;">.</span>layers<span style="color: #808030;">.</span>length <span style="color: #808030;">></span> d<span style="color: #808030;">)</span><span style="color: purple;">{</span>
doc<span style="color: #808030;">.</span>layers<span style="color: #808030;">[</span>d<span style="color: #808030;">]</span><span style="color: #808030;">.</span>visible <span style="color: #808030;">=</span> binArr<span style="color: #808030;">[</span>d<span style="color: #808030;">]</span> <span style="color: #808030;">==</span> <span style="color: #008c00;">0</span> <span style="color: purple;">?</span> <span style="color: #0f4d75;">false</span> <span style="color: purple;">:</span> <span style="color: #0f4d75;">true</span><span style="color: purple;">;</span>
<span style="color: purple;">}</span>
<span style="color: purple;">}</span>
<span style="color: purple;">}</span>
</pre>Johnhttp://www.blogger.com/profile/04586720876169739222noreply@blogger.com3