This was a fun request!
Very hard to explain via text so I made a video showing you how I would approach it. The thing about sparks coming off a grinder like this is that it's easy to over think it. Randomness is key and I literally took the brush tool and drew brush strokes for each keyframe.
It may help you to search YouTube for "grinder sparks" and simply watch how the sparks act. Then emulate it. In this video I animated about 6 keyframes and then I copied/pasted them into a Graphic symbol.
Sometimes though, you may not have the time, or you are programming something that needs to have sparks. I can show you the idea of how it would be solved as a programming question. My bet is that you want the animator's answer, so I'm mainly posting this for future visitors to the page, in case they are solving the problem with programming.
After Effects could be used to render out the animated particles as frames with transparency. Or use the free Particle Illusion Standalone and the free particle libraries to create the effect, render out frames, and import into Animate.
This was a fun request!
Very hard to explain via text so I made a video showing you how I would approach it. The thing about sparks coming off a grinder like this is that it's easy to over think it. Randomness is key and I literally took the brush tool and drew brush strokes for each keyframe.
It may help you to search YouTube for "grinder sparks" and simply watch how the sparks act. Then emulate it. In this video I animated about 6 keyframes and then I copied/pasted them into a Graphic symbol. Then created a new layer on the main timeline and dragged an instance of this symbol to the stage so they can loop. As a nested symbol I also was able to rotate, scale and position the animation how I liked.
When you control particles with code you want to think about one particle, and how would its life go. Then think about what variations of life it might have. Program one particle to be able to live all of its possible lives. Here is some JavaScript code that covers a wide range of lives for a particle:
That's written as timeline code inside one particle. It starts off remembering where it began, some time later it jumps up, gravity effects it, and it falls below the view. When it does, it can be reborn, and start again. Here is how that might look.
The program works solely in two-dimensional space, but the random motion of particles may provide a virtually three-dimensional animation. pIllusion can be supported by OpenGL to accelerate the rendering speed which allows an accurate real-time preview with a proper video display card. Recently, pillusion has implemented a three-dimensional simulation function as of its recent free-to-download update.[4]
In games, particle effects like smoke or fire are drawn as image squares that always face torwards the camera. This looks fine in most cases, but the illusion is destroyed when these particles intersect with the environment and reveal a flat intersection line. Below you can see the flat intersection of a 'hard' smoke particle on the left, and the smooth intersection of a 'soft' smoke particle on the right.
Now to soften the intersection line, we can adjust the opacity of the square based on how close it is to the surface behind it. To do this, we can subtract the particle's depth from the environment's depth. Below you can see the environment depth on the left, the particle depth in the middle, and the difference on the right.
Now that we have the difference between the particle depth and the background depth for each pixel, we can decide how transparent the pixel should be. I decided to make the opacity fall off linearly, as if the particle were a volumetric cube. I also offset the center of the particle so that the midpoint of the falloff lined up with the midpoint of the original hard particle.
You might be wondering, "Why go to all this effort for particles in Overgrowth? It's not a war game full of explosions or an RPG full of magic spells!" That's true, but particles are still important for many natural effects. For example, drifting fog, sandstorm clouds, falling rain, impact dust, blood spray, and breath mist in cold weather.
This early 20th-century photograph from a cloud chamber offers a glimpse into the world of subatomic particles, capturing the first ever observed positron. Cloud chambers are devices that make visible the paths of charged particles as they move through a supersaturated vapor.
A particle system is a collection of many, many minute particles that together represent a fuzzy object. Over a period of time, particles are generated into a system, move and change from within the system, and die from the system.
Since the early 1980s, particle systems have been used in countless video games, animations, digital art pieces, and installations to model various irregular types of natural phenomena, such as fire, smoke, waterfalls, fog, grass, bubbles, and so on.
No single particle is referenced in this code, and yet the result will be full of particles flying all over the canvas. This works because the details are hidden inside the ParticleSystem class, which holds references to lots of instances of the Particle class. Getting used to this technique of writing sketches with multiple classes, including classes that keep lists of instances of other classes, will prove useful as you get to later chapters in this book.
With lifespan ranging from 255 to 0, it can conveniently double as the alpha transparency for the circle representing the particle. This way, when the particle is dead, it will have literally faded away.
This is a somewhat extreme scenario (with flawed logic), but it proves the point. For each particle in the list, this code adds a new particle to the list, and so the length of the array increases. This will result in an infinite loop, as I can never increment past the size of the array!
Notice the problem? Particle D is never checked! When C is deleted from slot 2, D moves into slot 2 in its place, but i has already moved on to slot 3. In practice, this may not be a total disaster, since particle D will get checked the next time around through draw(). Still, the expectation is that the code should iterate through every single element of the array. Skipping an element is unacceptable!
A second solution is to use a higher-order function. This is a function that receives another function as an argument (or provides a function as its return value). JavaScript arrays use many higher-order functions. For example, a common one is sort(), which takes as its argument a function that defines how to compare two elements of the array and then sorts the array according to that comparison.
With the array of particles, I can use filter(). This higher-order function takes a function specifying some kind of condition as an argument, checks each item in an array for that condition, and returns only the item(s) for which the given condition is true (excluding those items that return false):
The Emitter class will allow me to clean up the draw() function, removing the bulky logic of looping through all the particles. As an added bonus, it will also open up the possibility of having multiple particle emitters.
Recall that one of the goals I set at the beginning of this chapter was to write setup() and draw() without referencing any individual particles. In laying out that goal, I teased the possibility of a beautifully simple main sketch file. Here it is again, only now with the Emitter naming convention.
I could also add new features to the particle system itself. For example, it might be useful for the Emitter class to keep track of an origin point where particles are born. The origin point could be initialized in the constructor.
Create a simulation of an object shattering into many pieces. How can you turn one large shape into many small particles? Can you create several large shapes on the screen that each shatter when clicked?
Up to now, all the particles in my systems have been identical, with the same basic appearance and behaviors. Who says this has to be the case? By harnessing two fundamental OOP principles, inheritance and polymorphism, I can create particle systems with significantly more variety and interest.
What you have is clearly a particle system: a collection of individual pieces (particles) of confetti. You might be able to cleverly redesign the Particle class to have variables that store color, shape, behavior, and more. To create a variety of particles, you might initialize those variables with random values. But what if some of your particles are drastically different? It could become very messy to have all sorts of code for different ways of being a particle in the same class. Another option might be to do the following:
This is a nice solution: create three classes to describe the different kinds of confetti that are part of your particle system. The Emitter constructor could then have some code to pick randomly from the three classes when filling the array (note that this probabilistic method is the same one I employed in the random walk examples in Chapter 0):
In fact, separating the particles into different arrays is inconvenient; a single array for all the particles in the system would be far more practical. Fortunately, the ability to mix objects of different types in one array is an inherent feature of JavaScript, and polymorphism allows the mixed objects to be operated on as if they were of the same type. I can populate an array with different kinds of particles, and each particle will still maintain its unique behaviors and characteristics as defined in its respective class.
b1e95dc632