7.4: Mouse Interaction with Objects - p5.js Tutorial 

Dan, just wanna compliment you on the smooth transition to the whiteboard with the marker flip.

So I see you are telling story about basics again :D 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!

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

You are the best teacher ever! What energy! Joy! Competence! Congratulations, man! You make my day!

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

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

What does it mean to be a bubble

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

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!

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!

Hahah I absolutely love this guy,what an absolute hero!!

Thanks for your classes .. informative and entertaining !!

thanks for the useful lessons, by the way, you are better than all my previous teachers Thanks you so much!!!

0:01 What the hell XD Gotta love these videos!

I'm learning a lot with you, thanks!

Hey Daniel, your tutorial is amazing. I am learning a lot from you! Maybe it will be nicer if there is a written code of each tutorial, so that I can review and find some corrections! :)

Thank you so much! Your videos are great

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!

Yo dude, that''s sick!

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

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

I guess , you should make the code for the clicked function like this : if (d

Really great course!

What will we use instead of the radius of the circle if we workout the same thing with a square shaped( bubble)?

Is it bad of me to want you to forget a dot in order to hear the "this dot" song?

I love your tutorials! 10:50

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

Great work

Please tell if we can write a function or a command regarding the visibility of each individual object?

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

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

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

How can i tell if my mouse is hovering over a sphere in 3D space? i can get the screenX and screenY of the spheres location but the size of the sphere on the screen is different depending on the distance from the camera..

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

hi coding train i just have a question.Shall we be able to make such code with the moving circles and everything by the time we have come to this video?

Hello :) I'm new here! I'm creating an online tool to manipulate type with p5.js, is it possible to do this with text? It might sound a little bit basic (idk ahah) but I'm still learning and I'm a graphic designer transitioning to the programming world! Also, how do I do this with a square? Thanks! I love your videos!

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

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/

What if two bubbles lie in the same point? Wont they be highlighted at the same time? I got that error. And while making the same process for drag the mouse pointer goes out of the circle and it wont drag.

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!

Very good he's very entertaining

Hi, can you please tell how can get boundary of shape when mouse is dragged over its boundary. Please reply

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

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

NICE THE VID CAME :D

any chance you find it increadible hard to fit a canvas into a whole page with borders on the parent elements? as soon as i add any padding but make the canvas child 100%, it rockets over the screen size

he's alive.

Thanks its so fun

how do you add objects to an array in order like in a line rather than randomly

How can I make it so that the bubbles collide (like balls) instead of overlap. Futher, what if I want them to pop when they collide. Finally, is it possible to drag a bubble and drop it in another place?

Hope you do the triangle one day cheers

i wish someone loved me as much as this guy loves his bubbles

dist is kinda usefull.. dist(x1,y1,x2,y2) = sqrt((x1-x2)^2 + (y1-y2)^2)

You are amazing!

...works fine for a circle but what to do for one of those complicated poligons?

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

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?

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

how could I use the same method just with rects? I tried to find the tutorial but I couldn't find it.... thanks in advance :)

"object only know something inside, not the world outside" it's good point.

where is the previous video? I don't know where the word "let" comes from?

I recorded these in the past but for you it'll be the future....deep! Thats a mind f@$k...

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!

Hello! Was wondering if anybody could help me out here, How does this work with irregularly/curved shapes? I have a simple design - a rectangular window and it's raining outside. The rain particles only show if within the rect, no bother! However, a rectangle is a bit stiff so I have curved the edges, though now rain appears outside the 'window' around the edges, and I'm strugling to find a solution to this. Any help would be greatly appreciated! P.S. Your videos are incredible! I have learned so much from you in such little time, thank you so much! Best teacher out there

Can you make an android app using p5? I love your channel and you inspire me to code. I learned a lot from every video i watch from you. I am new to coding and wanted to make a simple learning language using p5. I am struggling creating the main menu with interactive rectangles with text (buttons actually) and then I realized something. Maybe p5 cant make android apps or am i just not good enough?

Can someone tell me how to apply the radius part of the circle function to a square? Am struggling. thanks

What would this look like with triangles instead?

Hi Daniel - Can you please point me in the right direction on how to do a mouse over with object label on a shape that is moving and has transformed....for example - I would like to add a label to my p5 planet in my drawn solar system...how do I add a mouse over on a moving planet type thing.

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

I just made this with forEach

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.

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.

Can Anyone help me out if I want to do the rectangle (I used Center as a rectMode) instead of circle? How can I write it with the mouse clicked?

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.

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.

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

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

i am, your big fan sir.love from pakistan

can anyone tell how we we can check for triangle.

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?

does anyone know why it says cannot read property "move" of undefined

How do you implement mouse interaction in 3D

i really love you kkkkkkk

show() is reserved function by p5js

But what if u want to interact with a key

2:57 "Peel away from the array"

can you PLEAS give me a link to this code

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

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!

Cx in the chat bois 7:13

Hello sir, I have been following your channel for about a month now and I don't think I need to go anywhere else to learn JS and ML, but I'm quite confused right now. Your channel has over 1060 videos and I am about to complete this playlist but I also noticed videos on p5js tutorial up to 17.x series can you please help me by guiding me for a smooth sequential flow :) Hope is all I have right now :) Thus hoping, you notice this comment

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

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

(WARNING - LONG COMMENT) I have a little problem with my program. I've tried to modify the one that you've showed us the way that it should only create new bubbles and add them to the array, when you click the mouse and also you are not hovering over any other bubble. And if you are hovering over any other bubble and you click the mouse, it should only change the color of that particular bubble. It works almost perfectly, but when I have more then 1 bubble in the array, it seems like it only checks if I'm hovering the mouse over the newest bubble, and when I click on some older one, not only does it change the color of that bubble (which is what I want), but also creates a new bubble on top (which is what I don't want to happen, unless I click somewhere, where there is no bubble). Can you look at the code below and tell me what did I miss? let bubbles = []; let isMouseOver; function setup() { createCanvas(500, 400); isMouseOver = false; } function draw() { background(150); for (i = 0; i < bubbles.length; i++) { bubbles[i].show(); bubbles[i].move(); bubbles[i].edges(); } } function mousePressed() { for (i = 0; i < bubbles.length; i++) { bubbles[i].over(mouseX, mouseY); bubbles[i].changeColor(); } if (isMouseOver == false) { let r = random(10, 40); let b = new Bubble(mouseX, mouseY, r, 150); bubbles.push(b); } } class Bubble { constructor(x, y, r, color) { this.x = x; this.y = y; this.r = r; this.c = color; } move() { this.x = this.x + random(-3,3); this.y = this.y + random(-3,3); } show() { strokeWeight(2); fill(this.c, 125); ellipse(this.x, this.y, this.r*2); } edges() { if ((this.x - this.r) < 0) this.x = this.r; if ((this.x + this.r) > width) this.x = width-this.r; if ((this.y - this.r) < 0) this.y = this.r; if ((this.y + this.r) > height) this.y = height-this.r; } over() { let d = dist(mouseX, mouseY, this.x, this.y); if (d < this.r) { isMouseOver = true; print("TRUE"); } else { isMouseOver = false; print("FALSE"); } } changeColor(){ if (isMouseOver && this.c == 150) { this.c = 220; } else if (isMouseOver && this.c == 220) { this.c = 150; } } }

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

Who's going to burst his bubble, not me.

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

why doesn't mousePressed() work for me

00:15 lol!

Actually I want to do it for triangle and polygon