7.4: Mouse Interaction with Objects - p5.js Tutorial
14:58
78,045
Reddit
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: mnsoft.info/hd/video/p3XDvcirpah8bp0
Support this channel on Patreon: patreon.com/codingtrain
To buy Coding Train merchandise: www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: processingfoundation.org/support
Send me your questions and coding challenges!: github.com/CodingTrain/Rainbow-Topics
Contact:
Twitter: twitter.com/shiffman
The Coding Train website: thecodingtrain.com/
Links discussed in this video:
HTML playlist: mnsoft.info/seedPLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX.html

Source Code for the all Video Lessons: github.com/CodingTrain/Rainbow-Code
p5.js: p5js.org/
Processing: processing.org
For an Intro to Programming using p5.js: mnsoft.info/seedPLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA.html
For Coding Challenges: mnsoft.info/seedPLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH.html
Help us caption & translate this video!
amara.org/v/bcu3/
📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct

Сэтгэгдлүүд
  • Anonimousxz
    Anonimousxz

    My friend, you were to earning as a soccer player instead of them !!, alial all the teachers who teach like you !! You enrich society !! Know that people like me from Brazil are here seeing you !! O/

  • Simanta Kalita
    Simanta Kalita

    let bubbles=[]; function setup() { createCanvas(600, 400); for(let i=0; i

  • Lucy Williams
    Lucy Williams

    Thank you so much! Your videos are great

  • agata0214
    agata0214

    Could you explain why it is necessary to put bubbles.push(b) in setup(), instead of draw()?

  • goffredo81
    goffredo81

    You're really a good teacher, thanks for your hard work.. javascript is becoming a wonderful language to learn and to play with. Greetings from Italy!

  • ramin alikhani
    ramin alikhani

    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!

  • ramin alikhani
    ramin alikhani

    cloning humans must become legal! because we need more people like this dude! just one won't suffice our educational needs!

  • Gekyume
    Gekyume

    name a better teacher than him. thought so.

    • Virat Kohli
      Virat Kohli

      No one is Better than him

  • Can we get 100 subs with no videos
    Can we get 100 subs with no videos

    why doesn't mousePressed() work for me

  • Caleb Sherman
    Caleb Sherman

    14:32 You could say you POP the bubbles. ;D

  • Hoang Minh Nguyen
    Hoang Minh Nguyen

    So entertaining!! And still learn a lot :v thank u very much sir

  • Oscar Urrego
    Oscar Urrego

    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? :)

  • Neogenum
    Neogenum

    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.

    • The Coding Train
      The Coding Train

      Apologies! It's here: github.com/CodingTrain/website/tree/master/Tutorials/P5JS/p5.js/07 I need to redo these descriptions and put the code in the web editor for easy access.

  • Weder Castilho de Oliveira
    Weder Castilho de Oliveira

    I just made this with forEach

  • Cagri Uysal
    Cagri Uysal

    editor.p5js.org/cagri.uysal/sketches/8orFqG312

  • Rodrigo Araujo
    Rodrigo Araujo

    Cx

  • JwilliamF
    JwilliamF

    can you PLEAS give me a link to this code

  • sartre01
    sartre01

    check out this program: editor.p5js.org/pbay/full/HyOCY3-f4 mouse over buttons to change their size, click them to change color!

  • Osman Can
    Osman Can

    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 :D But I have a feeling that my algorithm will be handy if the object is rectangular.

  • kosmic dust
    kosmic dust

    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

  • QueteimportaAin'tyourbusinessN'estpastesaffaires
    QueteimportaAin'tyourbusinessN'estpastesaffaires

    WISH YOU HAVE THE MOUSE INTERACTIONS ON PROCESSING BESIDES OF P5.JS.

  • Sauhard Bhandari
    Sauhard Bhandari

    editor.p5js.org/sauhard.eg@gmail.com/sketches/B1mpIF5TQ mouse hover to see random colors :D

  • Lea Li
    Lea Li

    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 ……

  • Victor-Marius Pîrvan
    Victor-Marius Pîrvan

    I'm curious how would you do it with concave polygons?! But without context.isPointInPath(). :)

  • Dustin Marino
    Dustin Marino

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

  • Amirul Idzham
    Amirul Idzham

    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?

    • The Coding Train
      The Coding Train

      Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

  • ZOLDIK
    ZOLDIK

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

  • Johnny- Water
    Johnny- Water

    he is so talkative and entertaining when alone. imagine him drunk and in a company of friends.

  • William Taylor
    William Taylor

    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!

    • William Taylor
      William Taylor

      Wow speedy response! Thank you, I certainly will do! Just also, I've been following this playlist and it's amazing! Can't thank you enough!

    • The Coding Train
      The Coding Train

      Would you mind asking at forum.processing.org/? It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

  • Fredo FPV
    Fredo FPV

    The principle of a bounding box is why in GTAIII characters got stuck in walls rather frequently.

    • William Taylor
      William Taylor

      How do you fix that bug, I've also got that problem!

  • Ibrar Ahmed
    Ibrar Ahmed

    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 .......

  • Brother Lui
    Brother Lui

    (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.

    • Anonimousxz
      Anonimousxz

      Of course it works buddy, see: editor.p5js.org/willianxz/full/dFZVe4bpI You must have implemented it wrong.

  • Skelablack
    Skelablack

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

    • Angel Carvajal
      Angel Carvajal

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

    • Skelablack
      Skelablack

      a bit of help please ...

  • Jeremy Lindsay
    Jeremy Lindsay

    2:57 "Peel away from the array"

  • Bunglay
    Bunglay

    8:51 - 9:06 best part of the whole serie

  • Quinn Arlington Waters
    Quinn Arlington Waters

    i guess my "this.r" was not the radius so i did: if (d < (this.r/2)) and it seemed to work! thank you so much for these videos!!!!

    • Anonimousxz
      Anonimousxz

      Of course it works buddy, see: editor.p5js.org/willianxz/full/dFZVe4bpI You must have implemented it wrong.

  • Filip Kendeš
    Filip Kendeš

    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?

  • k.v.Narasimha Murthy
    k.v.Narasimha Murthy

    he's alive.

  • rbotdance
    rbotdance

    How do I know if the mouse is inside a square?

    • Drunken Monkey
      Drunken Monkey

      if (mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height) Adding half the width/height to each side would mean you could get false positives, as you've made the boundaries twice the size of the rect, and the extra brackets aren't needed as they don't change the order of precedence, of course feel free to use them if you feel it makes it easier to read or whatever. But as Dan said you should probably use local variables and pass mouseX and mouseY to the function. Probably a bit late, but hopefully this helps.

    • rbotdance
      rbotdance

      thank you for answering! :D I wrote this code for squares, I don´t know if there's an easier way to do it: if (mouseX>(this.x-this.width/2)&&mouseX<(this.x+this.width/2)&&mouseY>(this.y-this.height/2)&&mouseY<(this.y+this.height/2)){ }

    • The Coding Train
      The Coding Train

      Use an if statement and check the square boundaries!

  • Ezekiel Bulver
    Ezekiel Bulver

    i really love you kkkkkkk

Дараах
cold
0:13
256мянга.
beat saber
0:25
592мянга.