javascript p5 and the dom - student.cs.uwaterloo.ca€¦ · javascript p5 and the dom •to date we...
TRANSCRIPT
![Page 1: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/1.jpg)
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
![Page 2: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/5.jpg)
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
![Page 6: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/6.jpg)
Add the “p5.dom.min.js” library
CS106 W20 6
![Page 7: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/8.jpg)
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
![Page 9: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/9.jpg)
Use Variableslet 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
![Page 10: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/11.jpg)
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 numberB. Creates 100 lines on the canvas,
each containing a numberC. Creates one paragraph that keeps
overwriting itself so the user just sees one line.
CS106 W20 11
![Page 12: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/12.jpg)
What does this code do:
function setup() {createCanvas(100, 100);background(220);createP(hour() + ':' + minute());
}
A. Puts the time on a webpageB. Puts the time on the canvasC. Puts “hour():minute()” on the webpageD. Puts “hour():minute()” on the canvas
CS106 W20 12
![Page 13: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/13.jpg)
What does this code show on the webpage?
function setup() {let con = {};con.l = 100;con.w = 200;createCanvas(100, 100);background(220);let area = con.l * con.w;createP(area);
}
A. errorB. 20000C. “area”D. 100200
CS106 W20 13
![Page 14: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/14.jpg)
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
![Page 15: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/17.jpg)
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
![Page 18: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/18.jpg)
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
![Page 19: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/19.jpg)
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
![Page 20: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/22.jpg)
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');// redmyPara.style('color', '#00ff00');//green
}
A) B)
CS106 W20 22
![Page 23: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/23.jpg)
CreateButton() and Events
• Create interactive elements• createButton()
CS106 W20 23
![Page 24: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/26.jpg)
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 26
A) changeColor() runsB) mousePressed() runsC) Both changeColor() and
mousePressed() run
What happens if you press the mouse on the button?
![Page 27: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/27.jpg)
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 27
A) changeColor() runsB) mousePressed() runsC) Both changeColor() and
mousePressed() run
What happens if you press the mouse and you are NOT on the button?
![Page 28: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/28.jpg)
let myButton;function setup() {
createCanvas(100, 100);background(220);myButton = createButton("My Button");myButton.mouseClicked(changeColor);
}function changeColor() {
background(random(256));}
CS106 W20 28
A) changeColor() runs and there are no errors
B) changeColor() runs but there is an error as there is no mousePressed() function
What happens if you press the mouse on the button?
![Page 29: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/30.jpg)
Use a Button to Control the Ball Speed
let ballX = 0;
let myButton;
function setup() {
createCanvas(100, 100);
myButton = createButton("Go Faster");
myButton.mouseClicked(increaseSpeed);
}
function increaseSpeed() {
speed ++;
}
function draw() {
background(220);
ballX = ballX + speed;
ellipse(ballX, 50, 10, 10);
if (ballX > width) {
ballX = 0;
}
}
CS106 W20 30
![Page 31: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/31.jpg)
Events on a Paragraphlet p;
function setup() {
createCanvas(100, 100);
p = createP("Sample paragraph.");
p.mouseOver(showBigText);
p.mouseOut(showSmallText);
}
function showBigText() {
p.style('font-size', 48);
}
function showSmallText() {
p.style('font-size', 20);
}
function draw() {
background(220);
text("Sample text.", 10, 40);
}
CS106 W20 31
![Page 32: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/33.jpg)
An Annoying Webpage (part 2 of 2)Honk and Horn
function setup() {
background(220);
createP(" ");
honkButton = createButton("Honk");
honkButton.mouseClicked(playHonk);
hornButton = createButton("Horn");
hornButton.mouseClicked(playHorn);
}
function playHorn() {
hornSound.play();
}
function playHonk() {
honkSound.play();
}
CS106 W20 33
![Page 34: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/34.jpg)
Sliders
let mySlider;
function setup() {
createCanvas(600, 400);
createP(" ");
mySlider = createSlider(0, 100, 20);
}
function draw() {
background(220);
textSize(mySlider.value());
text("Sample text.", 10,height/2);
}
CS106 W20 34
![Page 35: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/35.jpg)
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
![Page 36: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/36.jpg)
Text Input Box (slide 2 of 2)
function greet() {
let name = myInput.value();
greeting.html('Hello ' + name + '!');
myInput.value('');
}
CS106 W20 36
![Page 37: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/37.jpg)
Radio Control (slide 1 of 3)
let tileset;
let myRadio;
function preload() {
tileset = loadImage("data/Tiles.png");
}
CS106 W20 37
![Page 38: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/38.jpg)
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
![Page 39: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/39.jpg)
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
![Page 40: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/40.jpg)
What does this code show on the webpage when the program starts, and before the user has made any mouse presses?
let myRadio;function setup() {createCanvas(100, 100);myRadio = createRadio();myRadio.option("one");myRadio.option("two");myRadio.value("two");
}function draw() {
background(220);textSize(40);text(myRadio.value(), 10, 50);
} CS106 W20 40
A)
B)
C)
![Page 41: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/41.jpg)
What does this code show on the webpage after the user presses “one”?
let myRadio;function setup() {
createCanvas(100, 100);myRadio = createRadio();myRadio.option("one");myRadio.option("two");myRadio.value("two");
}function draw() {
background(220);textSize(40);text(myRadio.value(), 10, 50);
}CS106 W20 41
A)
B)
C)
![Page 42: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/42.jpg)
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;function setup() {createCanvas(100, 100);myRadio = createRadio();myRadio.option("one");myRadio.option("two");myRadio.value("two");
}function draw() {
background(220);textSize(40);text(myRadio.value(), 10, 50);
} CS106 W20 42
A)
B)
C)
![Page 43: JavaScript p5 and the DOM - student.cs.uwaterloo.ca€¦ · JavaScript p5 and the DOM •To date we have always used the ^canvas •Everything is drawn to the canvas •Use createCanvas()](https://reader033.vdocuments.site/reader033/viewer/2022042912/5f479729ef353751222f5876/html5/thumbnails/43.jpg)
The End
CS106 W20 43