Event mouse-click

online

function setup(  )
{
    createCanvas(1366, 700)
    background(0)
}

function draw (  )
{
    fill('green')
    rect ( 100,100,300,300 )
}

function mouseClicked()
{
    background(255)
}

How to change the background color by clicking only on the square ?

GoToLoop

https://p5js.org/reference/#/p5/mouseX

http://JeffreyThompson.org/collision-detection/point-rect.php

online

My question you have read ? On the website are examples of events for the entire screen, and I need an event for a particular element !

Chrisir

There is an example in the link above how to check your point (mouseX,mouseY) against your rectangle

if (px >= rx &&         // right of the left edge AND
  px <= rx + rw &&    // left of the right edge AND
py >= ry &&         // below the top AND
py <= ry + rh) {    // above the bottom
    return true;
 }
  return false;

Chrisir

Replace px and py with mouseX and mouseY and rx... with your rectangle

GoToLoop

... and I need an event for a particular element!

A rect() isn't an element! It simply instructs pixels to be drawn on the canvas element as a rectangular shape. :-@

online

Thank you, I understand. But for me, it's bad news that P5.js you cannot bind an event handler to geometric forms. The program code increases, and in General, this approach is generally not practiced. Tell me, do you have specialists who could tweak the code of the framework to allow event binding ?

online

On the forum there are freelancers ? Want to hire a person to hang an event handler on geometric shapes.

GoToLoop

... that p5.js you cannot bind an event handler to geometric forms.

Given p5.js is a JS library, we can at least have an HTMLButtonElement via createButton():

1. https://p5js.org/reference/#/p5/createButton
2. https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLButtonElement

It's rectangular shape only though. And its position() isn't bound to p5.js' HTMLCanvasElement created via createCanvas():

1. https://p5js.org/reference/#/p5/createCanvas
2. https://p5js.org/reference/#/p5.Element/position
3. https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

For other geometric shapes, you're gonna need to create a class to store their coordinate & dimension pairs: https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

Be aware that p5.js, being a spinoff of Processing Java, is canvas-based drawing.

If you find createButton() isn't enough and/or other geometric forms are too tedious to manage manually via classes, you're gonna need some SVGElement vectorial-based library:
https://Developer.Mozilla.org/en-US/docs/Web/API/SVGElement

Dunno much about it. Just heard about Raphaël: 8->

1. http://DmitryBaranovskiy.GitHub.io/raphael/
2. http://DmitryBaranovskiy.GitHub.io/raphael/graffle.html

I daresay you can even mix both p5.js & Raphaël in the same sketch. :ar!