# particle-wave

> WebGL粒子波浪

Latest version **1.1.3** (published 2021-06-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install particle-wave
pnpm add particle-wave
yarn add particle-wave
bun add particle-wave
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2021-06-22 |
| First published | 2019-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | jekorx |
| Maintainers | jekorx |
| Keywords | particle, wave, particle-wave, webgl |

## Links

- npm: https://www.npmjs.com/package/particle-wave
- Repository: https://github.com/jekorx/particle-wave
- Homepage: https://github.com/jekorx/particle-wave#readme
- Issues: https://github.com/jekorx/particle-wave/issues
- npm.io page: https://npm.io/package/particle-wave

## Recent versions

- 1.1.3 (latest) — 2021-06-22
- 1.1.2 — 2021-06-21
- 1.1.1 — 2021-06-21
- 1.1.0 — 2021-06-21
- 1.0.6 — 2020-09-16
- 1.0.5 — 2020-09-16
- 1.0.3 — 2020-05-08
- 1.0.2 — 2019-06-25
- 1.0.1 — 2019-03-14

## README

# particle-wave
[![npm package](https://img.shields.io/npm/v/particle-wave.svg)](https://www.npmjs.com/package/particle-wave)
### 示例
> [demo展示](https://jekorx.github.io/particle-wave)

![particle-wave](screenshot/pic1.png)
### 用法
```bash
# 安装依赖
yarn add particle-wave
# or
npm i particle-wave -S
```
> 使用
```css
/* 示例样式 */
#particle-wave {
  width: 1024px;
  height: 512px;
  background-color: #1E1D46;
}
```
```html
<!-- 示例html -->
<div id="particle-wave"></div>
```
```javascript
/**
 * 示例javascript
 */
import ParticleWave from 'particle-wave'

// 小圆点尺寸
const pointSize = 4

const pw = new ParticleWave(document.getElementById('particle-wave'), {
  uniforms: {
    size: { type: 'float', value: pointSize },
    field: { type: 'vec3', value: [0, 0, 0] },
    speed: { type: 'float', value: 7 }
  },
  onResize (w, h, dpi) {
    const position = []
    const color = []
    const width = 400 * (w / h)
    const depth = 500
    const height = 7
    const distance = 9
    for (let x = 0; x < width; x += distance) {
      for (let z = 0; z < depth; z += distance) {
        position.push(-width / 2 + x, -30, -depth / 2 + z)
        color.push(0, 1 - (x / width) * 1, 0.5 + x / width * 0.5, z / depth)
      }
    }
    if (this.uniforms) {
      this.uniforms.field = [width, height, depth]
      this.uniforms.size = (h / 400) * pointSize * dpi
    }
    if (this.buffers) {
      this.buffers.position = position
      this.buffers.color = color
    }
  }
})

document.getElementById('clear').onclick = function () {
  console.log('ParticleWave will clear', pw)
  pw.clear()
}
```

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