【表达式案例 】矩形限定随机圆形位置

图形是如何霸占位置的

1.新建一个1000*1000的合成

2.双击圆形工具,会自动在屏幕绘制一个圆形填充合成

3.可以看到圆形的尺寸为1000*1000 且当前描边为100,会溢出屏幕50,因为描边是从边界同时向内外扩充。

4.所以当前圆形的完整直径(含描边)= 1000+100/2(左边描边超出范围)+100/2(右边描边超出范围)=1100

如何限定圆形在一个矩形内

原理很简单:

只需圆形的当前位置不超过矩形的边界即可

创建初始图形

1.新建一个1000*1000的合成

2.双击圆形工具,创建一个圆。尺寸为100*100,描边为50px,

3.双击矩形工具,创建一个正方形 。尺寸为1000*1000,描边为0 如下所示

什么时候会触碰边界

圆形位置为[0,0]时,圆形在合成正中心

在圆形位置为[-425,-425]时会触碰到上边界

最大波动范围: -425 = 0 – 1000/2 + 50/2 + 100/2 (减去半个合成+半个描边+半个直径)

表达式如何书写

在圆形的圆形路径下的位置属性书写以下表达式

rPath = content("Rectangle 1").content("Rectangle Path 1");//代表矩形路径, 用于简化表达式而已
eStroke=content("Ellipse 1").content("Stroke 1").strokeWidth; //圆形的描边, 用于计算边界值
eSize=content("Ellipse 1").content("Ellipse Path 1").size[0]//圆形的尺寸, 用于提取圆的直径值
rSize=rPath.size; //矩形的尺寸
rPos=rPath.position; //矩形位置
w=wiggle(1,1);//用于随机 生成-1到1之间的数值
xWig = rSize[0]/2 - eStroke/2 - eSize/2; //x轴最大波动范围(当前为425)
yWig= rSize[1]/2 - eStroke/2 - eSize/2; //y轴最大波动范围 (当前为425)
([xWig*clamp(w[0],-1,1) ,yWig*clamp(w[1],-1,1)]) //最后wiggle的结果 要用clamp函数限定到-1~1, 因为wiggle可能会越界,比如到1.02468465

其他说明


clamp可能会有点生硬, 可以用三角函数大致模拟二维随机数组

[Math.sin(time)+0.3713*Math.cos(2.987*time),Math.cos(time)+0.6975*Math.sin(3.57*time)]

Leave a Reply