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) #
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.
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.