processing图片粒子化_谈谈文字图片粒子化

之前写了谈谈文字图片像素化，主要是为了将文字和图片像素化后的坐标提取出来，而本篇所讲即为像素化后的粒子化过程。

先上一个简单的demo -> 粒子化demo，本篇的目的就是为了讲解怎样做这样的简单demo(大牛请无视)；同时会介绍一些优秀的demo供大家参考。

主要思路

首先我们谈谈粒子化的主要思路。

像素化后(不知道怎样像素化，参考谈谈文字图片像素化)，我们得到了所需图像或者文字的具体坐标，我们将它们形象地用一个个的粒子表示(这里用了圆形)，得到的坐标即是粒子的最终位置。粒子的初始位置在哪里？粒子从初始位置到最终位置的运动又是如何？这些是我们可以自由发挥的。所以粒子化过程究其根本，就是怎样表示粒子的运动过程。

基本准备

canvas自适应电脑屏幕(不出现滚条)：

css部分：

body {margin:0; padding:0; wdith:100%; height: 100%}

canvas {display:block; background-color:#000}

js部分：

window.canvas = document.createElement('canvas');

document.body.appendChild(window.canvas);

canvas.height = window.height = window.innerHeight;

canvas.width = window.width = window.innerWidth;

关于像素化再补充几句：

像素化过程简单描述就是将所需的文字fillText到画布上或者