加载中…

加载中...

跑完黑客马拉松的debriefing.

转载 2015-04-19 20:16:00

参加新浪的Hackathon,24小时连续coding,过足了编程的瘾。

本战队的三名同学,@天枫皓月 是资深的前端工程师,@ETHAN_熠森张 同学则是资深的后端工程师,@Mr.Q 常年做技术管理,属于提笔忘字的类型,提需求倒是驾轻就熟,兼职美工倒也干的得心应手。这样的团队组成要开发一个纯JS的作品相当的闹腾,经常蹦出JS下 Date 函数如何使用,如何做 URL Encoding等高级问题讨论。Cocos 2D 和JS模块化开发经过提前预热,倒是进行顺利。

A Living Tree,我们称其为“一场关于换位思考的探索”:用算法打造一颗生长在虚拟世界的树,能够感知真实世界的天气,随机的在屏幕上生长。没有太多为什么和有什么用,仅仅是好玩(参加黑马本来也是来玩的)。

用算法模拟植物的生长,其实并不是什么新的领域,已经有很多成熟的讨论和研究,L-System就是这方面的理论成果,但亲身去实现一个作品的时候,还是有很多感悟。

比如树的枝叉模型问题,一开始,我们想当然的认为从数据结构上,这是一棵普通树,一个枝干节点下有若干子节点,树叶作为叶子节点,不可再分。在这个模型下,尝试了很多方案都得不到一个看起来自然真实的枝叉结构,休息溜弯时候,一边走一边聊,看着路边的树,突发奇想,应该用二叉树实现,主干的扭动、枝叉的分离等等,全部都是建立在二叉树的基础上,至于一个节点长出了三叉、四叉不过是二叉树的特例(节短到忽略不计)。溜弯结束,基于二叉树的实现,最终的收到了意外的好效果,僵持不下的开发进程,得以往前推进。

设计生长递进模型的时候,也经历了类似的过程,最初设想了很多规则和函数均不理想,后来发现使用简单的对数函数作为主控函数,能够得到最自然图形。当第一次看到错落疏密有致的枝叉结构,纤细的小枝头仿佛工笔描绘的时候,我们自己被美翻了。

在整个树模型里,有很多子算法模块,对比来看,算法越是简洁的模块,实现效果越好,有点简单即美的意思。@天风皓月同学作为树模型的主笔,表现得一如既往的蛋定,不断的尝试和改进算法,在解决掉若干关键问题后,一如既往的越写越顺停不了手,最后演示作品的时候,已经完全睡死在隔壁桌子上。

负责开发天气系统的熠森张同学一定有被美工绑架的感觉,由于准备了四季分明的背景图,要求天气数据也必须是四季分明的,如果是选择赤道或极地气候,浪费掉3/4的算法不说,3/4的背景图也要被浪费掉,如何得瑟迎风傲雪的诗意和春暖花开的浪漫(或烂俗呢)?

我帝都的天气当然是四季分明的,就算是雾霾天,Cocos 的粒子系统也有办法做呈现。但无奈开放出来的数据相当的不全,这个不能全埋怨有关部门,因为地球对过的加拿大同样数据残缺。最后E森找到了隔壁的日本,选中札幌地区,数据完整性和四季分明都达到要求,除了还留有一个小遗憾:札幌地区冬季降水太丰富,都木有机会呈现冬日暖阳的那幅背景。

天气系统的另一个挑战是要整合快慢两种时间。 由于要在几分钟的演示时间内跑完两年到三的天气数据,动画呈现出小树苗到枝繁叶茂再到枯萎凋零的整个过程,背景的切换必须是快速的。有点人生五十年,如梦幻泡影的味道,这样前景就会比较困难,试想一个天气切换,被压缩到几秒的时间,雪还未落地,天就晴了,如果阴晴交替比较频繁,就会出现打碟般(或者说是卡带)的雨雪效果。最终我们选择了前景延时完成的策略:简单说就是背景从雪转晴,前景就立即停止造雪,但会任已生成的雪片自然飘落。当E森把天气的粒子发射器加到16组的时候,我们终于看到了流畅飘落的雨雪。忍不住再次吐槽下小日本的气候,要不要变那么快?

说到语言和框架,Javascript 其实是一种很匹配这个作品的语言,特别是JS一切皆Function,数据即程序的特性。试想是什么决定了一棵树的形态?其实是一个又一个的维度控制,比如树的枝叉长度,在这一个树种里,策略上是对数函数加随机函数,数据上是对数的底数常数 和 随机范围常数,恰好可以用JS的闭包进行表示,以至于于如果要在社交网络传播树种,我们都可以用这种方式表达树种或者说是基因。Cocos 2D-JS则是一个很完整的游戏引擎(除了文档略残缺),其中JS版本可以直接做多终端的打包发布,也非常便利,可以快速同步发布页游的版本和APP的版本。

24小时完成一个作品,不可能没有遗憾,比如花和果的实现,就已经没有足够的时间来完成,因此这是一棵不开花不结果的树(当然也可以想象为其开的花和果肉眼不可见-_-\\\)。算法方面的遗憾,现在想起来,主要在缺少完整的淘汰机制,相当于只做了加法,没有做减法。再次举枝叉生长的例子,现实中树的规模会在一个范围内,不能无限的生长,用算法的实现当然可以限定分叉的极限值,生长长度的极限值,但更好的做法应该是引入淘汰算法:当一根枝叉生长长度超过一定范围时,会遇上重力的影响,营养供应的影响等等,这时就会自然脱落,老的枝叉的脱落为新的枝叉的生长流出了空间,无须设置极限,只需引入淘汰和选择...一棵有新陈代谢的树,才会是一棵美丽的树。

A Living Tree,提交到了Github(https://github.com/comos/a-living-tree),如果侥幸我们不是太懒,应该会用一些时间让这个小玩具变得更好。


阅读(0) 评论(0) 收藏(0) 转载(0) 举报
分享

评论

重要提示:警惕虚假中奖信息
0条评论展开
相关阅读
加载中,请稍后
Scubamew鍠垫綔
  • 博客等级:
  • 博客积分:0
  • 博客访问:795
  • 关注人气:0
  • 荣誉徽章:

相关博文

新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

新浪公司 版权所有