CSS Houdini achieves dynamic wave effect

CSS Houdini is known as the most exciting innovation in the CSS field. CSS itself has long lacked syntax features, its scalability is almost zero, and its support efficiency for new features is too low and its compatibility is poor. Houdini directly exposes the CSS API to developers. The previously completely black-box browser parsing flow has begun to be open to the outside world, and developers can customize their own CSS properties.

background

We know that when a browser renders a page, it first parses the HTML and CSS of the page, generates a rendering tree, and then presents the entire page content through layout and painting. Before the emergence of Houdini, we had very little room to operate in this process, especially the layout and painting stages, which were completely closed, greatly limiting the flexibility of CSS. The emergence of CSS preprocessing technologies such as sass, less, and stylus in the community is mostly due to this reason. They all hope to break through the limitations of CSS through precompilation and give CSS more powerful organization and writing capabilities. So gradually, we no longer write CSS by hand, and the more convenient and flexible CSS extension language has become the protagonist of web development. Seeing this situation, CSS Houdini finally couldn't sit still anymore.

What is CSS Houdini?

CSS Houdini opens a series of APIs of the browser parsing process. These APIs allow developers to intervene in the operation of the browser's CSS engine, bringing more CSS solutions.

CSS Houdini mainly provides the following APIs:

CSS Properties and Values ​​API

Allows you to define and use variables in CSS, and is currently the most compatible API;

Layout API

Allow developers to write their own Layout Modules and customize layout properties such as display;

Painting API

Allows developers to write their own Paint Modules and customize drawing properties such as background-image.

Basics: Using the Painting API in three steps

1. Custom code for loading styles in HTML via Worklets:

<div class="rect"></div>
<script>
  if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("paintworklet.js");
  }
</script>

Worklets is also one of the APIs provided by Houdini, responsible for loading and executing custom JS code for styles. It is similar to Web Worker, which is an independent working process running outside the main code, but it is lighter than Worker and is most suitable for CSS rendering tasks.

2. Create a paintworklet.js, register a paint class rect using the registerPaint method, and define the drawing logic of the paint attribute:

registerPaint(
  "rect",
  class {
    static get inputProperties() {
      return ["--rect-color"];
    }
    paint(ctx, geom, properties) {
      const color = properties.get("--rect-color")[0];
      ctx.fillStyle = color;
      ctx.fillRect(0, 0, geom.width, geom.height);
    }
  }
);

A paint attribute class named rect is defined above. When rect is used, rect will be instantiated and the paint method will be automatically triggered to perform rendering. In the paint method, we get the --rect-color variable defined by the node's CSS and fill the element's background with the specified color. The ctx parameter is a Canvas Context object, so the paint logic is the same as the Canvas drawing method.

3. When used in CSS, just call the paint method:

.rect {
  width: 100vw;
  height: 100vh;
  background-image: paint(rect);
  --rect-color: rgb(255, 64, 129);
}

This is a simple implementation of a custom CSS background color property. It can be seen that by using CSS Houdini, we can achieve the style functions we want as flexibly as operating canvas.

Advanced: Implementing Dynamic Ripples

Based on the above steps, we demonstrate how to use the CSS Painting API to achieve a dynamic wave effect:

<!-- index.html -->
<div id="wave"></div>

<style>
  #wave {
    width: 20%;
    height: 70vh;
    margin: 10vh auto;
    background-color: #ff3e81;
    background-image: paint(wave);
  }
</style>

<script>
  if ("paintWorklet" in CSS) {
    CSS.paintWorklet.addModule("paintworklet.js");

    const wave = document.querySelector("#wave");
    let tick = 0;  
    requestAnimationFrame(function raf(now) {
      tick += 1;
      wave.style.cssText = `--animation-tick: ${tick};`;
      requestAnimationFrame(raf);
    });
  }
</script>

// paintworklet.js
registerPaint('wave', class {
  static get inputProperties() {
    return ['--animation-tick'];
  }
  paint(ctx, geom, properties) {
    let tick = Number(properties.get('--animation-tick'));
    const {
      width,
      height
    } = geom;
    const initY = height * 0.4;
    tick = tick * 2;

    ctx.beginPath();
    ctx.moveTo(0, initY + Math.sin(tick / 20) * 10);
    for (let i = 1; i <= width; i++) {
      ctx.lineTo(i, initY + Math.sin((i + tick) / 20) * 10);
    }
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.lineTo(0, initY + Math.sin(tick / 20) * 10);
    ctx.closePath();

    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fill();
  }
})

In paintworklet, the sin function is used to draw the wavy lines. Since AnimationWorklets is still in the experimental stage and has limited openness, we use the requestAnimationFrame API outside the worklet to drive the animation and make the wavy lines move. When you are done you will see the effect below.

However, in fact, this effect is a bit rigid. The sin function is too regular. In reality, waves should fluctuate irregularly. This irregularity is mainly reflected in two aspects:

1) The ripple height (Y) changes irregularly with the position (X)

After decomposing the graph orthogonally according to xy, the irregularity we hope for can be considered as the irregular change of the ripple height y as the x axis changes at a fixed moment;

2) A fixed point (X is fixed), the ripple height (Y) changes irregularly over time

The dynamic process needs to consider the time dimension. The irregularity we hope for also needs to be reflected in the influence of time. For example, the wave height at the same position will definitely change irregularly one second before and one second after the wind blows.

When it comes to irregularity, some friends may think of using the Math.random method. However, the irregularity here is not suitable for implementation with random numbers, because the random numbers taken twice are discontinuous, while the waves of the two points before and after are continuous. This is not difficult to understand. Have you ever seen jagged waves? Or have you ever seen a wave that was 10 meters high one moment and dropped to 2 meters the next?

In order to achieve this continuous irregular feature, we abandon the sin function and introduce a package simplex-noise. Since there are two dimensions that affect the wave height, position X and time T, the noise2D method is needed here. It constructs a continuous irregular surface in a three-dimensional space in advance:

// paintworklet.js
import SimplexNoise from 'simplex-noise';
const sim = new SimplexNoise(() => 1);

registerPaint('wave', class {
  static get inputProperties() {
    return ['--animation-tick'];
  }

  paint(ctx, geom, properties) {
    const tick = Number(properties.get('--animation-tick'));

    this.drawWave(ctx, geom, 'rgba(255, 255, 255, 0.4)', 0.004, tick, 15, 0.4);
    this.drawWave(ctx, geom, 'rgba(255, 255, 255, 0.5)', 0.006, tick, 12, 0.4);
  }
  
  /**
   * Draw ripples */
  drawWave(ctx, geom, fillColor, ratio, tick, amp, ih) {
    const {
      width,
      height
    } = geom;
    const initY = height * ih;
    const speedT = tick * ratio;

    ctx.beginPath();
    for (let x = 0, speedX = 0; x <= width; x++) {
      speedX += ratio * 1;
      var y = initY + sim.noise2D(speedX, speedT) * amp;
      ctx[x === 0 ? 'moveTo' : 'lineTo'](x, y);
    }
    ctx.lineTo(width, height);
    ctx.lineTo(0, height);
    ctx.lineTo(0, initY + sim.noise2D(0, speedT) * amp);
    ctx.closePath();

    ctx.fillStyle = fillColor;
    ctx.fill();
  }
})

By modifying parameters such as peak and bias, you can draw another different wave pattern. The effect is as follows. Done!

Summarize

The above is the CSS Houdini that I introduced to you to achieve dynamic wave effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!