Airplane Contrails Animation In Vanilla JavaScript – contrails.js

Preview:

Description:

Contrails, sometimes called vapor trails or condensation trails, are line segments trailing behind airplanes in the sky that are composed of water vapor condensed by the low-pressure regions behind the wingtip vortices.

In this article, I’ll be showing a refresh new JavaScript library for creating a realistic airplane contrails animation on your webpage. Have fun.

See Also:

• Configurable Airway Animation With JavaScript

How to use it:

1. Create an empty container to hold the animation.

<div id="contrails"></div>

2. Import the contrails.js.

<script type="module" src="contrails.js"></script>

3. Config the animation in the contrails.json.

{
  "img_path": "./assets/airplane-blue.svg",
  "img_angle": 90,
  "background_color": "#87CEEB",
  "planes": {
    "speed": 3,
    "size": 20,
    "number": 3,
    "double_contrails": true,
    "contrails_spacing": 0.2
  },
  "particles": {
    "size": 0.5,
    "lifespan": 200,
    "number": 200,
    "color": "#FFFFFF",
    "move_probability": 0.3
  },
  "fps": 60,
  "canvas_offset": 50
}