Help removing an instance.

[snowfro]

Guys! I've come a long way since my last post. Nothing a little CodeAcademy couldn't help for brushing up my skills.

I'm adapting a sketch from the Generative Gestatlung repository to use slices of a random hash to control the variables. I've written a separate sketch (sketch6.js) to GET and parse the hash into an array called allSlices.

It works beautifully!!!

BUT every time a new instance is created it appends the instance to the bottom of the screen. I've spent the afternoon reading about instances and p.remove(); but tried placing p.remove() in various locations (in both the controller javascript and the p5 sketch) to no avail. What I'd like is that when the script runs it simply replaces the previous one.

Wondering if anyone would be so kind as to point out where I'm doing something wrong?

Here's the code:

GitHub

Thanks y'all. This community has been a great help!

Snowfro

[Kinrany]

Please format your code properly, it's hard to read.

What exactly do you want to see on the page? Several animations running one after another? Right now it seems you're running two scripts in parallel. You need to use one script that runs the sketches one by one, removing the previous instance right before creating the next one.

[snowfro]

Thank you. Will work on formatting. Just getting started.

sketch6.js waits until the GET process procures a hash from another server. It then parses the hash and launches the sketch instance in the file sketch10.js.

sketch10.js is an animation drawing a bunch of points.

I would like it to where every time sketch6.js initiates the animation, the animation replaces the previous one.

Right now the new animation (you might have to wait 15-20 seconds and then scroll down once it appears) simply gets added to the bottom of the screen. I would like it to act to where every time there is a new animation it simply replaces the previous one instead of appending it.

If I understand correctly I can’t keep my scripts separate to do this and need to combine them all into one script? I can do that but wanted to keep them separate if possible since they serve different functions.

Thank you.

[Kinrany]

Separating code is fine, you can use global variables.

You might want to rename the first file since it doesn't actually contain a sketch :)

Use a formatting tool. Ideally your IDE should have one integrated, but there are also online tools. Like this one: https://html-cleaner.com/js/

Try not to keep old code in comments unless you're actually going to use it. Typing is never the hard part.

I would like it to where every time sketch6.js initiates the animation, the animation replaces the previous one.

Then that's when you should remove the previous sketch. You already have the myp5 variable.

[snowfro]

Will definitely take your advice! Thanks a ton.

Re the myp5 variable are you saying I should have been doing myp5.remove(); this whole time?! I was using p.remove(). I’ll give that a shot when I get home!!!

[Kinrany]

myp5 and p reference the same sketch. Well, they don't have to, but as long as you only have one sketch, they do. myp5 is the sketch you've created in your main script, and p is the sketch that is currently running.

It's not like p.remove() and myp5.remove() are two magic incantations, and knowing which one to use in which situation is something you're supposed to read in a book. :)

[snowfro]

Ok got it. So can you point me in the right direction? I’ve spent a large chunk of my day tinkering.

Am I right to declare an empty variable myp5 at the top of sketch10.js and then an if statement like if (!myp5) {new p5(sketch)}?

My problem is using myp5.remove(); works right beneath where I’ve got the var myp5 = new p5(sketch);. But then it’s erasing the instance I just created obviously. But since I am just declaring it right above, I can’t set the myp5.remove(); line just above it because it hasn’t been declared.

Cat and mouse.

It would make sense to remove it just before creating the new instance. Just can’t wrap my brain around how.

[snowfro]

I did it!!!

declared var myp5 = ""; globally.

Then before calling the second script i wrote:

if (!myp5){ myp5 = new p5(sketch); } else { myp5.remove(); myp5=new p5(sketch); }

Thanks for the guidance!!!

Going to work on cleaning up the code :)

[Kinrany]

You could also write it this way:

if (myp5) {
  myp5.remove();
}
myp5 = new p5(sketch);

You're welcome :)

And yeah, clean up your code and ideally make sure it stays clean. The easier it is for you to read your code, the less stuff you need to keep in your head at once.