Coding Basics

Processing.js is a coding language that is based upon Java and is used to teach people the basics of computer programming. We use Processing.js to create the Number Picture templates by telling the code to draw shapes and curves onto the canvas that are proportional in size to the data that is input by a user or generated randomly for testing purposes.

All you need to do when creating a template is use the Processing.js functions that you want in combination with the data array that we provide and some other variables like the title and the blurb.

Case-sensitivity

Processing.js is a case-sensitive language which means that functions and variables need to be called using the right combination of upper- and lower-case letters.

Variables

You get a few different types of variables - Strings, integers, floats and booleans being the most common few.

• String - a 'String' is a string of characters, letters and numbers and spaces. Words, sentences, paragraphs and stories - basically anything textual is stored in a String variable. Numbers and other types of information can also be stored in Strings but Strings cannot be stored in number-type variables.

• int - an 'int' is an integer - or in other words a whole-number that can be negative or positive.

• float - a 'float' can hold virtually any number - negative or positive with a decimal points included.

• boolean - a 'boolean' is a yes / no type variable that can either be set to true or to false.

Variables either need to be created first before you can assign values to them or created at the same time that you assign a value to them. But they cannot have a value assigned to them before they have been created.

Loops

There are two types of loops that can be used with Processing.js - 'for' loops and 'while' loops.

A 'while' loop will carry on doing a certain thing - over and over again while a certain condition is true - say while variable A is equal to 5, or the end of the array has not been reached yet.

A 'for' loop takes a temporary integer variable and sets it to an initial value. Then each loop it will add or subtract an amount from the variable and it will carry on repeating this until the variable reaches a certain value that is either too large or too small and then stop.

Conditional Operators

Conditional operators enable us to set conditions that need to be met by variables or loops. IF variable A equals variable B do something; IF variable C does NOT equal 'true' do something else; IF this ELSE that. You get the point...

Logical Operators

This is just a fancy name for AND's and OR's. These operators join the conditional operators together.