The other day I saw this video by Jake in
Motion where he used ChatGPT to create scripts for After Effects and then I thought “hmmm,
I wonder if it works for Illustrator”. So, naturally, I tried it out and the end
result was just way better than I could have ever expected. Come with me and I’ll show you. First and foremost, ChatGPT is just too long
of a name, so we’re calling him Chatty from now on. He doesn’t seem to mind. I decided I was going to ask Chatty something
very simple, because even though Jake had success in his journey, I feel like After
Effects scripting is more well documented than Illustrator scripting, so I didn’t
wanna go too hard on GPT. My goal was to make a script that would tell
me the selected object’s size and area, regardless of the object’s shape, it could
be a circle, a square or even a random blob. And bear in mind I have close to no knowledge
on coding, so I’d have no idea how to properly approach this. Now grab some coffee, get a snack, and get
ready, because we’re about to embark on a really fun coding-Illustrator-artificial-intelligence
adventure. I started a new conversation with Chatty,
and since I’m not a terrible friend, I begun with a little bit of small talk, just to break
the ice. Ok, that’s enough. Let’s get to work. I prompted Chatty the following: “In JavaScript,
write a code for Adobe Illustrator that calculates the size and area of the selected object”,
and, to my surprise, he hit me with a wall of JavaScript code and honestly, I felt super
excited about it. So I pasted the code on notepad, saved it
as a JSX file in the scripts folder, opened Illustrator and ran the script. And… it didn’t work. So I told Chatty there was an error on line
28 of the code, and it tried to fix it, but it didn’t work again. And again. And again and again. Then, I tried to start new conversations and
prompt the same thing, and he gave me a different code every time, but they all failed in some
way. Ugh. I thought this would be easier. At this point I was considering giving up,
but then I remembered that, in his video, Jake used an approach of building the code
bit by bit, asking ChatGPT one simple thing at a time, and when it was needed, he would
even go after the official After Effects documentation to try to understand what was going on. Ok, fair. Let’s give Chatty one more chance. Before that, though, I decided to learn the
basics of JavaScript, just so I could roughly understand what was going on. I also used ChatGPT to do it, asking it to
explain me the basics of the language, and this, Chatty does really well, he’s a great
study companion. But don’t worry, I didn’t go too deep
into it. I just got a basic understanding of things
like variables, data types, operators and if-else statements, which, honestly, is something
you could learn in less than an hour of studying. I also didn’t write any code myself at any
point in this video, I just used this knowledge to understand how ChatGPT was structuring
the code and possibly help it in fixing some of the errors. Ok, back to creating our script. I decided to start with the most basic thing
I could think of: a script that checks if there is an object selected. I prompted Chatty, it gave me this code and…
wow. I can actually understand what it’s doing
with just an hour or so of studying. That’s exciting! ChatGPT created 2 variables, which are like
containers where you can store information: one called doc, for document, which is accessing
the document that we have opened, and one called sel, for selection, which is accessing
the selected objects inside the document. Then, it created an if-else statement, which
runs specific blocks of code when specific conditions are met or not. So it’s basically if this condition is true,
do this, else, do that. This if-else statement checks if there’s
one, more than one, or no objects selected, and then prompts a different alert for each
case. I ran the script in Illustrator and yeah,
it’s working perfectly! Ok, now I’m really excited. Let’s go back to Chatty. Now that I know that I can somewhat understand
the structure of the code, I asked Chatty to write something a bit more complex: a script
that informs the size of the object. The code started with the same document and
selection variables, and then calculated the size of the selected object with an if-else
statement, checking if there was only one object selected, calculating the width and
height of the selection by using the geometric bounds of the object, and then displaying
the result. Right off the bat I noticed it added the word
“points” to the alert message, which doesn’t make much sense, since the document might
be using a different measurement unit. Still, let’s test this out in Illustrator. And… well, it’s technically working. But wrong unit and way too many decimals. Let’s try to fix these issues, but one at
a time. I asked Chatty to replace the word “points”
on line 8 of the code for the active measurement unit of the document, guessing that there
might be a way to access this information. And apparently, there is! GPT added the “unit” variable inside the
if-else statement, retrieving the measurement unit currently being used on the ruler, and
then converting it to text using the “toString()” method. Also, I couldn’t help but notice that it
also added the “toFixed()” method to the width and height variables, which is a method
used to round up numbers and only display the amount of decimals that you place inside
the parenthesis. It’s odd because we needed to do that, but
we also didn’t ask for it. Hmm. Anyways, let’s run the code in Illustrator,
and… yeah, the amount of decimals shown is now only 2, the thing we didn’t ask for
works perfectly. The measurement unit, on the other hand… Well, to be fair with Chatty it did kinda
work. You can see that the alert is, indeed, retrieving
the right measurement unit from the ruler, but it’s using code language instead of
just a regular word, like “pixels”. So I kindly asked Chatty to fix it and he
replied back saying that the solution was a switch statement. Hmmm, I don’t know anything about those. Let’s ask Chatty again. Oh, ok. Switch statements are a way to perform different
actions based on different conditions. It feels like an if-else statement on steroids. Ok, looks very promising. It’s listing all the possible attributes
of “RulerUnits” as conditions and then assigning the corresponding measurement unit
to the “unit” variable when the condition is met. It’s also worth mentioning the fun fact
that Chatty reminded us that the code is now using the “toFixed()” method to reduce
the number of decimals, kinda like it was trying to show us it did something without
us even asking, or just pointing the changes out so we understand what’s happening, since
we didn’t say anything about it. Anyways, I ran the new version of the script
in Illustrator and it worked flawlessly. However, upon further testing, I noticed it
was displaying decimals even when the width or height were whole numbers, so I asked Chatty
to fix that. And props to him for understanding what I
was saying even though I explained in the worst way possible. Chatty added, before the alert, two more if-else
statements where it checks if the numbers are whole or not, and change the “toFixed()”
methods for each condition. I ran the code in Illustrator and: flawless
again! Now, let’s move on to calculating the area. I kindly asked Chatty to include a second
line on the alert where it would inform us the area of the object, but I can already
see some problems with the code. Chatty added a new variable called “area”
and simply multiplied the width for the height. It works fine for rectangles, but not for
any other shape. I tested it anyways, and it seemed to be working
properly, despite the wrong math. I informed him that the code worked, but we
faced a limitation with the math, and questioned him about calculating the area of ellipses. Chatty then wrote a new code and added a new
if-else statement, where it was trying to access the “typename” attribute of the
selected object, and checking if it was a “Rectangle” or an “Ellipse”. For each case, it would run a different code
to calculate the correct area. I knew it would still not calculate the area
of a random shape that was neither a rectangle or an ellipse, but if the code worked, we
would be a step closer anyways. However… it didn’t. It was the first error so far on this run,
but I thought to myself: well, hopefully, it’s also the only one. Spoiler alert: it wasn’t. I informed Chatty about the error and pointed
which line it had happened, and apparently it was just a single word that was unnecessary
in the code and caused everything to stop working. Wow, that’s kinda scary, not gonna lie. I ran the new code and got the same error
again. Huh? How so? I checked the latest version of the code,
and apparently ChatGPT didn’t remove the word it said it would. That’s odd. That was such an easy request. GPT just sent me the same code again. Well, I decided not to bother Chatty about
it and just removed the word myself. Then, I ran the code again. Sigh. Ok. New error. The code was now triggering the alert that
says "The selected object is not a rectangle or ellipse.”, but that was clearly not the
case. My guess is that the whole “typename”
strategy didn’t work as intended, so I informed Chatty about it. And apparently I was right. Ok. Error fixing. New code. Copy. Paste. Save. Illustrator. Run. Ugh. Ok. It was time to get my hands dirty. I decided I was gonna fix this issue myself. I’m ready to spend hours studying, days
even. I’m gonna master JavaScript and Illustrator
scripting. I’m gonna become the greatest script creator
the world has ever seen, and I’m gonna become rich and famous and the whole world is gonna
love me… Oh. Apparently there’s an area property you
can access by typing “.area”, so you actually don’t need to calculate anything. NICE! I kindly suggested Chatty we took a different
approach to the area problem, and he was totally on board with it. I pointed the “.area” attribute to him
and he promptly made the necessary changes. So here we go again. New code. Illustrator. Run. And…. IT WORKED! No errors, no issues, it’s perfect! I wasn’t expecting it to work all of a sudden
like this. And props to Chatty for including all the
code that was needed to round up the numbers of the area as well, without us even asking
for it. I thanked Chatty, to which he was as polite
as ever, finished the conversation and now I had my first Illustrator script created
in collaboration with ChatGPT. It was honestly such a fun experience in which
I actually learned a whole bunch of new things. I feel ready to start writing my own scripts
and perhaps I’ll even look more into JavaScript in the future. Who knows when it might be useful? If you enjoyed this video, check this other
one here. A special thanks to all my Patreon supporters
who help me make high quality content like this one. More on how you can support the channel in
the description down below. Don’t forget to like, subscribe and leave
a comment if you have any doubts. Thank you so much for watching and have a
great day. Bye!
