# ng-image-as-particles

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

Latest version **1.2.1** (published 2020-12-05) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ng-image-as-particles
pnpm add ng-image-as-particles
yarn add ng-image-as-particles
bun add ng-image-as-particles
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2020-12-05 |
| First published | 2019-12-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 322.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Michael Wind |
| Maintainers | windmichael |
| Keywords | three.js, threejs, particles, animated background, interactive particles, angular, image as particles, particle effect |

## Links

- npm: https://www.npmjs.com/package/ng-image-as-particles
- Repository: https://github.com/windmichael/ng-image-as-particles
- Issues: https://github.com/windmichael/ng-image-as-particles/issues
- npm.io page: https://npm.io/package/ng-image-as-particles

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2020-12-05
- 1.1.1 — 2020-08-04
- 1.1.0 — 2020-02-15
- 1.0.2 — 2019-12-17
- 1.0.1 — 2019-12-15
- 1.0.0 — 2019-12-15

## README

# 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](https://github.com/brunoimbrizi/) 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 | 
| ------ | ------------------ | 
| ![image](projects/ng-showcase/src/assets/dog.png) | ![](example.gif) | 

## Demo

[Showcase](https://windmichael.github.io/ng-image-as-particles/)

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


## Dependencies
* [Angular](https://angular.io) (*requires* Angular 10+ )
* [three.js](https://threejs.org) (*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:
```typescript
import { NgImageAsParticlesModule } from 'ng-image-as-particles';

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


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

## API
| Name  | Default | Description |
| ----- | ------- | ----------- |
| imageUrl | null | URL to the image |
| backgroundColor | "##222222" | The background-color CSS property sets the background color of an element. ([background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)) |
| touchAction | "none" | The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user. ([touchAction](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action)) |
| imageWidth | "100%" | Width of the generated image in "px" or "%" |
| imageHeight | "100%" | Height of the generated image in "px" or "%" |
| horizontalAlignment | "center" | Possible values: "start", "center", "end" |
| verticalAlignment | "center" | Possible values: "top", "center", "bottom" |

---
_Source: https://npm.io/package/ng-image-as-particles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._