[IMAGE2PXL]

Introduction

An efficient image-to-pixel transformation with motion effects, leveraging WebGL's hardware acceleration through Three.js:

Demo

[!TIP] The approach of this implementation bypasses the performance limitations of the 2D canvas API, enabling smooth and dynamic visual effects directly on the GPU.

[!NOTE] This library was inspired by these excellent tutorials:

Three.js Journey - Particle Cursor Animation Shader.

Learn Creative Coding: Image Effects.

Image into Interactive Particles - HTML Canvas Animation Tutorial | Advanced Pure Vanilla JavaScript.

Installation

You can install this library using a package manager like npm:

npm install @d3p1/img2pxl

Or you can use a CDN like jsDelivr and this importmap in the <head> of your html file:

<head>
  ...
  <script type="importmap">
    {
      "imports": {
        "@d3p1/img2pxl": "https://cdn.jsdelivr.net/npm/@d3p1/img2pxl@<version>/dist/img2pxl.min.js",
        "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
        "tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@<version>/dist/tweakpane.min.js"
      }
    }
  </script>
  ...
</head>

[!NOTE] Remember to replace the <version> with the actual version of img2pxl and its peer dependencies (three and tweakpane). To do that, you can check the package.json of the last release and get required versions from there.

Usage

Using this library is straightforward:

Go to our builder page and make the desired customizations in the tweak panel to achieve the desired effect.
Use the Copy button to obtain the configuration that produces the desired effect.
Instantiate the library with the configuration copied in the previous step, for example:

import Img2Pxl from '@d3p1/img2pxl'

new Img2Pxl({
  images: {
    0: {
      src: <image-src>,
      width: <image-width>,
      height: <image-height>,
      resolution: {
        width: <image-resolution-width>,
        height: <image-resolution-height>
      },
      pixel: {
        size: 2,
        alphaTest: 0.9,
        motion: {
          displacement: {
            frequency: 1,
            amplitude: 40,
          },
        },
      },
      motion: {
        noise: {
          frequency: 0.025,
          amplitude: 40,
        },
      },
    },
  },
  pointer: {
    size: 0.1,
    trailing: {
      factor: 0.01
    }
  }
})

[!NOTE] To gain a deeper understanding of how to use this library and how it works under the hood, visit the wiki page (in progress).

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

This work is published under MIT License.

Author

Always happy to receive a greeting on: