This year’s Meiyu is very dedicated, has been toss about for a month, still do not want to go off work, often is a second before the sun, the next second was poured into a drowned rat, we call this violence May.

In order to rub the heat of mei violence, today to bring you a rain of words, first look at the effect.

Inspired by an example from LeoSans, an open source text animation library,


The author is cMISCM, a creative developer at Google. If you’re interested, search github.

The Effect of splash after the text hits the water is called Gooey Effect in the industry, which translates to slime Effect. It is a sharp tool used by front-end partners to simulate the liquid Effect, and it also gives rise to a lot of gameplay.

Used for UI interactive effects


For big screen interactive effects


It may seem fancy, but it can be implemented in two simple steps:

  1. Add a blur filter to the effect area
  2. Add contrast to blur effect

Isn’t that easy? This effect can be easily achieved using CSS or SVG, and today we introduce the third solution, which is the most efficient one: the Shader of WebGL.

We use pixi.js animation library this time, I believe many front-end partners are familiar with this old animation library, its latest version has adopted webGL rendering mode by default, in modern browsers have higher performance improvement.

The main points of the program are described below, and you can refer to the source files for details.

Create an

Start by creating a PixiJS application and fill the entire screen with canvas Settings.

initScene() {
  this.app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    backgrondColor: 0xffffff
  })
  this.app.view.style.width = '100%'
  this.app.view.style.height = '100%'
  this.app.view.style.position = 'absolute'
  this.el.appendChild(this.app.view)
}Copy the code

Add filter

As I said, there are two steps to achieving the Gooey effect. We apply a blur filter to the entire canvas and then apply a custom filter to increase contrast. The filters in PixiJS are all wrapped around the WebGL Shader.

addFilter() {const blurFilter = new pixi.filters.BlurFilter(3) // Const fs = 'VARYING VEC2 vTextureCoord; uniform sampler2D uSampler; void main(void) { vec4 color = texture2D(uSampler, vTextureCoord);if(color. A > 0.6) {gl_FragColor = vec4 (1.0, 1.0, 1.0, 1.0); }else{gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } } ` const thresholdFilter = new PIXI.Filter(undefined, fs, {}) this.app.stage.filters = [blurFilter, thresholdFilter] this.app.stage.filterArea = this.app.renderer.screen }Copy the code

Text effects

In order to achieve the splashing effect of characters hitting the water surface, the lattice coordinates of Chinese characters should be obtained first, and then the coordinate path should be filled with particles. Finally, simple physical movement of particles should be done to achieve the collision effect of hitting the bottom.

Every Chinese character is a PNG image with a transparent background. As long as we take pixel sampling of these images through canvas API, we can obtain the lattice coordinates of each character.

getImageData() {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  img.onload = () => {
    ctx.drawImage(img, 0, 0, size, size)
    const imgData = ctx.getImageData(0, 0, size, size)
    for(let i = 0; i < imgData.data.length; i+=4) {
      const alpha = imgData.data[i+3]
      const index = i / 4
      if(alpha > 0) {
        this.data.push({
          x: index % size,
          y: index / size | 0
        })
      }
    }
    this.createChar()
  }
  img.src = src
}Copy the code

Elastic particle collision

Each particle has an acceleration of gravity in the vertical direction, and the energy loss of each collision reduces the rebound height.

update() {
  this.vy += this.gravity
  this.x += this.vx
  this.y += this.vy
  if(this.y > this.bottom) {
    this.vy *= this.bounce 
    this.hit = true}}Copy the code

The physical motion of particles

conclusion

Now that you’ve mastered the mechanics of sticky effects, use your imagination to try out some interesting effects! Feel free to share your results in the comments section.

Making the source code:

Github.com/imokya/word…