Dan, just wanna compliment you on the smooth transition to the whiteboard with the marker flip.
@nazobanaguska
4 жыл бұрын
I was just thinking the same how cool he flipped the marker.
@mrshurukan
7 жыл бұрын
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!
@justinsciullo3342
Жыл бұрын
i i i i don’t have a a a lot at mekzznow how mk😅ii😢 14:58 o i😢
@LIGHTRAYMultimedia
4 жыл бұрын
You are the best teacher ever! What energy! Joy! Competence! Congratulations, man! You make my day!
@spayseghost
2 ай бұрын
omg i cant believe i am coming back to this video all these years later to try to build my ui. dan is amazing still he has made all of the videos i want to watch
@inventanew
7 жыл бұрын
once again, a stellar production, this series is giving me a ton of ideas for art apps in the future
@mj9665
6 жыл бұрын
he is so talkative and entertaining when alone. imagine him drunk and in a company of friends.
@AHTUNGERSAN
7 жыл бұрын
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! :)
@JowJoris
7 жыл бұрын
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!
@begga9682
7 жыл бұрын
JowJoris First, find the index of the element you want to remove: var array = [2, 5, 9]; var index = array.indexOf(5); Note: browser support for indexOf is limited; it is not supported in Internet Explorer 7 and 8. Then remove it with splice: if (index > -1) { array.splice(index, 1); } The second parameter of splice is the number of elements to remove. Note thatsplice modifies the array in place and returns a new array containing the elements that have been removed.
@JowJoris
7 жыл бұрын
Thanks for your help! Although I am coding in processing, I understand what you mean and will use it.
@brotherlui5956
6 жыл бұрын
(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
4 жыл бұрын
Of course it works buddy, see: editor.p5js.org/willianxz/full/dFZVe4bpI You must have implemented it wrong.
@Fun-Planet
4 жыл бұрын
It was never the radius.
@ahmedr.
4 жыл бұрын
I guess , you should make the code for the clicked function like this : if (d
@dwikristianto
2 жыл бұрын
"object only know something inside, not the world outside" it's good point.
@RameenFallschirmjager
5 жыл бұрын
cloning humans must become legal! because we need more people like this dude! just one won't suffice our educational needs!
@TheLegoJungle
6 жыл бұрын
0:01 What the hell XD Gotta love these videos!
@seokyungkim7837
7 жыл бұрын
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! :)
@TheCodingTrain
7 жыл бұрын
There is! github.com/CodingTrain/Rainbow-Code
@hoaihung3189
3 жыл бұрын
thanks for the useful lessons, by the way, you are better than all my previous teachers Thanks you so much!!!
@Bunglay
6 жыл бұрын
8:51 - 9:06 best part of the whole serie
@cubbybear8322
4 жыл бұрын
Hahah I absolutely love this guy,what an absolute hero!!
@Anonimousxz
4 жыл бұрын
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/
@kosmic000
5 жыл бұрын
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
@Hunar1997
7 жыл бұрын
What does it mean to be a bubble
@TheCodingTrain
7 жыл бұрын
Someday I will discover the true meaning.
@inventanew
7 жыл бұрын
bubbles are function (giggly) and class {bouncy}
@zayanwatchel8780
6 жыл бұрын
john blakley no classes in JavaScript
@ronaldortiz7173
4 жыл бұрын
@@zayanwatchel8780 there are, now in es6
@dustinmarino5096
6 жыл бұрын
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) } }
@julezzzzzzz
7 жыл бұрын
It would be cool to see how one can check the cklicked state for non circular shapes with p5js.
@ipointmistakes
7 жыл бұрын
That is actually easy, for closed body objects, as you already know the area covered by the shape. instead of checking the difference between the mouse and the radius. You just have to check, if the mouse is within the maximum and minimum value for your shape.
@TheVengeur69
7 жыл бұрын
Harsh Talpada if it's not to much to ask, can you make an example for a rectangle ?
@ipointmistakes
7 жыл бұрын
Sure, check this sketch, I have not documented it, but feel free to ask me if it doesn't work or you do not understand it. Click the individual rect to start and stop rotation. alpha.editor.p5js.org/neoxharsh/sketches/SkywecP2-
@Kino-Imsureq
7 жыл бұрын
dist is kinda usefull.. dist(x1,y1,x2,y2) = sqrt((x1-x2)^2 + (y1-y2)^2)
@abhiroopkar202
4 жыл бұрын
yeah
@simshp
4 жыл бұрын
Thanks for your classes .. informative and entertaining !!
@albertoarielarce2982
4 жыл бұрын
I'm learning a lot with you, thanks!
@lorenzmeier8020
3 жыл бұрын
I love your tutorials! 10:50
@ELBARTOmovies
2 жыл бұрын
Really great course!
@notAvn
4 жыл бұрын
i wish someone loved me as much as this guy loves his bubbles
@eltonbergruh8339
7 жыл бұрын
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!
@RameenFallschirmjager
5 жыл бұрын
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!
@funkyb6598
6 жыл бұрын
Is it bad of me to want you to forget a dot in order to hear the "this dot" song?
@oscantes
5 жыл бұрын
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.
@jhonandresmedina
7 жыл бұрын
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!
@eboubaker3722
6 жыл бұрын
@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(); } }
@Fun-Planet
4 жыл бұрын
That's the dist function!
@eboubaker3722
4 жыл бұрын
@@Fun-Planet after 1 year of being a programmer i can't put it in my mind that i am the one who commented this, what a shame
@najibsaad5765
7 жыл бұрын
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 :)
@Kino-Imsureq
7 жыл бұрын
in the p5 setup function, you need to create a canvas using createCanvas(width,height). then you can use the draw function.
@lucywilliams256
4 жыл бұрын
Thank you so much! Your videos are great
@bernardnoctor5627
3 жыл бұрын
Dan is very funny and he doesn't have a script
@agata0214
4 жыл бұрын
Could you explain why it is necessary to put bubbles.push(b) in setup(), instead of draw()?
@Fun-Planet
4 жыл бұрын
Draw runs infinitely many times, so after a few frames you would have 20 million bubbles.
@k.v.narasimhamurthy3455
6 жыл бұрын
he's alive.
@alonattar3836
7 жыл бұрын
Great work
@salmanmaxee8bpyt900
3 жыл бұрын
i am, your big fan sir.love from pakistan
@bernardnoctor5627
3 жыл бұрын
Very good he's very entertaining
@QuinnWaters
6 жыл бұрын
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
4 жыл бұрын
Of course it works buddy, see: editor.p5js.org/willianxz/full/dFZVe4bpI You must have implemented it wrong.
@MrArthean
7 жыл бұрын
Cx in the chat bois 7:13
@EhKurd
7 жыл бұрын
YAHOOOOOOOOOOO
@Chickenwing38nigeria
7 жыл бұрын
Monarkh cmonBruh
@Frederic_Chopin.
6 жыл бұрын
lmao
@vidalexperience
7 жыл бұрын
Yo dude, that''s sick!
@streetfashiontv9149
4 жыл бұрын
I recorded these in the past but for you it'll be the future....deep! Thats a mind f@$k...
@borimirdimitrov473
2 жыл бұрын
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?
@ImBananas4
7 жыл бұрын
Hope you do the triangle one day cheers
@navneethsuresh9995
7 жыл бұрын
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...
@racethegamer7101
4 жыл бұрын
Please tell if we can write a function or a command regarding the visibility of each individual object?
@hoangminhnguyen2191
5 жыл бұрын
So entertaining!! And still learn a lot :v thank u very much sir
@travellingstranger3378
2 жыл бұрын
...works fine for a circle but what to do for one of those complicated poligons?
@jeremylindsay1682
6 жыл бұрын
2:57 "Peel away from the array"
@michaelpaquette
Жыл бұрын
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.
@michaelpaquette
Жыл бұрын
Can I access to shape's x and y coordinate after transform is applied ?
@clairesong3341
4 жыл бұрын
You are amazing!
@danilovujicic9380
2 жыл бұрын
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 :)
@letthemcode7199
Жыл бұрын
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
@shwetajain7027
3 жыл бұрын
Hi, can you please tell how can get boundary of shape when mouse is dragged over its boundary. Please reply
@wedercoliver
5 жыл бұрын
I just made this with forEach
@pastuh
3 жыл бұрын
show() is reserved function by p5js
@lukecarey7244
4 жыл бұрын
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
@anacondong
7 жыл бұрын
Thanks its so fun
@oscarurrego9662
5 жыл бұрын
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? :)
@vaniaoliveira2686
4 жыл бұрын
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!
@anonymoussloth6687
4 жыл бұрын
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?
@loukask.9111
7 жыл бұрын
NICE THE VID CAME :D
@slemif
2 жыл бұрын
how do you add objects to an array in order like in a line rather than randomly
@chandraprakashshukla413
4 жыл бұрын
What will we use instead of the radius of the circle if we workout the same thing with a square shaped( bubble)?
@jocegoss
Жыл бұрын
What would this look like with triangles instead?
@SciStone
4 жыл бұрын
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..
@Neogenum
5 жыл бұрын
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.
@TheCodingTrain
5 жыл бұрын
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.
@kimina310
7 жыл бұрын
Hey there internet surfer, noob question here How can i get a p5 sketch as a background for a webpage?
@fabianbosiger61
7 жыл бұрын
in the html page create a div, give it an id and make sure it is fixed on the top left border like this: in the p5js sketch add this in the setup function: var canvas = createCanvas(windowWidth,windowHeight); //
@filipkendes1866
6 жыл бұрын
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?
@sharath2273
4 жыл бұрын
It depends on your code. If you used the sensors in some way, it is just saying that it isno longer supported.
@janssenuy9397
4 жыл бұрын
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?
@TheCodingTrain
4 жыл бұрын
Thank you for your nice comments ! I recommend you join our Discord where you can ask code related questions to the community : discord.gg/hPuGy2g - The Coding Train Team
@FredoCorleone
6 жыл бұрын
The principle of a bounding box is why in GTAIII characters got stuck in walls rather frequently.
@williamtaylor6074
6 жыл бұрын
How do you fix that bug, I've also got that problem!
@ipointmistakes
7 жыл бұрын
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.
@TheCodingTrain
7 жыл бұрын
Take a look at kzitem.info/news/bejne/0G-pzZ6roV90dYI
@SimoSimo-xm9de
7 жыл бұрын
do you do your live streams in youtube, if not give me the link pllz, I love you btw, you are awesome
@slowdown_
7 жыл бұрын
yes he does it on yt. he announces them here also
@SimoSimo-xm9de
7 жыл бұрын
thanks man
@subeshbhandari1652
7 жыл бұрын
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.
@MemeticArts
3 жыл бұрын
you would need to set a global flag to detect if clicked has been called. though it might seem simultaneous, technically there is a sequence, so you should be able to prevent the second event from firing.
@01234567897298
5 жыл бұрын
WISH YOU HAVE THE MOUSE INTERACTIONS ON PROCESSING BESIDES OF P5.JS.
@siddhantjain2591
4 жыл бұрын
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
@MrDeathinstict
7 жыл бұрын
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.
@thisismyalias
7 жыл бұрын
line(mouseX, mouseY, lastAnchor.x, lastAnchor.y)
@HumbertoRincon
7 жыл бұрын
In setup: Declare an empty array with posX and posY. In draw: As you click on the canvas, store that particular mouseX and mouseY in the array. If you have at least one item in the array you can draw a line from that last pos to the current mouseX and mouseY which will draw a line dynamically as you move the mouse. If you click again, store the new pos, draw a line between you array's previous points and repeat. A part of this was shown already in another tutorial, cannot remember which one.
@rbotdance
6 жыл бұрын
where is the previous video? I don't know where the word "let" comes from?
@ophello
6 жыл бұрын
rbotdance yeah...he kind of missed that. I think let is a stand-in for var. let is a local variable, var is global.
@maskman4821
7 жыл бұрын
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!
@normajeanchariot
5 жыл бұрын
I'm also having this problem. To change the color of a bubble to white when you move the mouse over it, I think you need to create an if statement that basically says: for (let i = 0; i < 10; i++) { let d = (mouseX, mouseY, bubbles[i].x,bubbles[i].y) if (d < bubbles[i].r) { bubbles[i].brightness = 255 } } HOWEVER, this doesn't work for me. Apparently "bubbles[i].x", "bubbles[i].y", "bubbles[i].r" and "bubbles[i].brightness" are not defined, so I guess I should be using a different way to refer to them? I've had this problem before, where sometimes bubbles[i].x will work and other times it says it's undefined.
@mihkuno
Жыл бұрын
How do you implement mouse interaction in 3D
@amirulidzham3686
6 жыл бұрын
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?
@TheCodingTrain
6 жыл бұрын
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.
@ibrarahmed3476
6 жыл бұрын
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 .......
@el_chivo99
5 жыл бұрын
check out this program: editor.p5js.org/pbay/full/HyOCY3-f4 mouse over buttons to change their size, click them to change color!
@chanitnanthphadungnanonth1615
3 жыл бұрын
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?
@chanitnanthphadungnanonth1615
3 жыл бұрын
also with the class TT
@ukaszdebowski6539
6 жыл бұрын
(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; } } }
@ukaszdebowski6539
6 жыл бұрын
For anyone interested - I've worked out the problem by modifying the if statement that was responsible for checking if the mouse is over any bubble. I've changed it to check, if any of the bubbles has its color changed, and if no, create another bubble (that required modyfing the changeColor() function to have another variable 'changedColor' in it that changes its value to true, if the change happend. And if the change didn't happen, the program resets the value of this variable everytime the mousePressed function is called). Here is the properly working version of the "game": let bubbles = []; let isMouseOver; let changedColor; let numOfBubbles = 1; function setup() { createCanvas(500, 400); isMouseOver = false; for (i = 0; i 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(px, py) { let d = dist(px, py, 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; changedColor = true; print("CHANGED COLOR"); } else if (isMouseOver && this.c == 220) { this.c = 150; changedColor = true; print("CHANGED COLOR"); } } }
@angelcaru
5 жыл бұрын
over(px, py) { let d = dist(px, py, this.x, this.y); isMouseOver = d < this.r; print(String(d < this.r).toUpperCase()); }
@ka26rider40
3 жыл бұрын
can anyone tell how we we can check for triangle.
@bulverismo
6 жыл бұрын
i really love you kkkkkkk
@calebsherman886
5 жыл бұрын
14:32 You could say you POP the bubbles. ;D
@MemeticArts
3 жыл бұрын
I thought about that too . . . and actually makes sense considering that in JavaScript, "pop" is also a function that removes the last element of an array!
@stephenkomu1476
6 ай бұрын
Intermediates watching this wonderful video: Let's not kill him, at least he is funny.... 😂
@stephenkomu1476
6 ай бұрын
What about change position when two bubbles touch. That was what I was looking for.... But at least I know how to get the radius
@freddymeng
4 жыл бұрын
does anyone know why it says cannot read property "move" of undefined
@kremlinkrusher2551
3 жыл бұрын
Yes I ran into the same problem. In function setup() he renames "let b = ...." to just "bubble =...." he removed let. Remember that "let" is block scope or only stores for what is inside the {}. Therefor, when you use 'let bubble = ;' you haven't stored it for use outside the {}. I could be wrong but I think that is what happened. I fixed it that way and mine ran finally.
@matthewsnyder1079
4 жыл бұрын
Can someone tell me how to apply the radius part of the circle function to a square? Am struggling. thanks
@kobod
3 жыл бұрын
I used: rectMode(RADIUS); and then kept the conditions the same so: if (d < this.r) {} and for the rect I put: rect(this.x, this.y, this.r, this.r); It works fine, but it doesn't work for the corners of the square since the radius from the center of the square to the corner of the square is obviously bigger than the radius from the center to a side in the middle of the square.
@williamtaylor6074
6 жыл бұрын
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!
@TheCodingTrain
6 жыл бұрын
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.
@williamtaylor6074
6 жыл бұрын
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!
@jhanolaer8286
3 жыл бұрын
hi sir, please do it excel too..
@shwetajain7027
3 жыл бұрын
Actually I want to do it for triangle and polygon
@MegaRednaskela
6 жыл бұрын
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);
@MegaRednaskela
6 жыл бұрын
a bit of help please ...
@angelcaru
5 жыл бұрын
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();
@JakubWojciechowski933
4 жыл бұрын
Please help. No matter what I try, I keep gettign the notification that "Bubble is not defined" My code is same as 10.28 in the video. Please help, I have no idea what's wrong Here it is: let bubbles = [] function setup() { createCanvas(600, 400); let x = random(width) let y = random(height) let r = random(10, 50) let b = new Bubble(x, y, r) bubbles.push(b) } function mousePressed() { for (let i = 0; i < bubbles.length; i++) { bubbles[i].clicked() } } // function mousePressed() { // for (let c = 0; c < bubbles.lenght; c++) { // bubbles[c].clicked() // } // } function draw() { background(0); for (let i = 0; i < bubbles.lenght; i++) { bubbles [i].move() bubbles [i].show() } } class bubble { constructor (x, y, r) { this.x = x; this.y = y; this.r = r; } clicked() { let d = dist(mouseX, mouseY, this.x, this.y) if (d < this.r) { console.log("Pierogi") } } move() { this.x = this.x + random (-3, 3) this. y = this.y + random (-3, 3) if (this.x > width || this.x < 0 || this.y > height || this.y < 0) { this.x = random(0, 600) this. y = random(0, 400) } } show() { stroke(255) strokeWeight(4) noFill() ellipse(this.x, this.y, this.r*2) } }
@APaleDot
4 жыл бұрын
Javascript is case-sensitive so your class should be called Bubble not bubble.
Пікірлер: 183