J'essaie de résoudre un puzzle javascript. Dessinez un fil de structure 3D Cube et faites-le pivoter le long des axes qui passent par son centre. L'objet en rotation doit décélérer à un taux de 'X' degrés/s^2 avant qu'il ne s'immobilise. L'objet doit répondre de la manière suivante aux entrées d'utilisateur suivants glisser/Drag : accélère ou ralentit l'objet rotatif selon la différence de vitesse entre rotation et le glissement avec le coefficient de frottement Y. tactile /Cliquez sur génère des frottements qui devrait ralentir la rotation supplémentaire par un Y (facteur de friction) Ceci est le code que je l'ai écritRéduire la vitesse de rotation d'un cube en utilisant 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>
Je veux arrêter le c en ralentissant linéairement la vitesse de rotation et arrêter. Comment améliorer mon code pour que
Avez-vous le code purescript pour la même –