Midterm Project นี้อ้างอิงวิธีการคำนวณจาก JavaScript Spirograph
และอ้างอิง Expressions จาก
โดยผมได้ทำการสร้าง 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);
