Javascript 糖画

我想用糖的东西画一幅画，就像你在桌子上扔一些糖，然后用手指“擦除”糖颗粒，形成一个图像一样

有人知道我可以使用js类型的工具来实现这一点吗

我想我可以拍一张桌子的照片，一张桌子上放了一些糖的照片，然后只擦除上面的一层，但我担心这不会产生真正的效果

我现在正在考虑拍一张桌子的照片，然后用JS生成很多“甜”粒子，然后我可以擦除这些粒子。这听起来很难做到。它是？有人能告诉我一个好的方向吗？

是沙子还是糖？ 一个有趣的问题，我不得不花一点时间

这是通过创建几个缓冲区来容纳沙粒（糖），并在它们需要移动时赋予它们生命

Javascript不可能在整个屏幕上显示100多万个颗粒，所以这个演示程序只是更新了很少的颗粒，并为新的移动排序，而不是让旧的移动颗粒占用CPU时间

阵列

active

，

sandStatus

，保存沙子增益

active

的像素地址为32位int，而

sandStatus

的像素地址为age。数组

sand

保存每个像素处的沙子量，用于计算阴影效果（使用webGL着色器阴影效果会更好），并计算沙子在受到干扰或掉落到表面时应滑动的方向

var

activeMax

保存活动沙粒的最大数量。增加以获得更好的效果，如果sim卡运行变慢，则减少

要落砂，请使用鼠标右键。在一个地方举行使一堆。左键推动沙子四处移动。当你碰到更大的堆时，机器可能会滞后（取决于CPU的能力和浏览器（firefox中最好的）

push

功能检查沙子阵列中是否有沙子。如果被发现，它会将沙子从中心推离，并在边缘堆积起来。一些沙子会倒回去

功能

sprink

添加沙粒（一次一粒，通过像素坐标或索引）。功能

push

执行沙子绘制功能<代码>更新通过检查周围像素的高度和向下移动沙粒来移动沙粒

renderPix

处理渲染颗粒、创建阴影和禁用沙粒。数组

shadowChange

保存已更改的像素索引，以便更新阴影

演示的下半部分只是鼠标和画布设置的样板。所有关于答案的代码都在前半部分

“严格使用”；
var activeMax=2280；//这是在以下位置处理的沙粒数：
//当时。增加，以获得更好的外观效果。减少
//如果机器跟不上负载
var-cw；
var-ch；
变量w；//
var h；
var canvasBuf=document.createElement（“canvas”）；
var-ctxB
变量globalTime；//全球的
可变像素
var砂；
var sandToFall；
var sandToFallCount=36000；
var shadow；//阴影像素
var-activeMax=2280；
var-active；//活性颗粒的像素索引
var sandStatus；//活性谷物的现状
var shadowChange；//保存具有阴影更改的像素索引
var像素；
var buf；
变量粒度=0xFFFFFF；
var shadowGrain=0x00000000；
var ready=false；
var sandReady=0；
var-nextracive=0；
var nextractiveshadow=0；
var onResize=function（）{
cw=画布宽度；
ch=画布高度；
w=cw；//
h=ch；
像素=w*h；
画布宽度=w；
canvasBuf.height=h；
ctxB=canvasBuf.getContext（“2d”）；
sand=新Uint8ClampedArray（像素）；
shadow=新uint8clampedaray（像素）；//阴影像素
sandToFall=新UINT32阵列（sandToFall计数）；
activeMax=2280；
active=new uint32数组（activeMax）；//活动纹理的像素索引
sandStatus=新UINT16阵列（activeMax）；//活动晶粒的状态
shadowChange=new uint32数组（activeMax）；//保存有阴影更改的像素索引
sandStatus.fill（0）；//清除
主动填充（0）；
阴影变化填充（0）；
ctxB.clearRect（0,0，w，h）；
ctxB.fillStyle=“白色”；
ctxB.font=“84px arial”；
ctxB.textAlign=“中心”；
ctxB.globalAlpha=0.01；
对于（变量i=0；i<12；i++）{
ctxB.fillText（“沙子涂鸦者！”，w/2+（数学随机性（）-0.5）*5，h/2+（数学随机性（）-0.5）*5）；
}
ctxB.globalAlpha=1；
像素=ctxB.getImageData（0,0，w，h）；
buf=新的UINT32阵列（像素.数据.缓冲区）；
对于（i=0；i>>24；
buf[i]=0；
而（c>0）{
var ind=Math.floor（Math.random（）*sandToFallCount）；
if（sandToFall[ind]==0）{
桑德托福尔[ind]=i；
}
c=c>>>1；
}
}
}
buf.填充（0）；
偏移量=[1，w-1，w，w+1，-w-1，-w，-w+1，-1]；
阴影偏移量=[-w-1，-w，-1]；
就绪=正确；
sandReady=0；
}
功能喷水（x，y）{
var-ind；
如果（y==未定义）{
ind=x；
}否则{
ind=x+y*w；
}
var alreadyExists=active.indexOf（ind）；
var ac=下一步；
如果（已存在>-1）{
砂[ind]+=1；
阴影[ind]=0；
sandStatus[alreadyExists]=66；
}否则{
活动的[下一个活动的]=ind；
sandStatus[nextActive]=66；
阴影变化[nextActiveShadow]；
nextActiveShadow=（nextActiveShadow+1）%activeMax；
nextActive=（nextActive+1）%activeMax；
砂[ind]+=1；
阴影[ind]=0；
}
返回ac；
}
var偏移量=[1，w-1，w，w+1，-w-1，-w，-w+1，-1]；
var offsetCount=8；
函数更新（）{
最小值，最大值，最小值，最大值，起始值，起始值，jj，j，ind，level，i，l1；
对于（i=0；i=level-1）{//无处移动
sandStatus[i]=1；
}否则
如果（最小值<1级）{//移动到最低值
dir=minDir
}
如果（dir！==null）{
var lv=最低水平；
而（lv>2）{
活动[i]=ind+dir；