Topics: Programming Images

URI Fall 2023

Introduction to JavaScript for

Photoshop Scripting

Part 1: What is JavaScript?

JavaScript (or simply JS) is the engine behind many interactive elements you see on
websites. If you've ever used a site where content changes without reloading the whole
page or played a browser game, you've experienced JavaScript in action.

In Simple Terms:
● Interactive Web Experience: JS allows websites to respond to your actions,
whether it's a form that gives instant feedback, a slideshow of images, or a
real-time chat.
● Beyond Websites: While JS made its name on the web, its capabilities have
grown. Today, it's also used in mobile apps and, relevant to our course, software
like Adobe Photoshop.
● Direct Execution: Unlike some other programming languages that require an
additional step to be ready, JS runs as it is, which makes it quick and efficient.

Key Points:
● Direct Communication: JS lets you specify how software components (like
images or buttons) behave and interact.
● Responsive Behavior: JS enables real-time reactions, making things like
buttons change appearance when clicked or menus expand when hovered over.
● A Broad Tool: Its flexibility means JS is not limited to just web applications but
can be applied across various platforms, including Photoshop.

JavaScript & Photoshop:

In the context of Adobe Photoshop, JavaScript can be employed to create scripts that
automate repetitive tasks, introduce generative techniques, and manipulate image
properties. Through scripting, you gain programmatic control over Photoshop's
functionalities, enabling complex manipulations without manual intervention.
What is Photoshop Scripting?

When we talk about "scripting" in the context of Photoshop, we're referring to the ability
to automate tasks and manipulate image properties without doing each step manually.
Think of it as teaching Photoshop a sequence of steps you want it to follow, so you don't
have to repeat them over and over.

Why Use Scripting?

● Efficiency: Handle repetitive tasks quickly. For instance, if you need to resize
and add a watermark to hundreds of images, a script can do that for you in
minutes.
● Consistency: Achieve uniform results. When applying the same changes to
multiple files, scripting ensures each file is treated exactly the same.
● Complex Manipulations: Go beyond basic actions. With scripting, you can
introduce conditions, randomness, or even interact with other software.

JavaScript and Photoshop:

While Photoshop supports a few scripting languages, we're focusing on JavaScript.
Using JS, you can:
● Control Layers: Hide, show, duplicate, merge, or even create layers based on
certain conditions.
● Modify Properties: Adjust layer opacity, blending modes, or transform
properties programmatically.
● Apply Effects: Use filters, adjust colors, or apply layer styles automatically.
● Interact with Files: Open, save, export, and organize your Photoshop
documents without manual intervention.
● Dynamic Value Adjustments: Change numerical values in Photoshop using
variables. For instance, you can introduce randomness to properties, making
each output unique. Instead of setting a static opacity value, you could use a
random number to make some layers more transparent than others
unpredictably.

Part 2: Basic JavaScript Concepts

Understanding some basic coding concepts can help you get the most out of JavaScript
for Photoshop scripting. Let’s demystify a few:

1. Variables: Think of variables as containers or boxes where you can store things
like numbers, words, or even lists. You give each box a unique name so you can
find what you stored in it later. Example:
 var layerName = "Background";

2. Data Types: JavaScript has different kinds of data you can work with:
Strings: Textual data, wrapped in quotes.
Example:
"Hello, world!"
Numbers: Both whole numbers and decimals.
Example:
25 or 3.14
Arrays: A list of items.
Example:
[1, 2, 3] or ["red", "blue", "green"]
Objects: Collections of related data.
Example:
var car = {color: "red", brand: "Toyota", year:
2022};

3. Functions: Functions are like mini-programs within your script. You can run
them whenever needed, and they can take inputs and return results.
Example:

function greet(name) {
return "Hello, " + name + "!";
}

4. Control Structures: These help you make decisions in your script or repeat
actions.
● If Statements: Let you make decisions based on conditions.
Example:

if (layer.opacity > 50) {

// do something
}

● For Loops: Repeat an action a certain number of times.

Example:

for (var i = 0; i < 10; i++) {

// repeat 10 times
}
Part 3: Photoshop Scripting Basics
Scripting in Photoshop allows you to automate tasks and create intricate manipulations
programmatically. Let's explore some foundational concepts:

1. Document & Layers: At the heart of any Photoshop script is the document and its
layers.
● Accessing the Current Document:

var doc = app.activeDocument;

● Working with Layers:

Select a layer by name:

var layer = doc.layers["LayerName"];

2. Manipulating Layer Properties: You can adjust various properties of layers, such as
visibility, opacity, and position.

● Changing Layer Opacity:

doc.activeLayer.opacity = 50; // Sets opacity to 50%

3. Selections: Scripting can help in making, modifying, and utilizing selections.

● Making a Selection:

var selectionBounds = [ [0,0], [100,0], [100,100],

[0,100] ]; // x, y coordinates
doc.selection.select(selectionBounds);

4. Applying Effects & Filters: You can apply various filters and effects
programmatically.

● Applying Gaussian Blur:

doc.activeLayer.applyGaussianBlur(5); // 5px blur

5. Scripting Listener: It's a tool provided by Adobe that can help you learn how certain
tasks can be scripted. When you do something in Photoshop, the Script Listener will
generate a corresponding script.
6. Debugging & Errors: Scripts, like any other piece of code, can sometimes have
mistakes or bugs. Understanding these errors and finding ways to fix them is an
essential part of the scripting journey.
● Using alert(): One of the simplest ways to check the value of a variable or to see
if a particular part of your code is running is to use the alert() function. It pops
up a little window with a message, which can be very helpful for understanding
what your script is doing. Example:

var layerName = doc.activeLayer.name;

alert("The active layer's name is: " + layerName);

● Photoshop Error Messages: When something goes wrong, Photoshop will often
give you an error message. These can provide clues about where and why your
script is having issues.

Part 4: Working with Random Numbers in

JavaScript and Photoshop
Incorporating random numbers can make your designs dynamic and unpredictable.
Here's how you can harness the power of randomness in your scripts:

1. Generating Random Numbers in JavaScript: JavaScript provides a built-in function

to generate random numbers.
● Math.random(): This function returns a random floating-point number
between 0 (inclusive) and 1 (exclusive). Example:

var randomNum = Math.random();

// Returns a value like 0.687123781203

2. Specifying a Range: Often, you'll want a random number within a specific range.

● Random Number Between 0 and a Maximum:

var max = 100;

var randomNum = Math.random() * max;
// Returns a number between 0 and 100

● Random Number Between a Minimum and Maximum:

var min = 50;

 var max = 150;
var randomNum = Math.random() * (max - min) + min;
// Returns a number between 50 and 150

3. Our Primary randomNumber Function: For our projects, we will be using a

predefined function to make this process easier and more consistent. Here's the
function:

function randomNumber(min, max) {

return Math.floor(Math.random() * (max - min + 1) +
min);
}

By using this function, we can easily generate random whole numbers within a specified
range by simply passing the minimum and maximum values as arguments. For example
if we wanted to set a layer opacity to a random number between 80 and 90:

var almostOpaque = randomNumber(80, 90);

doc.activeLayer.opacity = almostOpaque;

4. Applying Randomness in Photoshop: Random numbers can be used to give layers

random opacities, positions, sizes, and more.

● Random Opacity for a Layer:

var randomOpacity = Math.random() * 100;

// Between 0 and 100
doc.activeLayer.opacity = randomOpacity;

● Random Position for a Layer:

var randomX = Math.random() * doc.width.value;

var randomY = Math.random() * doc.height.value;
doc.activeLayer.translate(randomX, randomY);

5. Random Choices: Sometimes, you might want to make a random choice from a set of
predefined options.

● Choosing a Random Color:

var red = Math.floor(Math.random() * 256);

// Random value between 0 and 255
 var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);

app.foregroundColor.rgb.red = red;
app.foregroundColor.rgb.green = green;
app.foregroundColor.rgb.blue = blue;

Part 5: Best Practices & Tips

When scripting, especially as your scripts grow in complexity, it's essential to follow
best practices. This ensures your code remains efficient, readable, and less prone to
errors.

1. Debugging: Common Errors & How to Resolve Them:

● Syntax Errors: Often caused by typos or missing symbols. Ensure every opening
{, (, or [ has a matching closing }, ), or ].
● Type Errors: Make sure you're using the correct data types. For example, don't
try to change layer opacity using a text value.
● Use alert(): As discussed earlier, this function can be a simple tool to display
values or messages, helping you trace through your script.
● Read the Error Message: Photoshop will usually give you an error message. It
can often point you directly to the problematic line or give hints about the error
nature.

2. Staying Organized: Commenting Code and Keeping Scripts Readable:

● Commenting: Use comments to explain what different parts of your script do.
This can be invaluable when you come back to your script later or if someone
else needs to understand it. Example:

// This sets the layer opacity to 50%

doc.activeLayer.opacity = 50;

● Descriptive Variable Names: Instead of naming a variable ‘a’ or ‘b’, name it

‘layerOpacity’ or ‘imageWidth’ so it's clear what it represents.
● Use Indentation: Properly indenting your code makes it more readable. Most
code editors will help with this.
Part 6: Resources & Further Reading
Scripting in Photoshop can be a vast domain. As you continue your journey, here are
some valuable resources to dive deeper and refine your skills:

1. Photoshop's Scripting Guide & JavaScript Scripting Reference:

○ Adobe Photoshop Scripting Guide
○ Adobe Photoshop JavaScript Scripting Reference
2. JavaScript Learning Resources: Learning the ins and outs of JavaScript will
greatly enhance your scripting capabilities. Here are some recommendations:
Websites:
○ Mozilla Developer Network (MDN) JavaScript Guide
○ JavaScript.info
Books:
○ “JavaScript: The Definitive Guide” by David Flanagan
○ "Eloquent JavaScript" by Marijn Haverbeke
○ "You Don't Know JS" series by Kyle Simpson

3. Sample Scripts: Exploring existing scripts can provide inspiration and practical
insights. Here are some sample scripts. Located in the same folder as this pdf.
○ Randomize Layer Position: A script that takes all layers in a document
and randomly rearranges their positions.
○ Batch Color Correction: A script that applies a specific set of color
correction settings to all open documents or all layers in a document.
○ Auto-Export: A script that exports layers or documents into predefined
formats (e.g., JPEG, PNG) with specific settings.

Part 7: Alternative Platforms for Programmatic

Image Creation
Exploring beyond Photoshop and JavaScript, there are myriad platforms and languages
designed for programmatic image creation and manipulation. Each offers unique
capabilities tailored to various applications and user expertise levels. Delving into these
alternatives can expand your creative horizons and introduce you to new digital art
methodologies.

1. Processing: A language and IDE tailored for the electronic arts and visual design
realms.
Notable Features: Generative art, interactive graphics, animations.
Base Language: Simplified Java.
 Related: P5.js - a JavaScript spinoff for browser-based creations.

2. openFrameworks: An open-source C++ toolkit fostering the creative process.

Applications: Real-time interactive installations, 3D graphics.

3. Cairo: 2D graphics library compatible with diverse output devices.

Languages: C, Python (via PyCairo).

4. Magick++ (ImageMagick): Comprehensive toolset and library for image reading,

writing, and manipulation.
Base Language: C++ (Magick++). Other language bindings like Python
are available.
Related: Python's Pillow and Wand.

5. GIMP: A potent open-source raster graphics editor.

Scripting: Python-Fu, Script-Fu (Scheme-based).

6. Blender: Renowned for 3D modeling and animation but also valuable for 2D
image tasks.
Scripting: Python.

7. HTML5 Canvas & WebGL: Browser-centric graphics using the <canvas>

element.
Libraries: Three.js for WebGL.

8. GLSL: OpenGL Shading Language for writing shaders in graphics rendering.

Applications: Real-time generative graphics, post-processing.

9. Turtle Graphics: A graphical, command-based drawing approach.

Languages: Python, among others.

Note: When assessing a platform or tool, factor in its learning curve, your project
objectives, and the envisaged outcome. For image programming novices, Processing or
P5.js is often recommended, thanks to its user-friendly nature and vast community
support.