Introduction to Computational Media with p5.js

Unit 7 DOM

Overview

In this unit students learn how HTML and Javascript can work together in their p5 sketches. They create HTML elements by adding them to an HTML file, then using Javascript, and then manipulate then dynamically, to animate them and add interactivity. For their final project, students add an HTML interface to one of their previous projects.

Big Ideas

Understand how the front end of web pages works
p5 sketches, like most software projects, are composed by different files that interact with each other and are often written in different languages

Enduring Understandings

Understand how HTML and Javascript interact to render content on web pages.

Goals

Understand HTML

Understand the struture of HTML. Be able to add elements to an HTML file both static and dynamically

Understand DOM Manipulation

Understand the DOM tree structure, and how to manipulate its objects from Javascript to create animations and add interactivity

Create HTML Interfaces

Know how to create buttons, sliders, and text inputs, and to their events to control properties of p5 sketches

Learning Activities

1 . Add a title and text to your page

Add header, paragraph and image HTML elements to index.html

2 . Add title and text from Javascript

Create headers and paragraphs dynamically using Javascript

3 . Move canvas around

Manipulate DOM elements with html() and position()

4 . Create a button that changes the background

Handling DOM events with Callbacks: When mouse pressed anywhere, make background lighter; when mouse pressed over button, set color of a rect to random

5 . Add an interface to your sketch: sliders, buttons, text inputs

Interacting with the DOM using Sliders, Buttons, and Text Inputs

6 . Hover on text, drag sliders: control your sketch using HTML elements

Other Events and Inputs: mouseOver, mouseOut, changed, input (for any DOM element)

Final Project Prompt

Add an HTML interface to one of your final projects from the previous units.

Level 1

Level 2

Level 3

Final Project Examples