I would like to know if you have some examples of how to create particle effects in ZapparStudio?
Hi There,
There is no built in particle effects at this point in time in Studio, however, our in-house creative team has built one for use across their projects which weāre happy to share with you
The project below has a plane in it acting as a button that when pressed activates some code that randomly positions and moves a collection of star burst images. You can enter the āGlitter Particleā subsymbol if you want to dig deeper into the implementation.
Particle Effect.zpp (283.4 KB)
Hope this is useful
Mark
Hay Mark,
Iām playing with your Particle Effect and Iām loving it!!
I have a question. When I run your code it doesnāt change the pattern each time I press the button.
How would I get it to do that?
Thanks,
Steve
Hi Steve,
The plane just calls the activate function, it only randomizes one time at the begging and then uses those values each subsequent time. You can move the for loop inside the activate function in the particleCode
script to randomize everytime. So it would look like the following:
var no_particles = 15;
var d = 1;
var particles = [];
//create the particles and push them to the <particles> group
var plusOrMinus = function(){
if(Math.random() > 0.5){
return 1;
}
else{return -1;}
};
export function activate(){
for(var i = 0; i < no_particles; i++){
// create the particle and push it into the array
particles.push(Z.Symbol("Glitter Particle"));
// then push that particle to the 'particles' group
symbol.nodes.particles.push(particles[i]);
// pass random parameters to that particle
var x = (Math.random() * d) * plusOrMinus();
var y = (Math.random() * d) * plusOrMinus();
var z = (Math.random() * d) * plusOrMinus();
var scale = Math.random() * 0.4 + 0.4;
var speed = 1 + 0.5 * Math.random();
particles[i].nodes.code.set_x(x);
particles[i].nodes.code.set_y(y);
particles[i].nodes.code.set_z(z);
particles[i].nodes.code.set_scale(scale);
particles[i].nodes.code.set_speed(speed);
}
for(var i = 0; i < particles.length; i++){
particles[i].nodes.code.activate();
}
};
Edit* Iāve just realized that this is creating a new set of particles each time which is bad as it will build up and slow your phone down. What you will want to do is create your pool of particles outside of the activate function and then change their x,y,z, scale and size inside activate.
Thanks,
Mark
Thanks Mark,
I was thinking I would have a problem with build up of new sets. I didnāt see how to remove a new item. Can we? or would I have to remap x,y,z? Iām looking at using this on other things later.
Thanks,
Steve
We donāt have any garbage collection in Studio at the moment so itās best to just use a pool of objects. Itās done easily enough by moving the random number generation to the activate function but keeping the creation of the particles to the for loop that runs once:
for(var i = 0; i < no_particles; i++){
// create the particle and push it into the array
particles.push(Z.Symbol("Glitter Particle"));
// then push that particle to the 'particles' group
symbol.nodes.particles.push(particles[i]);
}
export function activate(){
for(var i = 0; i < particles.length; i++){
// pass random parameters to that particle
var x = (Math.random() * d) * plusOrMinus();
var y = (Math.random() * d) * plusOrMinus();
var z = (Math.random() * d) * plusOrMinus();
var scale = Math.random() * 0.4 + 0.4;
var speed = 1 + 0.5 * Math.random();
particles[i].nodes.code.set_x(x);
particles[i].nodes.code.set_y(y);
particles[i].nodes.code.set_z(z);
particles[i].nodes.code.set_scale(scale);
particles[i].nodes.code.set_speed(speed);
particles[i].nodes.code.activate();
}
};
Mark
Thank you Mark.
Iām looking at doing something with moving rocks but I didāt see how to clean up things.
What would be the best way to track how many pooled objects I have. (for debugging)?
Thanks for all your help!
Steve
Hi Steve,
Once constructed thereās no way at the moment for ādeletingā the memory used so itās not possible to do the traditional clean up of removing objects.
The best thing to do is create an array of the objects like we do in the example above with the particles[]
array. You can use the .length property of the array to tell how many objects you have.
Thanks,
Mark
Thank you!
I was playing with the Particles code and found it had colored one. So I added your code and a random color code to it:
Steve
var no_particles = 15;
var d = 1;
var particles = [];//create the particles and push them to the group
var plusOrMinus = function(){
if(Math.random() > 0.5){
return 1;
}
else{return -1;}
};// Color pick send color number 0-4 if more then 3 change
var color = function(){
var c = 0;
c = Math.floor(Math.random() * 11);while (c > 5) { c = Math.floor(Math.random() * 11); }; return c;
};
for(var i = 0; i < no_particles; i++){
// create the particle and push it into the array
particles.push(Z.Symbol(āGlitter Particleā));
// then push that particle to the āparticlesā group
symbol.nodes.particles.push(particles[i]);
}
export function activate(){
for(var i = 0; i < no_particles; i++){
// pass random parameters to that particle
var x = (Math.random() * d) * plusOrMinus();
var y = (Math.random() * d) * plusOrMinus();
var z = (Math.random() * d) * plusOrMinus();
var scale = Math.random() * 0.4 + 0.4;
var speed = 1 + 0.5 * Math.random();particles[i].nodes.code.set_x(x);
particles[i].nodes.code.set_y(y);
particles[i].nodes.code.set_z(z);
particles[i].nodes.code.set_scale(scale);
particles[i].nodes.code.set_speed(speed);
particles[i].nodes.code.set_color(color());}
for(var i = 0; i < particles.length; i++){
particles[i].nodes.code.activate();
}
};
This is -almost- exactly what Iām trying to do, and Iāve been diving into it to find out how to change it to suit my needs.
What Iād like to do is instead of having the particles radially move outward from their random position a random distance away from 0,0, but in the same plane, Iād like them to move -up- (perpendicular from the plane). I canāt seem to find this in the code, the speed is how fast it goes, not in which direction, so I figure this is āhardcodedā within the Glitter Particle.
I canāt find how to change it though. Can you give me some pointers?
Hi Mark,
In the āparticleCodeā script node within the zpp you should see three variables: x
, y
and z
.
These variables are currently being assigned a randomised value through the Math.random()
function, and then being passed in to the set_x
, set_y
, and set_z
functions (exported from the āGlitter Particleā subsymbol) later on in the script.
By changing these values, you can change the direction that the particles will be travelling towards.
Hope this helps.
All the best,
Seb
Thanks, Seb!
I assumed those were the starting points of the particle. I Should be able to figure it out now
I have tried my own particles system, āwaterā styleā¦
Very cool!
Here itās the zpp file for those who want to play with it. Code similar from Markās, but the nodes are managed with JS objects. Everything is inside the node ācodeā. Enjoy!
Particles.zpp (370.4 KB)
Many thanks!
Cheers!
This is great, thanks for sharing! Are you looking to use this is a project soon? Love to hear a little more about what your plans are
Glad you like it!
Yes Iām using this kind of code for a small game Iām working on - nothing serious, just a way to learn more about Studio. In fact, Iām starting to consider Studio as a kind of IDE pour AR/VR JS application!
Hi Mark,
I have limited experience with coding- could you modify this code so that instead of activating when the box is pressed, the code will attach to an imported fbx object ( that has an attached animation) and will activate when the fbx object is pressed?
What your asking for is more or less the same thing. You have to use a button on any models. the model itās self does not have a clicked on event. Place the button inside your model and change it to not visible.
Steve