✨Effect Lab
Read the full guide完整技术长文 Shapes nobody drew: recursion, displacement and polar coordinates没人画过的形状:递归、位移与极坐标
⚡

Lightning 随机闪电

A bolt is a random walk downward in 15px steps, redrawn from scratch every frame. 闪电就是一路向下、每 15px 随机偏移一点的随机游走,而且是每帧重新画的。

Canvas 2DRandom walkProbability gate
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

The branch is generated by stepping y by 15 and nudging x by a random ±20. Because a new bolt is only created when Math.random() < 0.08, the strikes feel sporadic rather than metronomic. The bolt is drawn once and immediately discarded — the lingering afterglow comes from the 0.2-alpha clear. 分支的生成方式是 y 每次加 15、x 随机偏移 ±20。只有 Math.random() < 0.08 时才生成新闪电,所以劈下来的节奏是偶发的,不是节拍器。闪电画完就丢,眼里看到的余辉来自 0.2 透明度的清屏。

What to change可以改的地方

  • 1Reduce the step to 6px for a more detailed, jagged bolt.
  • 2Draw the bolt 2–3 times with slight offsets during the same strike to simulate branch forks.
  • 1步长缩到 6px,闪电会更细碎、更毛刺。
  • 2同一次闪电错位画 2–3 遍,就能模拟出分叉。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

lightning.html