I want to create a the ability to 'draw' particles. Is there a way to make particles follow a path?

Hi Dplatz,

Yes, this is possible :)

First we can use the TouchComponent to figure out where the user is tapping.

var event = script.createEvent("TouchStartEvent");
event.bind(function(eventData)
{
    var touchedPos = eventData.getTouchPosition();
    print("touch started at " + touchedPos.x + " " + touchedPos.y);
});

Take a look at https://lensstudio.snapchat.com/api/classes/TouchStartEvent/ for more information.

Then, we can use a script to generate particles in world space. Take a look at this guide to see an example of spawning particles based on an object's position: https://lensstudio.zendesk.com/hc/en-us/community/posts/360012401863/comments/360000612463

Can't wait to see what you come up with!

Cheers,

Jon

Glad to hear Dom!

What the WorldParticleController does is copy the particle system and leaves it at the last position it was at every frame. 

So, if you wanted to be able to move the particles in the Preview panel, you can add a manipulate component and a touch component to your particle system.

Then the WorldParticleController script will take care of leaving a particle trail for you!

By default the manipulate component is designed for an object on a surface. Take a look at this guide if you want to manipulate the object in screen space. https://lensstudio.zendesk.com/hc/en-us/community/posts/115020451423/comments/115005538003

Don't forget to share what you come up with!

Jon

Hi Dom,

Glad to hear! In this case we can use the touch position to make our own manipulate system (so we don't have to "grab" an object). 

Since we want the user to be able to touch anywhere, we can enable touchBlocking with no Touch Component so that every screen tap is registered. 

global.touchSystem.touchBlocking = true;

Then, we can create a touch event that detects anytime the user moves their finger on the screen. We can take the position of the user's finger in screen space and calculate a world position that is equivalent to set an object to. 

// Call this function every time the user touches the screen and moves their finger
var event = script.createEvent("TouchMoveEvent");
event.bind(function(eventData)
{
 // Get the screen space position where a user touched.
 var touchedPos = eventData.getTouchPosition();

// Convert screen space position to world space
 var objPos = script.camera.screenSpaceToWorldSpace(touchedPos, 40.0)

// Apply the calculated position to an object
 script.obj.getTransform().setWorldPosition(objPos)
});

The second argument to screenSpaceToWorldSpace refers to the z position you want the world space to be in. Because by default the camera's position is -40, I set this to 40 so that the world space position is at 0. However you may want to try different numbers based on your scene set up. 

Finally, I take the calculated position and apply it to my object. In this case, the particle object. 

Let me know how it goes!

Jonathan

Final code looks something like:

// The camera used to render the scene
// @input Component.Camera camera

// The object we want to move around
// @input SceneObject obj

// intercept every screen touch
global.touchSystem.touchBlocking = true;

// Call this function every time the user touches the screen and moves their finger
var event = script.createEvent("TouchMoveEvent");
event.bind(function(eventData)
{
 // Get the screen space position where a user touched.
 var touchedPos = eventData.getTouchPosition();

// Convert screen space position to world space
 var objPos = script.camera.screenSpaceToWorldSpace(touchedPos, 40.0)

// Apply the calculated position to an object
 script.obj.getTransform().setWorldPosition(objPos)
});

Hi Dom,

Take a look at this previous guide which demonstrates fading in and out the particle by reducing particle count over time. 

https://lensstudio.zendesk.com/hc/en-us/community/posts/360014138263/comments/360000668086

Cheers!

Jon

Hi Dplatz!

Were you able to figure it out? Ya you might have to do some wrangling since the scripts were not designed to perfectly work together. If you still need some help, do you mind uploading your project so I can take a look at what the issue is?

Thanks in advance!

Jon

Hi Dplatz,

One way to do this is to use spawnMaxParticles (as in the last linked guide) as a way to fade away the particles and disable them when the particle is faded. Similarly instead of adding the particles based on time, we can add particles based on whether user is touching the screen or not. 

For example: in the updateWorldParticles function in WorldParticleController.js we can reduce the number of spawnMaxParticles every frame and then disable them once it reaches 0 to create a fading effect. 

// Update all particle system's time
 for (var i = 0; i < script.maxParticleSystems; ++i) {
 var timeOffset = startTimes[i];
 var obj = instances[i];
 var pass = matPasses[i];

pass.spawnMaxParticles -= 8;

if (pass.spawnMaxParticles < 0) {
 obj.enabled = false;
 }

}

Now, when we spawn the particle we just need to set their spawnMaxParticles back to our original particle count:

// Restart particle system's position at current pos as needed
 if (global.touching) {
 var currentPos = script.particle.getTransform().getWorldPosition();
 var index = nextSpawnIdx % script.maxParticleSystems;
 var instance = instances[index];

startTimes[index] = currentTime;
 matPasses[index].spawnMaxParticles = 100;

instance.enabled = true;
 instance.getTransform().setWorldPosition(new vec3(currentPos.x,currentPos.y,currentPos.z));
 
 nextSpawnIdx++;
 }

You'll notice here I am checking for global.touching

What we want to do is tell this script that user is touching the screen and when they've stopped. In ParticleMover.js, you can use TouchStartEvent and TouchEndEvent to manage this status:

var event = script.createEvent("TouchStartEvent");
event.bind(function(eventData)
{
 global.touching = true; 
});

var event = script.createEvent("TouchEndEvent");
event.bind(function(eventData)
{
global.touching = false;
});

Finally, one thing you might want to do, is get where the user touch and move the object to that position (as you did in the TouchMoveEvent) also in the TouchStartEvent, since you want the particle to instantly appear where the user touches, rather than when they start moving their finger. 

Let me know how it goes, can't wait to see the result :)