merging tutorials

- renumbered to match website
- still needs review for content, links, references, etc.

Author: ffd8

assets/files/basiljs_b_typo_cheatsheet_v0_2.pdf

@@ -1,7 +1,7 @@
 ---
 author: admin
 layout: tutorial
-title: "Syntax check basil.js vs. Processing"
+title: "Syntax Check basil.js vs. Processing"
 ---
 
 ## Similarities between basil.js and Processing

tutorials/05-technical/index.md renamed to tutorials/00-technical/index.md

@@ -1,7 +1,7 @@
 ---
 author: admin
 layout: tutorial
-title: "Drawing and colors"
+title: "Drawing and Colors"
 ---
 
 ## General information

tutorials/03-syntax/index.md renamed to tutorials/02-syntax/index.md

@@ -0,0 +1,85 @@
+---
+author: admin
+layout: tutorial
+title: "Page Management"
+---
+
+## Adding pages 
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    // add one page at the end of the document and jump to it
+    addPage();
+    text("Example 1", width/2, height/2, 100, 100);
+}
+```
+
+## Removing pages
+```
+    // removes current page
+    removePage();
+    
+    // fill up again...
+    addPage();
+
+    // removes page 1
+    removePage(1);
+```
+
+## Using references to pages
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    var myPage = addPage();
+    var myTextFrame = text("hello world", 20, 20, 100, 20); // add a text frame on that page
+    page(1); // leave that page
+    page(myTextFrame); // go to the page where this PageItem sits
+
+    // removes myPage right away... you won't see it ever
+    removePage(myPage);
+}
+```
+
+- `addPage()` and `page()` return a reference to the new or determined page that you can store in a variable.
+- You can pass a PageItem such as a TextFrame to `page()` in order to jump to the page that contains the given PageItem
+
+## Populating larger documents and adding between pages
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    // run this on an empty document with only one page!
+
+    // add pages until 20
+    for (var i = pageCount(); i < 20; i++) {        
+        addPage();
+        text("Example 2-" + i, width/2, height/2, 100, 100);
+    }
+    
+    // set location of insertion
+    addPage(AT_END); // default
+    text("Example AT_END", width/2, height/2, 100, 100);
+    addPage(AT_BEGINNING); 
+    text("Example AT_BEGINNING", width/2, height/2, 100, 100);
+      
+    // adds a page before page 15
+    page(10); // set current page
+    addPage(BEFORE); // this refers to the current page
+    text("Example BEFORE 10 becomes the new 10", width/2, height/2, 100, 100);
+
+    // guess what!
+    page(15);
+    addPage(AFTER); 
+    text("Example AFTER 15 becomes 16", width/2, height/2, 100, 100);
+
+    println(pageCount());
+}
+```
+
+-  This example raises the page count to 20
+- You can use AT_END, AT_BEGINNING, BEFORE and AFTER to define where the new page should be inserted

tutorials/00-hello-world/index.md renamed to tutorials/03-hello-world/index.md

@@ -0,0 +1,166 @@
+---
+author: admin
+layout: tutorial
+title: "Selection and Navigation"
+---
+
+## Get the mouse selection
+
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    var selItems = selections();
+    
+    // only use first item selected
+    typo(selItems[0], "pointSize", 30);
+    
+    // for-loop
+    for (var i = 0; i < selItems.length; i++) {
+        println(selItems);        
+        typo(selItems[i], "pointSize", 30);
+    }
+
+    // experts: use a looping callback
+    selections(function(item, i){
+             println(item);
+             typo(item, "pointSize", 30);    
+    });
+}
+```
+
+- `selections()` returns all the selected PageItems or Text elements as an array of mixed items
+- Please note that you will always receive an array, also if just one element is selected
+- This a sensible strategy if you haven't created many things and they ended up being distributed all over the page
+- Also good for changing certain items only that you select by e.g. aesthetical criteria
+
+## Add, get and set a layer
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    // add new layer
+    var layer = layer("myLayer");
+    ellipse(20,20,10,10);
+    
+    // set active layer
+    layer(layer);
+    // also possible:
+    layer("myLayer");
+
+    // delete the layer... remove() can be used with all PageItems
+    layer.remove();  
+}
+```
+
+- You can add layers with `layer()`
+- You can also activate pre-existing layers
+- Putting your new elements on clearly labelled layers is a clean way to keep your project tidy
+- You can also use layers to select and alter the new items easily or set them to invisible
+
+##Process all objects from a layer, page or document 
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    // process all items on a layer
+    var items = items(layer("fancy"));
+    for (var i = 0; i < items.length; i++) {
+        println(items[i]);
+    }
+    
+    // process all items on a page
+    var items = items(page(1));
+    for (var i = 0; i < items.length; i++) {
+        println(items[i]);
+    }
+    
+    // process all items in document
+    var items = items(doc());
+    for (var i = 0; i < items.length; i++) {
+        println(items[i]);
+    }
+}
+```
+
+- `items()` allows you to process everything on a Layer, in a Group, on a Page or in a Document
+
+<!--
+## Changing strokeColor, strokeWeight and fillColor on existing items
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+
+    var items = items(layer("fancy"));
+    
+    for (var i = 0; i < items.length; i++) {
+        items[i].strokeWeight = 3;
+        items[i].strokeColor = color(255,0,0,"myRed");
+        items[i].fillColor = color(0,0,255,"myBlue");
+    }
+    
+}
+```
+-->
+
+## Attaching labels to created items
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+    // the following methods return the PageItem they create
+    // thus you can set their label directly after their method call
+    ellipse(20,20,5,5).label = "dynamic";
+    ellipse(20,20,5,5).label = "dynamic";
+    text("hihi",20,20,20,20).label = "dynamic";
+    rect(20,20,5,5).label = "dynamic";
+    line(20,20,50,50).label = "dynamic";
+
+    // this way, you can access them by calling their name
+    // please note that labels() always returns an array
+    var items = labels("dynamic");
+    
+    // you can use forEach() to do something with all of these items
+    for (var i = 0; i < items.length; i++) {
+        println(items[i]);
+    }
+    
+    // or you address them individually
+    transform(items[0], "position", [100, 0]);
+}
+```
+
+- Labels can be attached to PageItems by code or mouse using the Script Label panel in InDesign
+- Since labels are a bit hard to find in the GUI they should only be used if layers don't work for your endeavour
+
+<!-- 
+## Set selection by code
+how to do this?
+select() is cancelling selection on previously selected things...
+-->
+
+
+<!-- ## How to use the Adobe Object Model and work with collections -->
+
+## Cleaning up and removing stuff
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+   // clears the given layer
+   clear(layer("fancy"));
+   // fully delete a layer
+   layer("fancy").remove();
+   // clears the given page
+   clear(page());   
+   // clears the document
+   clear(doc());
+}
+```

tutorials/02-drawing-color/index.md renamed to tutorials/05-drawing-color/index.md

@@ -0,0 +1,56 @@
+---
+author: admin
+layout: tutorial
+title: "Transform PageItems"
+---
+
+```
+// @includepath "~/Documents/;%USERPROFILE%Documents";
+// @include "basiljs/basil.js";
+
+function draw() {
+  doc();
+  clear(doc());
+  
+  units(MM); // use millimeter
+  noStroke();
+  fill(100); // black
+  
+  var r = rect(50, 50, 30, 30);
+
+  delay(1000); // this is just to make the individual steps visible
+  
+  transform(r, "position", [30, 0]);
+  delay(1000);
+  
+  transform(r, "position", [0, 30]);
+  delay(1000);
+  
+  transform(r, "position", [width/2, height/2]);
+  delay(1000);
+
+  transform(r, "width", 50);
+  delay(1000);
+  
+  transform(r, "height", 50);
+  delay(1000);  
+  
+  transform(r, "size", [30, 30]);
+  delay(1000);  
+
+  transform(r, "rotation", 45);
+  delay(1000); 
+
+  transform(r, "shearing", 15);
+  delay(1000);  
+  
+  for (var i = 0; i < 50; i++) {
+    var x = transform(r, "position").x;
+    transform(r, "position", [x+2, 0]);
+    delay(30); 
+  }
+
+  r.remove();
+
+}
+```