（转）闪电效果的实现，中点位移法-白红宇

（转）闪电效果的实现，中点位移法

阅读量：7106 次

发布时间：2019-06-28

本文共 841 字，大约阅读时间需要 2 分钟。

这部短片使用了中点位移法来模拟闪电。

中点位移法通常是用于生成分形地形的算法，你会发现闪电的形状类似于一个理想化的山脉的边缘。

下面节选的这段闪电递归程序可以帮你完成所有的工作。

                         
function
drawLightning(x1,y1,x2,y2,displace)
{ 
  
if
(displace < curDetail) { 
    
graf.moveTo(x1,y1);
    
graf.lineTo(x2,y2);
  
}
  
else
{ 
    
var
mid_x = (x2+x1)/2;
    
var
mid_y = (y2+y1)/2;
    
mid_x += (Math.random()-.5)*displace;
    
mid_y += (Math.random()-.5)*displace;
    
drawLightning(x1,y1,mid_x,mid_y,displace/2);
    
drawLightning(x2,y2,mid_x,mid_y,displace/2);
  
}
}

你可以通过传递一个线段的两个端点坐标（x1,y1,x2,y2）和一个位移量，计算出线段终点坐标(mid_x,mid_y)，然后通过一个随机值替换它，该随机值按照每次划分线段时的位移值比例减少。

第一次划分会得到一个较大的位移线段，而之后随着位移值的减小位移线段也会逐渐减小(每次递归位移值都会除以2)，如此便可以使一条线段"碎形"。

当位移值低于我们定义的最小值时(可使用"detail"滑动条修改)，我们就将这条线绘制出来。也就是说满足条件if(displace<curDetail)时，我们绘制线段。

原文中的四个滑动条：

1.detail 增加后，线条数量会减少，每个线条会更长。

2.thickness 代表线条的粗细

3.number bolts 代表线条的数量

4.displacement 位移量，也就是线条数值方向偏移的最大值

原文：

你可能感兴趣的文章