Customizing buttons in p5js with DOM

Question

I am trying to customize a button using the p5js DOM library.

I have looked at the p5js reference and other sources, but there doesn't seem to be anything there.

var button;
  function setup() {
    createCanvas(100, 100);
    background(0);
    button = createButton('click me');
    button.position(19, 19);
    button.mousePressed(changeBG);
  }
  function changeBG() {
    var val = random(255);
    background(val);
  }

What I want is a way to give the button a color or change the size of the button if that is possible (the code above just makes a button that changes the background of the screen).

score 1 · Answer 1 · answered Mar 24 '19 at 15:34

1

Step one: Learn about CSS. Here are a few resources:

CSS - W3Schools
CSS - MDN
CSS - HappyCoding (disclaimer: I wrote this)

Step two: Use the style() function from P5.dom to apply CSS styling to your elements. You can find more info here.

Note that you don't need to use P5.dom to use CSS styling. I'd recommend playing around with a simplified example that doesn't use P5.dom first.

answered Mar 24 '19 at 15:34

Kevin Workman

41,537
9
68
107

Ok, thanks, I know CSS. I just didn't know how to apply it to p5js – Darrow Hartman Mar 24 '19 at 15:53

score 1 · Accepted Answer · answered Oct 05 '22 at 18:40

you can do it using classes and .css file as usual. There is the method class() to do so. Or in the code directly you can manipulate DOM elemnt properties. There are several built in methods, but the DOM element can always be accessed by: .elt like calling button.elt the DOM element is at your disposal so you can call any normal HTML methods on this.

A little example with your code:

  var css_b, val = 71;
  function setup() {
    createCanvas(100, 100);
    background(0);
    css_b = createButton('click me');
    css_b.position(19, 19);
    css_b.style('background-color: #D6B5DD;')
    css_b.mouseOver(()=>css_b.style('background-color: #D35DEB;'));
    css_b.mouseOut(()=>css_b.style('background-color: #D6B5DD;'));
    css_b.mousePressed(changeBG);
  }

function draw() {
  background(val);
}

  function changeBG() {
     val = random(255);
  }

Customizing buttons in p5js with DOM

2 Answers2