Repository files navigation

Welcome! This isp5.clickable, ap5.js library that lets you create and customizebuttons and assign event-based behaviours to them. Withp5.clickable you can create buttons and define what happens when the userhovers over,clicks,releases ormoves the cursoroutside of them.

Can't wait? Checkthislive example to see some of the things this library can do. Its source code is available in theexample folder of this repository.

⚠️Attention Contributors! It seems that in one poorly checked pull request some of the newly contributes features were deleted. Sorry! I will add them again in the next release alongside all new features.

Withp5.clickable you can get a button up and running with just a few lines of code. For example, to create a plain white button at (20, 20) that when pressed changes color and shows an alert message you do:

myButton=newClickable();//Create buttonmyButton.locate(20,20);//Position ButtonmyButton.onPress=function(){//When myButton is pressedthis.color="#AAAAFF";//Change button coloralert("Yay!");//Show an alert message}

Easy as pie!

To include thep5.clickable library into your p5.js project, copy thep5.clickable.js file intoyour project directory and then add the line

<scriptsrc="path/to/p5.clickable.js"></script>

to the HTML file that includes your p5.js scriptafter the line that imports the p5 library, butbefore all of your personal code or the line that imports your personal code. Check theexample project HTML file for more information.

p5.clickable provides theClickable class (aClickable is just a button). To create a button just instantiate a new Clickable, like this:

myButton=newClickable();

The starting position of a Clickable defaults to (0, 0) and its size to (100, 50).

You can also create it at a different location:

⚠️ Sorry, this isn't working at the moment. It will be re-added in the next release.

myButton=newClickable(200,300);

Todisplay a Clickable, you have to call itsdraw method inside thedraw function of your p5.js script.

functiondraw(){// This is the p5.js draw function.//...myButton.draw();// <- Draw the 'myButton' Clickable//...}

This is very important! If you don't call this method your button will not be shown and it alsowon't respondto any events!

To move a Clickable you can change itsx andy properties. You can also use this properties to read the currentlocation of a Clickable.

myButton.x=100;myButton.y=200;

You can also use thelocate method to change the location of a Clickable.

myButton.locate(100,200);

To resize a Clickable you can modify itswidth andheight properties. You can also use this properties to read the current size of a Clickable.

myButton.width=250;myButton.height=100;

You can also use theresize method to change the size of a Clickable.

myButton.resize(250,100);

Clickables contain properties that can be changed to alter their appearance:

myButton.color="#FFFFFF";//Background color of the clickable (hex number as a string)myButton.cornerRadius=10;//Corner radius of the clickable (float)myButton.strokeWeight=2;//Stroke width of the clickable (float)myButton.stroke="#000000";//Border color of the clickable (hex number as a string)myButton.text="Press Me";//Text of the clickable (string)myButton.textColor="#000000";//Color of the text (hex number as a string)myButton.textSize=12;//Size of the text (integer)myButton.textFont="sans-serif";//Font of the text (string)myButton.textScaled=false;//Whether to scale the text with the clickable (boolean)

The Clickable class provide four methods that are called when the user interacts with a Clickable:onOutside,onHover,onPress andonRelease.

onOutside is called whenever the cursor is not hovering over the Clickable.

myButton.onOutside=function(){console.log("Hey! Press me!");}

onHover is called whenever the cursor is hovering over a Clickable, but it is not being pressed.

myButton.onHover=function(){console.log("The cursor is over me!");}

onPress is called when the user presses the Clickable.

myButton.onPress=function(){console.log("I have been pressed!");}

onRelease is called when the user clicks a Clickable and then releases the click while within the area of the Clickable.

myButton.onRelease=function(){console.log("I have been released!");}

You can add an image to a clickable like this:

myButton.image=myImage;// myImage is an image loaded from p5's loadImage()

By default the image will stretch to fill the button, but you can disable the stretching with thefitImage property.

myButton.fitImage=true;// fits the image inside the button with the image's original aspect ratio

You can also scale the image with theimageScale property.

myButton.imageScale=1.2;// useful if your image has some extra transparent padding

If there's a missing feature you'd like to see on p5.clickable, feel free to write it and submit a pull request. Something broke? Please try to fix it! Also feel free to submit issues, bug reports and requests for future features.

Thep5.clickable library is licensed under the MIT License. You can find a copy of the MIT License on this repository.

This repository also includes code from thep5.js library, that is licensed under the LGPL 2.1 license.