How to I make my button change a variable?

Question

How do I make my button change a variable?

I'm very new to programming and even newer to p5.js and had this issue while trying to create a very basic drawing software. I am able to draw just fine as well as change the color with a key on my computer, but now I'm trying to add a feature where you can change the size of the cursor to draw bigger or smaller lines. I have created a button on the screen but cannot figure out how to do the previously mentioned task. I have tried making a function that is called when you click the button and that seems like it will work, but I cannot figure out how to do it or where to put it in the code.

function draw() {
    let yel = color(255, 255, 0);
    let red = color(255, 0, 0);
    let black = color(0);
    let green = color(0, 255, 0);
    let blue = color(0, 0, 255);

    var size;

    if(mouseIsPressed) {
        noStroke();

        if(keyIsPressed) {
            if(keyCode === UP_ARROW) {
                fill(red);
            }else if(keyCode === RIGHT_ARROW) {
                fill(green);
            }else if(keyCode === LEFT_ARROW) {
                fill(blue);
            }else {
                fill(black);
            }
        }

        if(mouseButton === LEFT) {
            ellipse(mouseX, mouseY, size, size);
        }
    }
}

The function that I mentioned above is not in the code currently. All code shown works just fine. I have a button in the html document with a button with an onclick event to activate function 'S1'.

Answer 1

You just need to add an event listener to the button ( https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener ), then run your code inside of that:

 document.addEventListener('DOMContentLoaded', function() { var supaCoolButton = document.querySelector('.supa_cool_button') supaCoolButton.addEventListener('click', function() { console.log('Call functions in here!') // You would invoke `draw()` here. }) }) 

 <button class="supa_cool_button">Check me out.</button> 

If you're willing to share a larger snippet, we can show you how to better incorporate that function.

Answer 2

I took some creative liberties and came up with something that might help you. I'll assume that, without any embellishments, you want your project to look something like this:

 function setup(){ createCanvas(400, 200); background(120); } function draw() { let yel = color(255, 255, 0); let red = color(255, 0, 0); let black = color(0); let green = color(0, 255, 0); let blue = color(0, 0, 255); if(mouseIsPressed) { noStroke(); if(keyIsPressed) { if(keyCode === UP_ARROW) { fill(red); }else if(keyCode === RIGHT_ARROW) { fill(green); }else if(keyCode === LEFT_ARROW) { fill(blue); }else { fill(black); } } if(mouseButton === LEFT) { ellipse(mouseX, mouseY, size, size); } } } var size = 2; var increment = 2; function increaseSize(){ size += increment; strokeWeight(size); document.getElementById("currentsize").innerHTML = size; } function decreaseSize(){ if(size > increment) size -= increment; strokeWeight(size); document.getElementById("currentsize").innerHTML = size; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <div id="controls"> <button onclick="increaseSize()">BIGGER</button> <button onclick="decreaseSize()">SMALLER</button> <label id="currentsize">2</label> </div> 

The points of note being changing the scope of the size variable, the renaming of your S1() function to something more meaningful and the additional button and label in the HTML. Each function will increase or decrease the current size of the ellipse by the amount noted in the increment variable.