Document Object Model
This week we're going to add HTML elements to our p5 project to create a user interface using common components from HTML.
Of course, we can add HTML and CSS to our projects in the traditional manner by editing
These function are part of the DOM (Document Object Model) library, which is now a default part of p5.
We can create a new function to actually draw the pattern. Then the user can click the button to generate new patterns.
Let's add another button.
For this one, let's add a button for the user to save an image.
Changing the pattern
We can use buttons to change the values that determine how our pattern looks.
In this example using a slider, we'll use the
rotateSlider to give the user more control over the rotation.
Using HTML form input is another way to let the user interact with our sketch. We can also take input in the form of text.
In this example using a text input, we need the
nameInput variable to keep track of the user input.
Notice where the
button element appears in this example, and that it takes on the default CSS styling of a button. We can use CSS styling to change the position and style of the button.
Add an inline style into the head section of your
box-shadow: 2px 2px 0 blue;
By default, buttons created by p5 are position absolute, with a top and left value set by the
button.position() function. We can position it inside of the sketch, but we need to add the sketch to a new container to make that easier.
First we'll add a new
div to contain the sketch and it's buttons:
Then add some styling in that old style.css we haven't touched in a while. The element width should match the width of our canvas:
Now that we have the sketch container set up, set the parent of the sketch canvas and any other elements to that sketch:
var myCanvas = createCanvas(720, 360);
And we can set the CSS position of the button:
Check out more examples of HTML and CSS functionality in p5 with this tutorial: Beyond the canvas