7.5: Removing Objects from Arrays - p5.js Tutorial 

Your forEach() anxiety is forever amusing.

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 really love how using classes makes everything so organized and "brain-friendly"

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

Var learningJavaScript = Fail { if true return Cry ; i = fail; fail = true;}

Shiffman? No... SHIFTMAN!

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

Glad I'm not the only one mixing up splice and slice. It's a ridiculous name

I'm wondering why forEach is so fearsome xD

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

LOL cracks me up every time he says slice ...... "splice"

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

Love the energy.

Shiffman keeps impressing me..

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

those p5.js are amazing dude

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.

i almost fell out of my chair at 4:46 hahahaha you are a legend :DD

* SPLICEEEEEEEEEEEEEEEEEE

for of loop: defend me at all cost! for each: *exists* for of loop: RUN

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.

Genius! Great explanation.

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.

ForEach: bubbles.forEach(bubble => { bubble.doStuff(); }); Make a Video about arrowfuntions

Awesome 😃😃😃

Which video were you referring to with objects storing their own path?

3:35 function ellipse(){}

Totally relating the the forEach() anxiety level

Wouldn't be great to avoid one function call and just check if(bubbles.length>10) bubbles.length=10 ?

YOU>ARE>THE>BEST!!!!!

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.

I find foreach so useful, why people is against it? I'm a newbie in javascript xD

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 .

Could you add a tendency in the move function to move less to the e.g. top when its near to the top?

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!

editor.p5js.org/ibeaducko/present/cFJNW-zz7 INSTRUCTIONS: double click to spawn a ball and click to remove a ball

Can you explain how the events fit inside the flow of p5.js? Mainly how they interact with the draw() loop

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!

If I'm in a function inside of the object, can I remove this object without knowing the index he is?

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

I love it

i completly got lost at i should use i- - or it will give problems.... what did you meant with all that?

good work. thanks

Im going crazy trying move objects on lines (rails). Any suggestions?

I love u 3000

good video man :) thank you

Thanks for this such a big help ;}

hi i would like to use p5.js and matter.js with my react front end can any one please provide me some hints of integrating all three together

nice save

What does he mean about the snow??

Is P5js actually used in any real-life production code?

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

*_F O R E A C H_* * dun dun duuuuuuunnnnn *

all the source code is gone from the github??

how can i create a deconstructor?

S P L I C E

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.

Please try codewars

*B U B B L E S*

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.

1:05 minutes , color remove :O why ?

arrays start at 1

the p is silent

Video editor: Let me be the auto correct for now

2: 30

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)

For each Uwu

5:19

5:15 lol

It REALLY turns to be more complex for me...ZZZ

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

Hey Dan.......................what is your age???????

9:50 var bubbles=[]; function setup() { createCanvas(400, 400); for(let i=0;i

*SPLICE

Dan .....the # of times I seen you use spice().....u must too much on your mind there home slice() !

'oh shift'

This was a nice video, but your contains function gave me shivers :-{ just return d < this.r

Slice it, haha

*SPLICE :D

my Solution In the Bubble Class: clicked(x,y){ if(dist(this.x,this.y,x,y)bubbles = bubbles.filter(el=>el!==e.detail))

forEach 😖

system.println.out("omg , u are so cute ,I'm in love~")

Idea: Build Agar.io from scratch :)

or at 9:48: return ((d < this.r) ? true : false);

8:06