### Run Local Development Server

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/README.md

Command to start a local development server for testing the documentation, accessible at 0.0.0.0:8080.

```shell
npm run docs:dev
```

--------------------------------

### Nginx Configuration for Docs

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/README.md

Nginx configuration to serve the built documentation, including SSL setup for HTTPS and a redirect from HTTP to HTTPS.

```nginx
server {
    listen 80 default_server;
    server_name _;
    return 301 https://$host$request_uri;
}

server {
        listen 443 default_server ssl;
        root /var/www/docs.wallpaperengine.io/docs/.vuepress/dist;
        server_name docs.wallpaperengine.io;
        index /en/index.html;

        ssl_certificate     /etc/letsencrypt/live/docs.wallpaperengine.io/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/docs.wallpaperengine.io/privkey.pem;

        location / {
                try_files $uri $uri/ /en/index.html /404.html;
        }
}
```

--------------------------------

### Razer Chroma Emulator Setup

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/rgb/introduction.md

Instructions for setting up the Razer Chroma emulator to test RGB lighting effects. This involves installing Razer Synapse 3, Chroma Connect, and the Razer Chroma emulator from the developer portal.

```APIDOC
Razer Chroma Emulator Setup:
  Prerequisites:
    - Latest version of Razer Synapse 3 installed.
    - Chroma Connect module installed within Razer Synapse 3.

  Installation Steps:
    1. Download Razer Synapse 3: https://www.razer.com/synapse-3
    2. Install Chroma Connect via Razer Synapse 3 settings.
    3. Download the latest Razer Chroma emulator from the Razer Developer Portal (scroll down for the link): https://developer.razer.com/works-with-chroma/download/

  Verification:
    - Restart Wallpaper Engine.
    - Ensure the LED Plugin is enabled in Wallpaper Engine application settings.
    - Test the emulator using standard wallpapers shipped with Wallpaper Engine (e.g., "Razer Bedroom").
```

--------------------------------

### Update and Build Documentation

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/README.md

Commands to pull the latest project changes, install dependencies using Yarn, and build the documentation using npm.

```shell
git pull origin master
yarn install
npm run docs:build
```

--------------------------------

### Transition Background Color with Album Art (SceneScript)

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/audiovisualizer/mediainformation.md

Extends the previous example by adding a smooth transition animation between the old and new album cover colors. Uses `engine.frametime` for animation timing.

```javascript
'use strict';

// Adjust this constant to change the duration of the transition
const DURATION = 1;

let newColor = new Vec3(0, 0, 0);
let oldColor = new Vec3(0, 0, 0);
let timer = DURATION;

/**
 * @param {Vec3} value - for property 'clearcolor'
 * @return {Vec3} - update current property value
 */
export function update() {
	var color = newColor;
	if (timer < DURATION) {
		color = newColor.subtract(oldColor).multiply(timer / DURATION).add(oldColor);
		timer += engine.frametime;
	}
	return color;
}

/**
 * @param {MediaThumbnailEvent} event
 */
export function mediaThumbnailChanged(event) {
	timer = 0;
	oldColor = newColor;
	newColor = event.primaryColor;
}
```

--------------------------------

### Vegetation Shader Material Setup

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/models/shader.md

Essential material settings for applying the Vegetation Shader to foliage models. Ensures proper rendering of transparency and lighting.

```APIDOC
MaterialSettings:
  Blending:
    Description: Sets how transparent parts of the material are rendered. 'Alpha to coverage' is recommended for foliage.
    Options: Alpha to coverage, Opaque, Transparent, etc.
  Culling:
    Description: Determines which faces of the geometry are rendered. 'No cull' is recommended for single-sided foliage geometry.
    Options: No cull, Front face, Back face
  Double-sided lighting:
    Description: Enables lighting calculations for both sides of a polygon. Recommended for individual tree leaves to allow light to shine through.
    Type: Boolean
```

--------------------------------

### Synchronized Eye and Head Movement Guide

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/effects/effect/iris.md

A guide on using two Iris Movement effects to achieve synchronized eye and head animation for a character. It outlines the setup for both eye and head animations, including opacity mask creation and parameter tuning.

```APIDOC
AnimationSetup:
  description: Steps to create synchronized eye and head movement using Iris Movement effects.
  steps:
    - Eye Animation:
        description: Configure the first Iris Movement effect for eye animation.
        setup:
          - Add 'Iris Movement' effect to the image.
          - Create an 'Opacity Mask' around the character's eyes (white for the iris/center).
          - Enable 'Background' option.
          - Select a 'Background Color' matching the eye color.
          - Adjust 'Scale' for X and Y axes (e.g., X=1.5, Y=0.45) to match eye alignment.
          - Increase 'Speed' (e.g., to 0.6) for desired eye movement intensity.
    - Head Animation:
        description: Configure a second Iris Movement effect for head animation.
        setup:
          - Add a new 'Iris Movement' effect on the same layer (e.g., name it 'Head Movement').
          - Paint the 'Opacity Mask' around the character's head.
          - Ensure 'Speed' setting matches the eye movement effect's speed for synchronization.
          - Increase 'Smoothness' for less abrupt head movements.
          - Reduce 'Phase' slightly (e.g., to a small negative number) to make the head lag behind eye movement naturally.
  expected_result:
    description: Combined effect results in realistic, synchronized eye and head movements.
    example_image: /img/effects/Iris.gif
```

--------------------------------

### HTML Video Tag for Web Wallpaper

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/web/first/gettingstarted.md

This HTML snippet demonstrates how to embed a video player within a web wallpaper. It specifies the video source and format, allowing Wallpaper Engine to display video content. Ensure the video file is correctly placed within the project directory.

```html
<video width="100%" controls loop autoplay>
  <source src="/videos/web_new_project.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

--------------------------------

### HTML/JS Audio Visualizer for Wallpaper Engine

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/web/audio/visualizer.md

This snippet provides a complete, self-contained HTML file that implements an audio visualizer. It uses JavaScript to listen to audio input via `window.wallpaperRegisterAudioListener` and renders the audio data onto an HTML canvas. CSS is included to ensure the canvas is responsive across different screen resolutions and aspect ratios.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
        body { margin:0; padding:0; }
        html, body { width:100%; height:100%; overflow:hidden; }
        canvas { height:100vh; width:100vw }
    </style>
    </head>
    <body>
        <canvas id="AudioCanvas"></canvas>
        <script>
        let audioCanvas = null;
        let audioCanvasCtx = null;
        function wallpaperAudioListener(audioArray) {
            // Clear the canvas and set it to black
            audioCanvasCtx.fillStyle = 'rgb(0,0,0)';
            audioCanvasCtx.fillRect(0, 0, audioCanvas.width, audioCanvas.height);

            // Render bars along the full width of the canvas
            var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
            var halfCount = audioArray.length / 2;

            // Begin with the left channel in red
            audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
            // Iterate over the first 64 array elements (0 - 63) for the left channel audio data
            for (var i = 0; i < halfCount; ++i) {
                // Create an audio bar with its hight depending on the audio volume level of the current frequency
                var height = audioCanvas.height * Math.min(audioArray[i], 1);
                audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height, barWidth, height);
            }

            // Now draw the right channel in blue
            audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
            // Iterate over the last 64 array elements (64 - 127) for the right channel audio data
            for (var i = halfCount; i < audioArray.length; ++i) {
                // Create an audio bar with its hight depending on the audio volume level
                // Using audioArray[191 - i] here to inverse the right channel for aesthetics
                var height = audioCanvas.height * Math.min(audioArray[191 - i], 1);
                audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height, barWidth, height);
            }
        }

        // Get the audio canvas once the page has loaded
        audioCanvas = document.getElementById('AudioCanvas');
        // Setting internal canvas resolution to user screen resolution
        // (CSS canvas size differs from internal canvas size)
        audioCanvas.height = window.innerHeight;
        audioCanvas.width = window.innerWidth;
        // Get the 2D context of the canvas to draw on it in wallpaperAudioListener
        audioCanvasCtx = audioCanvas.getContext('2d');

        // Register the audio listener provided by Wallpaper Engine.
        window.wallpaperRegisterAudioListener(wallpaperAudioListener);
        </script>
    </body>
</html>
```

--------------------------------

### Configurable Blend Amount Timings

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/tutorial/timeofday.md

Examples demonstrating how to configure the `START_HOUR` and `END_HOUR` constants within the SceneScript for different blend amount textures. These values dictate when each texture begins to appear and when it starts to fade out, allowing for custom day-night cycles and texture sequencing.

```javascript
const START_HOUR = 7;
const END_HOUR = 10;
```

```javascript
const START_HOUR = 10;
const END_HOUR = 18;
```

```javascript
const START_HOUR = 18;
const END_HOUR = 22;
```

--------------------------------

### SceneScript applyUserProperties Full Example

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference/event/applyUserProperties.md

A comprehensive example showing the applyUserProperties event integrated with an `update` function. It uses a checkbox user property ('iscolorful') to conditionally control visual effects, demonstrating robust property handling.

```js
'use strict';

import * as WEColor from 'WEColor';

let rainbowSpeed = 1;
let rainbowSaturation = 1;
let rainbowBrightness = 1;
let isColorful = false;

/**
 * @param {Vec3} value
 */
export function update(value) {
	if (isColorful) {
		value = WEColor.hsv2rgb({
			x: Date.now() / 2000 * rainbowSpeed % 1,
			y: rainbowSaturation,
			z: rainbowBrightness
		});
	}
	
	return value;
}

export function applyUserProperties(changedUserProperties) {
        // First make sure to check if applyUserProperties is sending your property. Unchanged properties are not sent along so do not forget to check for this!
        if (changedUserProperties.hasOwnProperty('iscolorful')) {
            // Assign the changed property to a local variable
            isColorful = changedUserProperties.iscolorful;
        }
}
```

--------------------------------

### Adding and Configuring Light Sources

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/lighting/introduction.md

Instructions for adding and managing light sources within a Wallpaper Engine scene to illuminate layers with lighting enabled. Includes limitations and best practices for scene lighting.

```APIDOC
SceneLighting:
  AddLight:
    Command: Edit -> Add Light
    Description: Adds a new light source to the scene. Light sources can be moved like other objects.
    Effect: Only affects image layers with the 'Lighting' option enabled.
    Color: Can be selected using an in-scene color picker.
  Limitations:
    MaxLightsPerScene: 4
    Description: Wallpaper Engine limits the maximum number of light sources to four for performance reasons. Consider using ambient lighting adjustments instead of many individual lights.
```

--------------------------------

### SceneScript Event destroy

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference/event/destroy.md

This event function will be called just before the object it is attached to gets destroyed.

```javascript
export function destroy() {

}
```

--------------------------------

### Initialize LED Plugin Listener

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/web/api/rgb.md

Sets up a listener to detect when the Wallpaper Engine LED plugin is loaded. It updates internal settings to indicate plugin availability, ensuring RGB logic is only executed after the plugin is ready.

```javascript
var wallpaperSettings = {
    ledPlugin: false,
    cuePlugin: false
};

window.wallpaperPluginListener = {
    onPluginLoaded: function (name, version) {
        if (name === 'led') {
            // LED plugin loaded (works for all hardware)
            wallpaperSettings.ledPlugin = true;
        }
        if (name === 'cue') {
            // iCUE-specific plugin loaded, only needed if you want to utilize extra iCUE functions
            wallpaperSettings.cuePlugin = true;
        }
    }
};
```

--------------------------------

### Limit Audio Volume

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference/class/AudioBuffers.md

Example of limiting audio volume levels to a maximum of 1.00 using Math.min.

```javascript
Math.min(1.00, audioBuffers.average[0]);
```

--------------------------------

### SceneScript IEngine Audio and Asset Registration

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference/class/IEngine.md

Functions for integrating with Wallpaper Engine's audio system and managing assets. `registerAudioBuffers()` provides access to audio volume levels, requiring a resolution parameter. `registerAsset()` marks files as used, ensuring they are included in workshop uploads, with strict requirements on string formatting for file paths.

```APIDOC
SceneScript IEngine Functions (System Integration):
  registerAudioBuffers(resolution: Number): AudioBuffers
    Registers the script with the audio responsive system. `resolution` defines audio spectrum subdivision (e.g., `engine.AUDIO_RESOLUTION_16`). Returns an `AudioBuffers` object for volume levels.
  registerAsset(file: String): IAssetHandle
    Marks an asset file as used by the wallpaper, essential for Workshop uploads. Only hard-coded strings are permitted for the `file` parameter to ensure compatibility, especially on Android. Dynamic or concatenated strings will cause failures.
```

```JavaScript
const audioBuffers = engine.registerAudioBuffers(engine.AUDIO_RESOLUTION_32);

// Example of accessing audio data (within a render loop):
// const spectrum = audioBuffers.getSpectrum();

engine.registerAsset('/path/to/my/texture.png');
// engine.registerAsset('/path/to/another/file.json');

// NOT OK:
// const filename = 'texture.png';
// engine.registerAsset('/path/to/' + filename);
```

--------------------------------

### MediaPlaybackEvent Class

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference.md

An event fired when the user interacts with media playback, such as starting, stopping, or pausing media. Used for media integration features.

```APIDOC
MediaPlaybackEvent:
  Description: Media integration event, fired when the user starts, stops or pauses media.
  Properties:
    type: The type of playback event (e.g., 'play', 'pause', 'stop').
    mediaTitle: The title of the media being controlled.
```

--------------------------------

### Listen to Directory Property File Events (fetchall mode)

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/web/customization/properties.md

Illustrates how to use the `wallpaperPropertyListener` for directory properties in 'fetchall' mode. It includes callbacks for tracking when files are added, modified, or removed from the user-selected directory.

```js
window.wallpaperPropertyListener = {
    userDirectoryFilesAddedOrChanged: function(propertyName, changedFiles) {
        // propertyName is the name of the property that triggered the event.
        // changedFiles contains all added (or modified) file paths
    },
    userDirectoryFilesRemoved: function(propertyName, removedFiles) {
        // propertyName is the name of the property that triggered the event.
        // removedFiles contains all removed file paths
    }
};
```

--------------------------------

### Audio Response for Particle Phase

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/particles/component/initializer.md

Enables particle behavior to be influenced by audio input, affecting particle phase. Requires sensible Phase min/max settings. Controls audio input mode, intensity, frequency range, and bounds.

```APIDOC
Audio response:
  Description: Adds a factor to particle Phase values, introducing random outbreaks. Requires Phase min/max configured (e.g., 1.00 to 5.00).
  Parameters:
    Mode: enum (Enables audio response. Options: Center (all audio), Left (left channel), Right (right channel))
    Exponent: float (Exponential power of audio response. Higher values reduce effect of low volume)
    Bounds: Vector2 (Controls where audio response starts and stops. Example: 0 and 1 for slow fade, 0.8 and 1 for sudden effect at high volumes)
    Frequency min: int (Lowest audio frequency that reacts. 0=bass, 15=treble. Set to 0 for beat reaction)
    Frequency max: int (Highest audio frequency that reacts. 0=bass, 15=treble. Set to 1 for beat reaction)
```

--------------------------------

### Get Bone Index by Name

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/puppet-warp/interactive.md

Demonstrates how to retrieve the numeric index of a bone within the current layer using its defined name. This is crucial for targeting specific bones with transformations.

```javascript
thisLayer.getBoneIndex(MOUSE_BONE_NAME);
```

--------------------------------

### Rotation Random Initializer

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/particles/component/initializer.md

Defines the random starting rotation for particles. Values are determined randomly between specified minimum and maximum values, with an exponent to bias the distribution.

```APIDOC
Rotation random:
  Description: Defines how the starting rotation of particles is determined randomly.
  Parameters:
    Min: float (The minimum rotation value)
    Max: float (The maximum rotation value)
    Exponent: float (Bias towards Min or Max. 1 = balanced, 0 = bias towards Max, 2+ = bias towards Min)
```

--------------------------------

### Audio Responsive Light Intensity with SceneScript

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/lighting/lights.md

Enables light sources to react dynamically to system audio volume using SceneScript. It allows customization of frequency response, smoothing, and intensity range for audio-reactive lighting.

```js
'use strict';

/**
 * Configure these to control smoothing and the frequency.
 */
const FREQUENCY_RESOLUTION = 16; // Must be 16, 32 or 64 per channel.
const SOURCE_FREQUENCY = 0; // 0 means this script listen to bass / beat. 15 = treble frequencies.

const SMOOTHING = 16; // Lower values mean MORE smoothing
const MIN_VALUE = 1; // Lowest light intensity. Set to 0 if light is supposed to turn off when silent
const MAX_VALUE = 2; // Highest light intensity

const VALUE_DELTA = MAX_VALUE - MIN_VALUE;


/**
 * This creates a permanent link to the audio response data.
 */
let audioBuffer = engine.registerAudioBuffers(FREQUENCY_RESOLUTION); // Adds the system audio levels to the code
var smoothValue = 0;
var initialValue;

/**
 */
export function update() {
	let audioDelta = audioBuffer.average[SOURCE_FREQUENCY] - smoothValue;
	
smoothValue += audioDelta * Math.min(1.0, engine.frametime * SMOOTHING);
	smoothValue = Math.min(1.0, smoothValue);

	return (initialValue * (smoothValue * VALUE_DELTA + MIN_VALUE)) / 2;
}

/**
 */
export function init(value) {
	initialValue = value;
}
```

--------------------------------

### SceneScript init and update Example

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference/event/init.md

Demonstrates the usage of the `init()` and `update()` event functions in SceneScript. The `init()` function is used to capture the initial state of a property, which is then utilized in the `update()` function for dynamic property modification, improving performance by pre-calculating initial values.

```javascript
'use strict';

let initialValue;

/**
 * @param {Vec3} value - for property 'origin'
 * @return {Vec3} - update current property value
 */
export function update(value) {
	value.y = initialValue.y + (Math.sin(engine.runtime) * 100);
	return value;
}

/**
 * @param {Vec3} value - for property 'origin'
 * @return {Vec3} - update current property value
 */
export function init(value) {
    initialValue = value;
	return value;
}

```

--------------------------------

### Read Text Property Value

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/web/customization/properties.md

Shows how to get the string value entered by the user in a text property field. The value is read from the `properties` object within the `applyUserProperties` callback.

```javascript
window.wallpaperPropertyListener = {
    applyUserProperties: function(properties) {
        if (properties.customtext) {
            var mySliderValue = properties.customtext.value;
            // Do something useful with the value here or assign it to a global variable
        }
    }
};
```

--------------------------------

### Placeholder Creation in Wallpaper Engine

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/audiovisualizer/albumcover.md

Describes the process of creating placeholder layers for album cover integration. This includes using a solid color placeholder for performance or importing a custom image placeholder. Recommendations are provided for image resolution and aspect ratio.

```APIDOC
APIDOC:
  Placeholder Creation:
    - Solid Placeholder Layer:
      Action: Click 'Add Asset' -> Select 'Solid Placeholder' type.
      Configuration: Select preferred size and default color.
    - Image Placeholder:
      Action: Import a placeholder image into the editor.
      Recommendation: Use square images, ideally matching the target resolution (e.g., 256x256px).
```

--------------------------------

### IImageLayer Bone Transformation

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference/class/IImageLayer.md

Provides comprehensive control over skeletal bone transformations, including getting and setting world/local transforms, angles, and origins by bone name or index.

```APIDOC
IImageLayer:
  Functions:
    getBoneCount(): Number
      Get the number of skeletal bones.
    getBoneTransform(bone: String|Number): Mat4
      Get world bone transform by name or index.
    setBoneTransform(bone: String|Number, transform: Mat4): void
      Set world bone transform by name or index.
    getLocalBoneTransform(bone: String|Number): Mat4
      Get local bone transform by name or index.
    setLocalBoneTransform(bone: String|Number, transform: Mat4): void
      Set local bone transform by name or index.
    getLocalBoneAngles(bone: String|Number): Vec3
      Get local bone angles by name or index.
    setLocalBoneAngles(bone: String|Number, angles: Vec3): void
      Set local bone angles by name or index.
    getLocalBoneOrigin(bone: String|Number): Vec3
      Get local bone origin by name or index.
    setLocalBoneOrigin(bone: String|Number, origin: Vec3): void
      Set local bone origin by name or index.
    getBoneIndex(name: String): Number
      Get the index of a bone by name.
    getBoneParentIndex(child: Number|String): Number
      Get the index of a bone by name.
```

--------------------------------

### IParticleSystemInstance Class

Source: https://github.com/wallpaper-engine-team/wallpaper-engine-docs/blob/master/docs/en/scene/scenescript/reference.md

Provides access to instance modifiers for particle systems. Allows fine-tuning of individual particle system instances dynamically.

```APIDOC
IParticleSystemInstance:
  Description: Provides access to instance modifiers for particle systems. You can use this to adjust details of a particle system dynamically.
  Methods:
    setLifeTime(lifeTime): Sets the lifetime of particles in this instance.
    setColor(color): Sets the color of particles in this instance.
```