Syntax check: basil.js vs. Processing

This tutorial explains some JavaScript basics and shows the differences between writing in basil.js against using Processing. By Ludwig Zeller

Similarities between basil.js and Processing

Since Java and JavaScript are quite similar programming languages you do not have to start from scratch at all when you move from Processing to basil.js. This section covers the similarities between both.

Comments

// This is an inline comment
/* This is a block comment,
that can go over several lines */

if / else conditions

if ( a > 3 ) 
{ 
  // execute if a is bigger than 3
} else {
 // execute if a is smaller or equal to 3
}

Logical comparisons

a == b // equal
a === b // Little difference to Java: You can check for same data type as well in... to be VERY sure
a != b // not equal
a > b // bigger than
a < b // smaller than
a >= b // bigger or equal
a <= b // smaller or equal

// You can combine statements with logical AND ”&&” resp. the logical OR ”||”
if (  a == b && b == c ) { ... } // AND
if (  a == b || b == c ) { ... } // OR

Operators and assignments

// +, -, *, / // addition, substraction, multiplication and division at your fingertips...
foo = foo + 5; // increases the variable foo by 5
foo += 5; // a short version of foo = foo + 5;
foo++; // even shorter version for foo = foo + 1;

Differences between basil.js and Processing

Writing JavaScript for Adobe InDesign is quite a different context than Java. In this section we will look at things that are different between basil.js and Processing.

Basic programme structure

// In basil.js

#includepath "~/Documents/;%USERPROFILE%Documents";
#include "basiljs/bundle/basil.js";

function setup() {
}

function draw() {
}

b.go();

// vs. Processing

void setup() {
}

void draw() {
}

You need to explicitly include our library in each sketch.
Unlike in Processing the draw() function is also called only once, right after setup().
There is an experimental interactive mode available that is calling the draw() function at a set interval.

Calling provided functions


// In basil.js
b.ellipseMode(b.CENTER);
b.ellipse( b.width / 2, b.height / 2, 50, 50 );

// vs. Processing
ellipseMode(CENTER);
ellipse( width / 2, height / 2, 50, 50 );

Almost all basil.js commands are bound to a global object "b" in order to avoid namespace collisions with third-party libraries.

Variables and data types

// In basil.js
var myNumber = 5; // Integers...
var myNumber = 3.0; // Floats...
var myString = ”Hello Basil”; / Strings...
var myLove = true; // and Booleans are all stored to the ”var” type

// vs. Processing
int myNumber = 5;
float myNumber = 3.0;
String myString = "Hello Basil";
boolean myLove = true;

JavaScript doesn't require you to declare the data type of your variables. Just use var.

Defining and using functions

// In basil.js
function myFunction (param1, param2){
  // code within the brackets has access to param1 and param2 and will be executed...
}
myFunction(234, ”Some String”); // You don‘t have to use b. for this

// vs. Processing

void myFunction( int param1, String param2 ){
  // code within the brackets has access to param1 and param2 and will be executed...
}
myFunction(234, ”Some String”);

Functions work quite similar besides the fact that they you do not have to declare any argument or return data types.

for-loops

// In basil.js
for( var i = 0; i < 100; i++  )
{
  b.println( i ); // prints 100 numbers counting upwards
}

// vs. Processing
for( int i = 0; i < 100; i++  )
{
  println( i ); // prints 100 numbers counting upwards
}

Again almost the same... only a small difference in the declaration of the counting variable

Further resources

http://www.aosabook.org/en/pjs.html