Variables are used for storing values. In Javascript var and let are used for variable declaration. There is also a const, which is similar to let but defines a constant, which cannot be reassigned once it is declared. The difference between the variables is that var is function scoped and let/const is block scoped. This means that a variable declared with var is defined throughout the program, while let/cost is only accessible within a block.
The name of the variable is case-sensitive and it must start with a letter, but it may contain numbers within the name.
Variables also have a lifetime. The computer manages the storage of variables, and when the life span is over, the memory is released again (Garbage-Collector). The range (Scope) in which a variable is accessible or active is defined by brackets ({}) (see also classes and functions). Variables that are at the top level are called global variables as they are accessible all over the program. Variables declared within brackets are local variables. If a local variable has the same name as a global variable, the local variable overrides it within its scope.
// variable Declaration
var x1 = 15; // an integer i.e a whole number
var valF = 0.323; // a floating point number i.e a numbers with a decimal point
let bFlag = false; // a true or false value i.e a single bit value
const threshold = 5; // a collection of characters
let character = 'g'; // a single character. Note the different quotation marks
console.log(x1);
print('The value of valF is ' + valF);
console.log(typeof bFlag);
print('The value of threshold is ' + threshold);
console.log(typeof character);
Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:
let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean
We can also make copies or combine variables.
var x1 = 10; var x2 = 5; print(x1); print(x2); var x3 = x1 + x2; // 15 x2 = x3 - x1; // 5 print(x3); print(x2);
Almost the same as the introductory exercise, but now with variables.
//global variables
var length1 = 150;
var length2 = 200;
function setup(){
createCanvas(300,300);// define window size
stroke(255,255,255);// define line colour
}
function draw() {
let strokeWeight = 5 //define a local variable accessible only within the block
background(0); // define background colour
line(100,10,100,length1); // draw a line
line(150,10,150,length2);
line(200,10,200,250);
fill(0,0,0); // fill colour
strokeWeight(strokeWeight); // line thickness
ellipse(100,length1,50,50); // draw an ellipse
ellipse(150,length2,50,50); // draw an ellipse
noFill(); // turn off fill
ellipse(200,250,50,50); // draw an ellipse
}
Some functions within p5.js are predefined and enable a fast graphical interaction e.g. mouseX and mouseY, which contain the current horizontal and vertical position of the mouse, relative to (0, 0) of the canvas.
var length1 = 0;
var length2 = 0;
function setup() {
createCanvas(300, 300); // define window size
background(0); // define background colour
stroke(255, 255, 255); // define line colour
}
function draw() {
background(0);
length1 = mouseX;
length2 = mouseY;
line(100, 10, 100, length1); // draw a line
line(150, 10, 150, length2);
line(200, 10, 200, 250);
fill(0, 0, 0); // fill colour
strokeWeight(5); // line thickness
ellipse(100, length1, 50, 50); // draw an ellipse
ellipse(150, length2, 50, 50); // draw an ellipse
noFill(); // turn off fill
ellipse(200, 250, 50, 50); // draw an ellipse
}
Make a copy of an early exercise and modify it to include variables and mouse movement
JavaScript’s data types are as follows:
Boolean
Null
Undefined
Number
String
Symbol
Object
Boolean are either true or false values, represented by a single bit in memory, either a 1 for true or a 0 for false in binary.
Null’s value in JavaScript is an Object, but it is not an actual object that can have properties added to it. It is a reference to a variable that is defined in memory but has no value.
Undefined, unlike Null, means that the variable is not known to exist. This can be represented by a variable that is declared but never given a value.
Numbers in JavaScript are unlike many programming languages that define numbers by type (integers, floating-point, short, long, etc.) Instead, they are defined as 64-bit double-precision floating numbers, where the value itself is stored in bits 0 to 51, the exponent in bits 51 to 62, and the sign bit 63 (negative or positive). JavaScript also has a reserved keyword NaN which indicates that a number is not a legal number, but is itself of type Number.
Strings represent a series of characters and can consist of multiple characters or single characters.
Symbols are a primitive data type i.e. tokens that serve as unique id’s.
Objects are mutable and are not stored as continuous buffers, but instead are represented by a variety of data structures.
An operator is a symbol that tells the computer to perform a particular math or logic operation. Some of the most common operators are:
+ Addition
/ Division
- Subtraction
* Multiplication
These you already know but there are some very useful arithmetic operators you may not have seen in the following example:
var x1 = 10; x1++; // increment value by one x1--; // decrement value by one x1 += 2; // Add assign, this is the same as writing x1 = x1+2; x1 -= 2; // Subtract assign, this is the same as writing x1 = x1-2; x1 /= 2; // Divide assign (less common), this is the same as writing x1 = x1/2; x1 = 25 % 7; // Modulo Operator (less common), gives you the remainder of an integer division. This equation would give you a value of 4 (7 goes into 25 three times, with the value of 4 left over)
Expand and modify the examples with new or combined drawing commands (Arc, Point, Triangle, etc.). Look in the documentation for the respective function. Create variable X and variable Y that can be used to position your graphic on the screen. Play with var, let and const using console.log() and print() to see differences in their accessibility. Use operators in cour code to create some simple animations.