7.4: Mouse Interaction with Objects – p5.js Tutorial

[ad_1]
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:

Support this channel on Patreon:
To buy Coding Train merchandise:
To Support the Processing Foundation:

Send me your questions and coding challenges!:

Contact:
Twitter:
The Coding Train website:

Links discussed in this video:
HTML playlist:

Source Code for the all Video Lessons:

p5.js:
Processing:

For an Intro to Programming using p5.js:
For Coding Challenges:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

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

  1. Julian Vidal Avatar

    Yo dude, that''s sick!

  2. Najib Saad Avatar

    Hey Dan, I tried to use Processing and p5 and I couldn't get the setup correctly can you please make a video explaining how to set up everything (to get the same as you have) because I really want to go along with you in coding. Thanks 🙂

  3. rapy93 Avatar

    This works like a charm for my P5.js projects to detect whether a point is in a certain polygon:
    function inside(point, vs) {
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length – 1; i < vs.length; j = i++) {
    var xi = vs[i][0], yi = vs[i][1];
    var xj = vs[j][0], yj = vs[j][1];

    var intersect = ((yi > y) != (yj > y))
    && (x < (xj – xi) * (y – yi) / (yj – yi) + xi);
    if (intersect) inside = !inside;
    }

    return inside;
    }

  4. Kaushik Sriram Avatar

    hey coding train i have a real big trouble with p5:c. I have brackets installed before p5 so when i open the p5 file in winrar it immediately opens brackets with some set of code. what should i do now to get p5 as a separate application ?(I am using windows 8)plz help me…

  5. Stephen Vinuya Avatar

    Hello Daniel 🙂 i was wondering if you can do a tutorial regarding a 3d interaction with objects I am having a hard time since i must consider the camera location and its look at position 🙂 but nonetheless all your videos have helped me become a better programmer this https://www.youtube.com/watch?v=KWUiTTZJfDY&t=69s is one of the android game that I have made using Processing, its not polished yet but all the concepts involved here are from your videos 🙂

  6. Stephen Lai Avatar

    Sir, I tried to do the exercise you mentioned at the end of this tutorial, when mouseover on bubble changes the shape to rectangle. However I found that p5 doesn't have a particular function called 'function mouseOver(){}', instead it has a mouseover() function like an event and the example I found is weird and it is defined in setup function. I have tried a lot of ways but just can't get it done. If there is 'function mouseOver(){}' it would be simple and easy to accomplish this task, but it has not. So I wonder if you can give me a hand to solve this problem that you want us to finish?

    if there is 'function mouseOver(){}', I would do as below:
    function mouseOver(){
    for(let i = 0; i < bubbles.length; i++){
    let x = random(width);
    let y = random(height);
    let w = random(10, 50);
    let h = random(10, 50);
    bubbles[i].beRectangle(x, y, w, h);
    }
    }

    class Bubble{

    beRectangle(x, y, w, h){
    stroke(255);
    noFill();
    rect(x, y, w, h);
    }
    }

    that is the way you teached, but there is no such a pre-built function, and the example p5.js talked about I don't know how to implement it!

  7. john andres medina Avatar

    Hey congratulations for all your good videos, really helpful!!

    Just one question that comes to my mind:
    I'm seeing you registered the mousePressed event each time for all the bubbles in the array, how efficient is that? is there any other way to achieve the same thing?

    thanks!

  8. Harsh Talpada Avatar

    Hello Daniel, I guess I have asked you the same in the comments on one of your previous video, so I guess it was because of me. (Swag smiley). Well, this is indeed good, but I would like to know how do I apply rotate translation on multiple rectangles, without rotating the entire canvas, and just all the individual rectangles.

  9. Rafael Avatar

    It's a nice channel, but this is way too basic.

  10. john blakley Avatar

    once again, a stellar production, this series is giving me a ton of ideas for art apps in the future

  11. Crazy Alien Avatar

    Hope you do the triangle one day cheers

  12. JowJoris Avatar

    This is so helpfull for my school project where I need to select objects and deselect them, also looking forward to the next video where you show us how to delete from an array, also needed for the project. Great video again!

  13. Angelo Cella Avatar

    I like to see your videos even if I don't understand a thing of Javascript programming.

  14. DirtyBlasion Avatar

    Will we get triangles and other shapes? I really need for a collision system and I don't find anything useful.

  15. mohamed OUADAD Avatar

    do you do your live streams in youtube, if not give me the link pllz, I love you btw, you are awesome

  16. AHTUNGERSAN Avatar

    I'm really fond of your way of teaching and explaining complicated things in a fun way. I love your videos and wish you luck doing this in future! 🙂

  17. js Avatar

    It would be cool to see how one can check the cklicked state for non circular shapes with p5js.

  18. Barnabás Kiglics Avatar

    +The Coding Train 3blue1brown made deep learning part2!!! But we are patient. 🙂

  19. Илья Завьялов Avatar

    So I see you are telling story about basics again 😀 nice to see you care about newcomers! I'm, myself, really thankful to you for getting me into p5.js and Javascript! You are the most creative, intelligent and interesting to listen to person! Thank you for all of those amazing tutorials I still watch to this day, and good luck to all newcomers!

  20. Elton Bergruh Avatar

    Love your vids! But could you use Processing again once in a while? I'm a Processing person. I know the concepts are the same, but still… Thanks!

  21. victor kuchiki Avatar

    Hey there internet surfer, noob question here
    How can i get a p5 sketch as a background for a webpage?

  22. Monarkh Avatar

    Cx in the chat bois 7:13

  23. luis mokos Avatar

    ok i have a question:
    lets say you create a class line
    how you create a polyline, same as the CAD software do?
    ps. when you press the mouse you add another point or line to the array, but how you can draw a line from the last point to the future point(not pressed yet…) but the canvas draws the line moving alongside the mouse.

  24. A. Valentine Avatar

    When are you planning to do the next coding challenge? Not these teaching lessons.

  25. hunar omer Avatar

    What does it mean to be a bubble

  26. Hans Müller Avatar

    NICE THE VID CAME 😀

  27. Mehedi Abdullah Avatar

    yesterday i saw there is 7.9 and 7.10 but today i lost that track…. !!!!!!
    confused…

Leave a Reply

Your email address will not be published. Required fields are marked *