featured image

A Summer with Particles and Emojis

 - 

This summer I am very lucky to join the Hubs by Mozilla as a technical artist intern. Over the 12 weeks that I was at Mozilla, I worked on two different projects.
My first project is about particle systems, the thing that I always have great interest in. I was developing the particle system feature for Spoke, the 3D editor which you can easily create a 3D scene and publish to Hubs.

Particle systems are a technique that has been used in a wide range of game physics, motion graphics and computer graphics related fields. They are usually composed of a large number of small sprites or other objects to simulate some chaotic system or natural phenomena. Particles can make a huge impact on the visual result of an application and in virtual and augmented reality, it can deepen the immersive feeling greatly.

Particle systems can be incredibly complex, so for this version of the Particle System, we wanted to separate the particle system from having heavy behaviour controls like some particle systems from native game engines, only keeping the basic attributes that are needed. The Spoke particle system can be separated into two parts, particles and the emitter. Each particle, has a texture/sprite, lifetime, age, size, color, and velocity as it’s basic attributes. The emitter is more simple, as it only has properties for its width and height and information about the particle count (how many particles it can emit per life circle).

By changing the particle count and the emitter size, users can easily customize a particle system for different uses, like to create falling snow in a wintry scene or add a small water splash to a fountain.
9f21b26dd47b17d8a7a79a6010823548-1
Changing the emitter size

0510902ee17a18327b8b09426308eba2-2
Changing the number of particles from 100 to 200

You can also change the opacities and the colors of the particles. The actual color and opacity values are interpolated between start, middle and end colors/opacities.
704028fa53695af6a1f9926135640d4b

And for the main visuals, we can change the sprites to the image we want by using a URL to an image, or choosing from your local assets.
cd271e071bd6573e7885b6d4469a0557

What does a particle’s life cycle look like? Let’s take a look at this chart:
particle-life-chart-1
Every particle is born with a random negative initial age, which can be adjusted through the Age Randomness property after it’s born, its age will keep growing as time goes by. When its age is bigger than the total lifetime (formed by Lifetime and Lifetime Randomness), the particle will die immediately and be re-assigned a negative initial age, then start over again. The Lifetime here is not the actual lifetime that every particle will live, in order to not have all particles disappear at the same time, we have this Lifetime Randomness attribute to vary the actual lifetime of each particle. The higher the Lifetime Randomness, the larger the differentiation will be among the actual lifetimes of whole particle system. There is another attribute called Age Randomness, which is similar to Lifetime Randomness. The difference is that Age Randomness is used to vary the negative initial ages to have a variation on the birth of the particles, while Lifetime Randomness is to have the variation on the end of their lives.

Every particle also has velocity properties across the x, y and x axis. By adjusting the velocity in three dimensions, users can have a better control on particles’ behaviours. For example, simulation gravity or wind that kind of simple phenomena.
3d91e7b1985adfe0f43cba0ec281d0d8
With angular velocity, you can also control on the rotation of the particle system to have a more natural and dynamic result.
423ea65e4cf34687e2c40a0860d75849-1

The velocity, color and size properties all have the option to use different interpolation functions between their start, middle and end stages.

ad575b83374a7aca69e2eb6c8d332faa
The particle system is officially out on Spoke, so go try it out and let us know what you think!
ezgif-2-ba2e85c82a43

Avatar Display Emojis

My other project is about the avatar emoji display screen on Hubs. I did the design of the emojis images, UI/UX design and the actual implementation of this feature. It’s actually a straightforward project: I needed to figure out the style of the emoji display on the chest screen, some graphics design on the interface level, make decisions on the interaction flow and implement it in Hubs.

emoji-evolution
Evolution of the display emoji design.

We ultimately decided to have the smooth edge emoji with some bloom effect.
screen-emojis
Final version of the display emoji design

emoji-icons
Icon design for the menu user interface

hover-effect-flow-1
Interaction design using Hubs display styles

Demo:
0dc6a38c4661eb4481c663d35739b6b9

When you enter pause mode on Hubs, the emoji box will show up, replacing the chat box, and you can change your avatar’s screen to one of the emojis offered.

I want to say thank you to Hubs for having me this summer. I learned a lot from all the talented people in Hubs, especially Robert, Jim, Brian and Greg who helped me a lot to overcome the difficulties I came across. The encouragement and support from the team is the best thing I got this summer. Miss you guys already!
WeChat-Image_20190801113617