JavaScript p5 and the DOM

• To date we have always used the “canvas”

• Everything is drawn to the canvas
• Use createCanvas() to create a canvas
• Note the “create”
• Let’s do things outside the canvas
• Using other “create”, which we will show shortly
• Need a library called “p5.dom”

CS106 W20 1
 Review of the Processing IDE Editor
- The IDE manages:
- Your JavaScript p5 code (in this screenshot is HonkAndHorn.js)
- Any other JavaScript p5 tabs you create (such as in the Trading
Cards assignment)
- index.html
- A configuration file for the sketch properties
- The data directory
- The p5.min.js library and possible other libraries such as
p5.sound.min.js
- The “IDE” refers to Integrated Development
Environment, meaning it integrates these files in a
folder for you

CS106 W20 2
Processing IDE has a “sketch.properties” file
• This is only needed by the Processing IDE.
• In CS106, we never change this file.

CS106 W20 3
Processing IDE has an “Index.html” tab
• index.html contains, among other things, the contents of your
webpage
• You can add content to index.html directly (we don’t do this in CS106)
• You can use JavaScript p5 to add content and interactivity to your
webpage (we do this in CS106)

CS106 W20 4
Processing IDE has a “libraries” directory
• It contains any p5 libraries that you
have loaded
• In the example to the right, it has two
libraries.
• The main one is “p5.min.js”.
• The example to the right also includes
“p5.dom.min.js” which is a library we will
use starting today.

CS106 W20 5
Add the “p5.dom.min.js” library

CS106 W20 6
Create a Paragraph Below the Canvas
function setup() {
createCanvas(200, 200);
background(220);
createP("My first paragraph.");
}
function draw() {
ellipse(mouseX, mouseY, 30, 30);
}

CS106 W20 7
Create Paragraphs Above/Below the Canvas
function setup() {
createP("My first paragraph.");
createCanvas(200, 200);
background(220);
createP("My second paragraph.");
}
function draw() {
ellipse(mouseX, mouseY, 30, 30);
}

CS106 W20 8
 Use Variables
let dice;
function setup() {
createCanvas(200, 200);
background(220);
dice = floor(random(1, 7));
createP("Dice: " + dice);
}
function draw() {
ellipse(mouseX, mouseY, 30, 30);
}
CS106 W20 9
Read and Display Data from a Text File
let lines = [];
function preload(){
lines = loadStrings("data/marley.txt");
}
function setup() {
createCanvas(200, 200);
background(220);
createP(lines);
}
CS106 W20 10
What best describes this code:
function setup() {
for (let i = 0; i < 100; i++) {
createP(i);
} A. Creates 100 lines on the webpage,
} each containing a number
B. Creates 100 lines on the canvas,
each containing a number
C. Creates one paragraph that keeps
overwriting itself so the user just
sees one line.

CS106 W20 11
What does this code do:
function setup() {
createCanvas(100, 100);
background(220);
createP(hour() + ':' + minute());
}

A. Puts the time on a webpage

B. Puts the time on the canvas
C. Puts “hour():minute()” on the webpage
D. Puts “hour():minute()” on the canvas

CS106 W20 12
What does this code show on the
webpage? A. error
B. 20000
function setup() { C. “area”
let con = {}; D. 100200
con.l = 100;
con.w = 200;
createCanvas(100, 100);
background(220);
let area = con.l * con.w;
createP(area);
}

CS106 W20 13
 List of DOM elements
• To see the JavaScript p5 list of available DOM elements:
• Go to: https://p5js.org/reference/#group-DOM
• Scroll down to “DOM”
• There are many
• CS106 will cover some of these including:
• createP()
• createElement()
• createButton()
• createSlider()
• createInput()
• createRadio()
CS106 W20 14
Create a Header “h1” Element
let myHeader;

function setup() {
myHeader = createElement("h1", "My header");
createCanvas(200, 200);
}

function draw() {
background(220);
rect(mouseX, mouseY, 30, 30);
} CS106 W20 15
Modify an Element using “html”
let myHeader;

function setup() {
myHeader = createElement("h1", "My header");
createCanvas(200, 200);
background(220);
}

function mousePressed() {
myHeader.html("New Header !!!");
} CS106 W20 16
Create Many Paragraphs
let dice;
function setup() {
createCanvas(100, 100);
background(220);
}
function mousePressed() {
dice = floor(random(1, 6));
createP("Dice: " + dice);
}

CS106 W20 17
Style an Element
let myPara;
let size = 18;
function setup() {
createCanvas(100, 100);
background(220);
myPara = createP("My paragraph");
myPara.style('color', 'red');
}
function mousePressed() {
size = size + 2;
myPara.style('font-size', size);
}
CS106 W20 18
 JavaScript p5 uses CSS Style Tags
• To see a list of CSS tags:
• Go to a list: https://www.w3schools.com/cssref/
• CS106 will cover only ‘color’ and ‘font-size’:
• myPara.style('color', 'red');
• myPara.style('font-size', size);

CS106 W20 19
What does this code show on the webpage?

function setup() {
createElement("h1", "Head1");
createCanvas(100, 100);
background(220);
createElement("h1", "Head2");
}

A) B)

CS106 W20 20
What does this code show on the webpage?

let myPC = "N2J 2N6";

function setup() {
myElem = createElement("h1", "Head1");
createCanvas(100, 100);
background(220);
myElem.html(myPC);
}

A) B)

CS106 W20 21
What does this code show on the webpage?

let myPara;
function setup() {
createCanvas(100, 100);
background(220);
myPara = createP("My paragraph");
myPara.style('color', '#ff0000');// red
myPara.style('color', '#00ff00');//green
}

A) B)

CS106 W20 22
 CreateButton() and Events
• Create interactive elements
• createButton()

CS106 W20 23
Create a Button (it does nothing)
function setup() {
createCanvas(100, 100);
createButton("My First Button");
}

function draw() {
background(220);
text("Sample text.", 10, 40);
}
CS106 W20 24
 Button With a Callback Function “changeColor”
let myButton;
function setup() {
createCanvas(100, 100);
myButton = createButton("Button with Callback");
myButton.mouseClicked(changeColor);
}
function changeColor() {
fill(random(256));
}
function draw() {
background(220);
rect(10, 10, 60, 40);
} CS106 W20 25
What happens if you press the mouse on the button?
let myButton;
function setup() {
createCanvas(100, 100);
myButton = createButton("Button with Callback");
myButton.mouseClicked(changeColor);
}

function changeColor() {
fill(random(256)); A) changeColor() runs
} B) mousePressed() runs
C) Both changeColor() and
function draw() { mousePressed() run
background(220);
rect(10, 10, 60, 40);
}
CS106 W20 26
What happens if you press the mouse and
you are NOT on the button?
let myButton;
function setup() {
createCanvas(100, 100);
myButton = createButton("Button with Callback");
myButton.mouseClicked(changeColor);
}

function changeColor() { A) changeColor() runs

fill(random(256)); B) mousePressed() runs
} C) Both changeColor() and
mousePressed() run
function draw() {
background(220);
rect(10, 10, 60, 40);
} CS106 W20 27
 What happens if you press the mouse
on the button?
let myButton;
function setup() {
createCanvas(100, 100);
background(220);
myButton = createButton("My Button");
myButton.mouseClicked(changeColor);
} A) changeColor() runs and there
function changeColor() { are no errors
background(random(256)); B) changeColor() runs but there is
} an error as there is no
mousePressed() function

CS106 W20 28
 List of DOM elements
• To see the JavaScript p5 list of available DOM elements:
• Go to: https://p5js.org/reference/#/p5.Element
• Look at all the methods for every p5 element
• CS106 will cover some of these including:
• mousePressed()
• mouseOver()
• mouseOut()

CS106 W20 29
 Use a Button to Control the Ball Speed
let ballX = 0; function draw() {
let myButton; background(220);
ballX = ballX + speed;
function setup() { ellipse(ballX, 50, 10, 10);
createCanvas(100, 100); if (ballX > width) {
myButton = createButton("Go Faster"); ballX = 0;
myButton.mouseClicked(increaseSpeed); }
} }

function increaseSpeed() {
speed ++;
} CS106 W20 30
 Events on a Paragraph
let p;
function setup() { function draw() {
createCanvas(100, 100); background(220);
p = createP("Sample paragraph."); text("Sample text.", 10, 40);
p.mouseOver(showBigText); }
p.mouseOut(showSmallText);
}
function showBigText() {
p.style('font-size', 48);
}
function showSmallText() {
p.style('font-size', 20);
} CS106 W20 31
 An Annoying Webpage (part 1 of 2)
Honk and Horn
let honkSound;
let hornSound;

function preload() {
honkSound = loadSound("data/honk.wav");
hornSound = loadSound("data/horn.wav");
}

CS106 W20 32
 An Annoying Webpage (part 2 of 2)
Honk and Horn
function setup() { function playHorn() {
background(220); hornSound.play();
createP(" "); }
honkButton = createButton("Honk"); function playHonk() {
honkButton.mouseClicked(playHonk); honkSound.play();
hornButton = createButton("Horn"); }
hornButton.mouseClicked(playHorn);
}

CS106 W20 33
 Sliders
let mySlider;
function draw() {
function setup() { background(220);
createCanvas(600, 400); textSize(mySlider.value());
createP(" "); text("Sample text.", 10,height/2);
mySlider = createSlider(0, 100, 20); }
}

CS106 W20 34
 Text Input Box (slide 1 of 2)
let myInput;
let greeting;
let button;

function setup() {
createCanvas(100, 100);
background(220);
greeting = createElement('h2', 'what is your name?');
myInput = createInput();
button = createButton('submit');
button.mouseClicked(greet);
} CS106 W20 35
 Text Input Box (slide 2 of 2)
function greet() {
let name = myInput.value();
greeting.html('Hello ' + name + '!');
myInput.value('');
}

CS106 W20 36
 Radio Control (slide 1 of 3)
let tileset;
let myRadio;

function preload() {
tileset = loadImage("data/Tiles.png");
}

CS106 W20 37
 Radio Control (slide 2 of 3)
function setup() {
createCanvas(640, 576);
noSmooth();
createP(" ");
createP("Choose night or day.");
myRadio = createRadio();
myRadio.option("grassland");
myRadio.option("winter");
myRadio.option("tropical");
myRadio.option("autumn");
myRadio.value("grassland");
} CS106 W20 38
 Radio Control (slide 3 of 3)
function draw() {
if (myRadio.value() === "grassland") {
copy(tileset, 16, 16, 160, 144, 0, 0, 160 * 4, 144 * 4);
} else if (myRadio.value() === "winter") {
copy(tileset, 240, 16, 160, 144, 0, 0, 160 * 4, 144 * 4);
} else if (myRadio.value() === "tropical") {
copy(tileset, 16, 240, 160, 144, 0, 0, 160 * 4, 144 * 4);
} else if (myRadio.value() === "autumn") {
copy(tileset, 240, 240, 160, 140, 0, 0, 160 * 4, 144 * 4);
}
}
CS106 W20 39
 A)
What does this code show on the webpage when the
program starts, and before the user has made any mouse
presses?

B)
let myRadio;
function setup() {
createCanvas(100, 100);
myRadio = createRadio(); C)
myRadio.option("one");
myRadio.option("two");
myRadio.value("two");
}
function draw() {
background(220);
textSize(40);
text(myRadio.value(), 10, 50);
CS106 W20 40
}
 A)
What does this code show on the webpage after the user
presses “one”?

let myRadio;
function setup() { B)
createCanvas(100, 100);
myRadio = createRadio();
myRadio.option("one");
C)
myRadio.option("two");
myRadio.value("two");
}
function draw() {
background(220);
textSize(40);
text(myRadio.value(), 10, 50);
}
CS106 W20 41
 A)
What does this code show on the webpage after the
user presses the mouse on the canvas once? This is the
only mouse press.

let myRadio; B)
function setup() {
createCanvas(100, 100);
myRadio = createRadio();
C)
myRadio.option("one");
myRadio.option("two");
myRadio.value("two");
}
function draw() {
background(220);
textSize(40);
text(myRadio.value(), 10, 50);
} CS106 W20 42
The End

CS106 W20 43