ng-image-as-particles v1.2.1

Image As Particles

Angular library to show images as particles with using three.js

This library is based on the great work and code of Bruno Imbrizi and brought to Angular.

A description and a tutorial how the project was created can be found on https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/

Original image	Image as interactive particles

Demo

Showcase

ng-image-as-particles used on a homepage on welcome page: https://lenny-the-samoyed.firebaseapp.com/

Dependencies

• Angular (requires Angular 10+ )
• three.js (requires threejs 0.123.0 )

Installation

1. Install version 0.123.0 of three.js via npm:

npm install three@0.123.0

2. Install ng-image-as-particles via npm:

npm install ng-image-as-particles

Once installed you need to import the main module:

import { NgImageAsParticlesModule } from 'ng-image-as-particles';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgImageAsParticlesModule],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

<lib-image-as-particles [imageUrl]="selectedUrl" touchAction="none"
            imageWidth="90%" imageHeight="90%" backgroundColor="#222222"
            horizontalAlignment="center" verticalAlignment="center">
</lib-image-as-particles>

API