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

• Download Sublime Text 3;
• In Sublime Text, top navigation bar, go to "Tools", "Command Palette";
• Select "Package Control: Install Package";
• Choose "Run in inDesign"
• Under "Tools", there's a new option: "inDesign Tools", "Run in InDesign".
  Shortcut: Cmd+E / Ctrl+E
  The first time you run it, it will ask you to find desired version of InDesign.

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

---

Using Visual Studio Code (MacOS Catalina users)

• Download Visual Studio Code;
• Open Extensions Menu (Cmd+Shift+X or Ctrl+Shift+X);
• Type and Install "Adobe Script Runner" and "Extendscript Debugger";
• On the bottom purple bar, select target application to Adobe inDesign;
• This step only needs to be done once.
  Press Ctrl/Cmd+K followed of Ctrl/Cmd+S to open the Keyboard Shortcut pages;
  Type Adobe After Effects, right click on it and "Remove Keybinding";
  Type Adobe inDesign, right click on it and "Add Keybinding";
  Press the command that you would like to save to run your scripts into inDesign (e.g. Cmd+R).

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

1. // @includepath ~/Documents/;%USERPROFILE%Documents;
2. // @include basiljs/basil.js;
4. function draw() {
7. }

---

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

1. println("hello world"); // says hello world in our console
2. alert("hello world"); // prompts an hello world pop-up in inDesign

---

Setup Preferences
A few helpful settings to consider:

1. layer("myLayer"); // creates layer called 'myLayer' and draw our items there
2. clear(layer("myLayer")); // clears all items on a layer - good to refresh the page when running the script
4. units(IN); // sets units to inches (can use PTS, PX, MM)
6. canvasMode(MARGIN); // sets 0,0 and width/height to our margins (PAGE, BLEED, ...)

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:

1. var myNumber = 14; // integer (whole number)
2. var myFloat = 14.333; // float (decimal number)
3. var myString = "Hi"; // string = text
4. var myChar = 'a'; // single character
5. var myBoolean = true; // boolean = true or false, used for if statements

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:

1. var myText = "Hi";
2. text text(myText,0,0,5,5);
3. myText = "This is Basil.JS!";
4. text(myText,0,5,5,5);

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

1. var myText = "Today is ";
2. var date = weekday();
3. text(myText+date,0,5,5,5);

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:

1. var mySize = 10; // generate random value between 0 — 50
2. ellipse(mySize, width-mySize,mySize,mySize) // use value to avoid edges + circle

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:

1. var myText = text("Hi",0,0,5,5); // draw text frame
2. typo(myText, "pointSize", random(1,20)); // change font size randomly between 1 and 20

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':

1. var myRandom = random(100); // generates value between 0 – 100
2. if(myRandom < 50){ // is the new value less than 50? » like flipping a coin
3.    // if so, run any code between these { brackets }
4. }

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

1. var a = 50;
2. var c = 25;
3. if(a == c){ // note the two ==, checks IF equal
4.    // do something if true
5. }
6. /* CONDITIONALS:
7. a == c // equal
8. a === c // equal and same data type (ie. number + number)
9. a != c // not equal
10. a > c // bigger than
11. a < c // smaller than
12. a >= c // bigger or equal
13. a <= c // smaller or equal
14. */

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

1. var a = 25; // set a to value of 25
2. if(a == 25){ // do this code if a EQUALS 25
3.    // do something if true
4. } else{
5.    // do this code if not
6. }

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

1. var a = 2; // set a to value of 25
2. if(a == 1){
3.    // do this code if a EQUALS 1
4. } else if(a == 2){
5.    // do this code if a EQUALS 2
6. } else if(a == 3){
7.    // do this code if a EQUALS 3
8. } else{
9.    // do this code if none are true
10. }

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

1. var a = random(100);
2. var c = random(100);
4. if(a > 50 && c < 75){ // if BOTH are true
5.    // do this code
6. }
8. if(a > 50 || c < 75){ // if EITHER are true
9.    // do this code
10. }

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:

1. var a = 10;
2. var c = 5;
3. var d = a + c;
4. println(c);
5. d = a - c;
6. println(d);
7. d = a * c;
8. println(d);
9. d = a / c;
10. println(d);
11. d = a * c + c/a - a;
12. println(d);

Allow variables to grow:

1. var a = 5;
2. var c = 10;
3. var d = 15;
4. println(d);
5. d += a; // adds 5 to the existing 15; // same as d = d + a;
6. println(d);
7. d += c; // adds 10 to the existing 20;
8. println(d);

Percentages vs Fractions:

1. var half = width * .5; // width/2 // 50%
2. var quarter = width * .25; // width/4 // 25%
3. var tenPercent = width * .1; // width/10 // 10%
4. var third = width/3; // 1/3rd // 33.3333%

Rounding off:

1. var a = 5.25;
2. var c = 99.9;
3. var d = round(c/a) // 5+ rounds up, 4- rounds down
4. println(d);
5. d = floor(c/a) // always rounds down
6. println(d);
7. d = ceil(c/a) // always rounds up
8. println(d);

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

1. for(var i=0; i < 20; i++){
2.   if(i%2==0){
3.     // i went into it without leftovers = these are even numbers
4.   }
5. }

---

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.

1. // map(inputVal, inMin, inMax, outMin, outMax);
3. rectMode(CENTER);
4. var loops = 20;
5. for(var i = 0; i < loops; i++){
6.    var rx = map(i, 0, loops-1, 25, width);
7.    var ry = map(i, 0, loops-1, 25, height);
8.    var rs = map(i, 0, loops-1, 25, 5);
9.    var rc = map(i, 0, loops-1, 255, 0);
10.    fill(rc);
11.    var box = rect(rx,ry,rs,rs); // random horizontal position
12. }

---

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:

1. for(start; end; count){
2.    // run this code x looped times
3. }

For-loop example:

1. for(var i = 0; i < 50; i++){
2.    println(i); // outputs 0-19
3. }

Drawing circles with for-loop:

1. for(var i = 0; i < 50; i++){
2.    var rx = random(width); // random horizontal position
3.    var ry = random(height); // random vertical position
4.    var rs = random(0.1,2); // random size between 0.1 and 2
5.    var rc = random(255); // random grayscale value
6.    fill(rc);
7.    var circle = ellipse(rx,ry,rs,rs); // random horizontal position
8. }

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.

1. var grid = 10; // random horizontal position
2. for(var i = 0; i < grid; i++){
3.    for(var j = 0; j < grid; j++){
4.       var sw = width/grid;
5.       var sh = height/grid;
6.       var x = map(j, 0, grid-1, 0, width-sw);
7.       var y = map(i, 0, grid-1, 0, height-sh);
8.       var r = rect(x,y,sw,sh);
9.   }
10. }

---

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

1. // an array is known by using [, ] structure:
2. var someNumbers = [5,20,42,29,105]; // random horizontal position
4. println(someNumbers); // list all items
5. println("2nd Index: " + someNumbers[1]); // list 2nd index (0 = 1st index, 1 = 2nd index, etc.)
6. println("Last Index: " + someNumbers[someNumbers.length-1]); // last index! arrayName.length = number of items in array.
7. println("Random Index: " + someNumbers[round(random(someNumbers.length))]); // last index! arrayName.length = number of items in array.

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

1. var someNumbers = [1,3,2,4,.5]; // random horizontal position
2. var previousSize= 0; // store previous value
3. for(var i = 0; i < someNumbers.length; i++){
4.    println(someNumbers[i]);
5.    rect(0, previousSize, vals[i], vals[i]);
6.    previousSize += vals[i]; // add on previousSize (vertically)
7. }

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

1. var myData = []; // empty array
2. for(var i = 0; i < 15; i++){
3.    myData.push(random(1,100));
4. }
5. inspect(myData);

---

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:

1. // an object is known by using {, } structure; Using name:value pairs (separated by a colon); Separate properties with a comma
3. var car = {type:"Fiat", model:"500", color:"Black"};
5. // use blank space to keep it organized
6. var person = {
7.    firstName:"John",
8.    lastName:"Doe",
9.    age:50
10. };
12. inspect(car); // list all items
14. println(car.type);
15. println(car["type"]); // same as above

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:

1. println(garage.level[2].cars[10].color);

Drawing Shapes

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

1. // line(x1, y1, x2, y2);
2. var myLine = line(0,height*.5, width, height*.25);
4. // ellipse(x, y, width, height);
5. var myEllipse = ellipse(width*.5,height*.5, 2, 2);
7. // rect(x, y, width, height);
8. var myRect = rect(width*.25,height*.25, 3, 3);
10. // complex shape, path of points
11. beginShape();
12.   vertex(1,1);
13.   vertex(3,5);
14.   vertex(2,4);
15.   vertex(7,2);
16.   // as many vertex(x, y); as you want
17. var myShape = endShape();

---

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

1. // color(R, G, B); = full color
2. // color(150) = grayscale
3. var myColor = color(200,0,0); // create a red color
4. fill(200,0,0); // set color of fill directly
5. fill(myColor); // use color() variable
6. noFill(); // turns off fill = none
8. stroke(0,0,200); // set color of stroke directly
9. stroke(myColor); // use color() variable
10. noStroke(); // turns off stroke = none
11. strokeWeight(5); // sets thickness of stroke
13. rectMode(CENTER); // draw rectangles from center out. default is CORNER = upper left
15. var myShape = rect(2,2,5,5); // declare shapes after the style attributes

---

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

1. var myShape = rect(2,2,5,5); // can now talk to it as 'myShape'
2. property(myShape, "fillColor", color(200,0,0)); // same as previous fill()
3. property(myShape, "fillColor", "None"); // same as noFill()
4. property(myShape, "strokeColor", color(0,0,200)); // same as stroke()
5. property(myShape, "strokeColor", "None"); // same as noStroke()
6. property(myShape, "strokeWeight", "5"); // same as strokeWeight

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

1. var myShape = rect(2,2,5,5);
2. var myStyle = {
3.     strokeWeight:25,
4.     strokeColor:gradient(color(200,0,0),color(200,200,0)),
5.     fillColor:gradient(color(200,200,0),color(200,0,0)),
6.   }
7. property(myShape,myStyle);

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:

1. //imageMode(CENTER); // similar to rectMode();
2. var img = image('image.jpg',0,0); // image(filename, xPos, yPos)
3. var img = image('image.jpg',0,0,width,height); // additional params: width, height
4. var img = image('image.jpg',obj); // place image into rectangle, ellipse, polygon

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

1. var imgPath = file('~/Pictures/image-example.jpg');
2. var img = image(imgPath,0,0);

---

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

1. var url = "https://raw.githubusercontent.com/basiljs/basil.js/master/lib/basil.png";
3. // download image to a relative path (/data)
4. download(url,"downloads/basil.png");
5. var img = image("downloads/basil.png", 0, 0, width, height);
7. // download image to an absolute path
8. var newFile = file("~/Documents/basiljs/user/downloads/basil.png");
9. download(url,newFile);
10. var img = image(newFile, 0, 0);

---

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

1. // point to folder of images + load them
2. var imgsDir = folder("/Library/Desktop\ Pictures");
3. var imgs = file(imgsDir, {filter: ["jpeg", "jpg"]}); // optional filetype filter
4. println("imgs found: " + imgs.length);
6. // loop through list and do something per image
7. for(var i = 0; i < imgs; i++){
8.   var img = image(imgs[i], 0, 0, width, height);
9.   addPage();
10. }

---

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

1. var img = image("photo.png", 0, 0, 10, 10);
2. img.fit(FitOptions.FILL_PROPORTIONALLY);
3. /*
4. FitOptions.CONTENT_TO_FRAME
5. FitOptions.CENTER_CONTENT
6. FitOptions.PROPORTIONALLY
7. FitOptions.FRAME_TO_CONTENT
8. FitOptions.FILL_PROPORTIONALLY
9. FitOptions.APPLY_FRAME_FITTING_OPTIONS
10. */

---

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

1. var img = image("photo.png", 0, 0, 10, 10);
2. var img2 = image("photo2.png", 0, 5, 10, 10);
3. blendMode(img2, BlendMode.LIGHTEN);
4. /*
5. BlendMode.NORMAL
6. BlendMode.MULTIPLY
7. BlendMode.SATURATION
8. BlendMode.OVERLAY
9. ...
10. */

---

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:

1. var img = image("photo.png", 0, 0, 10, 10);
2. img.graphics[0].verticalScale = 25;
3. img.graphics[0].horizontalScale = 25;
4. img.fit((FitOptions.CENTER_CONTENT);

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.

1. // text(string, x, y, width, height);
2. var myText = text("Hello",0, 0, width, height); // full page textframe
3. var myText2 = text("Hello",0, 0, 2, 2); // small textframe
4. var myTextPath = text(LOREM,obj); // place text on path or in polygon

---

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

1. textFont("Georgia", "Bold"); // font family, comma, specific style
2. textSize(50); // set font size
3. textLeading(110); // set font leading
4. textTracking(20); // set font tracking
6. var myText = text("Hello! \n Goodbye!",0,0,width,height); // \n = new line

---

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

1. var myText = text("Hello",0,0,5,5); // reference it as 'myText'
3. typo(myText, "appliedFont", "Georgia Bold"); // change font family and style
4. typo(myText, "pointSize", 50); // change font size
5. typo(myText, "leading", 110); // change font leading
6. typo(myText, "tracking", 20); // change font tracking

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

1. text.fit(FitOptions.FRAME_TO_CONTENT);

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.

1. typo(sel, "hyphenation", false);

Each line:

1. lines(sel,function(obj,c){
2.   // 'obj' is each line
3.   // 'c' is counting each object 0..1..2..
4.   typo(obj, "pointSize", random(1,50));
5. });

Each word:

1. words(sel,function(obj,c){
2.   // 'obj' is each word
3.   // 'c' is counting each object 0..1..2..
4.   typo(obj, "pointSize", random(1,50));
5. });

Each character:

1. characters(sel,function(obj,c){
2.   // 'obj' is each character
3.   // 'c' is counting each object 0..1..2..
4.   typo(obj, "pointSize", random(1,50));
5. });

---

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 😊

1. var objCount = characters(sel).length; // store how many there are
2. characters(sel,functionobj,c{
3.    // 'obj' is each character
4.    // 'c' is counting each object 0..1..2..
5.   typo(sel, "strokeColor", color(0)); // set stroke to a color
6.   typo(sel, "strokeWeight", map(c, 0, objCount-1, 0, 10)); // smoothly change value
7. });

---

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

1. applyParagraphStyle(obj,"StyleName");
2. applyCharacterStyle(obj,"StyleName");
3. applyObjectStyle(obj,"StyleName");

---

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.

1. // start with some text
2. textSize(200);
3. textAlign(Justification.CENTER_ALIGN, VerticalJustification.CENTER_ALIGN);
4. var tf = text("Hi",0,0,width,height);
6. var outlines = createOutlines(tf);
8. addPoints(outlines,5); // optionally increase amount of points
10. property(outlines,"fillColor","None"); // optionally hide original outlines
12. // get points (coordinates) from outline
13. var pts = points(outlines); // // array of the outline points
14. println(pts.length); // check how many points you have (.length = size of array)
16. // loop through points
17. for(var i = 0; i < pts.length; i++){
18.   // pts[i].x , pts[i].y = x , y coordinates of point!
19.   var s = random(0.25,2);
20.   ellipse(pts[i].x,pts[i].y,s,s);
21. }

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.

1. var sel = selection();
2. //transform(sel, "position", [random(width), random(height)]);

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

1. var sel = label("labelName"); // be sure the label has the same name, 'myObject'
2. //transform(sel, "position", [random(width), random(height)]);

---

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.

1. selections(function(obj,c){
2.    // 'obj' is each item
3.    // 'c' is counting each object 0..1..2..
4.    // transform(obj, "size", [random(5), random(5)]);
5. });

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

1. selections("box",function(obj,c){
2.    // 'obj' is each item
3.    // 'c' is counting each object 0..1..2..
4.    // transform(obj, "size", [random(5), random(5)]);
5. });

Select multiple objects in a specific layer:

1. items(layer("shapes"),function(obj,c){
2.    // 'obj' is each item
3.    // 'c' is counting each object 0..1..2..
4.    // transform(obj, "size", [random(5), random(5)]);
5. });

---

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

1. transform(obj, "position", [2,0]); // only move the x position
2. transform(obj, "position", [0,5]); // only move the y position
3. transform(obj, "position", [width/2,height/2]); // move both x and y position
4. transform(obj, "width", 5); // only change the width
5. transform(obj, "height", 5); // only change the height
6. transform(obj, "size", [5,5]); // change both width and height
7. transform(obj, "rotation", 45); // change rotation of item
8. transform(obj, "shearing", 15); // change shear of item
10. // change reference/anchor point for any transformations
11. referencePoint(CENTER); // set reference point (`TOP_LEFT`, `TOP_CENTER`, `TOP_RIGHT`, `CENTER_LEFT`, `CENTER`, `CENTER_RIGHT`, `BOTTOM_LEFT`, `BOTTOM_CENTER`, `BOTTOM_RIGHT`)
12. transform(obj, "rotation", 45); // change rotation of item

---

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

1. var bnd = bounds(sel); // sel should be your selected item
2. //inspect(bounds); // shows us the available values in the console
3. line(0,0, bnd.left, bnd.top);
4. line(0,0, bnd.right, bnd.bottom);
5. line(width,height, bnd.right, bnd.top);
6. line(width,height, bnd.right, bnd.bottom);

---

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

1. var myCopy = duplicate(obj);
2. // myCopy.fillColor = color(random(255));
3. remove(obj); // deletes selected item
4. clear(doc()); // clears entire document
5. // clear(page()); // clears current page
6. // clear(layer("myLayer")); // clears layed called 'myLayer'

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!

1. // random(high); // random value from 0 - high
2. // random(low, high); // random value from low - high
4. var randomX = random(width); // anywhere across width of page
5. var randomY = random(height); // anywhere across height of page
6. var circle = ellipse(randomX,randomY,2,2);
7. var circle2 = ellipse(width/2,height/2,randomX, randomY);

---

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

1. if(random(1) < .5){ // create random number to 1, if it's less than .5 = 50% chance
2.    // do something if it's true
3. }else{
4.    // do something else if it's false
5. }

---

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

1. addPage(); // simply adds a new blank page
2. var dupPage = duplicate(page());
3. page(); // is the current page
4. page(15); // jumps to specific page for working on

---

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

1. pageCount(1); // clear any previous pages
2. noFill();
3. var numPages = 100;
4. for(var i = 0; i < numPages; i++){
5.    beginShape(); // start our shape
6.      for(var j = 0; j < 5; j++){
7.        // we add ## of points to the shape
8.        vertex(random(width),random(height));
9.      }
10.   endShape();
11.   addPage();
12. }

Export Files

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

1. PDF
2. savePDF(timestamp()+".pdf"); // exports file with current/latest PDF settings
3. savePDF(timestamp()+".pdf", true); // brings up dialog box for PDF settings
5. PNG
6. savePNG(timestamp()+".png"); // exports file with current/latest PNG settings
7. savePNG(timestamp()+".png", true); // brings up dialog box for PNG settings

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)

1. var apiKey = "your api key"; // received by email after signing up
2. var nytJSON = loadString("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=" + apiKey);
3. // var nytJSON = loadString("nytimes_comments.txt"); // offline json
4. var nyt = JSON.parse(nytJSON); // decode json to object
5. var data = nyt.results; // use data.length for # of results
6. inspect(data[0]); // inspect is necessary for objects

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:

1. // turn result into var
2. var article = data[0];
3. // title
4. var artTitle = article.title;
5. // abstract
6. var artAbstract = article.abstract;
7. // published date
8. var artPub = article.published_date;
9. // sections + subsection
10. var artSection = article.section;
11. var artSubsection = article.subsection;
12. // url
13. var artUrl = article.url;

Images:

1. // image, array of various sizes
2. var imgs = article.multimedia;
3. // thumbnail image (75px)
4. var thumb = article.multimedia[0].url;
5. // hi-res image (> 1000px)
6. var thumb = article.multimedia[4].url;
7. // meta data
8. var caption = article.multimedia[4].caption;
9. var copyright = article.multimedia[4].copyright;
10. var imgWidth = article.multimedia[4].width;
11. var imgHeight = article.multimedia[4].height

---

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

1. for(var i = 0; i < data.length; i++){
2.   var article = data[i]; // temp var to keep things clean
3.   textSize(map(i, 0, data.length, 10, 50)); // map text size based on count
4.   varmyHeadline = text(article.title, 0, 0, width, height); // draw text
6.   // only add page if not last
7.   if(i < data.length-1){
8.     addPage();
9.   }
10. }

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

1. // only download if there are images
2. if(article.multimedia.length > 0){
3.   download(article.multimedia[1].url, "img_"+i+".jpg");
4.   var pict = image("img_"+i+".jpg", 0, 0, width, height);
5. }

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.