{"id":17025886,"url":"https://github.com/Lartu/p5.clickable","last_synced_at":"2026-04-11T23:30:16.260Z","repository":{"id":38327958,"uuid":"164387637","full_name":"Lartu/p5.clickable","owner":"Lartu","description":"Event driven, easy-to-use button library for P5.js 👆","archived":false,"fork":false,"pushed_at":"2024-08-26T22:41:52.000Z","size":333,"stargazers_count":119,"open_issues_count":9,"forks_count":64,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-08-27T01:33:46.627Z","etag":null,"topics":["button","gui","library","p5","p5-library","p5js","p5xjs","ui","ui-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lartu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-07T06:23:19.000Z","updated_at":"2024-08-26T22:41:55.000Z","dependencies_parsed_at":"2023-02-09T02:01:25.546Z","dependency_job_id":null,"html_url":"https://github.com/Lartu/p5.clickable","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lartu%2Fp5.clickable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lartu%2Fp5.clickable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lartu%2Fp5.clickable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lartu%2Fp5.clickable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lartu","download_url":"https://codeload.github.com/Lartu/p5.clickable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219847889,"owners_count":16556344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","gui","library","p5","p5-library","p5js","p5xjs","ui","ui-components"],"created_at":"2024-10-14T07:30:09.898Z","updated_at":"2026-04-11T23:30:16.162Z","avatar_url":"https://github.com/Lartu.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/Lartu/p5.clickable/blob/master/images/logo.png\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-red\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/current_version-1.2-green.svg\"\u003e\n\u003c/p\u003e\n\nWelcome! This is **p5.clickable**, a [p5.js](http://p5js.org) library that lets you create and customize **buttons** and assign event-based behaviours to them. With **p5.clickable** you can create buttons and define what happens when the user *hovers over*, *clicks*, *releases* or *moves* the cursor *outside* of them.\n\nCan't wait? Check [this **live example**](https://lartu.github.io/p5.clickable/example/example.html) to see some of the things this library can do. Its source code is available in the [example](example) folder of this repository.\n\n\u003e:warning: **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.\n\n## :telescope: Code Example\nWith **p5.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:\n\n```javascript\nmyButton = new Clickable();     //Create button\nmyButton.locate(20, 20);        //Position Button\nmyButton.onPress = function(){  //When myButton is pressed\n  this.color = \"#AAAAFF\";       //Change button color\n  alert(\"Yay!\");                //Show an alert message\n}\n```\nEasy as pie!\n\n## :microscope: Documentation\n\n### Including the p5.clickable Library\n\nTo include the **p5.clickable** library into your p5.js project, copy the [p5.clickable.js](library/p5.clickable.js) file into\nyour project directory and then add the line\n\n```html\n\u003cscript src=\"path/to/p5.clickable.js\"\u003e\u003c/script\u003e\n```\n\nto the HTML file that includes your p5.js script **after** the line that imports the p5 library, but **before** all of your personal code or the line that imports your personal code. Check the [example project HTML file](p5.clickable/example/example.html) for more information.\n\n### Creating a Clickable\n\n**p5.clickable** provides the `Clickable` class (a *Clickable* is just a button). To create a button just instantiate a new Clickable, like this:\n\n```javascript\nmyButton = new Clickable();\n```\n\nThe starting position of a Clickable defaults to (0, 0) and its size to (100, 50). \n\n~~You can also create it at a different location:~~\n\n\u003e:warning: Sorry, this isn't working at the moment. It will be re-added in the next release.\n\n```javascript\nmyButton = new Clickable(200,300);\n```\n\n### Displaying a Clickable\n\nTo **display** a Clickable, you have to call its `draw` method inside the `draw` function of your p5.js script.\n\n```javascript\nfunction draw(){ // This is the p5.js draw function.\n  //...\n  myButton.draw(); // \u003c- Draw the 'myButton' Clickable\n  //...\n}\n```\n\nThis is very important! If you don't call this method your button will not be shown and it also **won't respond\nto any events**!\n\n### Moving a Clickable\n\nTo move a Clickable you can change its `x` and `y` properties. You can also use this properties to read the current\nlocation of a Clickable.\n\n```javascript\nmyButton.x = 100;\nmyButton.y = 200;\n```\n\nYou can also use the `locate` method to change the location of a Clickable.\n\n```javascript\nmyButton.locate(100, 200);\n```\n\n### Resizing a Clickable\n\nTo resize a Clickable you can modify its `width` and `height` properties. You can also use this properties to read the current size of a Clickable.\n\n```javascript\nmyButton.width = 250;\nmyButton.height = 100;\n```\n\nYou can also use the `resize` method to change the size of a Clickable.\n\n```javascript\nmyButton.resize(250, 100);\n```\n\n### Altering the Appearance of a Clickable\n\nClickables contain properties that can be changed to alter their appearance:\n\n```javascript\nmyButton.color = \"#FFFFFF\";       //Background color of the clickable (hex number as a string)\nmyButton.cornerRadius = 10;       //Corner radius of the clickable (float)\nmyButton.strokeWeight = 2;        //Stroke width of the clickable (float)\nmyButton.stroke = \"#000000\";      //Border color of the clickable (hex number as a string)\nmyButton.text = \"Press Me\";       //Text of the clickable (string)\nmyButton.textColor = \"#000000\";   //Color of the text (hex number as a string)\nmyButton.textSize = 12;           //Size of the text (integer)\nmyButton.textFont = \"sans-serif\"; //Font of the text (string)\nmyButton.textScaled = false;       //Whether to scale the text with the clickable (boolean)\n```\n\n### Clickable Events\n\nThe Clickable class provide four methods that are called when the user interacts with a Clickable: `onOutside`, `onHover`, `onPress` and `onRelease`.\n\n`onOutside` is called whenever the cursor is not hovering over the Clickable.\n\n```javascript\nmyButton.onOutside = function(){\n  console.log(\"Hey! Press me!\");\n}\n```\n\n`onHover` is called whenever the cursor is hovering over a Clickable, but it is not being pressed.\n\n```javascript\nmyButton.onHover = function(){\n  console.log(\"The cursor is over me!\");\n}\n```\n\n`onPress` is called when the user presses the Clickable.\n\n```javascript\nmyButton.onPress = function(){\n  console.log(\"I have been pressed!\");\n}\n```\n\n`onRelease` is called when the user clicks a Clickable and then releases the click while within the area of the Clickable.\n\n```javascript\nmyButton.onRelease = function(){\n  console.log(\"I have been released!\");\n}\n```\n\n### Images in a Clickable\n\nYou can add an image to a clickable like this:\n\n```javascript\nmyButton.image = myImage; // myImage is an image loaded from p5's loadImage()\n```\n\nBy default the image will stretch to fill the button, but you can disable the stretching with the `fitImage` property.\n\n```javascript\nmyButton.fitImage = true; // fits the image inside the button with the image's original aspect ratio\n```\n\nYou can also scale the image with the `imageScale` property.\n\n```javascript\nmyButton.imageScale = 1.2; // useful if your image has some extra transparent padding\n```\n\n## :beers: Contributing\nIf 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.\n\n## :scroll: Licensing  \nThe **p5.clickable** library is licensed under the MIT License. You can find a copy of the MIT License on this repository.\n\nThis repository also includes code from the [p5.js](https://github.com/processing/p5.js) library, that is licensed under the LGPL 2.1 license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLartu%2Fp5.clickable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLartu%2Fp5.clickable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLartu%2Fp5.clickable/lists"}