start of tutorial merging..

initial merges.. still need to do a very keen eye overpass for errors and content updates

Author: ffd8

tutorials/drawing_color/index.md

@@ -0,0 +1,212 @@
+---
+author: admin
+layout: drawing_color
+title: "Drawing and colors"
+---
+
+## General information
+
+- basil.js does not have a screen or canvas
+- You cannot draw pixels
+- Instead you add InDesign objects to your pages
+- These can be used normally within InDesign afterwards
+- And you can undo them!
+
+
+### 1. Filling the paper with a rect() by reading its size
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  println( "width " + width );
+  println( "height " + height );
+  rect(0, 0, width, height);
+};
+```
+
+- As there is no `background()` command in basil.js you should use `rect()` in order to change the background color.
+
+### How to account for margins or bleed settings
+
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+
+    noFill();
+    stroke(0, 255, 0);
+
+    canvasMode(MARGIN);
+    rect(0, 0, width, height);
+
+    canvasMode(PAGE);
+    rect(0, 0, width, height);
+    
+    canvasMode(BLEED);
+    rect(0, 0, width, height);    
+
+   //  the following examples only work for documents with facing pages
+
+   canvasMode(FACING_MARGINS); 
+   rect(0, 0, width, height);
+
+   canvasMode(FACING_PAGES);
+   rect(0, 0, width, height);
+
+   canvasMode(FACING_BLEEDS); 
+   rect(0, 0, width, height);
+
+}
+```
+
+- Using different canvas modes will position the origin of the coordinate system (think 0,0) to the appropriate spots in the canvas. 
+- Additionally `width` and `height` will be updated to reflect the new size of the canvas. 
+- You can still use other spots of the canvas with extreme coordinates as the canvas modes are not limiting you down to them.
+
+### 2. Generate several swatches with color() and paint with rect()
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+
+  colorMode(RGB); // this is the default anyways
+
+  // create new RGB color
+  var red = color(255, 2, 3); // variables can store data to be reused later
+  var green = color(0, 255, 0, "green");
+
+  fill(red);
+  rect(0, 0, width, 50);
+  fill(green);
+  rect(0, 50, width, 50);
+
+  // create new CMYK color
+  var magenta = color(1, 100, 3, 4);
+  var yellow = color(0, 0, 100, 0, "yellow");
+  var grey = color(100);
+  var lightGrey = color(5, "light grey");
+
+  fill( magenta );
+  rect(0, 200, width, 50);
+  fill( yellow );
+  rect(0, 250, width, 50);
+  fill( grey );
+  rect(0, 300, width, 50);
+  fill( lightGrey );
+  rect(0, 350, width, 50);
+
+  // get a color from document
+  var black = color("Black");
+  fill(black);
+  rect(0, 500, width, 50); 
+}
+```
+
+- `color()` can accept between one and five parameters.
+- basil.js uses the number of given color channels to decide whether to create a RGB or CMYK color.
+- If the arguments do not clearly define the desired type of color then the current basil.js color mode is used.
+- The default basil.js color mode is RGB
+- Please note that CMYK takes channel numbers between 0-100 where higher is darker (subtractive color), while RGB takes numbers between 0-255 where lower is darker (additive color).
+<!-- Exercise: Create a horizontal rainbow -->
+
+### 3. Using random() to pick a color and fill the background
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  // create new random RGB color
+  var newRandomColor = color(random(255), random(255), random(255));
+
+  // fill rect with it
+  fill(newRandomColor);
+  rect(0, 0, width, height);
+}
+```
+
+
+### 4. Using line() to create a cross
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  stroke(100);
+  strokeWeight(5);
+  // draw a cross 
+  line(0, 0, width, height);
+  line(0, height, width, 0);
+}
+```
+
+<!--  Exercise: Create a Haus of Nikolaus -->
+
+### 5. Using random() and ellipse() to fill the page with circles
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  var count = 23;
+
+  doc();
+  println(width + " x " + height);
+
+  for (var i = 0; i < 23; i++) {
+    var x = random(0, width);
+    var y = random(0, height);
+    var size = random(10, 123);
+    ellipse(x, y, size, size);
+  }
+}
+```
+
+- This creates confetti
+
+
+### 6. Using a for-loop and map() to create a gradient
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  var counter = 50;
+  noStroke();
+  var rectHeight = height/counter;
+
+  for (var i = 0; i < counter; i++) {
+    var y = map(i, 0, counter-1, 0, height - rectHeight);
+    var fillTint = map(i, 0, counter-1, 100, 0);
+
+    fill(fillTint);
+    rect(0, y, width, rectHeight);
+  }
+}
+```
+
+
+### 8. Using random() and nested for loops to create a matrix of lines 
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  var tileCount = 10;
+  var randomX = random(0, width);
+  var randomY = random(0, height);
+
+  strokeWeight(1);
+
+  for (var gridY = 0; gridY <= tileCount; gridY++) {
+    for (var gridX = 0; gridX <= tileCount; gridX++) {
+      var posX =  width / tileCount * gridX;
+      var posY = height / tileCount * gridY;
+      line(posX, posY, randomX, randomY);
+    }
+  }
+
+};
+```

tutorials/finding_help/index.md

@@ -0,0 +1,21 @@
+---
+author: admin
+layout: finding_help
+title: "Finding Help"
+---
+
+## InDesign scripting inspirations
+- [The "Jongware" reference](http://jongware.mit.edu/idcs6js/)
+- [InDesign Secrets](http://indesignsecrets.com/)
+- [Extendables](http://extendables.org/)
+- [Typography and Automation at FH Potsdam](http://fabiantheblind.github.com/Typography-And-Automation/)
+- [Fabian The Blind's Wiki](https://github.com/fabiantheblind/auto-typo-adbe-id/wiki)
+- [Fabian The Blind's Scripts](http://fabiantheblind.info/coding.html)
+- [Adobe InDesign Skriptwerkstatt (german)](http://www.hilfdirselbst.ch/foren/gforum.cgi?forum=61;)
+
+## Processing inspirations
+- [Creative Coding](http://www.creativecoding.org/)
+- [Processing](http://processing.org/)
+
+Please note the cheatsheets available on our [Downloads](../download/) page
+

tutorials/getting_started/images/install1.png

@@ -0,0 +1,39 @@
+---
+author: admin
+layout: getting_started
+title: "Getting Started"
+---
+
+## Installation
+
+Although basil.js scripts can simply be opened and run from ExtendScript Toolkit through the Finder / Explorer, you may wish to have access to our examples and your scripts within the Scripts window of InDesign.  
+
+1. Get the latest copy of basil.js from our [Downloads](http://basiljs.ch/downloads) section. 
+
+2. Use Finder (resp. Explorer) and create a folder called "basiljs" in the Documents folder of your home directory. This will be the central place where you store all basil related files. Please make sure that this folder matches *USER_FOLDER*/Documents/basiljs exactly. Note that the Documents folder might have a different name depending on your language setting and operating system, but that's ok.
+
+3. Place the bundle folder of the zip inside the new basiljs folder.
+
+4. Create a folder called "user" next to the bundle folder. Use this new folder for your projects and experiments. The separation of basil.js' internal and the user's files will make it easy for you to update to new versions by just overwriting the bundle.
+
+5. Open up InDesign and activate the Scripts panel from the menu. This should look like this:
+
+  ![Picture of Utilities menu](images/install1.png)
+
+  ![Picture of Scripts panel](images/install2.png)
+
+6. Right-click the "User" folder and click on "Reveal in Finder" resp. "Reveal in Explorer". 
+
+7. Create a Symbolic Link between your basiljs folder and the Scripts Panel folder by entering the following command in Terminal (/Applications/Utilities/):
+`ln -s basiljs_PATH Scripts_Panel_PATH`
+This can also be done by first entering `ln -s ` add a space, drag + drop your basiljs folder over the Terminal window, make sure there is another space and drag+drop the Scripts Panel folder. You'll see what looks like a normal alias, but is now recognized in InDesign CC 10+
+
+8. Check if InDesign has detected your basiljs folder:
+
+  ![Picture of basil.js with open bundle folders in Script panel](images/install3.png)
+
+9. Run one of the scripts in example/color to check if basil.js is installed correctly. Congratulations!
+
+## Overview
+
+Let's have a look at what is in the box. The file basil.js carries the actual library, it's a quite big file that you usually should not open unless you know what you are doing. The examples/ folder shows a number of little scripts that explain how the features of basil.js work and can be used as a good starting point. The lib/ folder is meant for external libraries that are bundled with basil.js and should not be used by users. If you want to add your own libraries you should put them into user/libraries instead. (Please note that the screenshot above shows a developer version of basil with more folders than you have received.)

tutorials/getting_started/images/install2.png

@@ -0,0 +1,56 @@
+---
+author: admin
+layout: hello_world
+title: "Hello World"
+---
+
+Open up the Adobe ExtendScript Editor, which is the script editor that comes with the Adobe Creative Suite. We will use this editor for our tutorials, but basically you could use any JavaScript editor.
+
+Create a new file and save it to helloworld.jsx within your user folder. Copy and paste the following code into your newly created file. 
+
+
+## Simple Hello World example
+
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  println( "Hello World!" );
+}
+```
+
+The include statements found in this examples always have to be at the very beginning of each basil.js file. They will load the actual library from your basil.js installation.
+
+Afterwards you will find two function blocks. setup() is pretty much the same as in Processing. It's the first user function that is called once right after your code is started. You should use this to initialize variables, etc. Afterwards the draw() function is executed. But unlike in Processing it is only called once, since basil.js is not interactive by default (There is an interactive mode available for advanced use though).
+
+Now run the script... either by pressing the play button from within the ExtendScript editor or by double-clicking your script from the InDesign scripts panel. You will be able to read an output in the console of the ExtendScript editor saying "Hello World!".
+
+No wonder, the statement
+
+```
+println( "Hello World!" );
+```
+
+is exactly meant for that. 
+
+Printing to the console is nice, but actually far from what basil.js is designed for. We should output our Hello World message to an InDesign textbox!
+
+---
+
+## Hello World example using a textbox
+
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  doc();
+  text("Hello World", 100, 100, 200, 50);
+}
+```
+
+This is exactly what the example above is doing. Paste it over your existing code and run it by pressing play or double-clicking it from the scripts panel after saving. A text frame object will be added to your existing document - or if none was existing, a new document will be created - and filled with the Hello World message.
+
+The `doc()` call makes sure that at least one document is open and the call to `text("Hello World", 100, 100, 200, 50);` will create a textframe with the default basil.js type settings (more on this in the typo tutorial), add it to the current layer and page, move it to 100, 100 (using the basil.js' default units), size it to 200, 50 and fill it with "Hello World!"
+