使用JavaScrip随机生成雪花

受到的启发,我也实现了一个类似的雪花生成的程序。如下图是我的代码生成的雪花,与原版有一些差别。我猜测原版是用了类似剪纸的操作,在位图上进行镜像与复制生成雪花。而这里的实现直接在雪花每个分支上生成相同的图案以生成SVG。 配色借鉴了中国色(zhongguose.com)的颜色随机生成。

生成过程比较简单:其中雪花图案的位置如下图是固定的,大小与图案是随机生成的。而且生成图案的大小随着图案远离雪花中心,图案的尺寸呈逐渐缩小的趋势。图案由圆形以及两个圆形相交形成的图案或者六边形以及菱形组成。在雪花每个分支上相同的位置生成相同的尺寸、相同颜色的同种图案。

固定随机数生成器的种子即可生成独一无二的雪花图案。

<html>
  <body>
    <snowflake-svg width="100" height="100" seed="9036"></snowflake-svg>
  </body>
  <script src="script/snowflake.js"></script>
</html>

雪花生成代码:

经验分享 程序员 微信小程序 职场和发展