DOM Elements #

• October 28, 2022
• Room L208
• 9:15–12:00

Inspiration #

• Juhani Halkomäki Instagram
• Juhani Halkomäki fxHash
• Juhani Halkomäki Open Processing
• Juhani Halkomäki objkt.com

JavaScript DOM (Document Object Model) #

• See the W3 tutorials here.
• p5.js examples for DOM

p5.js Reference #

Here are some of the things that you will mostly use, but see the reference for all of the functions under the DOM category.

• createSlider
• createButton
• createCheckbox
• createSelect
• createRadio
• createColorPicker

Sliders #

Buttons #

Assignments #

DOM Elements #

Create a sketch that uses sliders, buttons and other DOM elements to control colors and other variables in your sketch. Place the elements on top of the canvas and use createCanvas(windowWidth, windowHeight); so that it works well inside Open Processing.

Post it to our Open Processing class.

Classes #

Let’s also practice using classes and obejcts. Create a sketch that does the following:

• Create a class called Bouncer
• Make it behave like our earlier bouncing ball example
• Create 100 bouncers bouncing on the canvas
• Post it to our Open Processing class in the Object/Classes collection.

Or if you want more challenge, make a particle that uses noise() for animating it.