JavaScript Mini

The code examples in DigiMat use Javascript with the userfriendly web editor p5js supported by a very useful Reference and source of Examples for guidance and inspiration.

When you open the JavaScript web editor p5js you find the JavaScript template

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
}

You see function setup() creating a display of size 400×400 pixels on computer screen.

You see  function draw() which will repeatedly execute the program to be filled in, as fast as possible depending on the computer with a maximal rate of 60 updates per second.

To prepare for Sessions Basic take the following steps:

1. Hello Digital World

The following code prints the happy message Hello Digital World on canvas/screen and console:

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
text(“Hello Digital World”,100,200);
print(“Hello Digital World”);
}

Play with the code changing textSize() and background() and color by fill() with details in Reference as a most valuable source under Help.

2. Angry Birds Easy

Inspect the following basic example explained in comments in the code. Explain connection to Angry Birds. Modify and play with the code.

3. FireWorks Easy

Next is to see how to get the same thing done to many things by using arrays and do-loops, inspect this basic example.

 4. Basic Know How

Now you are ready to continue with Sessions Basic.

5. More Know How

PS There seems to be an IOS issue with sound (muted) on iPhone and Ipad. Fix?