p5.js DOM and Rendering Complete Reference
DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. The functions used in p5.js are mentioned below.
|
DOM |
Description |
|---|---|
| select() | It searchs an element in the page with the given id, class or tag name and return it as a p5.element. |
| selectAll() | It searchs for elements with the given id, class or tag name and return it as a p5.Element array. |
| removeElements() | It removes all the elements currently present that are created by p5 |
| changed() | It is fired whenever the value of an element gets changed. |
| input() | It is invoked whenever user input is detected on the element. |
| createSpan() | It creates a span element in the DOM with the given optional inner html. |
| createSlider() | It creates a slider (input) element in the DOM. |
| createButton() | It creates a button element in the DOM. |
| createCheckbox() | It creates a checkbox element in the DOM. |
| createSelect() | It creates a dropdown menu element in the DOM for taking input. |
| createRadio() | It creates a radio-button element in the DOM. |
| createColorPicker() | It creates a color-picker element in the DOM for taking input color. |
| createInput() | It creates an input element in the DOM for accepting text input. |
| createFileInput() | It creates an input element with the type of ‘file’ that can be used by the user to select local files. |
| createVideo() | It creates a video element in the DOM. |
| createAudio() | It creates an audio element in the DOM. |
| createElement() | It creates a element in the DOM. |
|
Rendering |
Description |
|---|---|
| resizeCanvas() | It resizes the canvas to the height and width given as parameters. |
| noCanvas() | It removes the default canvas that is created by p5.js. |
| blendMode() | It is used to blend two pixels according to the given blending mode. |
