Your style is unique! I think you failed to mention the REASON for using the 'splice' function. The issue with the 'delete' operator in JS is that it only removes an element of an array, however the array keeps its length resulting in an 'empty' element at the place that was deleted. Complicating the iteration of the array going forward. This is why we should all use 'splice'. Don't use 'delete'.
I've realised these videos are great visual explanations of Javascript, where you can apply the same knowledge/techniques to applications that are less about drawing pretty things (bubbles).
Splice is a really slow function in general because it uses alot of shifting things and eventually doing some allocations (removing something that's not the beginning or end in general isn't fast usually). If you don't care about the order of your array (for example the bubbles don't need to be ordered by size or whatever), removing an element quickly is done by just swapping with the last element and then popping. Old trick but really useful to know.
Another good video, Daniel, with lots of interesting AH-HA! moments. (Backwards array traversal to safeguard against skipping elements is a really solid contribution when talking about arrays.)
Dan, before you fall in love with forEach, check out the new ES6 for..of statement. It works with object properties, as well as array elements, where as forEach is only for arrays. And with objects, it's better than for..in (if you've seen that), because for..in gives you inherited properties, which you're usually not interested in (see hasOwnProperty() method). Also for..in requires you to pass in a callback function, but for..of does not. Unfortunately, none of these newer techniques support deleting elements without skipping. In that case, afaik, you need the original for statement to iterate backwards or decrement the index.
jajajaja between the foreach and the slice dislexia with splice we are gonna go nuts jajaja love it what a great and funny teacher at the same keep it up!!
thanks shiffman, in this video you mentioned a very important thing when differentiated between j5 specific functions and built-in vanilla javascript ones. I just wonder why you didn't do it sooner!
if you're not bothered about the order of the items in the array, and you're looking through the array to remove some, then it may be more efficient to just pop() the last element off the list and place it at the position of the item you wish to remove. f you loop backwards through the list, then you don't need to adjust the index after the removal. Array.prototype.removeAt = function (i) { var other = this.pop(); if (i < this.length) this[i] = other; return other; };
I haven't thought about that an "i--" approach to a for-loop will get rid of the splicing problem! I'd guess it's also faster since you only check the length of the array once and set a variable to that length, instead of checking it for every iteration.
Here is another way to change the color when the mouse is above the bubbles. You dont need a function o behavior for that, lets add another caracteristic of being a bubble like " this.mouseUpon = false", and instead of return "true " when the condition of the Contain behavior is true, lets make "this.mouseUpon = true" and stay false if its not. Then in the Show behavior, we can write If( this.mouseUpon) { //change the color } else { //dont do anything }. Now that forces us, to change the condition of the If statement inside the for loop in the mousePressed function. We now should write if(bubbles[i].mouseUpon){ bubbles.splice(i, 1); }
I find your videos really interesting and instructing. Your teaching skill, your ability to forward knowledge, is admirable. But I gave thumbs up to the video because of 1.27 :) Keep making videos this funny.
I think you should have some sort of IDs assigned to bubble and have keep count of those IDs in separate array then if there is a rollover then return ID and do all the deletion stuff
Hey Dan, first off I love your videos they inspire me to continue coding everyday. I'm trying to make a 2d physics simulation in P5 where 2 circular objects (particles/bubbles) knock into each other and respond in a realistic way.I was wondering if you could either make a video about the subject or refer me to one of your older videos. Thanks in advance
Hey, Great content as always, love the course. Nonetheless, I feel that this video needs to be updated on the playlist. Too many instant changes and confusions. I got lost for a while.
HELP !looks like this sytax :for(let i=bubbles.length-1;i>=0;i--) cannot avoid miss checking while the bubbles are overlapping. I still can delete both.
Hi Dan, The MousePressed function is an interrupt routine and therefore it can execute during the draw function. When the for loop is executing in the draw function and the MousePressed function removes an element from the bubbles array, there will be a problem, although I think that JavaScript can handle it, but Java and other programming languages will most likely crash. Before removing an element from the array the routine must be sure that no one else is using the array. In fact, when somebody can click that fast, the MousePressed function can execute during execution of the MousePressed function and then it is possible that one of them will remove the wrong bubble. Tell me, am I wrong? You make awesome video's. And I always watch them, but not the ones that take 3 hours or so. Keep up the fun !! Thnx.
Yeah, you actually should use forEach here, or at least that's is what it was made for. Its quite handy in a lot of programming languages to know it but in this specific case it looks just a little bit more complicated than what you did here.
how can we use "splice" with "for of" loop? for ( let unicorn of bubbles) { if ( unicorn.contains ( mouseX, mouseY)){ unicorn.splice( i, 1 ) } This function doesn't work.
Keep in mind that forEach does not have access to "break" and "return" doesn't not exit the forEach loop. "return" will have the same effect as "continue" in a conventional loop, it will return from the current callback function then continue with the next one. You cannot shortcircuit a forEach unless you throw an error, but that would be using the try catch mechanism outside its intended use.
Important Note: If you want to delete something from an array while iterating over it, just iterate in reverse fashion, using i - - should be avoided , because you will be accessing out of the array which works fine JS as it will just return undefined, but with other languages like python accessing out of array, would throw index out of range error.
i'm very beginner to p5.js i just want to know how to detect the collection between circles or between the sides of window, please reply and thank you so much .
Hi, I've a question, I've made a class FreeHandLineTool, I've only one object of that class, and display method of that class draws line(on mouse press) for me on canvas. I keep calling display method inside the draw method with its object(only 1). and it keep drawing lines on mouse press. I want to do undo, remove lines one by one. please help me out. Thanks!
Hey, I just want to access all data in nested array of objects using javascript not jquery and to display that data in to tree format in HTML DOM. How can i do that..PLEASE HELP!
Why are your for-loops not breaking when removing elements from the list as you are iterating over it? I'm used to instead creating a new list of items that I need to delete from the array after the loop is finished. Is this just a luxury feature of JavaScript?
Hi! I’m trying to use splice to remove the circles like he did when you click them, BUT it keeps giving me the error that ‘bubbles[x].contains’ is not a function. I think I may have missed something. I’m also a total beginner and have no idea what I’m doing :) I need this for a project If someone could explain please :)
unrelated to the video but why does he have the p5.js shortcut on his desktop if he is coding in atom? and how is he running/hosting the code if he is using atom? does he keep processing running in the background hosting the js or does he use an inbuilt package to run it?
You can try some of these workflow videos: sublime text: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UCHzlUiDD10.html atom editor: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d3OcFexe9Ik.html brackets: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nmZbhManVcY.html codepen: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5gfUgNpS6kY.html
lol i was looking for array looping like pythons in and found foreach. I love js because it got me into proper coding thanks to p5 and your videos but that forEach has the weirdest looking syntax ever, and the documentation doesn't help understand whats its actually doing lol.
Hi, I think I'm too late for the party for this video, but I wanted to ask: how do I call the youtube API in javascript with P5? I'm trying to binge watch all the videos on some channels (yours included, *wink*), but I want to see which videos I watched already and which not. Apparently, youtube doesn't help me with that so, for start, I want to get a list. I'll watch some other API videos on this channel, but if anyone has a sample for this, it would be much appreciated.
Hello, I would like to ask if you ever have the time, could you please make tutorials videos for Java, thank in advance if you can and thank you for the video.
can you help me? I made this project - editor.p5js.org/Allayna/sketches/hZgyuRlSL The balls change brightness on mouseover, change color on click, and should remove from array on a doubleclick. However, when I remove one it gives an error - Uncaught TypeError: Cannot read property 'move' of undefined (sketch: line 81)
I really don't like developers who make fun of the architecture and design concepts of technologies...there are good use cases and reasons to use forEach buddy :)