7.4: Adding and Removing Objects - p5.js Tutorial

[@smplchmp]

You are an excellent teacher! I often find myself reviewing fundamentals to stay sharp and nothing's worse than wasting time in an incoherent video or verbose documentation. Your flow is just right - informative, concise, and even entertaining so thank you!

[@chaseh5639]

Dear Daniel, I am getting my life right now watching your videos. A+

[@TheCodingTrain]

glad to hear!

[@goldthumb]

Using lovely bubbles to teach JavaScript array is much much better than using plain integers as most of coding teachers did.

[@dwighthayles1226]

Daniel your teaching is really clear and it's also fun to see how the code can add or remove objects with the bubbles.

[@diegoferreira3444]

i reaaly like when you use analogy to explain things because programming is so abstract, and is nice to come with a picture of what's going on in the program

[@X21XXI]

I don't even notice how long these videos are, so helpful.

[@YnteryPictures]

You're just making my every day with these tuts! Seriously, my thing finally works!!YEEEEEEEEEEEEEEY :D someday I'll donate you a fucking million, just wait for it :3

[@TheCodingTrain]

+YnteryPictures So glad to hear!

[@AK56fire]

Brilliant tutorial.. All of them.. Your energy is very fascinating to watch..

[@kansel5813]

8:02 "I'm sure you have a question but you can't ask it" LMAO

[@OlivioSarikas]

For some reason mouseDragged does not work for me, although mousePressed works perfectly. Did anything change in P5 that prevents this from working? - It does work wiht mouseMove however, but that's not the same

[@TheCodingTrain]

Not that I know of!

[@OlivioSarikas]

strange. also thx for the answer. here is my code, maybe you can have a quick look at it: piratepad.net/91XoUUiAMa

[@flipp_]

I've got the same problem! Have you found a solution yet?

[@kiragibson3112]

that's a cool program

[@gluetubeserver]

here is what did for the last challenge bit you mentioned of removing the objects when they are offscreen. function draw() { background(0); for (var i = 0; i < bubbles.length; i++) { if (bubbles[i].x > width || bubbles[i].y > height || bubbles[i].x < 0 || bubbles[i].y < 0) { console.log("out of bounds, deleting"); bubbles.splice(i, 1); break; } bubbles[i].move(); bubbles[i].display(); } }

[@coderrishav]

It's like a snake 🐍 😁 Nice Video!

[@s.akhtarjoomun263]

The rest of the world: It's cardio time. I need to get to the gym. Daniel: It's cardio time. I need to make a video

[@typicallucas]

Just found your channel, this is an amazing resource - I'm learning a lot!

[@Ancient1341]

after hours of trying how to figure this out i finally did it

[@Rapsoodys]

thanks dude .. u explain way better tha thos hindi vedeos i watched ...

[@tasneemalam1359]

thank you for making video , i hope you started a playlist about real analysis....

[@rosapinkk11]

Thanks a lot, all your videos are very good. i learn a lot. :D

[@zoomboost]

thank you for your work, it's fantastic!

[@TheCodingTrain]

Thank you so much!

[@hcgreier6037]

It's nice when the Javascript teacher has a _promise_ for us....🤣

[@zem.w5783]

better than my online cores from uni

[@MyPlaylist-xq8en]

Awesome explanation! I give you my "Like" and "Subscribe". Good Job!

[@HyperActive94]

great explanation! love it! thanks

[@cap.blue-97sama99]

Great content!

[@RABWA333]

very informative. thanks

[@akshaypratap9376]

what is the key difference between the java object and if the same thing achieves with the java classes?

[@ralfspinoza]

good work. Thank you for that.

[@Demobnector]

is this html5? cuz I am on a standard html. Is the html different to html5?

[@dimashishkov2909]

Daniel, first of all let me thank you for great job. These tutorials are both informative and very entertaining. A real please to watch and learn. I have a little question regarding this tutorial. Let's say we have a Bubble object which has 2 parameters X ad Y: "Bubble (x, y)" and I have global variable stated at the top of the sketch with the same names "var x", "var y". How could I access those global variables inside the object? Is it possible or am I missing some important concept here? Thank you very much in advance.

[@TheCodingTrain]

+Dima Shishkov the global variables are accessible by just referencing their name alone - "x" and "y"!

[@dimashishkov2909]

+Daniel Shiffman but in the video you refer to the Bubble's parameter (those in brackets) as "this.x = x", where "x" refers to the "x" in the Bubbles brackets. I did a quick test and even If I declare global parameters "x" and "y" and write "this.x = x" and "this.y = y", those "x" and "y" are still taken from the Constructor's brackets. So I can't declare global variables with the same names as in Constructor's brackets? Sorry, maybe I am missing something obvious, but I am quite new to programming.

[@tz2014]

yeah u are missing something obvious,because when u have "x" and "Y" in brackets they overwrites "x" and "y" declared as global variables at the top. This is how it works, if u have a two variable with the name one global and other in a function(like those in brackets), the global variable get overwritten,the javascript engine refer to the immediate one.

[@scharfer56]

Alternatively, you can simply use the shift() method on an array to remove the first item from it.

[@TheCodingTrain]

+Ryan Scharfer Good tip, thanks!

[@timetravellers8909]

Mr. Shiffman, how can I do a push() in Processing? Is it possible? If not, what's the workaround to achieve the same effect (adding bubbles when clicking) thanks!

[@TheCodingTrain]

+timetravellers You can use an ArrayList and the function add(). Here is a tutorial that shows some of this: kzbin.info/www/bejne/fp-2e41qprmWrbs

[@timetravellers8909]

+Daniel Shiffman That's exactly what I was looking for, thanks a lot! Best videos on P5/Processing ever!

[@TheCodingTrain]

+timetravellers glad to hear!

[@sadielectricalelectronicss8595]

Love you bro.....

[@kic3000]

Hi, Daniel, thanks for your videos. Im very enjoying with them. Here im trying to make some effect like, once you mouseDragged the circle, and with 1click , they will spread to random direction(out of screen). so, is there anyway to override the move() function of the constructor function of Bubble? thanks!

[@marqimoth6987]

how do i delete something depending if the if function gets triggered

[@bencruz7906]

THANK YOU AWESOME!!!

[@ashishchauhan7239]

hlo sir i am trying to store multiple data in local storage but errors can you help me to resolve this ?

[@jaiir3203]

How should I make an object in p5.js, by using the var bubble = function (){} method or should I use function bubble(){} What's the difference

[@TheCodingTrain]

Try ES6 classes! kzbin.info/www/bejne/rniVh5Wkq5WqrMk

[@scharfer56]

Do you know how to configure the window that opens up when you preview your project to be exactly the size of the canvas? I like to create a 500*500 canvas, but when I preview the project, the window that opens up is 400*400 or so and I have to drag and stretch the window to see the whole canvas. I know running in the browser is an option, but I like the little pop up window...

[@TheCodingTrain]

+Ryan Scharfer Go and get the most recent editor. It should do this for you automatically. If you change the window size manually it will keep your manual adjustment, but you can reset that by quitting and relaunching the editor. See: github.com/processing/p5.js-editor/releases You can also file bug reports here if it's not working as you expect: github.com/processing/p5.js-editor/issues

[@S0KE]

Hey Daniel! I'm having kind of a problem here. I'm making a sidescrolling game using the translate function you showed in another video (I set the translate function to move on the Y axis based on the character position). I was testing something with the push and splice function and I made it add a new object to an array and delete the oldest one everytime I click, just like you did in this video. It seemed to work fine, however, I noticed that when I move my character up and click on the screen mouseY does not seems to be translated, because the objects start to apear down, in other words, it keeps appearing where the mouseY would be in the starting position as if I never moved the character at all. Is this behavior expected? If for example I click on 100,100 and then use translate to move my view -200 on the Y axis and click again, shouldn't I be clicking on 100,-100 now?

[@KuyruksuzSatyr]

10:17 its fun for us too, we are all weird don't worry :D

[@herrjose]

daniel rules!

[@zoecarlibur]

that was fun!

[@tarekmustafa2525]

Awesome!

[@havearelax31401]

everything ok but I am not seeing that bubbles|||| vscode shows that its running but cannt see the exact output u showed

[@videosaver1934]

This is p5js

[@SaintPepsiSanCoca]

Once again i got a question: I'm using the constructor function to create something(moving image for example) when mouseIsPressed. and when that "image" gets to a certain point, it resets back to its first position. but when i let go of the mouse before it hits the end value, and i click again. it just starts where I last let go of the mouse. How do I make it so that when my mouse is released it also resets its value. because I can't call it's reset function from out of the for loop.

[@TheCodingTrain]

+skrubritos you can! I would simply write a new function (or re-use an existing one) and call that function in the mouseReleased() event handler,i.e. function mouseReleased() { yourobject.reset(); }

[@SaintPepsiSanCoca]

+Daniel Shiffman thank you! but it's a little hard to target what i want to reset. because i used an array constructor to create something while the mouse is pressed within a if mouseispressed in the draw function. when i try to target the function in my object that's been created with the constructor function and thats in a for loop. if i try to target it outside of the for loop it says that its not a function. (so complicated) pff. thanks again for the help. final question. if the function is a mouseIsPressed. do i even need to use the constructor function? because I had it without constructor function before and then it did reset when i let go but the image wouldn't dissapear(reset) when it got to the and

[@SaintPepsiSanCoca]

+Daniel Shiffman sorry that was a really long message. I can't try what you said right now so all the coding thats going on is in my head so as soon as i can test the reset() function i'll let you know. also I had send you an email on your contact adress :)

[@SaintPepsiSanCoca]

+Daniel Shiffman one more addition to the mouseRelease it seems to trigger even when I havn't told it to do something. is that correct or does it do something that i'm not aware of :)

[@SaintPepsiSanCoca]

Daniel Shiffman Nevermind. thanks for the help! my Javascript/Jquery teacher helped me understand what i did wrong. Keep making videos shiffgod :3

[@alvaromorales6828]

Hey men , I am getting a little bit lost lately, but I don't wanna to rewatch your videos again , Can you provide some pdf or text document where I can go over ..?

[@zyzo99]

Hello, what about AdobeJS ?Do you plan some videos about it? cheers! ))

[@kikesitosk8xoxtla]

What library are you using?

[@fariat]

thanks

[@GhostStyle007]

i don't rly understand what's the challenge you talked about at the end, i just added that at the end of your "for" loop: if(bubbles[i].x>width){ bubbles.splice(i,1) } and it works like expected

[@tazulislam2698]

How to separate unique object from JSON array? please make a video.

[@Markos_o]

hallo Dan , i can not download p5 !! why that ?

[@kiragibson3112]

I'm having a really hard time understanding why you need the for loops in the example he uses. Why can I not just have the constructor function and the mousePressed function and that work? Why is the for loops a necessity? Why is the bubbles.length loop needed to have the mousePressed event work? Please help me understand this, someone. It's hard to look this stuff up on the internet and get a direct answer to my very specific question without someone here that can guide me through it.

[@hyfahyf1552]

How can we delete json genie array permanent

[@deepakvishwakarma2043]

What is he using to code ???

[@kbryanolan]

oh..I'm not alone 🙊

[@AlexOchs]

am i the only one who has a problem with for loops? everytime i try to use one in p5.js i get the error "Move 'var' declarations to the top of the function."

[@animore8626]

Are you getting any hints as to what line of code is causing the error?

[@johncerpa3782]

mouseDragged is not working for me

[@saipanidarapu6656]

try to add the p5 library to your editor, i think its an inbuilt function.

[@itzspellon1330]

i wanted to make if something touch the rect the rect disapears

[@zandgall1837]

You should make it so that every time you click, a new blue blob appears!

[@marineoutsource]

Wow ... !!!

[@alnayab]

ur awsme

[@alonsomartins712]

7:37 Sempre que ele faz isso nos vídeos eu acho muito engraçado kskk

[@SMC4free]

I was looking for an answer of that problem in the end of the video 🤦‍♂️

[@Hydr312]

what about the "add" and "remove" comment ?

[@andresfelipesierrasi]

interesante p5 js

[@lizabeti3457]

Awe You can also use array.split(indexOf(whatever), 1); which checks what’s the index of whatever 😂

[@arieluzal]

These tutorials are all excellent! Could you possibly make one explaining inheritance in p5.js (eg: p5js.org/examples/examples/Simulate_Multiple_Particle_Systems.php)? Thanks!

[@TheCodingTrain]

Oh good idea! Suggest here: github.com/CodingRainbow/Rainbow-Topics/issues

[@Mohammad_Awais]

* Need help!! Facing the issue while doing the same task in processing.. Bubble[] bubbles = new Bubble[50]; void setup() { size(600, 400); for(int i = 0; i < bubbles.length; i++) { bubbles[i] = new Bubble(); } } void draw() { background(0); for(int i = 0; i < bubbles.length; i++) { bubbles[i].move(); bubbles[i].display(); } } void keyPressed() { bubbles.splice(0,5); //here is the issue!! } ====== class Bubble { float x = random(0, width); float y = random(0, height); void display() { stroke(255); fill(255, 0, 150, 50); ellipse(x, y, 24, 24); } void move() { x = x + random(-1, 1); y = y + random(-1, 1); } }

[@hyfahyf1552]

Helllo

[@zaidmohammed9380]

he didnt get anywhere

[@jupiterjs031]

thanks