0
저는 자바 스크립트 퍼즐을 풀려고합니다. 3D 큐브 와이어 프레임을 그리고 중심을 통과하는 도끼를 따라 회전시킵니다. 회전하는 물체는 정지하기 전에 'X'도/초^2의 속도로 감속해야합니다. 와이프 /드래그 다음 사용자 입력을 다음과 같이 객체가 응답해야 가속 또는 마찰 계수와 회전 속도 와이프 사이의 차이에 따라, 회 전체 감속 Y. 터치 /클릭 내가 C를 중지하려면이 내가 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>
내 코드를 개선하는 방법 –