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 “[Link]”
CS106 W20 1
Review of the Processing IDE Editor
- The IDE manages:
- Your JavaScript p5 code (in this screenshot is [Link])
- Any other JavaScript p5 tabs you create (such as in the Trading
Cards assignment)
- [Link]
- A configuration file for the sketch properties
- The data directory
- The [Link] library and possible other libraries such as
[Link]
- The “IDE” refers to Integrated Development
Environment, meaning it integrates these files in a
folder for you
CS106 W20 2
Processing IDE has a “[Link]” file
• This is only needed by the Processing IDE.
• In CS106, we never change this file.
CS106 W20 3
Processing IDE has an “[Link]” tab
• [Link] contains, among other things, the contents of your
webpage
• You can add content to [Link] 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 “[Link]”.
• The example to the right also includes
“[Link]” which is a library we will
use starting today.
CS106 W20 5
Add the “[Link]” 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/[Link]");
}
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: [Link]
• 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() {
[Link]("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");
[Link]('color', 'red');
}
function mousePressed() {
size = size + 2;
[Link]('font-size', size);
}
CS106 W20 18
JavaScript p5 uses CSS Style Tags
• To see a list of CSS tags:
• Go to a list: [Link]
• CS106 will cover only ‘color’ and ‘font-size’:
• [Link]('color', 'red');
• [Link]('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);
[Link](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");
[Link]('color', '#ff0000');// red
[Link]('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");
[Link](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");
[Link](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");
[Link](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");
[Link](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: [Link]
• 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;
[Link](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);
[Link](showBigText); }
[Link](showSmallText);
}
function showBigText() {
[Link]('font-size', 48);
}
function showSmallText() {
[Link]('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/[Link]");
hornSound = loadSound("data/[Link]");
}
CS106 W20 32
An Annoying Webpage (part 2 of 2)
Honk and Horn
function setup() { function playHorn() {
background(220); [Link]();
createP(" "); }
honkButton = createButton("Honk"); function playHonk() {
[Link](playHonk); [Link]();
hornButton = createButton("Horn"); }
[Link](playHorn);
}
CS106 W20 33
Sliders
let mySlider;
function draw() {
function setup() { background(220);
createCanvas(600, 400); textSize([Link]());
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');
[Link](greet);
} CS106 W20 35
Text Input Box (slide 2 of 2)
function greet() {
let name = [Link]();
[Link]('Hello ' + name + '!');
[Link]('');
}
CS106 W20 36
Radio Control (slide 1 of 3)
let tileset;
let myRadio;
function preload() {
tileset = loadImage("data/[Link]");
}
CS106 W20 37
Radio Control (slide 2 of 3)
function setup() {
createCanvas(640, 576);
noSmooth();
createP(" ");
createP("Choose night or day.");
myRadio = createRadio();
[Link]("grassland");
[Link]("winter");
[Link]("tropical");
[Link]("autumn");
[Link]("grassland");
} CS106 W20 38
Radio Control (slide 3 of 3)
function draw() {
if ([Link]() === "grassland") {
copy(tileset, 16, 16, 160, 144, 0, 0, 160 * 4, 144 * 4);
} else if ([Link]() === "winter") {
copy(tileset, 240, 16, 160, 144, 0, 0, 160 * 4, 144 * 4);
} else if ([Link]() === "tropical") {
copy(tileset, 16, 240, 160, 144, 0, 0, 160 * 4, 144 * 4);
} else if ([Link]() === "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)
[Link]("one");
[Link]("two");
[Link]("two");
}
function draw() {
background(220);
textSize(40);
text([Link](), 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();
[Link]("one");
C)
[Link]("two");
[Link]("two");
}
function draw() {
background(220);
textSize(40);
text([Link](), 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)
[Link]("one");
[Link]("two");
[Link]("two");
}
function draw() {
background(220);
textSize(40);
text([Link](), 10, 50);
} CS106 W20 42
The End
CS106 W20 43