D4mations.com

7.4: Mouse Interaction with Objects – p5.js Tutorial



How can an object interact with the mouse? This video looks at how you can implement basic mouse interaction (rollover, mousePressed) with your own code and HTML5 canvas.

Next video: https://youtu.be/tA_ZgruFF9k

Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: https://processingfoundation.org/support

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/

Links discussed in this video:
HTML playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Help us caption & translate this video!

https://amara.org/v/bcu3/

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Original source

d4mer

, , , , , , , , , , , ,

34 responses to “7.4: Mouse Interaction with Objects – p5.js Tutorial”

  7. well that works easy for bubbles (circles) but I'm not quite sure how to decide whether the point is in or out other kinds of shapes, maybe not so complex ones, maybe just regular polygons, could you help me with that? 🙂

  8. Does anyone have a link to the code for this lesson? I've looked all over the github and I cant seem to find it.
    I've tried writing it exactly as it is in the video and it doesnt work for some reason.

  14. Before you said "there is a function for this, called dist()" at 6:58, I thought that you'll write an algorithm for it and I guessed something like;

    if (mouseX < this.x + (r/2) && mouseX > this.x – (r/2) && mouseY < this.y + (r/2) && mouseY > this.y – (r/2) {
    console.log("rectangular clicked!");
    }

    Boy I was so wrong 😀
    But I have a feeling that my algorithm will be handy if the object is rectangular.

  15. thank you so much dan for these top class videos , they help me in my programming career though my tools are not visual like yours but i use your courses to improve my algorithm skills and how to think and apply algorithms for problem solving , i so much appreciate ur hard work,,greetings and love form Egypt <3

  20. successfully did the exercise in this video to change them to rectangles and have them turn on and off and apparently bubbles are rectnagles now according to my code! here's my code for it:

    let bubbles = [];

    function setup() {
    createCanvas(600,400)
    for (let i = 0; i < 10; i++) {
    bubbles[i] = new Bubble(random(0, width), random(0, height), random(width), random(height))
    }
    }

    function draw() {
    background(0)
    for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].move()
    bubbles[i].show()

    }
    }
    function mousePressed() {
    for (i = 0; i < bubbles.length; i++) {
    bubbles[i].clicked(mouseX, mouseY)
    }
    }

    class Bubble {
    constructor(x,y, x2, y2) {
    this.x = x
    this.y = y
    this.x2 = x2
    this.y2 = y2
    this.brightness = 0
    }
    clicked(x, y) {
    let d = dist(x, y, this.x, this.y)
    if (mouseX > this.x && mouseX < this.x + this.x2 && mouseY > this.y && mouseY < this.y + this.y2 && this.brightness == 0) {
    this.brightness = 255
    //console.log("CLICKED ON BUBBLE")

    } else if (mouseX > this.x && mouseX < this.x + this.x2 && mouseY > this.y && mouseY < this.y + this.y2 && this.brightness == 255) {
    this.brightness = 0
    }

    }
    move() {
    this.x = this.x + random(-5,5)
    this.y = this.y + random(-5,5)

    }
    show() {
    stroke(255)
    strokeWeight(4)
    fill(this.brightness, 125)
    rect(this.x, this.y, this.x2, this.y2)

    }

    }

  21. I don't get it. I did like almost looking like yours. But what happened is all my object turned color that I've defined. I believe the issue is in my array and the attribute that I've defined. So how do I supposed to do?

  22. @The Coding Train 8:18 i did that code without using the dist() function : you just put conolse.log in that clicked() function : and in mousePressed do :
    function mousePressed() {
    if (abs(bubble.x – mouseX) < bubble.r && abs(bubble.y – mouseY) < bubble.r) {
    bubble.clicked();
    }
    }

  24. I have a strange bug that makes it so when I click a bubble a different bubble changes colour… if there is just one in the array then it changes colour but if there are two then the wrong one will change colour… Any ideas?! It's driving me mad!

  28. hello i tried to this tuto with javascript but can get the same result can i get some help please
    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext("2d");

    let bubbles = [];

    function random(min, max) {
    return Math.floor(Math.random() * (max – min + 1)) + min;
    }

    function setup() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    for (let i = 0; i < 10; i++) {
    let x = random(0, canvas.width);
    let y = random(0, canvas.height);
    let r = random(20, 60);
    let b = new Bubble(x, y, r);
    bubbles.push(b);
    }

    setInterval(() => {
    draw();
    }, 30);
    }

    function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for(let i = 0; i < bubbles.length; i++) {
    bubbles[i].display();
    bubbles[i].move();
    }
    }

    function pressed() {
    let x = event.clientX;
    let y = event.clientY;

    for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].clicked(x, y);
    }
    }

    class Bubble {
    constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.lineWidth = 0;
    this.ctx = ctx;
    }

    move () {
    this.x = this.x + random(-2, 2);
    this.y = this.y + random(-2, 2);
    }

    clicked (x, y) {
    let dist = Math.round(Math.sqrt(Math.pow(x – this.x, 2) + Math.pow(y – this.y, 2)));
    if(dist < this.r) {
    this.lineWidth= 5;
    }
    }

    display () {
    this.ctx.beginPath();
    this.ctx.strokeStyle = 'white';
    this.ctx.fillStyle = 'red';
    this.ctx.lineWidth = this.lineWidth;
    this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
    this.ctx.fill();
    this.ctx.stroke();
    }
    }

    window.addEventListener('load', setup);
    canvas.addEventListener('mousedown', pressed);

Leave a Reply