素数螺旋

本文启发自知乎问题:极坐标表示 5000 到 50000 之间的素数画点到纸上为什么会形成一条斐波那契螺旋线?

把一个自然数n用极坐标表示,也就是在坐标(n*cos n,n*sin n)的位置绘制一个点;而当你把所有素数绘制到纸上之后,会发现它是一个包含了许多条空白线条的圆形:

很显然,空白是合数导致的,但为什么合数会排列成一条条曲线呢?

王小龙已经做了精彩的回答。不过为了更直观地理解,我写了这个小程序:

[阅读全文]

WWDC 2014海报的彩虹特效

这个有趣的小程序出自知乎问题:WWDC 2014 的海报是怎么做出来的?

本程序使用HTML5+JS进行开发,可以将任意图片转换成WWDC2014海报的样式:用色调如彩虹般绚丽的圆角矩形来拼成原图。

里面已经预置了几个图形,只要点最上面的按钮即可切换;当然,最有意思的是在右边上传本地硬盘的图片,不管是什么图,都能转换成海报上的效果。
(上传图片需较新版本的IE、FF、Chrome浏览器才能支持,建议使用浅色背景、深色图案的)

Enjoy it.

[阅读全文]

约瑟夫斯问题:最后生还者

有这么一个古老的问题:一群死刑犯排成圆圈,每隔一人枪毙一个,转完一圈后从头开始继续枪毙,直到剩下最后一个人,这个幸运儿会被释放。

问:一开始站在哪个位置才能活下来?

这就是著名的约瑟夫斯问题,排成的圆圈叫做约瑟夫斯环。

(当然,隔一人只是个特殊情况,约瑟夫斯问题包含了间隔任何人数的计算方法)

在上面维基百科的链接以及知乎的答案里已经有了通用的计算方法,这里就不必讲什么公式和证明了,而是直接用图形来演示:

[阅读全文]

HTML5入门习作2:炮台

上一篇中,初学html5动画的我在canvas画布上用彩色小球模拟了烟花喷射的效果,功能虽简单,但在制作中涉及到了几个要点:计算、绘制、显示。而且实现了可兼容旧版的requestAnimationFrame方法,以达到更平滑的动画效果。

接下来,我准备在上一篇的基础上加以改进,实现一个有简单互动的小游戏。

当然,只有小球是远远不够用的,在边调试边开发的过程中,下列功能也逐一实现:

  • 封装动画框架到单独js文件(代码复用);
  • 生成多边形(绘制炮台);
  • 渐变填充(绘制防卫区);
  • 角度计算(发射扇面形散布的炮弹);
  • 碰撞检测(炮弹击中目标,以及目标撞墙后的反弹);
  • 鼠标事件(实时调整炮口方向);

以及之前实现过的渐隐对象,用于显示摧毁后的爆炸效果、全屏闪烁以及文字提示。

那么,先看看效果再讲解代码吧。

操作提示:

  • 鼠标控制炮口方向,炮弹自动发射;
  • 击坠10、20、40、80、160……个目标时会升级,升级后某个炮台威力会增加,相应的,敌人数量也会增加;
  • 上方中央的“@”表示HP,敌人触底一次则减少一格;
  • GameOver后,点击屏幕重新开始。

[阅读全文]