摘要:前言本篇主要講坐標旋轉及其應用,這是編程動畫必不可少的技術。坐標旋轉模擬場景已知一個中心點,旋轉前物體,旋轉弧度求旋轉后物體。坐標旋轉常見的應用就是處理這種情況,將不規律方向的復雜問題簡單化。
前言
本篇主要講坐標旋轉及其應用,這是編程動畫必不可少的技術。
閱讀本篇前請先打好前面的基礎。
本人能力有限,歡迎牛人共同討論,批評指正。
模擬場景:已知一個中心點(centerX,centerY),旋轉前物體ball(x1,y1),旋轉弧度(rotation);求旋轉后物體(x2,y2)。(如下圖)
坐標旋轉就是說圍繞某個點旋轉坐標,我們要依據旋轉的角度(弧度),計算出物體旋轉前后的坐標,一般有兩種方法:
簡單坐標旋轉靈活運用前章節的三角函數知識可以很容易解決,基本思路:
計算物體初始相對于中心點的位置;
使用atan2計算弧度angle;
使用勾股定理計算半徑radius;
angle+rotation后使用cos計算旋轉后x軸位置,用sin計算旋轉后y軸位置。
下面是示例是采用這種方法的圓周運動,其中vr為ball相對于中心點的弧度變化速度,由于旋轉半徑是固定的,所以沒有在動畫循環里每次都獲取。
完整示例:簡單坐標旋轉演示
/** * 簡單坐標旋轉演示 * */ window.onload = function () { const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const ball = new Ball(); ball.x = 300; ball.y = 200; // 弧度變化速度 const vr = 0.05; // 中心點位置設定在畫布中心 const centerX = canvas.width / 2; const centerY = canvas.height / 2; // ball相對與中心點的距離 const dx = ball.x - centerX; const dy = ball.y - centerY; // ball相對與中心點的弧度 let angle = Math.atan2(dy, dx); // 旋轉半徑 const radius = Math.sqrt(dx ** 2 + dy ** 2); (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); ball.x = centerX + Math.cos(angle) * radius; ball.y = centerY + Math.sin(angle) * radius; angle += vr; ball.draw(context); }()); };坐標旋轉公式
上面的方法對于單個物體來說是很合適的,特別是角度和半徑只需計算一次的情況。但是在更動態的場景中,可能需要旋轉多個物體,而他們相對于中心點的位置各不相同。所以每一幀都要計算每個物體的距離、角度和半徑,然后把vr累加在角度上,最后計算物體新的坐標。這樣顯然不會是優雅的做法。
理想的做法是用數學方法推導出旋轉角度與位置的關系,直接每次代入計算即可。推導過程如下圖:
其實推導過程不重要,我們只需要記住如下兩組公式,其中dx2和dy2是ball結束點相對于中心點的距離,所以得到物體結束點,還要分別加上中心點坐標。
// 正向選擇 dx2 = (x1 - centerX) * cos(rotation) - (y1 - centerY) * sin(rotation) dy2 = (y1 - centerY) * cos(rotation) + (x1 - centerX) * sin(rotation) // 反向選擇 dx2 = (x1 - centerX) * cos(rotation) + (y1 - centerY) * sin(rotation) dy2 = (y1 - centerY) * cos(rotation) - (x1 - centerX) * sin(rotation)
下面是示例是采用這種方法的圓周運動,其中dx1和dy1是ball起始點相對于中心點的距離,dx2和dy2是ball結束點相對于中心點的距離。
完整示例:高級坐標旋轉演示
/** * 高級坐標旋轉演示 * */ window.onload = function () { const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const ball = new Ball(); ball.x = 300; ball.y = 200; // 弧度變化速度 const vr = 0.05; // 中心點位置設定在畫布中心 const centerX = canvas.width / 2; const centerY = canvas.height / 2; // 由于vr是固定的可以先計算正弦和余弦 const cos = Math.cos(vr); const sin = Math.sin(vr); (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); // ball相對與中心點的距離 const dx1 = ball.x - centerX; const dy1 = ball.y - centerY; // 代入公式求出ball在結束相對與中心點的距離 const dx2 = dx1 * cos - dy1 * sin; const dy2 = dy1 * cos + dx1 * sin; // 求出x2,y2 ball.x = centerX + dx2; ball.y = centerY + dy2; ball.draw(context); }()); };斜面反彈
前面的章節中我們介紹過越界的一種處理辦法是反彈,由于邊界是矩形,反彈面垂直或水平,所以可以直接將對應軸的速度取反即可,但對于非垂直或水平的反彈面這種方法是不適用的。
坐標旋轉常見的應用就是處理這種情況,將不規律方向的復雜問題簡單化。
基本思路:(旋轉前后如圖)
使用旋轉公式,旋轉整個系統,將斜面場景轉變為水平場景;
在水平場景中處理反彈;
再旋轉回來。
示例是一個球掉落到一條線上,球受到重力加速度影響下落,碰到斜面就會反彈,每次反彈都會損耗速度。
完整示例:斜面反彈示例
window.onload = function () { const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); const ball = new Ball(); // line類構造函數參數(開始點x軸坐標,開始點y軸坐標,結束點x軸坐標,結束點y軸坐標) const line = new Line(0, 0, 500, 0); // 設置重力加速度 const gravity = 0.2; // 設置反彈系數 const bounce = -0.6; ball.x = 100; ball.y = 100; line.x = 0; line.y = 200; line.rotation = 10 * Math.PI / 180; const cos = Math.cos(line.rotation); const sin = Math.sin(line.rotation); (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); ball.vy += gravity; ball.x += ball.vx; ball.y += ball.vy; // 獲取ball與line的相對位置 let x1 = ball.x - line.x; let y1 = ball.y - line.y; // 旋轉坐標系(反向) let y2 = y1 * cos - x1 * sin; // 依據旋轉值執行反彈 if (y2 > -ball.radius) { // 旋轉坐標系(反向) const x2 = x1 * cos + y1 * sin; // 旋轉速度(反向) const vx1 = ball.vx * cos + ball.vy * sin; let vy1 = ball.vy * cos - ball.vx * sin; y2 = -ball.radius; vy1 *= bounce; // 將所有東西回轉(正向) x1 = x2 * cos - y2 * sin; y1 = y2 * cos + x2 * sin; ball.vx = vx1 * cos - vy1 * sin; ball.vy = vy1 * cos + vx1 * sin; ball.x = line.x + x1; ball.y = line.y + y1; } ball.draw(context); line.draw(context); }()); };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52112.html
摘要:前言本篇主要講坐標旋轉及其應用,這是編程動畫必不可少的技術。坐標旋轉模擬場景已知一個中心點,旋轉前物體,旋轉弧度求旋轉后物體。坐標旋轉常見的應用就是處理這種情況,將不規律方向的復雜問題簡單化。 前言 本篇主要講坐標旋轉及其應用,這是編程動畫必不可少的技術。 閱讀本篇前請先打好前面的基礎。 本人能力有限,歡迎牛人共同討論,批評指正。 坐標旋轉 模擬場景:已知一個中心點(centerX...
摘要:前言上篇主要是理論的概述,本篇會多些實踐,來講講的基礎用法,并包含一些基礎三角函數的應用,推薦沒有基礎的朋友閱讀,熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。 前言 上篇主要是理論的概述,本篇會多些實踐,來講講canvas的基礎用法,并包含一些基礎三角函數的應用,推薦沒有canvas基礎的朋友閱讀,熟悉的朋友可以跳過。 本人能力...
摘要:前言上篇主要是理論的概述,本篇會多些實踐,來講講的基礎用法,并包含一些基礎三角函數的應用,推薦沒有基礎的朋友閱讀,熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。 前言 上篇主要是理論的概述,本篇會多些實踐,來講講canvas的基礎用法,并包含一些基礎三角函數的應用,推薦沒有canvas基礎的朋友閱讀,熟悉的朋友可以跳過。 本人能力...
閱讀 1093·2021-10-12 10:11
閱讀 877·2019-08-30 15:53
閱讀 2286·2019-08-30 14:15
閱讀 2961·2019-08-30 14:09
閱讀 1197·2019-08-29 17:24
閱讀 972·2019-08-26 18:27
閱讀 1283·2019-08-26 11:57
閱讀 2146·2019-08-23 18:23