特别漂流

可再用WebGL2粒子漂移渲染器将固定图像转换为流出粒子动画.

原始项目 : 相机/专用驱动器 以 碰撞范围。 。 。 .

此分叉被包装为可嵌入的库. 它有意去掉了原来的演示UI,上传控件,和MP4导出堆栈,因此应用程序可以硬编码自己的图像并拥有周围的界面.

安装

bun add github:basnijholt/particular-drift

发布到 npm后, 安装 :

bun add @basnijholt/particular-drift

香草用法

import { createParticularDrift } from '@basnijholt/particular-drift';

const canvas = document.querySelector<HTMLCanvasElement>('#background');

if (canvas) {
  const drift = await createParticularDrift(canvas, {
    imageUrl: '/res/branding/mindroom-logo.png',
    backgroundColor: '#0f0d2e',
    particleColor: '#dda290',
    particleCount: 120000,
    cursorMode: 'repel',
  });

  window.addEventListener('resize', drift.resize);
}

反应用法

import { ParticularDriftCanvas } from '@basnijholt/particular-drift/react';

export function AuthBackground() {
  return (
    <ParticularDriftCanvas
      imageUrl="/res/branding/mindroom-logo.png"
      options={{
        backgroundColor: '#0f0d2e',
        particleColor: '#dda290',
        particleCount: 120000,
      }}
    />
  );
}

API 密码

createParticularDrift(canvas, options) 返回 :

• loadImage(image) 装入已有的 TexImageSource。 。 。 .
• loadImageUrl(url) 要装入图像 URL.
• resize() 以将后置帆布大小调整到已渲染的 CSS 大小 .
• start() 财务报告和审定财务报表 stop() 控制动画.
• destroy() 以取消动画并发布 WebGL 资源.

主要选项:

• imageUrl
• imageFit数字 : 'contain' 保留画布内的图像宽比; 'stretch' 使用原始的全扫描图.
• particleCount
• particleSpeed
• attractionStrength
• particleOpacity
• particleSize
• edgeThreshold
• edgeSearchSteps数字 : 1, (中文(简体) ), 2,或 3;控制粒子搜索附近边缘时使用的有界网状半径.
• flowFieldScale
• searchRadius
• noiseType数字 : '2D' 或者说 '3D'
• interactive: 当 true。 。 。 .
• cursorMode数字 : 'repel' 将粒子从光标上推开; 'attract' 把他们拉过来.
• cursorRadius:普通光标影响半径.
• cursorStrength:光标增强战斗力.
• cursorReturnStrength强力将被扰动的粒子拉回 其存储的图像目标.
• cursorReturnDamping: 微粒在光标被扰动后平息时应用了起坝.
• backgroundColor
• particleColor
• autoStart
• maxDevicePixelRatio: 画布分辨率为正封顶; 以下 1 使 CSS 分辨率低于浏览器缩放的 CSS 分辨率( 软件WebGL 上的便宜) 。 粒子大小在画布像素中, 所以较低 particleSize编号 :particleOpacity 保持同样的表情.
• maxFramesPerSecond: 上限帧率( 默认) Infinity;除正数外,任何事物都意味着未被封住)。 模拟在经过一段时间后取得进展,因此不会放慢速度;较低的帧率不太平滑,结算略有不同.

发展

bun install
bun run dev
bun test
bun run typecheck
bun run build

实例网站

实例网站建自 index.html 财务报告和审定财务报表 demo/main.ts数字 :

bun run build:pages
bun run preview:pages

GitHub Pages 部署来自 Pages 工作流程 main在寄存器设置中,将 Pages 源代码设置为 GitHub 动作。 。 。 .

实例一旦启用,可在以下网站获取:

https://basnijholt.github.io/particular-drift/

出版

当一个 GitHub 发布时, 或当 KitHub 发布时, CI 从 GitHub 动作发布到 npm Publish 工作流程由人工操作.

为此软件包配置 npm 信任出版 :

• 提供者: GitHub 动作
• 拥有者 : basnijholt
• 仓库 : particular-drift
• 工作流程文件名 : publish.yml

然后用铸币标记放出. 工作流程剥离领先 v时,更新 package.json 中,并将该版本发布到 npm:

gh release create v0.1.1 --generate-notes

浏览器要求

• 网络GL2
• Canvas 图像加载在使用远程图像 URL 时必须满足浏览器 CORS 规则.

许可证

麻省理工学院. 见 LICENSE.txt (英语)。 。 。 .

原作者

特别的漂流是由Colliding Species创建的. 这个软件包是一个以图书馆为主的叉子.

• 原始仓库 : github.com/缩写缩写缩写
• 原始现场演示 : (原始内容存档于2018-09-26) (英语). Scopes.github.io/particul-drift
• 原作者网站 : (原始内容存档于2013-10-12). Scops.github.io
• 支持原作者 : 给我买杯咖啡