Midterm Project นี้อ้างอิงวิธีการคำนวณจาก JavaScript Spirograph

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

• ae-expressions.docsforadobe.dev

• World of Expressions - After Effects Training - YouTube

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

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

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

ซึ่งเป็นสูตรที่ใช้สำหรับการสร้าง Spirograph ซึ่งสามารถอ้างอิงคำอธิบายสูตรการคำนวณเพิ่มเติมได้จาก JavaScript Spirograph

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

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

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

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

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 ขึ้นมาเพื่อเก็บข้อมูลของตำแหน่งของจุดที่คำนวณออกมาได้

var allPoints = new Array();

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

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 ขึ้นมาจากจุดทั้งหมดที่คำนวณได้เป็นที่เรียบร้อย

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