December 9

Interacting with HTML

So far, we have (mostly) just placed a canvas on an empty page.

HTML (as you probably know) is a very powerful language for describing page content and layout, but HTML is mostly static. Nothing happens on the page in response to user input except following links to new pages. (This works by requesting a new page from the server indicated in the URL.)

JavaScript can access and change HTML elements. With JavaScript you have virtually full control over everything on the page. You also have full control over every pixel on a canvas, but sometimes it’s nice to use the flexible layout and style capabilities of HTML to do most of the work, and make everything more interactive with a little JavaScript.

Changing Text

change

Here’s a program to replace text in a paragraph when you click a button. Here is the HTML file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< !DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Change Text Example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.sound.js"></script>
    <script src="change.js" type="text/javascript"></script>
  </head>
  <body>
<h1>JavaScript Can Change Text Within HTML Documents</h1>
<p>This example based on <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html">w3schools.com example</a>
</p>
<p id="demo">JavaScript can change HTML content.</p>
  </body>
</html>

Pay attention to line 15. This is just an HTML paragraph element, but notice the id=”demo” property.

Now, let’s look at change.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var counter = 0;
 
function setup() {
    // if you do not make a canvas, a 100x100 canvas will be created
    createCanvas(0, 0);
    button = createButton('Click Me!');
    button.mousePressed(changeSomeText);
}
 
 
function changeSomeText() {
    counter = counter + 1;
    document.getElementById('demo').innerHTML = 'Hello JavaScript!' +
        ' You clicked ' + counter + ' times.';
}

On line 6, we create a button. The button is added at the end of the existing web page, which was described by the HTML given above.

Line 7 says “when the button is clicked, call the function changeSomeText().

To change something in the HTML, we have to find it. Notice on line 13 the call to document.getElementById('demo'). This searches the HTML for ID “demo”, which we say on line 15 of the HTML. Now that we have the paragraph, we can replace it by assigning to the innerHTML property. It’s as if we just delete all the text in the paragraph and insert a new string.

Changing Colors and other Properties

colors

Here’s an example that changes text color. We use the same trick of labeling an element with id="demo". Here’s the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Change Text Color Example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.sound.js"></script>
    <script src="hprint.js" type="text/javascript"></script>
    <script src="colors.js" type="text/javascript"></script>
  </head>
  <body>
<h1>JavaScript Can Change Text Colors</h1>
<p id="demo"><big><b>This text color is computed by JavaScript in the draw() function.</b></big></p>
  </body>
</html>

And here is some JavaScript that, in draw, locates the paragraph and sets the color of the style property to a color based on Perlin noise:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var counter = 0;
 
function setup() {
    // if you do not make a canvas, a 100x100 canvas will be created
    createCanvas(0, 0);
    frameRate(10);
    hlines(1);
}
 
 
function draw() {
    counter = counter + 0.1;
    var red = round(noise(counter) * 255);
    var green = round(noise(counter + 2) * 255);
    var blue = round(noise(counter + 4) * 255);
    var c = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
    hprint("c is "); hprintln(c);
    document.getElementById('demo').style.color = c;
}

Changing Text Size and Using Sliders

Click this to see animation:

fontsize

This example uses a slider rather than a button. The value of the slider is accessed in draw and used to set the font size. Notice that the “font-size” style is set with the “fontSize” property (I don’t know how you’d ever know this except by reading some very long technical documents or searching for examples on the web; I guessed wrong several times) and notice that the size is actually a string ending in “%”. (Again, this is very tricky, and if you just assign a number or even a string such as “20”, nothing will happen because the non-HTML acceptable value is ignored.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Change Font Size Example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.sound.js"></script>
    <script src="hprint.js" type="text/javascript"></script>
    <script src="fontsize.js" type="text/javascript"></script>
  </head>
  <body>
<h1>JavaScript Can Change Font Sizes</h1>
<p id="demo">This text size is computed by JavaScript in the draw() function.</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var slider;
 
function setup() {
    // if you do not make a canvas, a 100x100 canvas will be created
    createCanvas(0, 0);
    slider = createSlider(0, 400, 100);
    frameRate(10);
    hlines(1);
}
 
function draw() {
    var x = slider.value();
    hprint("x is "); hprintln(x);
    document.getElementById('demo').style.fontSize = "" + x + "%";
}

Using Pop-Up Messages

alert

You can pop up a message using alert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< !DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Alert Example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.sound.js"></script>
    <script src="hprint.js" type="text/javascript"></script>
    <script src="alert.js" type="text/javascript"></script>
  </head>
  <body>
<h1>JavaScript Can Pop Up Messages</h1>
  </body>
</html>

Notice there’s nothing in the HTML to support the message. In the javascript, we add a button, but you could call the showMessage() at any time for any reason. The string to be displayed could be any string you can compute in JavaScript, e.g. you could display the value of some variable.

1
2
3
4
5
6
7
8
9
10
11
function setup() {
    // if you do not make a canvas, a 100x100 canvas will be created
    createCanvas(0, 0);
    button = createButton('Click Me!');
    button.mousePressed(showMessage);
}
 
function showMessage() {
    window.alert(
        "You clicked a button. Do not *EVER* click a button again!");
}

Using a Dropdown List for Selection

select

You can use Dropdown Lists, describing them in HTML and acting upon selections with JavaScript. Here’s some HTML. Notice the use of a form containing a select element. The select element has an id=”shape” so that we can “find” it with JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< !DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Dropdown List Example</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/addons/p5.sound.js"></script>
    <script src="hprint.js" type="text/javascript"></script>
    <script src="select.js" type="text/javascript"></script>
  </head>
  <body>
<h1>JavaScript Can Use Dropdown Lists</h1>
(Based on <a href="http://www.w3schools.com/js/tryit.asp?filename=try_dom_select_option">w3schools example</a>.)
<p>
<form>
Pick a shape:
 <select id="shape">
  <option>Square</option>
  <option>Ellipse</option>
  <option>Triangle</option>
  <option>Line</option>
 </select>
</form>
</p><p><!-- canvas will go here -->
</p></body>
</html>

In the JavaScript, we can read the current selection. It is an integer index based at zero (0), and we use a switch statement to “decode” the index into an action, which is to draw the shape:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function setup() {
    // if you do not make a canvas, a 100x100 canvas will be created
    createCanvas(200, 200);
    frameRate(20);
    hlines(1);
    rectMode(CENTER);
    angleMode(DEGREES);
}
 
function draw() {
    var obj = document.getElementById("shape");
    background(200);
    index = obj.selectedIndex;
    hprintln("obj.selectedIndex", index);
    push();
    translate(width/2, height/2);
    rotate(millis() / 20);
    fill(240, 240, 10);
    switch (index) {
    case 0: // square
        rect(0, 0, 100, 100);
        break;
    case 1: // ellipse
        ellipse(0, 0, 100, 50);
        break;
    case 2: // triangle
        triangle(-60, -40, 60, -40, 0, 60);
        break;
    case 3: // line
        strokeWeight(5);
        line(-50, 0, 50, 0);
        break;
    }
    pop();
}