Тёмный

7.6: Checking Objects Intersection Part I - p5.js Tutorial 

The Coding Train
Подписаться 1,7 млн
Просмотров 104 тыс.
50% 1

Опубликовано:

 

15 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 93   
@christophercarney1809
@christophercarney1809 3 года назад
What a great video. When you said we were 15 min in I was like "what this felt like 5 minutes!". Great job man fun and educational
@mshariq2472
@mshariq2472 4 года назад
Your videos are amazing. They took me from knowing nothing to actually programming some stuff. Can you make a video on checking the distance between a rectangle and a circle? For example, in a brickbreaker game?
@valeriobanuelos9565
@valeriobanuelos9565 3 года назад
i figured out by myself how to make the colission detection for an array of ps as a challenge. I overrided the dist function with a custom of mine as a challenge. Now i need to add the physics of ellastic collitions to the system. And add a method to predict if theres a collision in the next frame to prevent jittering and missed events. Thank you for being a teacher of my internet school i love your videos.
@up4life108
@up4life108 7 лет назад
collision detection is pure hell. im tryna make a super mario clone and i just wont find a way to make him stop properly when hitting a block
@jamesaylward2303
@jamesaylward2303 7 лет назад
Javascript: colour is not defined Me: what the hell? *3 hrs later* Me: oh it's color. Why java? Why?
@ismaelcebrianmarco7288
@ismaelcebrianmarco7288 7 лет назад
This a video on Javascript, not Java. Everytime someone mixes the two, a recently graduated engineer dies. (Also color is a function of the library p5, no native from JavaScript. I recommend you to always have the reference of p5.js open : p5js.org/reference/)
@jamesaylward2303
@jamesaylward2303 7 лет назад
Ismael Cebrian Marco I meant java script, I was just too lazy to type it. It's because I'm Australian and we don't spell colour that way
@FrostSpike
@FrostSpike 6 лет назад
I'm in the UK. 15 years ago I made it a habit to use US spelling in all development I did from then on apart from any visible UI content. It's probably saved me weeks of debugging effort since then!
@ps4account165
@ps4account165 5 лет назад
@@ismaelcebrianmarco7288 I don't think it matters. It's the same thing in java. Example: g.setColor(Color.red);
@renato360a
@renato360a 4 года назад
as a Brazilian who doesn't speak any dialect of English natively I'm much happier with "color". It makes more sense from a pronunciation standpoint, I'd rather learn the word "color" than "colour".
@Jo-id9zm
@Jo-id9zm 4 года назад
You, my good sir, are a genius, a gentleman, and a helluva cool guy! {props}
@calibr0636
@calibr0636 5 лет назад
really passionate, nice
@calibr0636
@calibr0636 5 лет назад
Thanks man
@creepychris420
@creepychris420 Год назад
ha nice dude. i love maths and i love coding, but i've just done front end websites for 10 years, i haven't needed to do triangle maths for ages. now im making a game with canvas and trying to remember how this all works - the distance and the triangle you drew just helped me link it up in my head, npnp lol. starting to think of crazy shit i can code now lol seeing the fkn world like the matrix 😂😂 i remember this when i used to do flash too lol
@deathmeter7243
@deathmeter7243 2 года назад
The Coding Train is the best :)
@SharonKerenTLV
@SharonKerenTLV 4 года назад
every lecture is plain EXCELLENT!!!!
@josuea.2468
@josuea.2468 7 лет назад
12:39 "Here I'm over here" my new catch phrase
@barickfoster
@barickfoster 3 года назад
Hi mister Shiffman, i have been trying to figure out how, i could , check if and object is touching, a particular color, like in scratch software, if color red is touched ,then do something. thanks
@All_force
@All_force 7 лет назад
Love your videos! Could you make one about checking two objects crossing another? For example how to check if two lines cross each other and where?
@TheCodingTrain
@TheCodingTrain 7 лет назад
Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues
@abhishekgupta6371
@abhishekgupta6371 5 лет назад
What coding language are you using
@b0r0din988
@b0r0din988 2 года назад
Daniel probably has no idea how big of an impact he's made on the space of generative art. It's unfathomable.
@TheCodingTrain
@TheCodingTrain 2 года назад
standing on the shoulders of others!
@adaliadasilva4200
@adaliadasilva4200 2 года назад
Hey Dan... What if I want to have the color change just for a specific time? Like lets say for 10sec and then switch back to the default/ first color?
@Akathysia
@Akathysia 7 лет назад
if in case i dont wanna check if they are overlapping, i wanna check if they are colliding, i would need to make the distance the sum of the two radius, right?
@thesmallgiraffe3331
@thesmallgiraffe3331 5 лет назад
yes, even though this you commented this a year ago and probably figured that out after a minuet while programming, i still felt inclined to answer.
@mihirjoshi199
@mihirjoshi199 3 года назад
Hi Daniel, really love your tutorials, I wanted to know if you have a walkthrough for the agent modelling example from nature of code. The example from the bottom window at 0:55 seconds into the video.
@matthewbrownell5472
@matthewbrownell5472 4 года назад
I sure enjoy being American and being able to say "Color" in my code and not getting error messages saying "Colour is not defined". (Also, when I type this, the "Colour" is underlined in red.)
@disdis6127
@disdis6127 3 года назад
Okay circles are simple but, what anout rectangle the AABB for them merely qorks
@thesmallgiraffe3331
@thesmallgiraffe3331 5 лет назад
thanks this video was very helpful i was trying to make my first game(it is very simple but still a game) but i couldn't figure out how to tell if two object collided, i tried a bunch of diferent things but nothing worked until now, yippee.
@graaack11
@graaack11 3 года назад
I recently started making my own platformer game but I’m struggling to code the collision for the platforms What would be the code for a rect not an a ellipse Edit: I know that the dist() works on rect but the majority of the time it would just pass write brought obviously
@rollertoaster8934
@rollertoaster8934 4 года назад
thank you for your great content! Your instruction is clear
@aakankshaagrawal2454
@aakankshaagrawal2454 4 года назад
where can I find the code to that moving bubble simulation?
@pickensincorporated
@pickensincorporated 7 лет назад
Hi there, I really appreciate your videos. But this is only helpful in the event that I am using a really easy shape like a circle. How could I test intersection between, say, a triangle and some random quadrilateral? Thanks.
@timmellis5038
@timmellis5038 7 лет назад
Hi, did you find out where to look? I'm looking at the same thing where I have objects but they don't all have radius values.... Thanks.
@cassiusreed1181
@cassiusreed1181 2 года назад
hey so i was trying to follow this recently but it seems dist variable is no gone wondering i u knew about this.
@WolFX_FPS
@WolFX_FPS 4 года назад
Do you have a Collision detection video/solution for P3?
@HangryAnimalsGame
@HangryAnimalsGame 4 года назад
Hey, loving all of your vides here during lock down. Building a tetris inspired game with stacking items in a certain orientaiton and wondered if you'd done a video explaining rotation of image sprites? i.e. when you rotate a rectangle (testing it with simple object right now), the world flips.. i.e. if I set my objects rotation using PI/2 it should rotate 90 degrees, which it does, but the x and y axis are also rotated.. Ideally all I need is a means to flip the visual asset as the geometry and the physics are find using the gravity information from the flappy bird tutorial and the collider scrips from this video. Any tips or pointers for spinning that image asset or animated sprite by 90 degrees?
@ArnoldsKtm
@ArnoldsKtm 5 лет назад
fun and games until you want to add squares to the logic
@Tamoor622498
@Tamoor622498 5 лет назад
triangles and the Pythagorean theorem
@rcb3921
@rcb3921 5 лет назад
If you initialize a variable, and you don't use it, it doesn't make a sound. I'm going to get that embroidered on a pillow.
@chrisrodwell711
@chrisrodwell711 7 лет назад
I'm not getting anything on the run button. Has p5.js been updated since this video?
@damiantlg8670
@damiantlg8670 7 лет назад
check errors and fix it
@LofiWurld
@LofiWurld 3 года назад
What about irregular shape
@fakulol0186
@fakulol0186 6 лет назад
How to do it with rectangles?
@electroGoal
@electroGoal 4 года назад
how to ascess circle (x.y ) coordinate without using classes
@strawleyvlogs6035
@strawleyvlogs6035 5 лет назад
How do you do collide2d with an ellipse and rect
@quincemobile
@quincemobile 4 года назад
Hey where can we find the code for this? can't find it on the github link... is there somewhere it's hidden on there?
@TheCodingTrain
@TheCodingTrain 4 года назад
Apologies, trying to get these all fixed up, can you file an issue here: github.com/CodingTrain/website/issues The code is buried somewhere in the repo.
@benhardsim8629
@benhardsim8629 4 года назад
is 'other' a p5.js syntax ?
@ZiggyJFox
@ZiggyJFox 5 лет назад
in p5js it gives me the error that it doesn't know what other.x is...
@MichiSzerman
@MichiSzerman 8 лет назад
Can you post the code you end up with for these videos? There's a glitch in the current p5 library that wasn't letting me translate objects, and I think there's another problem here, too. I've compared mine character for character, but I still can't get the change.Color function to work. I've commented it out and know it's specifically the function, but can't tell what's going on.
@TheCodingTrain
@TheCodingTrain 8 лет назад
+Michelle Sherman This one is here. github.com/shiffman/Video-Lesson-Materials/tree/master/code_p5.js/6.9_p5.js_checking_objects_intersection_1 Yes, I know that translate() bug, it's been fixed in more recent versions of p5.js, if you are stuck on an older one, you can add push() as the first line of draw() and pop() as the last to fix it temporarily. Hope this helps!
@rootlabs2970
@rootlabs2970 7 лет назад
Its now here : github.com/CodingTrain/Rainbow-Code/tree/master/Tutorials/P5JS/p5.js/6.9_p5.js_checking_objects_intersection_1
@yazzuk8792
@yazzuk8792 5 лет назад
If any1 knows the answer to my question please respond asap... can i import a image in getgraphics() and make just certain parts uncollidable, cuz i really dont know how to make an house with a collidable door... thanks
@TheCodingTrain
@TheCodingTrain 5 лет назад
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.
@rdwnilyas
@rdwnilyas 4 года назад
Where is the tutorial of second canvas (bubble collision simulation)?
@TheCodingTrain
@TheCodingTrain 4 года назад
i think you are looking for ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GY-c2HO2liA.html but there's a newer one! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5Q9cA0REztY.html
@princesslourdes2969
@princesslourdes2969 4 года назад
@@TheCodingTrain can this be done in python? if so can you teach me please :( i need to make 1000 independent circles to change color when they interact with each other, AND they have to move in a random direction and speed as well. also, how can I make sure ithey maintain an 80% chance of touching each other. I'm new to this my mind is at capacity already hahaha. so far I've only managed tomake 1000 circles which are useless because they aren't independent from each other, so when I set them to motion they move together. :(
@princesslourdes2969
@princesslourdes2969 4 года назад
@@TheCodingTrain I'd really appreciate any help I can get. Thanks!
@didrikforslund884
@didrikforslund884 4 года назад
if i wanted to replace that circle with a picture would that be possible for a noob like m
@aircraftcarrier8572
@aircraftcarrier8572 3 года назад
제 브라우저에 있는 p5.js에서 전혀 작동을 안해영. 똑같이 코딩했는데도영. 그리고 3:55 여기 코드에 + 쓰는거 노무 싫어욥.
@Shadedcolors
@Shadedcolors 7 лет назад
so dumb question: is this basically just processing in a javascript file? Like is this not javascrpt?
@karlduckett
@karlduckett 7 лет назад
This video is written in Javascript using the p5 library.
@goldthumb
@goldthumb Год назад
While watching this video I am eager to know how we check the distance between each bubble and each of other bubbles.
@nikital704
@nikital704 2 года назад
i like this "intersex" tutorial 😅
@akashbalerao9160
@akashbalerao9160 6 лет назад
How to do it in processing?
@ArnoldsKtm
@ArnoldsKtm 5 лет назад
Using brain.
@yanghu9744
@yanghu9744 7 лет назад
Are you related to my computer science teacher? Both of you are good at teaching and look exactly the same lol
@damiantlg8670
@damiantlg8670 7 лет назад
how tf would he know what your computer science teacher look like
@Kaixo
@Kaixo 7 лет назад
And how do you do that with squares...
@damiantlg8670
@damiantlg8670 7 лет назад
I.Don't(Know.But => I.Tried_My) == Best.Smileyface;
@Kaixo
@Kaixo 7 лет назад
DamianTLG I found a way to do it, but it is kinda messy and works terrible. I used the dist() but I checked the X and Y separately so it checked in a square radius. It will detect multiple objects intersecting perfectly, but bouncing an object off of the square is a lot more difficult and sometimes doesn't work for the corners. But I managed to make it work for a rectangle any size you want, as long as it is thicker than the speed the 2 objects are touching each other.
@I_like_science
@I_like_science 5 лет назад
What about a square and a circle? anyone have any thoughts on how to go about that?
@funwithariyan7347
@funwithariyan7347 3 года назад
same thing so instead of if (d < radius1 + radius2 you do size1 + size2) basically
@I_like_science
@I_like_science 3 года назад
@@funwithariyan7347 . I am happy to say that I was able to figured out/understand how to approach this problem a few days after posting this question. I code from time to time for fun always at a basic level with shiffmans books None the less, you have no idea how much I appreciate your response to my old question. I hope it helps someone just starting !
@DraG0Ne
@DraG0Ne 4 года назад
bruh how do i do this with squares?
@gramps717
@gramps717 2 года назад
one seems on top of the other wonder if
@LGLPBiH
@LGLPBiH 7 лет назад
Congrats, 0 dislikes, ups, better to dont say that...
@gregorydixon569
@gregorydixon569 8 лет назад
How would you use two keys at the same time?
@TheCodingTrain
@TheCodingTrain 8 лет назад
this is a little tricky, I should do a video about it!
@DimaAntselevichDemonicOwl
@DimaAntselevichDemonicOwl 4 года назад
Arby's Joke T-T I miss Stewart
@samtees
@samtees 7 лет назад
dist() outputs in an error
@samtees
@samtees 7 лет назад
ikr
@ThePickleVR
@ThePickleVR 2 года назад
CAN YOU SHOW THE CODE IN THE DESCRIPTION SO I CAN COPY AND PASTE!!??!!?
@snickersneegaming2437
@snickersneegaming2437 7 лет назад
you should give my brother for non-raging lessons :P
@damiantlg8670
@damiantlg8670 7 лет назад
your brother should give you a humor lesson
@greenmanisreal
@greenmanisreal 5 лет назад
rb's we have the codes
@michaellebron6290
@michaellebron6290 4 года назад
These videos are great, but your github is a mess. I cant find this code!
@surekhapitta2139
@surekhapitta2139 4 года назад
it just doesnt work for me i will give u the link sir, can u say the mistake hers the link - editor.p5js.org/Caleb2009/sketches/BRFDoC6Pj i just want the pink rect to touch the food to make it respawn again
@ronidey7100
@ronidey7100 4 года назад
Surekha i read your code and i think you don't understand how to use constructor function in JavaScript. For example in Pix.js - constructor(x, y, p) { this.x = 200 this.y = 200 this.p = 12 } Here why are you accepting arguments? you don't need to accept any argument here and then in sketch.js line number 36 - thePix = new Pix(this.x, this.y, this.p, this.p); First what is this.x, this.y ..??? and second your Pix class doesn't require any parameter. If i'm not wrong you are trying to create a snake game or something like that. If you wanna run first you have to learn how to walk. So my suggestion is go and learn JavaScript first and then come back and learn p5.js
Далее
Coding Challenge 177: Soft Body Physics
29:09
Просмотров 155 тыс.
Convex Polygon Collisions #1
36:40
Просмотров 128 тыс.
8.1 Class and Objects - p5.js Tutorial
20:12
Просмотров 5 тыс.
9.8: Random Circles with No Overlap - p5.js Tutorial
19:25
Dear Game Developers, Stop Messing This Up!
22:19
Просмотров 712 тыс.
Coding Challenge #145: 2D Raycasting
36:02
Просмотров 639 тыс.
Spatial Hash Grids & Tales from Game Development
19:08
Просмотров 118 тыс.
STOP Using Classes In JavaScript | Prime Reacts
14:02
Просмотров 239 тыс.
7.7: Deleting Objects Using splice() - p5.js Tutorial
15:49