ฉันจะแก้ไขรอบสี่เหลี่ยมได้อย่างไร

ฉันต้องการสร้างแอนิเมชั่นแฟนซีที่จุดหนึ่งเดินทางไปรอบ ๆ สี่เหลี่ยมผืนผ้า tฉันต้องการที่จะหาตำแหน่งของจุดในเวลา

สี่เหลี่ยมผืนผ้าจะได้รับจากX, Y, และWidthHeight

มีอัลกอริทึมสำหรับสิ่งนี้หรือไม่?

ฉันใช้sin/ cosสำหรับแวดวง อะไรคือวิธีที่เทียบเท่าสำหรับสี่เหลี่ยม?

ฉันจะถือว่าคุณทีไปจาก0ที่จะ1 (หากไม่ใช่ให้เพิ่มขนาดให้เหมาะสม)

หาสัดส่วน ( 0 - 1 ) แต่ละด้านของเส้นรอบวง ( ความยาวด้านข้าง / ขอบเขตทั้งหมด )

เมื่อต้องการค้นหาว่า "เติม" ทุกด้านเท่าไหร่ในเวลาtทำซ้ำผ่านด้านลบสัดส่วนของพวกเขาจนกว่าtจะหมดไปเป็นค่าลบ ที่ขอบที่ผ่านมา (ซึ่งเกิดจากการทีจะไปลบ) เต็มไปตามสัดส่วนของ(ความยาวด้าน + ที่เหลือ) / ความยาวด้านข้าง ส่วนที่เหลือจะไม่เต็ม

ในการรับตำแหน่งเวกเตอร์ที่แน่นอนที่tให้คูณเวกเตอร์ของแต่ละด้านด้วยสัดส่วนของด้านที่เติมแล้วบวกเข้าไป

มันใช้งานได้กับรูปหลายเหลี่ยมใด ๆ จริง ๆ !

ไซน์และโคไซน์ของ t ตามลำดับพิกัด y และ x ของจุดบนวงกลมที่ทำมุม t กับแกน x ไม่จำเป็นต้องทำในสี่เหลี่ยมผืนผ้า! สี่เหลี่ยมผืนผ้าประกอบด้วยสี่บรรทัด หากtไปจาก0ถึง1ก็ไปถึงจุด(px,py)ที่t==0และไป(qx,qy)ที่t==1กับสายที่กำหนดโดย:

(l(x),l(y)) = (t*qx + (1-t)*px, t*qy + (1-t)*py)

ถ้าแทน0และ1คุณเวลาผ่านไปจากt0การt1ที่คุณสามารถทำให้ปกติเวลาแรกและจากนั้นให้ใช้สูตรข้างต้น

(l(x),l(y)) = (  ((t-t0)/(t1-t0))*qx + ((t1-t)/(t1-t0))*px, ((t-t0)/(t1-t0))*qy + ((t1-t)/(t1-t0))*py  )

ทีนี้สำหรับสี่เหลี่ยมของคุณให้แบ่งเป็นสี่กรณีด้วยifสำหรับแต่ละขอบที่ครอบคลุมหนึ่งช่วงเวลาและใช้การเคลื่อนที่ของเส้น

โปรดสังเกตว่าถ้าสี่เหลี่ยมผืนผ้าของคุณอยู่ในแนวแกนคุณจะมีค่า x หรือค่า y ซึ่งคงที่เสมอ ตัวอย่างเช่นสำหรับ t ระหว่าง0และa/4(และสมมติว่า (X, Y) อยู่ด้านล่างซ้าย)

(l(x),l(y)) = ((4*t/a)*(X+Width) + (1-4*t/a)*(X), Y+Height)

ซึ่งก็เท่ากับ:

(l(x),l(y)) = (X + (1-4*t/a)*(Width), Y+Height)

ฉันไม่รู้ว่ามีอัลกอริทึมจริงสำหรับสิ่งนี้หรือไม่ แต่ฉันทำด้วยตัวเอง (Java):

int points = 4; // for a rectangle
double progress = 0.0; // 0.0 -> 1.0 (with 1.0 being 100%)
double pp = points * progress; // This calculation would otherwise be done multiple times

int p1 = Math.floor(pp);
int p2 = Math.ceil(pp);

while (p1 >= points) p1 -= points;
while (p2 >= points) p2 -= points;

double tmp = 2 * Math.PI / points;

int p1x = Math.cos(tmp * p1);
int p1y = Math.sin(tmp * p1);
int p2x = Math.cos(tmp * p2);
int p2y = Math.sin(tmp * p2);

double p = pp - Math.floor(pp);

int x = (1.0 - p) * p1x + p * p2x; // between -1.0 and 1.0
int y = (1.0 - p) * p2x + p * p2y; // between -1.0 and 1.0

if (p == 0.0) { // prevent a weird glitch when p = 0.0 (I think this is a glitch)
    x = p1x;
    y = p1y;
}

คุณควรแปลงxและyตัวแปรเพื่อให้แอนิเมชั่นของคุณใหญ่หรือเล็กตามที่คุณต้องการ (โดยการคูณ) และตำแหน่งที่คุณต้องการ (เพิ่ม / ลบออกจาก x และ y)

ฉันไม่ได้ทดสอบรหัสนี้ แต่ฉันคิดว่ามันควรจะใช้ได้ สิ่งนี้ควรทำงานกับรูปหลายเหลี่ยมใด ๆ ที่มีจำนวนคะแนนเท่าใดก็ได้ (คุณสามารถใช้รหัสเล็กน้อยเพื่อสร้างรูปหลายเหลี่ยม)

ให้:

a=total time

perimeter = WIDTH *2 + HEIGTH * 2;

ให้เวลาT1วิธีการPเกี่ยวกับปริมณฑล (สมมติว่าตำแหน่ง rect ที่ 0,0)?

T1=T1%a; //use mod to have T1<a

distT1 = (T1*Perimeter)/a; //distance traveled in time T1

ตอนนี้มีรูปทรงเรขาคณิตและคณิตศาสตร์พื้นฐานที่ง่าย (ซึ่งหวังว่าคุณจะว่างฉัน) เพื่อรับP.xและP.yจากdistT1