# After Effects implementation of JS Spirograph

Midterm Project นี้อ้างอิงวิธีการคำนวณจาก [JavaScript Spirograph](https://www.maissan.net/articles/javascript-spirograph)

และอ้างอิง Expressions จาก

* https://ae-expressions.docsforadobe.dev/
    
* [World of Expressions - After Effects Training - YouTube](https://www.youtube.com/playlist?list=PLvr5U5ZSt6IzHyvSL9fo0M9NRPsTvra31)
    

โดยผมได้ทำการสร้าง Pesudo Effects ขึ้นมาสำหรับ Controller ต่างๆ ในการปรับค่าตัวแปรที่ใช้ในการคำนวณตำแหน่งของจุดต่างๆ ที่ใช้สำหรับวาดเส้น path ขึ้นมา

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671811353999/2e7b5bff-e93a-4ad9-9e5a-c1a0714c896d.png align="center")

โดยการคำนวณดังกล่าวใช้สูตร

x=cx+radius1×cos(θ)+radius2×cos(θ×ratio)y=cy+radius1×sin(θ)+radius2×cos(θ×ratio)

ซึ่งเป็นสูตรที่ใช้สำหรับการสร้าง Spirograph ซึ่งสามารถอ้างอิงคำอธิบายสูตรการคำนวณเพิ่มเติมได้จาก [JavaScript Spirograph](https://www.maissan.net/articles/javascript-spirograph)

ต่อมาผมได้นำ Code JS ที่ใช้คำนวณจากบนเว็บไซต์มาประยุกต์ให้สามารถใช้งานได้กับ Expression ของ After Effects ซึ่งทำงานด้วยระบบ JavaScript เช่นกัน

ซึ่งขั้นตอนแรกผมได้ทำการประกาศตัวแปร path เอาไว้สำหรับเรียกใช้ property ของ path ภายใน shape layer อย่างง่ายโดยการใช้

```js
var path = content(thisProperty.propertyGroup(1).name).path;
```

และต่อมาก็ได้ประกาศตัวแปรต่าง ๆ เพิ่มขึ้นมาสำหรับใช้งานกับ Controller

```js
var cx = effect("JS Spirograph")("Position")[0];
var cy = effect("JS Spirograph")("Position")[1];
var outr = effect("JS Spirograph")("Outer Radius");
var inr = effect("JS Spirograph")("Inner Radius");
var ratio = effect("JS Spirograph")("Ratio");
var res = effect("JS Spirograph")("Resolution");
var angle = effect("JS Spirograph")("Angle");
var closedPath = effect("JS Spirograph")("Closed Path");
```

และต่อมาก็ได้สร้างตัวแปรประเภท Array ขึ้นมาเพื่อเก็บข้อมูลของตำแหน่งของจุดที่คำนวณออกมาได้

```js
var allPoints = new Array();
```

ต่อมาจึงเริ่มให้เริ่มต้นการคำนวณ โดยมีข้อแม้ว่า จะคำนวณไปเรื่อยๆ ถ้าค่า θ น้อยกว่าหรือเท่ากับค่า PI\*2 และจพหยุดคำนวณต่อเมื่อค่า θ เท่ากับ 1 หารกับค่า Resolution ที่ตั้งเอาไว้ และให้บันทึกค่าจุดที่ได้จากการคำนวณเก็บเอาไว้ในตัวแปร allPoints

```js
for (var theta = 0 + degreesToRadians(angle); theta <= Math.PI * 2; theta += 1/res)
{
    x = cx + outr * Math.cos(theta) + outr * Math.cos(theta * ratio);
    y = cy + outr * Math.sin(theta) + inr * Math.sin(theta * ratio);
    allPoints.push([x,y]);
}
```

หลังจากนั้นจึงสั่งให้ After Effects สร้าง path ขึ้นมาจากจุดทั้งหมดที่คำนวณได้เป็นที่เรียบร้อย

```js
path.createPath(allPoints, [], [], closedPath);
```