Pedro Neves
Visiting Assistant Professor
pneves2@uic.edu


DES319
Typography IV: Basil.JS
Spring 2019

Monday + Wednesday 9:00 – 11:40 a.m.

Course Description

Creative Coding and Typography. Using a scripting library - basil.js -, students will have the possibility of exploring traditional typographic features through programming. Basil.js is a tool to kick off interest in creative coding within Adobe InDesign, expand existing typographic knowledge, and open a path of further exploration and experimentation.
DES 319 Syllabus

Objectives & Goals

Manipulate advanced typographic features in digital environments.
Write simple scripts and form your own algorithms.
Create tools and define rules to generate typographic systems or systematic typographic manipulations.
Develop logical and mathematical reasoning, applying it in the design process.

Technology

Important Information: We will be using the development branch of basil.js, the version 2.0! The 'b.' has been removed but the website, references & tutorials are still a work in progress... Any time you see a 'b.' in examples/tutorials/references, just remove it. Please just bare with me if there are any additional problems.

RESOURCES

Uselful Links
Here are some of the main links you'll need:
basil.js website // basil.js project
basil.js *DEV* reference // list of all most basil.js functions and usage
basil.js *DEV* tutorials // learn about things we don't have time for here!
typo extended use // list from JONGWARE text properties for typo function
JONGWARE // the motherload for InDesign scripting access
BJS GITHUB // Basil.JS Development Repository

Cheat Sheets (©Ted Davis)
basil.js cheatsheet v2 // 1 page reference to commonly used functions
typo cheat-sheet // 2 pages of common type properties that typo can change


Uselful Books & Articles
Gross, Benedikt. Bohnacker, Hartmut. Generative Design. Princeton Architectural Press, 2018.
Reas, Casey. Form+Code in Design, Art and Architecture. P.A.P., 2010.
Elam, Kimberly. Typographic Systems. P.A.P., 2007.
Maeda, John. Design By Numbers. MIT Press, 1999.

Setup + Getting Started

Download the Basil.JS 2.0 Dev. Package (to "install" Basil.JS, just paste the basiljs folder into your root Documents folder)

02.10: Latest Basil.JS Source Code Version


Using Sublime Text 3

Note: We still need to have ExtendScript Toolkit open in the background.


Using Visual Studio Code (MacOS Catalina users)

Note: This method only works if ExtendScript Toolkit is not installed.

Template

Each script starts with the following template. Please note that without including the first two lines of code, the library won't work.
Paste it into a new document in your text editor (Sublime Text or Visual Studio Code):


Hello World
Every programming language starts by saying hello to the world:


Setup Preferences
A few helpful settings to consider:

Javascript Basics

Variables
Variables let us reference a value for usage throughout our code, usually placed multiple times, allowing us to change it on demand, and have each reference automatically updated.
There are a handful of variable types, they all begin with var, can be named 'almost' anything you want, but avoid spaces and note they are caseSensitive in naming and usage:

Variables need to be declared the first time you use them with a 'var' at the front, afterwards you can change their value by simple setting them to equal a new value:

Combine variables (javascript automatically figures out how to join string + number):

If you are writing the same 'hard value' (ie. 50) multiple times, you should probably use a variable to save yourself time if later changing your mind. You also use them whenever parts of the code need to react to each other:

We also use variables to let us reference any object we create. If we simply draw text with text(); – we have no way to talk to it. But making it a variable, we can then reference that object for further coding:

The more variables you use, the more flexible your code will be!


If Statements
It's very common to check values against each other and react accordingly. Is this value bigger than that one? Does this value equal this one? For that we use an 'if statement':

There are a handful of ways we can ask these questions, they are known as conditionals:

Once we asked that question, we can default to an 'else' (otherwise):

OR we can ask yet another question to catch the value in various values:

We can also combine these questions, to be more specific, known as AND/OR logic:

Think of if statements as filters. We don't want all code to run on all things. Maybe you want to check if some text == other_text, or in a loop, to see if you are on an even count for reacting to every-other iteration.


Math
Even though we're designers, some math is good for us!
Through practice you will get good at basic programmed math:

Allow variables to grow:

Percentages vs Fractions:

Rounding off:

Modulor (%) — Usually used to determine even/odd (every other) within a loop:


Mapping:
Map lets us scale the range (min, max) of value from an old (in) one to new (out) one. Think of a funnel - big at the top, small at the bottom.. scales pouring. This becomes especially useful while in a loop to automatically calculate increments.


Loops
Why draw one thing when you can draw 1,000,000?! Take advantage of the computer to create many objects instead of one.

For-loop abstraction:

For-loop example:

Drawing circles with for-loop:

Loops within loops!? It's also common to place two loops within each other, so it does one looped task, multiple times, either to add a page, or for a grid. however we need to use different variable names within the loop to avoid overlap.


Arrays
Array's are amazing for keeping track of a group of variables, objects, overall data. You can create an array from scratch:

It's typical to then process an array and do something with each value in it:

We can also add data to an array, either existing or from scratch:


Objects
Objects are similar to variables, but they can contain many other variables and functions. one analogy is a car with all its parts:

How to create an object from scratch:

An object can go many levels deep, containing more objects or arrays of objects. Think of cars in a parking garage. an array of levels, each having an array of cars, each containing the details of that car. Here some pseudo code reaching a single car within a level of a garage:

Drawing Shapes

Basic Shapes
Here are a handful of shapes we can draw to the canvas:


Pre-Styling Shapes
Used to set the appearance before drawing any shapes:


Post-Styling Shapes
We can change any property of a shape or pageItem using our new property() function:

You can also set multiple properties at once by feeding it a javascript object:

Adding Images

Local Images
First save your indesign document and create a folder next to it called 'data'. Place some images in there, and load using a relative path:

Now load an image anywhere on your computer using its absolute path:


Remote Images
First save your indesign document so the images can be downloaded — MacOs only 🙁


Folders
We can even load a whole folder of images! find one on your computer and adjust code:


Image Fitting
Fit the image within its frame using various fit() options:


Image Blend Mode
Easily change the blendmode/effect of an image:


ImageFrame
To adjust the actual image within the imageframe, we talk to its 'graphics'. Here we can center position the image, scaled at 25% of the frame:

Drawing Type

TextFrame
there's just one line of code needed to draw text and you've already learned it! It's up to you what text goes in there, where the box sits and how big it is.


Pre-Styling Type
We can set type styles before drawing our textframe:


Post-Styling Type
we can also change the type after drawing it, by referencing its variable:

Once the type is stylized, you can resize the textFrame to match the content inside:

There are MANY more things we can do to the type! Check out the typo cheatsheet!

Modifying Type

Splitting Type
Once you have a newly generated or existing textFrame in selection, ie. 'sel', we can break it down into the following sections. Note: in some cases it's best to turn off hyphenation so it can find full words.

Each line:

Each word:

Each character:


Mapping Type
We can make smooth transitions if we store how many objects there are and map values. This would work with any section above, simply change lines -> words -> characters. Explore the many possibilities of the typo() function 😊


Apply Styles
It's possible to apply character or paragraph styles to any text/textframe you are talking to:


Outline Type
Let's play with the points of each letter. Once we break it down by points, we'll need to study up on arrays + the basics. Note: this can slow down the render time of your script.

Selection + Modification of Items

Single Selection
If we want to change/modify just one single item from our existing indesign document, once selected, use any of the 'post-style' attributes from the previous lessons. Simply click on the item before running the script.

Script label — open 'script label' window and give a name there:


Multiple Selection
Or you might want to grab a group of objects and change them all. Once we select the items, we combine a function to cycle through each object. Within that loop, use the 'post-style' attributes to modify each object. Start by clicking on the item before running the script.

Script labels. Select multiple items and give the same script label, ie. 'box':

Select multiple objects in a specific layer:


Modifying/Transforming Objects
We can change newly created items or existing and selected items in a handful of ways:


Geometric Bounds
Grab an items geometric bounds on the page (left, right, top, bottom, width, height):


Copy/Cut & Paste
We can easily duplicate or remove/clear unnecessary items:

Generative Transformations

Random
We can take advantage of the computer's logic by letting it perform pseudo-random... Helping create things we would NEVER think of doing or trying!


50/50 Chance
Flip a coin to decide things by generating a random number and checking it's value.


Page Control
There are plenty of things to do with InDesign pages:


Generative Book
Want 100 pages of generative shapes? it just takes a few lines of code:

Export Files

Export PDF or PNG
You must first save your inDesign document before exporting a PDF or PNG:

Data Management & Vizualization

Data FileTypes
Basil.js gets fancy when loading online data for data-viz + generative layouts.

The most common formats for passing data are:
- CSV | comma, separated, values | from spreadsheet
- JSON | javascript object notation | usually info from the web
- XML | extensible markup language | older format, JSON basically replaced it

They'll contain an array of records, each with many properties.


API
An API, or application program interface, is a programmable way that we can tap into the data of most online servies. youtube, facebook, instagram, google maps, twitter, etc etc. – all provided varying degrees of access to their databases. some require authentication (username + password) for doing automated actions to ones own account, other are available to the general public for meta/trending/statistical info via a key.

List for free APIs, ProgrammableWeb


New York Times API
We'll use NYTimes Top Stories, it's well documented and free for 1,000 calls per day.
Sign up here for free: NYTimes API


Load Data
Remotely call the API for data as a string, then process it into a JSON object:
(PC users, use this special function)

Inspect returns:
|-- abstract
|-- byline
|-- created_date
|-- des_facet
|-- geo_facet
|-- item_type
|-- kicker
|-- material_type_facet
|-- multimedia
|-- org_facet
|-- per_facet
|-- published_date
|-- section
|-- short_url
|-- subsection
|-- title
|-- updated_date
|-- url

Read the Javascript Basics Objects section and use syntax of objectName.propertyName examples below are just for the first [0] result:

Images:


Process Data
If any value is an array, use a loop to cycle through it:

'multimedia' is an array of sizes from thumbnail [0] to hi-res [4] place in loop above right below declaring 'var article = ...'
Be sure to save InDesign document first + might only works on MacOS...

Combine this with what we've covered so far in previous lessons! :-)

Assignment

Basil.JS Exercise: NYTimes API Brief

Basil.JS Exercise: 36 Days of Type Brief

Assignment Poster for Tomorrow 2020

Class Files

DATA, API, NYTIMES API, LOAD DATA, PROCESS DATA

01.29: Javascript Basics Part 1

02.03: Javascript Basics Part 2

02.05: Javascript Basics Part 3

02.10: Type Manipulation

02.12: Images+Generative

02.19: Data Import

03.11: Type Outlines

Schedule (Subject to change at the instructor’s discretion)

Week 1 → 13 + 15 Jan. 2020
Course introduction; inDesign features: options and possibilities.

W2 → (20 Jan. M.L.K. Day) + 22 Jan. 2020
Basil.JS setup: hello world.

W3 → 27 + 29 Jan. 2020
Javascript basics: variables, if statements, math.

W4 → 03 + 05 Feb. 2020
Javascript basics: loops, arrays, objects.

W5 → 10 + 12 Feb. 2020
Basil.JS basics: drawing shapes, images and type.

W6 → 17 + 19 Feb. 2020
Basil.JS typography: manipulating type.

W7 → 24 + 26 Feb. 2020
Basil.JS Exercise: NYTimes API Brief.

W8 → 02 + 04 Mar. 2020
Basil.JS Exercise: NYTimes API.

W9 → 09 + 11 Mar. 2020
Basil.JS Exercise: 36 Days of Type.

W10 → 16 + 18 Mar. 2020
Spring Break.

W11 → 23 + 25 Mar. 2020
Spring Break.

W12 → 30 Mar. + 01 Apr. 2020
Basil.JS Exercise: 36 Days of Type. (ONL)

W13 → 06 + 08 Apr. 2020
Assignment (T.B.C.) (ONL)

W14 → 13 + 15 Apr. 2020
Assignment (T.B.C.) (ONL)

W15 → 20 + 22 Apr. 2020
Assignment (T.B.C.) (ONL)

W16 → 27 + 29 Apr. 2020
Final presentation + documentation + submission. (ONL)

Attendance + Grading

Students who are actively engaged in class sessions are more likely to be successful. You are expected to attend each class session and to be on time. If you are sick, especially contagious, do not come to class. This is an excused absence. Notify the instructor via e-mail.

Students who accumulate 3 or more unexcused absences may be asked to withdraw from class and/or risk receiving a failing grade. After 2 unexcused absences your grade may be adjusted downward one letter grade for each additional absence.

Students are required to attend class for its full duration. Valuable information, demonstrations, lectures and announcements typically take place at the start of class. Arriving on time and being prepared to work are essential factors for productivity. Being late, leaving early, or missing a critique will negatively impact your performance. Missing demonstrations or lectures will set you behind from the rest of the students. In case of an absence, it is your responsibility to make up any material introduced in class.

All work must be received by the set deadlines. Late or incomplete work will not be accepted, except in extreme circumstances, with the instructor’s approval.

Grading is based on the aesthetic quality and craft of the work, as evidenced in the finished pieces; the course of research and/or process of design exploration pursued to achieve the finished pieces, as evidenced by your work in process; attendance and class participation.

Grading percentages: Project development/Research process/Sketches (60%); Final execution/Output (30%); In class participation and preparation (10%);

Acknowledgments

Special Thanks to Ted Davis & Basil.JS Development Team for all the documents, links and support that was necessary to put this website together.