<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[Merrycat]]></title>
  <subtitle type="html"><![CDATA[我不是普通人。]]></subtitle>
  <id>http://www.merrycat.com.cn/blog/</id>
  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.merrycat.com.cn/blog/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2012-01-02T09:13:27+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[HTML5 游戏 Memory Challenge]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=7" label="My log" /> 
	  <updated>2012-01-02T09:13:27+08:00</updated>
	  <published>2012-01-02T09:13:27+08:00</published>
		  <summary type="html"><![CDATA[继上周的<a target="_blank" href="http://www.merrycat.com.cn/blog/article.asp?id=598" rel="external">HTML5 Generate Art</a>练习后，这周用HTML5新做的小游戏<a target="_blank" href="http://www.merrycat.com.cn/blog/others/html/memorygame/" rel="external">Memory Challenge</a>。<br/><br/>像之前提到的那样我使用了<a target="_blank" href="http://www.kineticjs.com/" rel="external">Kinetic</a>做Canvas交互事件检测，虽然经过使用后觉得还是缺少灵活性——对于它不间断的刷新来重绘Canvas来实现事件交互的做法不知道是否有更好的解决方案。不过对像Memory Challenge这种小游戏来说，要求动画不是太高还是能够满足需要。不过这个作者很勤奋，不到一周时间又升级了，目前版本到3.2了。相信不久的将来它会更加强大完善。<br/><br/>之前写Canvas Generate Ar的时候，对JS的编写和调试真的很无助，这种面向过程的编程一旦程序逻辑达到一定程度，复杂度的管理难度便成几何倍数增长。还好我发现了宝藏，<a target="_blank" href="http://mootools.net/" rel="external">Mootools！</a>，它可以帮助你实现面向对象的语法，再加上配合上我的老朋友<a target="_blank" href="http://puremvc.org/" rel="external">PureMVC</a>来使用MVC模式开发得心应手。<br/><br/>关于Canvas动画，之前提到的Tween.js时而经常会出现失帧的情况，它的源代码我看了一下也没有什么冗余的内容，这使我暂时放弃了加一些如得分提示方面的细节动画。]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=600" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=600</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[Year After Year]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=7" label="My log" /> 
	  <updated>2012-01-01T06:47:57+08:00</updated>
	  <published>2012-01-01T06:47:57+08:00</published>
		  <summary type="html"><![CDATA[2011像往年一样，改变了一点点，遇到了一些选择，做了一些决定。<br/><br/>离开了工作两年多的奥美来到IGT，奥美最不舍的是每天去老簋坐在一起吃饭的DPU的老伙计们，而IGT最吸引我的还是每天可以在一起的老朋友们。遗憾的是不能每天骑自行车上下班了，但欣慰的是每天地铁里的时间让我充分享受着阅读带来的充实感。<br/><br/>锻炼，希望能坚持。<br/><br/>阅读，受身边的人影响很大，不再只关注Flash，也关注了一些其它语言和平台。不再只关注技术，也关注了其它的方方面面的知识。<br/><br/>把学英语当事儿了。<br/><br/>还是喜欢宅在家里，不过偶尔会主动找朋友一起坐坐，不需要什么特别的目的。<br/><br/>去了趟油菜花盛开的青海，今年也希望能够选一个好时候去一个好地方。<br/><br/>希望亲朋好友安康！]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=599" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=599</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[HTML5 Canvas Generate Art 练习]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-22T23:32:42+08:00</updated>
	  <published>2011-12-22T23:32:42+08:00</published>
		  <summary type="html"><![CDATA[这里是我的一个<a target="_blank" href="http://www.merrycat.com.cn/blog/others/html/generateArt/" rel="external">HTML5 Canvas Generate Art练习</a>。<br/><br/>关于最近大热的HTML5，还在入门中，以下是近期翻过的几本书：<br/><a target="_blank" href="http://book.douban.com/subject/4143105/" rel="external">《HTML5 Up and Running》</a><br/><a target="_blank" href="http://book.douban.com/subject/5423843/" rel="external">《Canvas Pocket Reference》</a><br/><a target="_blank" href="http://book.douban.com/subject/7053684/" rel="external">《HTML5 Canvas Cookbook》</a><br/>个人感觉其中《HTML5 Up and Running》比较薄，主要是新特性的介绍可以通读一下；《Canvas Pocket Reference》有半本是API介绍，需要的时候查一查即可；《HTML5 Canvas Cookbook》可以着重看一下它的代码例子和解析说明。<br/><br/>关于流畅度，经测试在Chrome中要大大优于Firefox，FF偶尔会有顿一下不流畅的感觉，不过基本上都是满帧30。其他的像次主流Safari以及Opera还没试过,IE……。在手机上（动画渲染当中）iPhone4大概18~20帧左右，HTC G7上16~18帧左右，到但是虽然只差2帧左右的范围但iPhone4明显感觉更流畅。除了最后那个大圈的圆全屏渲染帧频只能达5~6左右，基本还算满意。当然，还有很大的优化空间。<br/><br/>这里我使用的是 <a target="_blank" href="http://www.aptana.com/" rel="external">Aptana</a>，熟悉Eclipse环境的童鞋可以试试，免费并且有独立安装和插件版，基于Eclipse当然主要快捷键和功能都有，并且有部分的脚本提示和各种HTML标签及语法的浏览器兼容提示。不过没能用成它自带的貌似很强大的debug工具，原因是目前只支持FF，而且它用法比较特别，需要连到它官网上打开一个页面，并且还要安装一个FF插件，由于近几个月来FF的版本一直是不断升级，短短几个月已经从5升到9了，所以应该是Aptana还没来得及更新，插件版本过旧暂时无法使用。<br/><br/>调试环境开始时是采用Chrome安装Firebug lite的形式，发现很多console提示不全。遇到错误不显示等等问题，Chrome console表示沉默……差点放弃（不知道是不是我没调出来，本人JS开发新手还请指教），后来改用FF的Firebug，各种错误一目了然。<br/><br/>关于一些开源类，我也试了几个，框架方面包括《HTML5 Canvas Cookbook》作者推荐的<a href="http://www.kineticjs.com/" target="_blank" rel="external">http://www.kineticjs.com/</a>，更新很快，我刚开始尝试写这个效果时是2.2++版本，等写完了后已经到3.1.0了，描述见此。<br/><i>KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.&nbsp;&nbsp;You can draw your own shapes using the existing canvas API, add event listeners to them, and move, scale, and rotate them independently from other shapes to support high performance animations.&nbsp;&nbsp;</i><br/><br/>另外一个<a target="_blank" href="http://easeljs.com/" rel="external">EaseJS</a>，搞Flash的都知道，大名鼎鼎的gskinner他们写的一个语法和结构跟AS3极为相似的框架，目前是版本号是0.4。<br/><br/>以上两个框架我都试着采用过，但后来都在该效果中剔除了，其中原音是它们更面向游戏方面一些，对于精细的动画要求还不慎完美，或者不灵活，或者增加无谓的消耗。但是搞Canvas游戏开发的话，还是很推荐，由于Canvas对图形的事件支持几乎没有，以上两个框架都给出了很便捷的解决方案。下一阶段打算做个小游戏尝试一下。<br/><br/>另外两个要提到的是Tween类：<br/><a target="_blank" href="http://tweenjs.com/" rel="external">tweenjs</a>也是gskinner他们搞的，据说跟EaseJS可以完美结合。<br/><br/><a target="_blank" href="http://www.merrycat.com.cn/blog/&lt;br/&gt;&lt;a href="https://github.com/sole/tween.js" target="_blank" rel="external"&gt;https://github.com/sole/tween.js&lt;/a&gt;" rel="external">tween</a>，也是我这个效果的采用，个人感觉比tweenjs好用一些，语法也更友好。<br/><br/>当然，还有mrdoob的<a target="_blank" href="https://github.com/mrdoob/stats.js" rel="external">stats</a>帧频检测工具。<br/><br/>结论：虽然新增的Canvas API使动画游戏等应用制作成为可能，无论从开发效率，代码执行效率，以及API易用性等各个方面跟Flash还有很长的路要走。<br/><br/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=598" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=598</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[FontCompiler 字体导出工具]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-19T23:13:49+08:00</updated>
	  <published>2011-12-19T23:13:49+08:00</published>
		  <summary type="html"><![CDATA[<img src="http://pic.yupoo.com/woaibujian/AIrNrARI/medium.jpg" border="0" alt=""/><br/><br/>分享一个我个人2010年底为奥迪New Year E-Card写的SWF字体导出工具，当时是为了解决Flash中文字体嵌入文件尺寸过大的问题。采用该方案尤其适用于文字量较少，又需要特殊中文字体显示的情况。（当时是挂在腾讯网的一个活动页面下面，这个解决方案很受大家好评）同时也要感谢<a target="_blank" href="http://kevincao.com/2010/07/hanfont/" rel="external">Kevin Cao</a>给我的一些启发。<br/><br/>先说说传统做法：<br/>1.客户端提交字符交由服务器端写入PNG图片存储，待客户端Flash需要显示时加载整张图片，如此服务器端压力很大，而且图片可编辑性较差，并且缩放会导致清晰度下降。<br/><br/>2.直接打包整个字体，大则10MB+，一半普通一点的要3~5MB。以目前的带宽，客户多数会抱怨责令整改-_-|<br/><br/>3.曾经见过一种跟我这个差不多，不过是服务器直接按请求编译相应字体。<br/><br/><br/>我这种大致原理是用FontCompiler（也就是我这个工具）来批量编译嵌入字体的SWF，每一个SWF嵌入一个字符，用时间换取空间（i5的CPU大概3~4个小时编译完整个7000多个SWF）。每一个SWF以其所嵌入字符的ASCII命名，然后Flash可以通过转换得到每个要显示字符的ASCII来加载相应的SWF，每个SWF大致2KB，正所谓用哪个字下哪个字。优点时跟嵌入字体一样用，直接给TextField指定该字体，字号、颜色等各种属性正常设置即可。<br/><br/>首先打开 FontCompiler/字库输出/字库输出.exe<br/><br/>具体使用见下图：<br/><a target="_blank" href="http://pic.yupoo.com/woaibujian/BBvTbNVE/cJusb.jpg" rel="external"><img src="http://pic.yupoo.com/woaibujian/BBvTbNVE/medium.jpg" border="0" alt=""/></a><br/>点击查看大图<br/><br/>最终生成文件：<br/><img src="http://pic.yupoo.com/woaibujian/BBw3bvkO/medium.jpg" border="0" alt=""/><br/><br/>有了这些SWF后，可以参照demo/下的例子。也可以借助我这个类com.merrycat.font.FontHelper得到各种字符的范围以及做一些ASCII的转换工作。<br/><br/>目前是v0.1版本……汗，不过以上整套流程操作都没有问题，而且也为奥美用这套方案为多个客户的team解决了问题。事实上从去年写完这个东西后就一直没做什么改动。本想加一些更灵活的功能的，一方面是我太懒了，另一方面是真没时间……目前已知的是极少数情况下会压缩失败，比如要有JRE环境，（一般装了Eclipse环境的都有）。最后感谢阿杰为我设计的图标~<br/><br/>哦，对了，这是下载<a target="_blank" href="http://115.com/file/cl0i2h8f#&lt;br/&gt;" rel="external">地址</a>或是<a target="_blank" href="http://www.box.com/s/dj8hzvzmm49ru6u3510k" rel="external">这里</a><br/><br/>任何问题欢迎E-mail我 ken.bu[at]foxmail.com<br/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=597" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=597</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[Tree map]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-14T22:42:38+08:00</updated>
	  <published>2011-12-14T22:42:38+08:00</published>
		  <summary type="html"><![CDATA[<p><embed height="500" width="500" menu="true" loop="true" play="true" src="http://www.merrycat.com.cn/blog/others/flash/treemap/treemap.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></p>
<p>单击鼠标增加格子。</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=596" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=596</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[衍生艺术基础之九 正多边形]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-09T12:07:38+08:00</updated>
	  <published>2011-12-09T12:07:38+08:00</published>
		  <summary type="html"><![CDATA[<div>B.I.G.A. 9 : REGULAR POLYGON</div>
<div>&nbsp;</div>
<div><img alt="" src="http://www.nicoptere.net/biga/covers/9.png" /></div>
<div>&nbsp;</div>
<div>圆真是一种可以激发灵感的图形，就算用一生的时间也未必能够探索遍它所有的特性。所以，当需要它们时，最好只关注我们真正需要的方面。现在，我们来看看另一个几何图形吧，正多边形。</div>
<div>&nbsp;</div>
<div>像圆一样，正多边形也只有很少的属性，基本上相对圆来说它只有一个额外的参数：<strong>边的数量</strong>。但通常为了操作它，我们还需要一些其它的参数，像旋转角度、边心距、单边长以及一些方法像位移、偏移角度、反射和滑动。这些微不足道的参数和方法大大增加了多边形的复杂度，而且它们之间互相依赖，其中任何一个参数改变都会改变其它所有的。</div>
<div>&nbsp;</div>
<div>最基本的，下面这个例子使用蓝色表示半径（外接圆半径）和外接圆，用红色表示内接圆半径（也叫边心距）和内接圆，用绿色表示弧高（半径-边心距=弧高）。另外，还有一个快捷的方法查找多边形上的最近距离点，以及一个包含点的测试方法&mdash;&mdash;当鼠标移入时多边形变成浅灰色，我还加了一个最近边的查找方法，它会返回多边形上两个最近点并用黑色的线将它们连接起来。另外还有黄色的点表示每条边的中点。你可以通过点击任何地方拖拽来旋转。</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/regularpolygon_0.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>每个多边形都有3个重要的角度属性，黄色的圆心角、红色的内角以及绿色的外角。</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/regularpolygon_1.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>正多边形有一些特性：</div>
<div>&bull;&nbsp;它们总是很简单，它们的边从来不相交</div>
<div>&bull;&nbsp;它们总是凸面的，顶点形成的边界框在所有节点的外部。</div>
<div>&bull;&nbsp;它们的外角相加的和是2&pi;(这个很重要，一会会用到)</div>
<div>&nbsp;</div>
<div>正多边形的几何属性有着很广的应用范围，游戏，界面布局、物理。</div>
<div>&nbsp;</div>
<div>它们视觉上给人一种很强的结构化的感受以及一种高科技感（特别是当使用一种叫做增加的图层混合模式的时候）。它们非常容易通过三角化（把一个多边形分成若干个三角形，我们一会就会看到为什么这个比较重要）来得到三角形。它们非常接近于圆，所以碰撞非常容易计算。因为它们是凸面的，所以关于方面的运算也很容易。它们的重心（动量）也就是它们的图形中心点。</div>
<div>&nbsp;</div>
<div>这有个词叫拼贴(tilings)或曲面细分(tessellation)</div>
<div>&nbsp;</div>
<div>拼贴或曲面细分随处可见，象棋盘、砖墙、蜂巢、干涸的泥土、细胞、地面&hellip;&hellip;一个拼贴图案组合是由重复的元素结构生成的，这种组成的元素叫做拼贴单元(tile)或是prototile，一些通常出现在二维当中(象棋盘、纤维织物)，也有一些三维的，我们还可以想象N维空间的拼贴组合。不过想象三维以上的拼贴实在是很费时间。所以我们还是继续在二维上进行吧。当拼贴单元（或是结构元素）组合到一起时就有了完美呈现在二维空间里的拼贴图案，它们之间没有缝隙(gaps)和叠加(overlays)。我们的大脑非常擅长对这种拼图或者说是组合图形的处理，这同时又很矛盾，但这些就是我们与生俱来的能力。</div>
<div>&nbsp;</div>
<div>要想正确的拼贴一个空间（无缝、无叠加的），我们需要有合适的拼贴单元。</div>
<div>&nbsp;</div>
<div>所谓合适的拼贴单元是指它们是完全相同的（identical）也就是它们在一系列位移或旋转动作后（不包括缩放）仍可以完美的重迭。</div>
<div>&nbsp;</div>
<div>目前有很多中不同的拼贴和曲面细分技术，其中最流行的是对平面的<a target="_blank" href="http://mathworld.wolfram.com/RegularTessellation.html">规则密铺(regular monohedral tesselation)</a>:它只使用一种统一类型的正多边形来无缝并无叠加的覆盖表面。一些人会想：&ldquo;我们可以使用任何的正多边形拼贴来覆盖平面&rdquo;，但事实并不是这样。只有3中方式来实现规则密铺，它们是下面这三种情况：</div>
<div>&nbsp;</div>
<div>使用三角形：</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/tesselation/regular/r_3_3_3_3_3_3.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>使用正方形：</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/tesselation/regular/r_4_4_4_4.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>以及六边形：</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/tesselation/regular/r_6_6_6.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>就是这样：）</div>
<div>&nbsp;</div>
<div>是不是有点受挫？</div>
<div>&nbsp;</div>
<div>红色的图形部分表示它们共享同一个顶点(多边形的边上的点通常叫做顶点vertex)，要想无缝的拼贴一个平面，围绕这一个顶点的内角和必须不能超过2&pi;. 6 * 60&deg; = 4 * 90&deg; = 3 * 120&deg; = 360&deg;。上面的图形就符合这个规则。如果我们用的是五角型（内角为180&deg; &ndash; 72&deg;= 108&deg;）就无法在一个顶点周围无缝、无叠加的分布它们，所以我们就不能拼贴这种图形。</div>
<div>&nbsp;</div>
<div>这有一个交互例子描述了这一限制</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/spawn.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>3*3, 4*4和6*6都没问题，10*5看起来也行，但并不是无叠加的拼贴。</div>
<div>&nbsp;</div>
<div>还有一些特殊的情况像3*3, 3*4, 4*3, 4*8, 6*3也会给我们一种它们也可以的印象。</div>
<div>&nbsp;</div>
<div>就像之前说的那样，我们还可以用prototile替代我们的密铺技术。我们也可以使用它的平铺来合成一个图案。这个叫做半正则细分<a target="_blank" href="http://mathworld.wolfram.com/SemiregularTessellation.html">(semiregular tesselation）</a>。</div>
<div>&nbsp;</div>
<div>但在那之前，让我们来试试一些没脑子的拼贴</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/regularpolygon/tesselation_fail.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<p>记住，偶得有时不比你预先设想的结果差。&nbsp;</p>
<p><span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Verdana, Arial, Helvetica, sans-serif, 微软雅黑, 宋体; line-height: 21px; ">注：原文</span><a target="_blank" style="text-decoration: none; color: rgb(0, 102, 153); font-family: Verdana, Arial, Helvetica, sans-serif, 微软雅黑, 宋体; line-height: 21px; text-align: left; " href="http://en.nicoptere.net/?p=1512">链接</a><span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Verdana, Arial, Helvetica, sans-serif, 微软雅黑, 宋体; line-height: 21px; text-align: left; ">转载请注明出处</span></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=595" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=595</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[使用Perlin noise与drawTriangle绘制水波效果。]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-08T21:51:43+08:00</updated>
	  <published>2011-12-08T21:51:43+08:00</published>
		  <summary type="html"><![CDATA[<p>使用Perlin noise 与 drawTriangle绘制水波效果。</p>
<p><embed height="600" width="600" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.merrycat.com.cn/blog/others/flash/wave/wave.swf" play="true" loop="true" menu="true"></embed></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=594" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=594</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[衍生艺术基础之八 关于圆的实用工具]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-08T16:16:34+08:00</updated>
	  <published>2011-12-08T16:16:34+08:00</published>
		  <summary type="html"><![CDATA[<p>B.I.G.A. 8 : TOOLS FOR CIRCLE</p>
<p><img alt="" src="http://www.nicoptere.net/biga/covers/8.png" /></p>
<p>目前为止，我们已经有了相当多的关于处理线、线段、三角形的工具。下面，让我们有请既矛盾又复杂的圆先生。</p>
<div>圆的基本属性就是一个原点和半径，但是如果你看了wolfram上的<a target="_blank" href="http://mathworld.wolfram.com/Circle.html">circle</a>,<a target="_blank" href="http://mathworld.wolfram.com/topics/Circles.html"> circles </a>或是 wikipedia上的<a target="_blank" href="http://en.wikipedia.org/wiki/Circle">circle</a>以及<a target="_blank" href="http://en.wikipedia.org/wiki/List_of_circle_topics">相关系列主题</a>对圆的特性描述后，你会发现事情远远没有那么简单。</div>
<div>&nbsp;</div>
<div>详尽的学习圆的属性已经超出了本系列文章的范围，我们只考虑最常用的（也是最实用的）算法；这些工具会帮助我们绘制美妙的图形以及与其交互的圆。</div>
<div>&nbsp;</div>
<div>在实际运用当中，如果我们想要绘制一个或多个圆，我们通常会使用内置API中的graphics.drawCircle()。</div>
<div>&nbsp;</div>
<div>通过这个，我们已经能够尝试丰富的绘制了。点击下面的flash依次查看6种即兴创作的变化效果。</div>
<div>&nbsp;</div>
<div>&nbsp;<embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/8_circles0.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>这里是我留给那些勇士们的难看<a target="_blank" href="http://www.nicoptere.net/biga/circles/CircleDoodle.as">代码</a></div>
<div>&nbsp;</div>
<div>对圆的特性研究是无尽的（我说的是真的）所以让我们还是把焦点放在工具上吧。</div>
<div>&nbsp;</div>
<div>一个圆就只有这两个属性：位置、半径。</div>
<div>&nbsp;</div>
<div>圆的一部分叫作圆弧（ARC）并且这有一些有趣的特性：好戏上演！</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/8_arc.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>&bull; 一个<strong>点</strong>和<strong>半径</strong>：点击并拖拽上方的滑动条来改变半径。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;一个<strong>起始角度</strong>，以及一个弧长定义长度。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;三种不同的渲染方式：<strong>圆弧</strong>、<strong>扇形</strong>也叫做饼图、用做圆上<strong>弦</strong>的分割。注意，如果选择了扇形，那么弦分割不起作用&hellip;&hellip;，这个能实现，不过，哥儿不想改了。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;当我准备这篇文章时，我发现了一个有意思的特性，就是可以反转圆弧，你可以通过勾选（invert）复选框查看效果。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;另外一个非常有用的功能是判断一个点是否在一个圆弧里，勾选&rdquo;closest point&rsquo;复选框查看效果，当吸附鼠标的点在圆弧里的时候，圆弧变成了蓝色。</div>
<div>&nbsp;</div>
<div>&nbsp;注意，圆弧使用了1至8个curveTo方法而不是使用几个线段拼接绘制，这样既轻巧又优雅。</div>
<div>&nbsp;</div>
<div>&nbsp;这有一个非常好用的<a target="_blank" href="http://www.multimediacollege.be/2010/09/drawing-a-perfect-circle-with-the-curveto-function/">curveTo工具类</a>，我实际上用的是<a target="_blank" href="http://www.experts-exchange.com/Software/Photos_Graphics/Web_Graphics/Macromedia_Flash/ActionScript/Q_25121879.html">这个</a>，但是这个地址好像已经不可用了。这些已经很有趣了，但是更有趣的是当你把两个圆放到一起的时候：）</div>
<div>&nbsp;</div>
<div>&nbsp;这下面是圆和圆之间的距离计算、点和圆之间的切线计算、圆和圆之间的切线计算以及圆与圆之间的包含测试。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/8_tangents.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>勾选复选框并推拽圆试试效果。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;圆跟圆之间的距离可以是负数（也可以被0除囧）这很正常；这表示两个圆互相渗透的程度。负值可以用来计算某种反弹。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;如果你拖拽小圆到另一个里，它会变为粉色，并在另一个图形上开个小洞出来。这就是圆的包含测试。</div>
<div>&nbsp;</div>
<div>&bull;<strong>&nbsp;圆上的切点</strong>， 找到红色圆原点到黑色圆间的切线。对此我使用<a target="_blank" href="http://htmlcoderhelper.com/find-a-tangent-point-on-circle/">这里</a>给出的理论。你可以绘制在两个切线之间的扇形，或是将它反转来获得一个小雨滴的图形。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;<strong>圆到圆的切线</strong>，找到一个圆的到另外一个圆的切线。再一次的，我使用了<a target="_blank" href="http://mathworld.wolfram.com/Circle-CircleTangents.html">这篇</a>跟<a target="_blank" href="http://mathworld.wolfram.com/EyeballTheorem.html">那篇</a>文章中介绍的知识，并最终实现了它，我喜爱这个在扇形勾选后形成的胶囊的形状。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>对于我们的运算&ldquo;工具包&rdquo;来说，这些都是真正好的工具。但是，接下来的这3个才是最有用的，它们分别能够找到圆与圆、线与圆以及线段与圆之间的交叉点。</div>
<div>&nbsp;</div>
<div>就像你看到的，我想，不需要太多的解释。当你勾选了线的复选框后，你通过可以拖拽线的控制点来查看效果。</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/8_intersections.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>&bull;&nbsp;<strong>圆之间的交叉点</strong>，如果两个圆相交，那么它至少会得到一个切点或是在两个圆相交的位置上2个弦上的点，对此，我找到了一个的<a target="_blank" href="http://mathworld.wolfram.com/Circle-CircleIntersection.html">说明</a>。</div>
<div>&nbsp;</div>
<div>&bull;<strong>&nbsp;线与圆之间的交叉</strong>，在没有相交的情况下你会得到0个点，或是一条线为该圆的切线时你会得到1个切点，再或是线穿过圆得到的2个弦上的点（这里指的是交叉的割线）。你可以在这里找到<a target="_blank" href="http://mathworld.wolfram.com/Circle-LineIntersection.html">代码和对此的说明</a>。</div>
<div>&nbsp;</div>
<div>&bull;&nbsp;<strong>线段与圆的交叉</strong>，除了使用线段来替代无限长的线外，这跟上一种情况没太大的差别。不过，在线的情况中你能够得到两个交叉点时也许在线段上你只能得到0个或是1个点。你会发现这个会很方便。我移植了<a target="_blank" href="http://www.experts-exchange.com/Programming/Game/AI_Physics/Q_24977935.html">这段代码</a>（Google了几个小时）。</div>
<div>&nbsp;</div>
<div>注意，你也可以找到扇形与线以及扇形与线段的交叉点，首先计算这个扇形的所属圆与线的交叉点，然后使用ArcUtils.isPointOnArc()方法来测试每一个点得到最终结果。</div>
<div>&nbsp;</div>
<div>最后，一直以来我都对<a target="_blank" href="http://mathworld.wolfram.com/ApolloniusProblem.html">阿波罗尼斯问题（Apollonius&rsquo; problem）</a>怕得要命。别问我为什么，每个人都有一些这种孩童时代的恐惧。</div>
<div>&nbsp;</div>
<div>问题是这样说的：</div>
<div>&nbsp;</div>
<div><em>给定3个对象，它们可能是点、线或是圆，绘制一个圆与它们3个相切。总共会有10中情况，最简单的是3个都是点或都是线的情况，而<strong>最难的是3个圆的情况</strong>。</em></div>
<div>&nbsp;</div>
<div><img alt="" src="http://www.nicoptere.net/biga/apollonius.png" /></div>
<div>&nbsp;</div>
<div>哦&hellip;&hellip;你总算明白了吧？</div>
<div>&nbsp;</div>
<div>实际上3个点的解决方案就是外切圆，我们在<a target="_blank" href="http://www.merrycat.com.cn/blog/article.asp?id=587">三角形的章节</a>中已经看到它了。关于3条线，好吧，我不大清楚，不过应该就是三角形的内圆，然后使用它的三个切点，并不是什么大不了的事。</div>
<div>&nbsp;</div>
<div>现在，3个圆才是最难的情况，复杂的程度超乎想像。不过，就像我之前所有文章中强调的那样，复杂就是简单问题的叠加。解决阿波罗尼斯问题我还缺少有利的工具。</div>
<div>&nbsp;</div>
<div>所以，我很认真的读了一些文章并且实现了这个我需要的工具，就是这些：</div>
<div>&nbsp;</div>
<div>-&nbsp;<a target="_blank" href="http://mathworld.wolfram.com/RadicalLine.html">根线( radical line)</a>和<a target="_blank" href="http://mathworld.wolfram.com/RadicalCenter.html">根心(radical center)</a></div>
<div>&nbsp;</div>
<div>-&nbsp;<a target="_blank" href="http://mathworld.wolfram.com/HomotheticCenter.html">同位心（homothetics centers）</a></div>
<div>&nbsp;</div>
<div>-&nbsp;<a target="_blank" href="http://mathworld.wolfram.com/InversePoints.html">反转点（inversion point ）方法</a>和<a target="_blank" href="http://mathworld.wolfram.com/InversionPole.html">反转极</a>。</div>
<div>&nbsp;</div>
<div>然后，它们在这：</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/8_extras.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>我们没有必要了解它的内部机制，我不会举例了，咱就按&ldquo;食谱&rdquo;来就可以。</div>
<div>&nbsp;</div>
<div>无论怎样，相对它背后晦涩的数学原理来说我们更感兴趣的是其前端渲染的结果。</div>
<div>&nbsp;</div>
<div>这里提一下，根线实际上就是圆与圆之间的交叉线。</div>
<div>&nbsp;</div>
<div>追踪同位心上点的轨迹，可以得到一个圆上的点在另一个圆上的&ldquo;刻度&rdquo;。</div>
<div>&nbsp;</div>
<div>所以掌握了所有这些后，我终于可以面对这个恐惧了多年的家伙了：</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/8_apollonius.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>需要注意的是，6&amp;7这两个非常有用。不过这个还不是100%的稳定版，如果同时出现了两个相同半径圆的话，它们就出不来了。（简单的测试&hellip;&hellip;您就将就看吧）。</div>
<div>&nbsp;</div>
<div>最后，这里有一个<a target="_blank" href="http://www.nicoptere.net/biga/biga_1.zip">zip</a>。</div>
<div>&nbsp;</div>
<div>更新消息：<a target="_blank" href="http://code.google.com/p/biga/">google code上你也可以找到它们了</a>。</div>
<div>&nbsp;</div>
<div>最后一点，我进行了很多重构，把工具类都放到了工具类包里，图形都放到了图形类包里&hellip;&hellip;上面的这些例子在samples/circle目录下。我还用英文为GeomUtils、CircleUtils加了注释&hellip;&hellip;某种意义上可能会有些帮助。</div>
<div>&nbsp;</div>
<div><span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Verdana, Arial, Helvetica, sans-serif, 微软雅黑, 宋体; line-height: 21px; ">注：原文</span><a target="_blank" style="text-decoration: none; color: rgb(0, 102, 153); font-family: Verdana, Arial, Helvetica, sans-serif, 微软雅黑, 宋体; line-height: 21px; text-align: left; " href="http://en.nicoptere.net/?p=1459">链接</a><span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Verdana, Arial, Helvetica, sans-serif, 微软雅黑, 宋体; line-height: 21px; text-align: left; ">转载请注明出处</span></div>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=593" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=593</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[衍生艺术基础之七 关于线的实用工具]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-12-07T13:25:29+08:00</updated>
	  <published>2011-12-07T13:25:29+08:00</published>
		  <summary type="html"><![CDATA[<p>B.I.G.A. 7 : TOOLS FOR LINES</p>
<p><img alt="" src="http://www.nicoptere.net/biga/covers/7.png" /></p>
<div>&nbsp;</div>
<div>这是一篇更&rdquo;技术性&rdquo;或者可以说是&rdquo;实用性&rdquo;更强的文章。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>当制作三角形特性的演示时，我意识到有非常多的概念引入了进来，并且我想把关于相关理论的代码发出来一定会很有帮助。不过前提是你认为前面那些例子真的有令人着迷的魔力。</div>
<div>&nbsp;</div>
<div>其中一些（大多数）代码都不是我自己写的，当我想起来在某个地方的某一段代码是谁写的时，我经常都会提到相关的出处，好吧，不管怎样，至少<a target="_blank" href="http://www.bit-101.com/blog/">Keith Peters</a>, <a target="_blank" href="http://keith-hair.net/">Keith Hair</a> 和 <a target="_blank" href="http://blog.controul.com/2009/05/line-segment-intersection/">Hristo Dachev</a> 的名字你总看到过吧。</div>
<div>这有一个源代码的<a target="_blank" href="http://www.nicoptere.net/biga/biga.zip">连接</a>。</div>
<div>你可以找到下面例子的源代码。分别在/tools/和./biga/目录下。</div>
<div>让我们从线开始：你可以尝试拖拽这些控制点</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/6_line.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>这个例子不必做太多字面解释，阅读这篇<a target="_blank" href="http://www.merrycat.com.cn/blog/article.asp?id=590">文章</a>可以找到更多关于线的相关说明。</div>
<div>然后是边（或者说是线段）</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/6_edge.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>垂直于红绿色线段，并且从线段一端起始的线段叫做法线。</div>
<div>黑十字点投射在线段上</div>
<div>有两个方法让点投射</div>
<div><strong>GeomUtils.project( p, a, b ) </strong>会让点p投射在线AB上</div>
<div><strong>GeomUtils.constrain( p, a, b )</strong> 会让点p投射在线段AB上</div>
<div>根据黑十字在线段哪一侧，画笔会随之改变为绿色或是红色</div>
<div>蓝色的圆是线段的中心点，我可以使用getPointAt方法获得它，实际当中你会发现中心点非常有用。</div>
<div>&nbsp;</div>
<div>阅读<a target="_blank" href="http://www.merrycat.com.cn/blog/article.asp?id=591">Line &frac12;</a>这篇文章了解更多。</div>
<div>&nbsp;</div>
<div>两条边</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/6_edges.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>这里比较重要的是关于相交的计算方法，而它的实际用途是投射一条线段到另一条上，阅读 <a target="_blank" href="http://www.merrycat.com.cn/blog/article.asp?id=586">Join the dots</a>了解更多。</div>
<div>&nbsp;</div>
<div>最后，是三角形的例子，来自<a target="_blank" href="http://www.merrycat.com.cn/blog/article.asp?id=587">Triangle</a>这一章。</div>
<div>&nbsp;</div>
<div><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/6_triangles.swf" width="500" height="500" play="true" loop="true" menu="true"></embed></div>
<div>&nbsp;</div>
<div>显然，这不是最佳或是最简洁的代码实现方式，但它至少实现了我们想要的东西。</div>
<div>&nbsp;</div>
<div>如果大家有任何对此的改进诀窍，欢迎分享。</div>
<div>&nbsp;</div>
<div>下一章：关于圆的实用工具</div>
<p>&nbsp;注：原文<a target="_blank" href="http://en.nicoptere.net/?p=1442 ">链接</a>转载请注明出处</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=588" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=588</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[衍生艺术基础之六 三角形(Triangle)]]></title>
	  <author>
		 <name>Merrycat</name>
		 <uri>http://www.merrycat.com.cn/blog/</uri>
		 <email>ken.bu@foxmail.com</email>
	  </author>
	  <category term="" scheme="http://www.merrycat.com.cn/blog/default.asp?cateID=4" label="Work" /> 
	  <updated>2011-11-29T16:53:54+08:00</updated>
	  <published>2011-11-29T16:53:54+08:00</published>
		  <summary type="html"><![CDATA[<p>B.I.G.A. 6 : TRIANGLE</p>
<p><img alt="" src="http://www.nicoptere.net/biga/covers/6.png" />&nbsp;</p>
<p>&nbsp;</p>
<p>线并不是真正的面，这是个令人沮丧的事实，现在，让我们来补救它：）</p>
<div>&nbsp;</div>
<div>如果我们闭合一段折线&mdash;&mdash;即它的起始点也是它的终点，这样我们就得到了多边形。不像是折线，多边形可以被描述为一个面。形成面的最小图形单位是三角形，而且所有点面都可以切分成一系列的三角形。这一过程被称作曲面细分（tesselation ）或三角剖分（triangulation）</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>三角形有这许多<a target="_blank" href="http://en.wikipedia.org/wiki/Triangle">特性</a>，<a target="_blank" href="http://www.dasprinzip.com/prinzipiell/">Frank</a>在<a target="_blank" href="http://ffk10.flashforum.de/">FFK</a>、<a target="_blank" href="http://flashonthebeach.com/sessions/index.php?pageid=2230">FFTB</a>以及最近的<a target="_blank" href="http://www.adobeusergroupxl.nl/">AUGXL</a>上完整的揭示了很多关于三角形方面的几何计算应用。我有幸参加了后面两个，而且FOTB那部分让我印象非常深刻。</div>
<div>&nbsp;</div>
<div>用两个字来形容<a target="_blank" href="http://nodename.com/blog/2009/12/03/roll-over-delaunay-voronoi-library-goes-open-source/">Alan shaw</a>：&ldquo;很酷&rdquo;。</div>
<div>&nbsp;</div>
<div>如果一个三角形具有点、线、线段、折线这些独立的属性，那么它一定会很有趣，这里有一部分：</div>
<div>&nbsp;</div>
<div><font class="Apple-style-span" color="#1a1aa6" face="monospace" size="3"><span class="Apple-style-span" style="white-space: pre-wrap; "><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.nicoptere.net/biga/6_triangles.swf" width="500" height="500" play="true" loop="true" menu="true"></embed><br />
</span></font></div>
<div>&nbsp;</div>
<div>通过拖拽控制点更容易理解每个特性。</div>
<div>&nbsp;</div>
<div>你可以打开一个新窗口中全屏<a target="_blank" href="http://www.nicoptere.net/biga/6_triangles.swf">查看</a>。</div>
<div>&nbsp;</div>
<div>注意：我并没有一个专业的背景，只是在很浅的理解层次上阐述。请原谅如果我说错什么概念的话，欢迎联系我并指正。</div>
<div>&nbsp;</div>
<div><strong>中位线与重心（也叫作形心centroid）</strong>中位线是连接了每个顶点到对边中点的线，它们的交点就是形心，它会一直在三角形的内部。</div>
<div>&nbsp;</div>
<div><strong>顶垂线与垂心</strong> 顶垂线是过每个顶点垂直于对边的线，它们的交点叫作重心，有时候它也会出现三角形的外部。</div>
<div>&nbsp;</div>
<div><strong>等分线、内切圆与外切圆</strong> 等分线把每个内角分成两个相等的角， 它们的交点正是内切圆的中心。内切圆三角形内部最大的圆。内切圆的半径是圆中心投射在各边上的最短距离。关于外切圆在这已经有了很好的<a target="_blank" href="http://mathworld.wolfram.com/Excircles.html">说明</a>。</div>
<div>&nbsp;</div>
<div><strong>垂直等分线与外圆</strong> 这与delaunay三角剖分算法紧密相关：delaunay三角剖分中外圆用来指示一个点是否有效。垂直等分线用来绘制泰森多边形。另外外圆的中心到三角形的三个定点距离相等，很有用的特性：）</div>
<div>&nbsp;</div>
<div><strong>欧拉线与欧拉圆</strong> 欧拉线是穿过重心、垂心和外圆圆心的线。中心到垂心的长度是欧拉线长度的2/3。欧拉圆穿过所有的中位线与三角形边的交点，并且穿过所有的垂直等分线与三角形边的交点，说句实话，我真不知道它们是干嘛的&hellip;&hellip;</div>
<div>&nbsp;</div>
<div><strong>三角形的面积</strong></div>
<div><strong>三角形的内部和外部</strong></div>
<div><strong>三角形的正面与背面也叫做剔除</strong>（三角形转到背面时应该被绘制为灰白）</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>有两种特殊情况并不能称为三角形：</div>
<div>-<span class="Apple-tab-span" style="white-space:pre">	</span>三角形有2~3个点不在同一坐标轴中</div>
<div>-<span class="Apple-tab-span" style="white-space:pre">	</span>所有的3个点在一条线上</div>
<div>&nbsp;</div>
<div>像下面的例子中看上去的样子：</div>
<div>&nbsp;</div>
<div><img alt="" src="http://www.nicoptere.net/biga/triangle_bug.png" /></div>
<div>&nbsp;</div>
<div>&ldquo;蒙得里安我来了！&rdquo;（荷兰画家，作品以交错的三原色为基色的垂直线条和平面为特点，他的著作包括 新造型主义(1920年），对抽象艺术的发展曾经产生很深影响。）</div>
<div>&nbsp;</div>
<div>误会与意外有时甚至会让我们得到比预想中更棒的结果。</div>
<div>&nbsp;</div>
<div>且不说那两个特殊的例子。</div>
<div>&nbsp;</div>
<div>三角形是简单的(不是自交线)，这对于运算很重要。</div>
<div>所有的点在一个平面上，二维和三维都是。</div>
<div>&nbsp;</div>
<div>最简单的面就如此复杂，这比简单的画线难得多，但结果却有趣得多。</div>
<div>&nbsp;</div>
<div>通过合成三角形来获得网格(mesh)，被用在无数的程序上（变形morphing、扭曲distorsions等等）</div>
<div>二维物理 像之前说的三角形是形成面的最小图形单位而且它总是凸状的，我们可以基于这点构建一个物理系统（计算体积、面积、惯性矩moment of inertia、表演测试等等）</div>
<div>三维 三角形也是在三维当中最简单的面，它用来构建、细分并渲染网格。</div>
<div>&nbsp;</div>
<div>顺便说一下，molehill用的都是三角形或者更精确的说是&ldquo;委托GPU进行三角形的渲染&rdquo;：）</div>
<div>&nbsp;</div>
<div>在我们谈论网格之前，我们来看看规则多边形，它们有好多有意思的特性，而且并不怎么难用。但是，在这个之前，一些类会非常有用。</div>
<div>&nbsp;</div>
<div>所以，下一步，我们来看看一些有用的工具！</div>
<div>&nbsp;</div>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.merrycat.com.cn/blog/article.asp?id=587" /> 
	  <id>http://www.merrycat.com.cn/blog/default.asp?id=587</id>
  </entry>	
		
</feed>

