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

34 thoughts on “7.4: Mouse Interaction with Objects – p5.js Tutorial

  • August 15, 2019 at 03:40
    Permalink

    this little sweet video is a great piece of work to explain polymorphism and oop design patterns. Shiffman, you are a hell of a guy! I bestow the presidency of united stated to you!

  • August 15, 2019 at 03:40
    Permalink

    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? 🙂

  • August 15, 2019 at 03:40
    Permalink

    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.

  • August 15, 2019 at 03:40
    Permalink

    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.

  • August 15, 2019 at 03:40
    Permalink

    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

  • August 15, 2019 at 03:40
    Permalink

    I change bubble into box (3D with WEBGL)and ┭┮﹏┭┮ it don't work (it didn't excite the move and the show in WEBGL ?)thankyou Coding guy ……

  • August 15, 2019 at 03:40
    Permalink

    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)

    }

    }

  • August 15, 2019 at 03:40
    Permalink

    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?

  • August 15, 2019 at 03:40
    Permalink

    @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();
    }
    }

  • August 15, 2019 at 03:40
    Permalink

    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!

  • August 15, 2019 at 03:40
    Permalink

    Hi sir
    I like your channel and videos .
    Your videos are very helpful .
    I try to make a kids fun program like (LND version 5) in processing i3.
    So i need a little help …….

  • August 15, 2019 at 03:40
    Permalink

    (d < this.r) doesn't work anymore. Now it has to be (d < int(this.r/2)) as according to p5.js reference the 3rd and 4th argument of ellipse() are the width and height and NOT the radius.

  • August 15, 2019 at 03:40
    Permalink

    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);

  • August 15, 2019 at 03:40
    Permalink

    Use of the orientation sensor is deprecated. p5.js:46412:6
    Use of the motion sensor is deprecated. p5.js:46412:6

    I get these Warnings. What could this be?

Leave a Reply