Week 15

Computing outside the canvas: p5.js and web pages.

The DOM stands for Document Object Model. The idea is that the entire web page is processed to create nested objects: Every heading, paragraph, table, image, and list, originally in HTML, is accessible as an object via p5.js and JavaScript programming.

To access “the DOM” from p5.js, you need the “all” template, which includes p5.dom.js, an extension of the core p5.js functions that includes new functions to access DOM objects.

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Example 7

Perlin Noise Example

2D Perlin Noise Example