Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function drawAngles () {
- var d = 50; //start line at (10, 20), move 50px away at angle of 30 degrees
- var angle = 80 * Math.PI/180;
- ctx.beginPath();
- ctx.moveTo(300,0);
- ctx.lineTo(300,600); //x, y
- ctx.moveTo(0,300);
- ctx.lineTo(600,300);
- ctx.moveTo(300,300);
- ctx.lineTo(600,100);
- ctx.arc(300,300,300,0,2*Math.PI);
- ctx.stroke();
- }
- function getAngleX (x) {
- return x = x + (50 * Math.cos(Math.PI/6));
- }
- function getAngleY(y) {
- return y = y + (50 * Math.sin(Math.PI/6));
- }
- //just animate this box to move at an angle from center down at 30 degrees
- $(".anotherBox").mouseenter(function(e) {
- pos = $(this).position();
- box2X = pos.left;
- box2Y = pos.top;
- $(this).animate({
- //top : $(window).outerHeight(),
- top : getAngleY(box2Y)+"px",
- left: getAngleX(box2X)+"px",
- }, "slow");
- });
- function getSteps(angle) {
- var cos = Math.cos(angle),
- sin = Math.sin(angle);
- return {
- x: cos -sin,
- y: sin + cos
- }
- }
- function loop() {
- var x = i * step.x, // scale using i
- y = i * step.y;
- ctx.fillRect(200 + x, 200 + y, 2, 2); // add to origin start point 200, 200
- i += 1; // increase i
- if (i < length) requestAnimationFrame(loop);
- }
- function lineAtAngle(x1, y1, length, angle) {
- ctx.moveTo(x1, y1);
- ctx.lineTo(x1 + length * Math.cos(angle), y1 + length * Math.sin(angle));
- }
- var ctx = cv.getContext('2d');
- var ball = {
- x:200, y:200,
- r : 30,
- vx : 0.4, vy:0.4
- }
- // when mouse moved that distance, ball speed norm will be 1
- var speedNorm = 10;
- function collide() {
- var dist = sq(ball.x - mx) + sq (ball.y-my);
- // too far from ball ?
- if (dist > sq(ball.r)) {
- collisionOnGoing = false;
- return;
- }
- // return if collision allready handled
- if (collisionOnGoing) return;
- var mouseDist =Math.sqrt( sq(mx-lastmx) + sq(my-lastmy) );
- // no collision if mouse too slow
- if (mouseDist<speedNorm/5) return;
- // launch the ball in current direction
- // with a speed relative to the mouse speed.
- var mouseAngle = Math.atan2(my-lastmy, mx-lastmx);
- ball.vx= (mouseDist / speedNorm ) * Math.cos(mouseAngle);
- ball.vy= (mouseDist / speedNorm ) * Math.sin(mouseAngle);
- collisionOnGoing = true;
- }
- var collisionOnGoing = false;
- function animate() {
- requestAnimationFrame(animate);
- ctx.clearRect(0,0,400,400);
- // collide ball with mouse
- collide();
- // draw ball
- ctx.beginPath();
- ctx.arc(ball.x, ball.y, ball.r, 0, 6.3);
- ctx.fill();
- ctx.closePath();
- // move
- ball.x+=ball.vx;
- ball.y+=ball.vy;
- // collide with screen
- if (ball.x>400) ball.vx=-Math.abs(ball.vx);
- if (ball.x<0) ball.vx=Math.abs(ball.vx);
- if (ball.y>400) ball.vy=-Math.abs(ball.vy);
- if (ball.y<0) ball.vy=Math.abs(ball.vy);
- }
- animate();
- // --- Mouse handling ---
- addEventListener('mousemove', mouseMove);
- var mx=-1, my=-1, lastmx=-1, lastmy=-1;
- var cvRect = cv.getBoundingClientRect();
- var cvLeft = cvRect.left;
- var cvTop = cvRect.top;
- function mouseMove(e) {
- lastmx = mx; lastmy=my;
- mx=e.clientX - cvLeft;
- my=e.clientY - cvTop;
- }
- function sq(x) { return x*x; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement