title: "Simulation of Face Contour Mask" slug: "face-contour-mask-simulation" status: "published" seo_title: "Face Contour Mask Simulation | AndiTheRobot" meta_description: "Technical implementation of a face contour mask simulation with plasma fire effect using landmark detection and custom shaders." focus_keyword: "face contour mask simulation" categories: - Computer Vision - WebGL

Simulation of Face Contour Mask

This post explores the technical implementation of a face contour mask simulation, focusing on the landmark indices and the shader algorithm used to create a plasma fire effect.

Contour Landmark Indices

The following indices define the face outline for masking. These are used in src/effects/PlasmaFireEffect.js.

// src/effects/PlasmaFireEffect.js:92-96
const contourIndices = [
  10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288,
  397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136,
  172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109
];
// These 36 landmarks define the face outline for masking.

Plasma Fire Shader Algorithm

The plasma fire effect is generated using a custom shader algorithm. Here are the core parameters and the mathematical model.

1. Coordinate Normalization

Coordinates are centered at the face bounding box center and normalized by half the width.

2. Distance Calculation

The distance from the center is calculated as: $$ dist = nx^2 + ny^2 $$

3. Time Modulation

Time is modulated based on the distance to create a dynamic effect: $$ t = time + |7.0 - dist| $$

4. Initial Velocity

$$ vx = nx \times (1.0 - t) / 2.0 $$ $$ vy = ny \times (1.0 - t) / 2.0 $$

5. Iterative Plasma Generation

The algorithm performs 8 iterations (i from 1 to 7) to accumulate color values.

For each iteration:

sinX = sin(vx) + 1.0
sinY = sin(vy) + 1.0
variation = |vx - vy|
contrib = sinX * sinY * pow(variation, 0.2)

r += contrib
g += contrib * 0.5
b += contrib * 0.3

vx += cos(vy * i + r + t) / i + 0.7
vy += cos(vx * i + r + t) / i + 0.7

6. Final Color Mapping

The accumulated values are mapped to RGB using tanh and an exponential function of the vertical coordinate (ny) to simulate the fire intensity rising.

expY = exp(ny)
r = tanh(expY / (r + 0.1)) * 255
g = tanh(expY / (g + 0.1)) * 128
b = tanh(expY * 2 / (b + 0.1)) * 64
alpha = 200

7. Color Clamping

All RGB values are clamped to the range [0, 255].

Summary

The algorithm creates a plasma fire effect that: - Is more intense toward the bottom (due to expY). - Has iterative feedback creating turbulent patterns. - Uses red-dominant colors (red coefficient 255, green 128, blue 64). - Renders only within the face contour mask.

```