0
我試圖解決一個javascript拼圖立方體的旋轉速度。 繪製一個三維立方體線框，並沿着穿過其中心的軸線旋轉。旋轉物體在停止前應以「X」度/秒^ 2的速度減速。 對象應該如下到以下用戶輸入 滑動 /拖動 響應：加速或減速旋轉物體按照所述差在速度 旋轉和滑動與摩擦係數之間Y. 觸摸 /點擊 產生應該由Y（摩擦係數）進一步減速旋轉摩擦 這是我寫減少使用JS
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.translate(200,200);
var x1,x2,y1,y2,tempx,tempy,up=false,down = false,inter, interval;
function line(context, p1,p2) {
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.closePath();
context.stroke();
}
function project() {
ctx.clearRect(-500, -500, canvas.width, canvas.height);
for(var i=0;i<edges.length;i++)
{
// var x1 = vertices[edges[i][0]][0];
// var y1 = vertices[edges[i][0]][1];
// var x2 = vertices[edges[i][1]][0];
// var y2 = vertices[edges[i][1]][1];
// var z1 = vertices[edges[i][0]][3];
// var z2 = vertices[edges[i][1]][3];
// vertices[edges[i][0]][0] = x1 + 20;
// vertices[edges[i][0]][1] = y1 + 20;
// vertices[edges[i][1]][0] = x2 + 20;
// vertices[edges[i][1]][1] = y2 + 20;
line(ctx,{x:vertices[edges[i][0]][0],y:vertices[edges[i][0]][1]}, {x:vertices[edges[i][1]][0],y:vertices[edges[i][1]][1]});
}
}
function rep()
{
rotateX(tempy/3000);
rotateY(tempx/3000);
project();
}
function stop()
{
console.log(inter);
inter += 0.5;
rotateX(tempy/3000);
rotateY(tempx/3000);
project();
clearInterval(interval);
interval = setInterval(stop, inter);
}
var vertices = [[-100,-100,-100],[-100,-100,100],[-100,100,-100], [-100,100,100],[100,-100,-100],[100,-100,100],[100,100,-100],[100,100,100]];
var edges =[[0,1],[1,3],[3,2],[2,0],[4,5],[5,7],[7,6],[6,4],[0,4],[1,5],[2,6],[3,7]];
var rotateX = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var y = vertice[1];
var z = vertice[2];
vertice[1] = y * cosa - z * sina;
vertice[2] = z * cosa + y * sina;
}
};
var rotateY = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var x = vertice[0];
var z = vertice[2];
vertice[0] = x * cosa - z * sina;
vertice[2] = z * cosa + x * sina;
}
};
var rotateZ = function(theta) {
var sina = Math.sin(theta);
var cosa = Math.cos(theta);
for (var i=0; i<vertices.length; i++) {
var vertice = vertices[i];
var x = vertice[0];
var y = vertice[1];
vertice[0] = x * cosa - y * sina;
vertice[1] = y * cosa + x * sina;
}
};
rotateZ(60);
rotateY(60);
rotateZ(60);
project();
canvas.addEventListener("mousedown",function(event)
{
old = Date.now();
x1 = event.clientX;
y1 = event.clientY;
down = true;
},false);
canvas.addEventListener("mouseup",function(event)
{
up = true;
newt = Date.now();
dt = newt - old;
x2 = event.clientX;
y2 = event.clientY;
dx = Math.sqrt(Math.pow((x2-x1),2)-Math.pow((y2-y1),2));
inter = (dx/dt) * 2;
//console.log(inter);
tempx = x2 - x1;
tempy = y2 - y1;
interval = setInterval(rep, inter);
// console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
},false);
canvas.addEventListener("mousemove",function(event)
{
if(down){
newt = Date.now();
dt = newt - old;
x2 = event.clientX;
y2 = event.clientY;
// console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
rotateX((y2-y1)/3000);
rotateY((x2-x1)/3000);
project();
}
},false);
canvas.addEventListener("click",function(event)
{
if(down)
{
down = false;
}
if(up)
{
clearInterval(interval);
interval = setInterval(stop, inter);
up = false;
}
},false);
// canvas.addEventListener("swipe",function)
</script>
<body>
</html>
的代碼，我想停下來的C通過減慢線性轉速並停止。如何提高我的代碼爲
你有purescript編碼相同 –