6.8: Deleting Objects Using splice() – p5.js Tutorial

This video looks at how to delete objects from an array selectively (when the leave the screen, fade out, etc.)

Next video:

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:

Help us caption & translate this video!






27 responses to “6.8: Deleting Objects Using splice() – p5.js Tutorial”

  1. Shashank Madan Avatar

    u r in WiKipedia man!!! ur so Famous !!! saluttttte

  2. Willoughby Krenzteinburg Avatar

    Is there a way to splice an element out of an array from within the constructor function? like "this.splice" etc.? I suppose you'd need to pass in the index somehow, but I can't seem to get it to work.

  3. Pablo Diaz Avatar

    Ey Daniel! I have been working on a variant of your agario coding challenge in which I have added bullets for the blobs and the splice function was causing me a lot of problems related to the update of the bullets.
    For some reason I thought that splice function left the index i empty. This method helped me so much.

    Thank you so much!
    Greetings from Spain!

  4. Willoughby Krenzteinburg Avatar

    I don't understand why the "var i = bubbles.length – 1; i >= 0; i–" part works. Why is it not "i <=0"? Isn't the for loop executing by counting down the var 'i'? So, for example, the way I read it is :

    i is equal to one less than the length of the array. Do a thing, subtract one from i and do the loop again UNLESS i is greater than or equal to zero. This doesn't make sense because you started at a value for i that is ALREADY greater than zero.

    So, if the array has a length of 10, then i starts off at 9 – which is greater than zero, so why does the loop execute anything at all. It seems like it should be "i <= 0". The for loop will continue looping, starting at 9, then 8, then 7 and so on, and only when it reaches 0 (or under) will it stop. However, clearly the way you wrote it works, and what seems logical to me does not work. I cannot figure out why.

    Never mind. I figured out the flaw in my logic. The second statement in the for loop is NOT "continue until this is true"; it is "continue WHILE this is true".

  5. Olivio Sarikas Avatar

    I have to admit, i didn't really understand the concept of starting at the End. Wouldn't that mean that it never reaches the start, as more and more objects are added to the Array?

  6. zoomboost Avatar

    thank you, it's fun and efficient.

  7. SilenceOfThought Avatar

    28: Uncaught TypeError: Cannot read property 'lifespan' of undefined

    This is what I got after I type:

    if (bubbles[i].lifespan < 0) {
    bubbles.splice(i, 1);

    I defined function in bubble object just as you did. I have no idea what to do.

  8. The Shroud Avatar

    the p5 reference gives a completely different definition and example of use to Splice…. does anyone know how Dan actually learned p5? I'd be surprised if it was directly from the reference material… he's too good!

  9. John Elsegood Avatar

    Nice videos and series. Can the IsFinished function be written as;

    this.IsFinished = function() {
    return (this.lifespan < 0)

  10. Voltra Avatar

    10:18 an easier solution would have been to add i– in the if statement

  11. Cai Yadav Avatar

    Hey , I got what you did in the video . I did it my self , and it worked .
    I tried making them like eyes , by trying to map the eyeballs to follow the mouse ..
    it did not work..
    in the display funtion itself , I added 2 var to keep the mapped values(x,y) . But didn't work .
    any tips how I could get that?

  12. Philip Montegna Avatar

    daniel, thank you. you are such an excellent teacher and an even better human being for uploading these videos for free. i hope you go on to amass the mainstream success you deserve. but until then, i see you're still responding to comments, so i have an observation and a question. it seems to avoid skipping over the index after the splice when looping in Draw, you could create a function that handles the loop and splice in the object. did you not do that because it's not dry code? or was it just to show us the backwards loop? or is there another reason?

  13. CY Lin Avatar

    Hey Daniel your vids are the best!
    One question, I followed along with the video but when I run it the console said **"Uncaught ReferenceError: Bubble is not defined"** but this only happens when I have the bubble.js separated from the sketch.js, if I move the bubble class in sketch.js then I have no problem. I wonder if I need to do something to the files before hitting the run button?

  14. zwilliamsdev Avatar

    I am having a very odd bug… (Or maybe its user error :P) the code:
    for(var i = 0; i < bubbles.length; i++)

    if(bubbles[i].lifespan < 0)
    bubbles.splice(i, 1);

    Works perfectly, however, if I try to loop backwards
    for(var i = bubbles.length; i >= 0; i–)

    if(bubbles[i].lifespan < 0)
    bubbles.splice(i, 1);

    I get: Uncaught TypeError: Cannot read property 'update' of undefined

  15. PHP Tuts Avatar

    Why we need empty array?

  16. SnickersneeGaming Avatar

    Can I ask a question? Would you tell me where you make these videos? Just curious because of the applause…

  17. alpinhasov Avatar

    Hey Daniel, thank you for the tutorials. Decided to share with you a game I'm working on that is based on the tutorials up to around this video. For example, I used splice to remove the blocks that were hit by the ball. Looking forward to the next series of tutorials. http://keytoweb.net/arkanoid/

  18. Pedro Pablo Aguirre Castilblanco Avatar

    09:25, cuando dijo "c" pensé que sabía algo de español, pero en realidad era "c" el nombre de la letra en ingles y no "si" refiriendose a que si había que eliminarlo 🙁

  19. Joop Moop Avatar

    Just a quick question, at 11:16, would it be okay to put i– after bubbles.splice(i,1); within the if statement? That would make the i go back one value to check what it would've otherwise missed, but only when something is spliced so that it doesn't check something twice.

  20. Truman Knight Avatar

    love the vids super useful and understandable keep it up

  21. Kotev Avatar

    Awesome videos!
    If I rest the var i when the bubble life is <= 0, it prevents the error of the infinite loop?
    For exmaple:

    for(var i=0; i<balls.length; i++){

    Greetings from Argentina!

  22. Samuel Sousa Avatar

    Hey daniel , excelent tutorials!!

    i have a question , would it be possible to use jquery and p5 in the same project?

  23. Dylan Avatar

    this is a really nice trick! i went for click delete inside the clicked() function from the prev video with: bubbles.splice(bubbles.indexOf(this), 1);

  24. Janko Bosch Avatar

    great video. One question. How do I use the splice function in combination with a 2d array?

  25. Ryan Scharfer Avatar

    my fav video yet. Thanks!

  26. Kenny L Avatar

    Hi Dan, did you store all the code examples of your p5.js videos in github? Where can I download them? Thanks again for this great work!

  27. James McElwain Avatar

    These are awesome, thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *