Particle demo

please credit me if you use this! explore the code and make it the way you like it.

particle demo5-31-2020_4-36-07PM.wick (2.5 KB)

3 Likes

Hi @awc95014,

very nice! As I am still learning Wick, I cannot see where you put the script. How can I access the actuall script you call in the onClick of the button?

regards and respect!

Paul

Thank you @awc95014, this is great. I was trying to figure out space asteroids code and this looks perfect to get started. Many thanks. Greg

The code is in the green square, an off-screen particle thing, and the frame. Glad you all liked it :slight_smile:

I have a question. I looked at your code and I see the loop that clones the particle and creates new particles.
How can I detect collisions between particles? I can detect a collision between single objects by…
if(this.hitTest(particle2) ) {…}
but I cant see how I can detect a cloned particle collision without hard coding the particle numbers as above.
Thank you for your help. Greg

I dunno, I don’t test for collisions. I suppose you can make a for loop that names each particle something like par1, par2, par3, etc… by adding a number to “par” to make each variable, and storing the names in an array. then, for a collision, make a for loop iterating through the array of variable names and check collision for each one. Dunno what happens if you check one particle for a hitTest on itself, so you’d need to adjust for that.

2 Likes

I think you might be able to just add the hitTest code to the original object that’s being cloned, and every time it gets cloned, the code would be in the clones themselves . . .

2 Likes

Thank you @Hamzah_Al_Ani
I cant see how that works.
This is the particle code…I have hard coded it to detect particle2 which works, but how does it detect a cloned particle? What ID do I use? If I use particle it goes a bit mad as it thinks its collided with itself.

if(this.hitTest(particle2) ) {
this.xMove = this.xMove * -1;
this.yMove = this.yMove * -1;
this.x += this.xMove * this.opacity
this.y += this.yMove * this.opacity
console.log(“collision…”);
}

This is the clone code…I think project.clonedParticle should go in an array, but I cannot get it to work without errors.

project.numberOfAsteroidsToStart = 20;
//project.clonedParticle = []; // fails with error when code runs, with…project.clonedParticle[i] = particle.clone()

project.blastPars = function(clip) {
for(this.i = 0; this.i < project.numberOfAsteroidsToStart; this.i++) {
project.clonedParticle = particle.clone()
project.clonedParticle.x = random.float( (project.width/2), (project.width/2))
project.clonedParticle.y = random.float( (project.height/2), (project.height/2))
}
}

Any ideas would be great. Thank you. Greg

Do you want to replace particles with asteroids and to make them collide?

1 Like

Hi @awc95014
yes, that is the plan. Your code is nearly doing what I need now. I am trying to figure out how each cloned particle can detect it has hit another cloned particle without rewriting your great code to hard code the clone-id’s, but I have not got it working.
I added a collision boundary around the page and moved your button off screen, so now I see all your cloned particles bouncing around the screen, but they dont collide with each other.

Can you share me the project? I’ll try to work on it later.

1 Like

thank you @awc95014
I think there needs to be an array in your main clone loop, but I cant get it to work. Any help, would be great as this is something I need for other projects. Greg
asteroids demo-6-1-2020_6-40-12PM.wick (4.3 KB)

particles occasionally seem to escape the border, so you should try to find a solution for that. as for collisions, if there are only 2 square asteroids, compare the x and y coordinates to determine the direction. For example, say the asteroids are 10px wide and high:

  1. if asteroid1 hits asteroid2 and it is at least 1px farther up than it is to the left, (hit from top-left but more top) make yChange negative
  2. if asteroid1 hits asteroid2 and the amount asteroid1 is below asteroid2 is within 1px to the amount it is left, (hit at bottom-left diagonal), make xChange negative and yChange positive

I guess it’s kind of confusing, so if you can’t manage it yourself, I’ll try my best to find time to help you.

2 Likes

Thank you @awc95014. I will look at what you have suggested. Thanks for your help and code and time.
Update: @awc95014, I looked at your first comment. I figured out how to put each clone in an array. Each clone then checks if it has hit another clone in your loop and adjusts the x,y as you suggested. The particles now bump into each other a bit. Its not perfect, but I am making progress. Thank you again. Thank you @Hamzah_Al_Ani for the boundary code.
Thank you again. Greg
wick-particles

2 Likes

This happened during your demo you gave to me… Just something silly I wanted to share

1 Like

hi @awc95014
Thank you for this. I have had a few issues to resolve with collisions. The particle that starts the cloning is not a clone so the collision code doesnt work, but the cloned particles do collide which I think is what you see. I solved this by a bit of a fudge. I moved the original particle that creates the clones off screen so you only see cloned particles which collide correctly.
I have uploaded the project I have so far. Its still your code with a few tweaks so thank you very much for your code and help. I am trying to figure out how to move the space ship depending on the angle it is rotated so if its facing left 45 degrees and I click up it should move left at 45 degrees, but my maths is a bit rusty. Thanks to @Luxapodular for Asteroid rotating and random shapes code, and @Hamzah_Al_Ani for boundary detection and space ship controlling and other ideas from his project.
Thanks again @awc95014 for your help.
Greg
How did you capture the game playing?

asteroids demo-6-3-2020_6-09-57PM.wick (1.3 MB)
asteroids (1)

For one, you can’t actually move left or right… is that still an issue?

they also sometimes get stuck and spawn randomly in the middle of the game.

1 Like

Thank you @awc95014
This is still a work in progress. I have worked on your code further to move the space ship and fire at the asteroids.
There is still more to do as hitting an asteroid should spawn several smaller asteroids that if they are hit should disappear. Also there is no score or messaging, but with the help I have had from you and others I am making progress. One odd thing (there are a few bugs) I noticed is the gun tween. I am using a small oval for the missile, but the asteroid hit detection update() seems to be causing this to fire…
if(this.hitTest(spaceShip) ) {
when it it is the width of the space ship away. I am not sure what I did wrong but I will need to fix it.
Also, as you saw the asteroids seem to get stuck in a odd vibrating dance which I cannot figure out yet. Thank you for all of your help & advice @awc95014, @Hamzah_Al_Ani, @Luxapodular
File Updated(space bar fires the gun, up/down/left/right arrow-keys moves the ship):
asteroids demo-6-11-2020_4-01-49PM.wick (1.8 MB)

Greg
space1

2 Likes