JavaScript圣诞树及其算法

我在reddit上发现了一张圣诞树动画图片:

圣诞树

好奇心驱使我使用JavaScript制作了一个相同效果的树:新年快乐!。祝愿大家在新的一年里心想事成,马到成功!

算法

这棵圣诞树用两根螺旋的线画成。下面的11行代码是用来画出一根螺旋线。

 var zoff = i * Math.sin(i),
        z = dz / (dz - sign * zoff * zScale),
        x = getX(i, z, sign),
        y = getY(i * yLocalScale, z);

      if (zoff + sign * Math.PI / 4 < 0) {
        switchColor(foreground);
      } else {
        switchColor(background);
      }
      ctx.moveTo(x, y);
      ctx.lineTo(getX(i + 0.03, z, sign), getY((i + 0.01) * yLocalScale, z));

线上有3D投影和背景背影效果。完整的代码可以在这里看到。它的算法和这张维基百科上的图片描述的几乎一样。

算法

非常感谢@CensoredUsername对其进行了重要的改进

@Yazuak最先对如何如何实现按弧线分布点给出了设计思路

Vitaliy Kaurov用 Wolfram 语言实现了相同的树….只用了15行代码

David Librera用CoffeScript重写了它,请到他的代码库页面欣赏面向对象版的设计。

那么,剩下的工作是什么?只需要一些小修改,让这棵树更完美:

  • 阴影不够精确
  • 我觉得代码过于复杂,应该可以更简单(个人观点)。

演示:

本文编译自Christmas Tree

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号