FRI | DOM elements

DOM Elements #


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

Inspiration #


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.