P5.dom.js

Goal:

Using p5.js create a sketch that allows us to put in some controls. When completed, your sketch will have:

• a slider that lets you change the colour of the sky
• an input field that lets you change how much grass to generate
• a mouse interaction that generates a new cloud at the point of the mouse click.

Try it Here:

To start the project, click on the link below. Use the tutorial link and follow the instructions:

p5js dom project

In Depth Guide

P5.js provides a library called p5.dom.js that allows you to add DOM (Document Object Model) elements to your sketch. These DOM elements include controllers such as sliders, buttons, input fields, etc. To use p5.dom.js, you must add that component to your index.html file in a script tag.

Topics:

Details: