Flash 与分布学构想：圆形分布(2)

最新推荐文章于 2017-09-16 19:15:59 发布

转载最新推荐文章于 2017-09-16 19:15:59 发布 · 73 阅读

本文探讨了利用三角函数原理生成圆形分布图形的方法，并通过调整角度、颜色和滤镜实现艺术效果。进一步展示了如何结合3D技术增强图形表现力，创造出独特且富有想象力的视觉作品。

今晚把今天突然想到灵感的记录一下，当时是由一个网友提起的问题，关于圆形分布，采用的数学原理知识就是三角函数，也并不是什么新鲜的东西，不过记录一下当是一种灵感。

最初的时候，以中间为注册点，在没有旋转角度的时候，样貌是如此

经过旋转角度后，箭头的会按这种情况进行分布。

继续使用箭头来制作，在平均分在某一点位置上，然后采取角度旋转，这样这个图形就很容易出来了，再者如果我们把它加减90度，你会发现不一样的结果

巧妙利用好这种角度关系。可以制作出一种像太阳的光芒

一方面把握好三角函数的相关技术，另外一方面为了表现出一种艺术感，可以使用滤镜和不规则的数来产生图形的效果，这样子创造出来的效果更加让人意外。

shape.rotation=i*perAngle*180/Math.PI；

shape.rotation=i*perAngle*180/Math.PI+90;

shape.rotation=i*perAngle*180/Math.PI-90;

shape.rotation=i*perAngle*180/Math.PI+60;

shape.rotation=i*perAngle*180/Math.PI-60;

不妨尝试一下这几种变化。

var perAngle:Number = 2 * Math.PI / 100; for (var i:int=0; i<100; i++) { var shape:Shape=new Shape(); shape.filters = [new GlowFilter(0xff0000)]; shape.graphics.lineStyle(1,0xFFFF00); shape.graphics.moveTo(0,30); shape.graphics.lineTo(0,-30); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI/6)*8,-30+Math.sin(Math.PI/6)*8); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI-Math.PI/6)*10,-30+Math.sin(Math.PI-Math.PI/6)*10); addChild(shape); if (i % 2 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 100; shape.y = 200 + Math.sin(i * perAngle) * 100; shape.rotation = i * perAngle * 180 / Math.PI +20; } else { shape.x = 250 + Math.cos(i * perAngle) * 140; shape.y = 200 + Math.sin(i * perAngle) * 140; shape.rotation = i * perAngle * 180 / Math.PI +60; } }

var perAngle:Number = 2 * Math.PI / 100; for (var i:int=0; i<100; i++) { var shape:Shape=new Shape(); shape.filters = [new GlowFilter(0xff0000)]; shape.graphics.lineStyle(1,0xFFFF00); shape.graphics.moveTo(0,30); shape.graphics.lineTo(0,-30); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI/6)*8,-30+Math.sin(Math.PI/6)*8); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI-Math.PI/6)*10,-30+Math.sin(Math.PI-Math.PI/6)*10); addChild(shape); if (i % 2 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 100; shape.y = 200 + Math.sin(i * perAngle) * 100; } else if(i % 3 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 120; shape.y = 200 + Math.sin(i * perAngle) * 120; } else if(i % 4 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 130; shape.y = 200 + Math.sin(i * perAngle) * 130; } else { shape.x = 250 + Math.cos(i * perAngle) * 150; shape.y = 200 + Math.sin(i * perAngle) * 150; } shape.rotation = i * perAngle * 180 / Math.PI +90; }

构建这些图形的时候，可以通过运用到位置，角度，颜色等的一些常用手法来表现这些的图形。这些手法都是很常见的，巧妙利用这种圆形的分布的技巧，会创作出无穷的图形效果，图形的艺术感会有不错的表现。

var perAngle:Number = 2 * Math.PI / 100; for (var i:int=0; i<100; i++) { var shape:Shape=new Shape(); shape.filters = [new GlowFilter(0xff0000)]; shape.graphics.lineStyle(1,0xFFFF00); shape.graphics.moveTo(0,30); shape.graphics.lineTo(0,-30); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI/6)*8,-30+Math.sin(Math.PI/6)*8); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI-Math.PI/6)*10,-30+Math.sin(Math.PI-Math.PI/6)*10); addChild(shape); if (i % 2 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 100; shape.y = 200 + Math.sin(i * perAngle) * 100; } else if(i % 3 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 120; shape.y = 200 + Math.sin(i * perAngle) * 120; } else if(i % 4 == 0) { shape.x = 250 + Math.cos(i * perAngle) * 130; shape.y = 200 + Math.sin(i * perAngle) * 130; } else { shape.x = 250 + Math.cos(i * perAngle) * 160; shape.y = 200 + Math.sin(i * perAngle) * 160; } shape.rotation = i * perAngle * 180 / Math.PI ; }

var perAngle:Number = 2 * Math.PI / 100; for (var i:int=0; i<100; i++) { var shape:Shape=new Shape(); shape.filters = [new GlowFilter(0xff0000)]; shape.graphics.lineStyle(1,0xFFFF00); shape.graphics.moveTo(0,30); shape.graphics.lineTo(0,-30); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI/6)*8,-30+Math.sin(Math.PI/6)*8); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI-Math.PI/6)*10,-30+Math.sin(Math.PI-Math.PI/6)*10); addChild(shape); if(i%2==0) { shape.x = 250 + Math.cos(i * perAngle) * 100; shape.y = 200 + Math.sin(i * perAngle) * 100; shape.rotation = i * perAngle * 180 / Math.PI; } else if(i%3==0) { shape.x = 250 + Math.cos(i * perAngle) * 138; shape.y = 200 + Math.sin(i * perAngle) * 138; shape.rotation = i * perAngle * 180 / Math.PI+90; } else { shape.x = 250 + Math.cos(i * perAngle) * 160; shape.y = 200 + Math.sin(i * perAngle) * 160; shape.rotation = i * perAngle * 180 / Math.PI; } }

最后这个构建应该是我比较喜欢一个了设计了，我将其命名为--《箭意之爱》

如果觉得无味道可以尝试一下结合3D技术来进行使用。

var perAngle:Number = 2 * Math.PI / 100; var n:Number = 0; for (var j:int=1; j<=10; j++) { for (var i:int=0; i<100; i++) { var shape:Shape=new Shape(); shape.filters = [new GlowFilter(0xff0000)]; shape.graphics.lineStyle(1,0xFFFF00); shape.graphics.moveTo(0,30); shape.graphics.lineTo(0,-30); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI/6)*8,-30+Math.sin(Math.PI/6)*8); shape.graphics.moveTo(0,-30); shape.graphics.lineTo(Math.cos(Math.PI-Math.PI/6)*10,-30+Math.sin(Math.PI-Math.PI/6)*10); addChild(shape); shape.x = 275 + Math.cos(i * perAngle) * (20+j*10); shape.z = Math.sin(i * perAngle) * (20+j*10); shape.y = 80 + j * 30; shape.rotationX = - j *8; } }