We Keep Coding

Rotating One Object Around Another In createJS/easelJS

In easelJS, what is the best way to rotate an object around another? What I'm trying to accomplish is a method to rotate the crosshair around the circle pictured below, just like a planet orbits the sun:
I've been able to rotate objects around their own center point, but am having a difficult time devising a way to rotate one object around the center point of a second object. Any ideas?

Might make sense to wrap content in a Container. Translate the coordinates so the center point is where you want it, and then rotate the container.

To build on what Lanny is suggesting, there may be cases where you don't want to rotate the entire container. An alternative would be to use trigonometric functions and an incrementing angle to calculate the x/y position of the crosshair. You can find the x/y by using an angle (converted to radians) and Math.cos(angleInRadians) for x and Math.sin(angleInRadians) for y, the multiply by the radius of the orbit.
See this working example for reference.
Here's a complete snippet.
var stage = new createjs.Stage("stage");
var angle = 0;
var circle = new createjs.Shape();
circle.graphics.beginFill("#FF0000").drawEllipse(-25, -25, 50, 50).endFill();
circle.x = 100;
circle.y = 100;
var crosshair = new createjs.Shape();
crosshair.graphics.setStrokeStyle(2).beginStroke("#FF0000").moveTo(5, 0).lineTo(5, 10).moveTo(0, 5).lineTo(10, 5).endStroke();
stage.addChild(circle);
stage.addChild(crosshair);
createjs.Ticker.addEventListener("tick", function(){
angle++;
if(angle > 360)
angle = 1;
var rads = angle * Math.PI / 180;
var x = 100 * Math.cos(rads);
var y = 100 * Math.sin(rads);
crosshair.x = x + 100;
crosshair.y = y + 100;
stage.update();
});

Put another point respect to origin point with the same direction
var one_meter = 1 / map_resolution;
// get one meter distance from pointed points
var extra_x = one_meter * Math.cos(temp_rotation);
var extra_y = one_meter * Math.sin(-temp_rotation);
var new_x = mapXY.x + extra_x;
var new_y = mapXY.y + extra_y;
var home_point = new createjs.Shape().set({ x: new_x, y: new_y });
home_point.graphics.beginFill("Blue").drawCircle(0, 0, 10);
stage.addChild(home_point);
stage.update();

Move fixed size line with fixed angle by mouse in canvas [duplicate]

I have a ball and a stick (for a billiard game).
First the ball is placed in a position of a table. On clicking the ball the stick appears, in such a way that we can determine the angle by which stick is placed by clicking the ball (on clicking we determine the angle of mouse with respect to centre of ball and place the stick at that angle touching the ball).
So now the stick is also in the table. Now I am dragging the stick along that angle only, if dragged in another angle than the initial angle it returns false.
On drag end I am calculating the distance moved by the stick and the stick returns to the initial position touching the ball. Then I am trying to move the ball with respect to the angle of the stick and the distance moved by the stick.
The ball moves here but not with respect to any of these. That has become my issue I have updated the fiddle here:
strikerGroup.on('dragend', function () {
var strikerLastPos = strikerGroup.getAbsolutePosition();
strikerGroup.setPosition(initStrikerGrpX, initStrikerGrpY);
striker.speedX = striker.speedY = 2;
var strikerGrpDistMoved = Math.sqrt(((strikerLastPos.x - strikerGroup.getAbsolutePosition().x) * (strikerLastPos.x - strikerGroup.getAbsolutePosition().x)) + ((strikerLastPos.y - strikerGroup.getAbsolutePosition().y) * (strikerLastPos.y - strikerGroup.getAbsolutePosition().y)));
var newX = striker.getX() + (Math.cos(theta) * strikerGrpDistMoved);
var newY = striker.getY() - (Math.sin(theta) * strikerGrpDistMoved);
var strikerMove = new Kinetic.Tween({
node: striker,
duration: 5,
x: newX,
y: newY,
easing: Kinetic.Easings.EaseInOut
});
console.log(striker.getX());
strikerMove.play();
layer.batchDraw();
// strikerGroup striked the striker!!!!
});

You calculate the angle of the billiard stick to the ball like this:
var dx = ballX - stickX;
var dy = ballY - stickY;
var angle = Math.atan2(dy,dx);
Then you can move the ball along that angle like this:
var newBallX = ballX + desiredRollDistance * Math.cos(angle);
var newBallY = ballY + desiredRollDistance * Math.sin(angle);
Your desired roll distance would be based on how far the stick was drawn back away from the ball.
The further the stick was drawn back == the further the ball would travel.
You can calculate the distance from the stick to the ball like this:
var dx = ballX - stickX;
var dy = ballY - stickY;
var lengthFromStickToBall = Math.sqrt(dx*dx+dy*dy);
Here is a Demo: http://jsfiddle.net/m1erickson/B6K9z/

Animating an object from its center with sine wave in three.js

I am trying to replicate this effect: https://dribbble.com/shots/1754428-Wave?list=users&offset=5
I want to animate a plane's vertices simlarly to the link I've provided. I know that it's achieved using a sine wave propagation, but I can't figure out how to start the movement from the central point of the plane. Right now, I have something like this
(function drawFrame(ts){
window.requestAnimationFrame(drawFrame);
var vLength = plane.geometry.vertices.length;
for (var i = 0; i < vLength; i++) {
var v = plane.geometry.vertices[i];
v.z = Math.sin(ts / 500 + (v.x * (vLength / 2)) * (v.y / (vLength / 2))) * 3 + 5;
}
It works kind of OK, but notice how in the top left and bottom right corners the movement is inward, towards the centre of the plane and not outwards, as it should be. The other two corners are behaving in exactly the way I want them to be.
Here's a link to what I currently have:
http://codepen.io/gbnikolov/pen/QwjGPg
All suggestions and ideas are more then welcome!

I have found the function you are after it was fun!
(function drawFrame(ts){
var center = new THREE.Vector2(0,0);
window.requestAnimationFrame(drawFrame);
var vLength = plane.geometry.vertices.length;
for (var i = 0; i < vLength; i++) {
var v = plane.geometry.vertices[i];
var dist = new THREE.Vector2(v.x, v.y).sub(center);
var size = 5.0;
var magnitude = 2.0;
v.z = Math.sin(dist.length()/size + (ts/500)) * magnitude;
}
plane.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
}());
The circular pattern is created by creating a point as I did above called center. This is where the wave originates. We calculate distance to the center point. We then sin the distance from the center point to create the up/down. Next we add the time ts to create the movement. Finally we add some variables to tweak the size of the wave.

Finding a location on cosine curve with a specified distance to another location JS

I am working on a "rally" game where a car is drawing on hills made of cosine curves. I know the current xspeed of the car (without hills) but the problem is that I need to know the xspeed of the car on the hills to be able to draw the wheels on right places and keep the speed steady.
At the moment my solution looks like this.
function drawWheelOnBasicHill(hillStart, xLocWheel, wheelNro) {
var cw = 400 //the width of the hill
t_max = 2*Math.PI;
var scale = 80, step = cw, inc = t_max/step;
var t1 = (xLocWheel-hillStart)*inc
var y1 = -scale*0.5 * Math.cos(t1);
if(wheelNro == 1 ){ //backwheel
drawRotatedImage(wheel, car.wheel1x, car.wheel1y-y1-45,sx);
//drawing the wheel on canvas
} else { //frontwheel
drawRotatedImage(wheel, car.wheel2x, car.wheel2y-y1-45,sx);
}
for(var i=1; i<=car.speed; i++){ //finding the next xlocation of the wheel with the
//same distance (on the curve) to the previous location as the speed of the car(=the
//distance to the new point on the flat ground)
var t2 = (xLocWheel + i -hillStart)*inc
var y2 = -scale*0.5 * Math.cos(t2);
if(Math.round(Math.sqrt(i^2+(y2-y1)^2))==car.speed){
sx = sx+i; //the new xcoordinate break;
}
}
}
The for loop is the problem. It might bee too slow (animation with fps 24). I cant understand why the if statement isnt working at the moment. It works sometimes but most of the times the value of the condition newer reaches the actual xspeed.
Are there some more efficient and easier ways to do this? Or does this code contain some errors? I really appreciate your efforts to solve this! Ive been looking at this piece of code the whole day..

So i is the variable and
x2=x1+i
t2=t1+i*inc
y1=-scale*0.5 * Math.cos(t1)
y2=-scale*0.5 * Math.cos(t2)
which somehow is strange. The landscape should be time independent, that is, y should be a function of x only. The time step is external, determined by the speed of the animation loop. So a more logical model would have dx as variable and
dt = t2-t1
x2 = x1 + dx
y1 = f(x1) = -0.5*scale*cos(x1)
y2 = f(x2) = -0.5*scale*cos(x2)
and you would be looking for the intersection of
(x2-x1)^2+(y2-y1)^2 = (speed*dt)^2
which simplifies to
(speed*dt)^2=dx^2+0.25*scale^2*(cos(x1+dx)-cos(x1))^2
For small values of dx, which would be the case if dt or speed*dt is small,
cos(x1+dx)-cos(x1) is approx. -sin(x1)*dx
leading to
dx = (speed*dt) / sqrt( 1+0.25*scale^2*sin(x1)^2 )
To get closer to the intersection of curve and circle, you can then iterate the fixed point equation
dydx = 0.5*scale*(cos(x1+dx)-cos(x1))/dx
dx = (speed*dt) / ( 1+dydx^2 )
a small number of times.

How can I get the direction of rotation relative to a given point from the mouse movement in javascript?

I'm using the following functions to track mouse movement and rotate an object:
function getAngle(dx, dy) {
var angle
if (dx != 0) {
var radians = Math.atan(dy / dx) + (dx < 0 ? Math.PI : 0)
angle = radiansToDegrees(radians);
if (angle < 0) angle += 360;
} else {
angle = dy > 0 ? 90 : 270;
}
return angle;
}
function getAngleBetweenPoints(p1, p2) {
var dx = p1.x - p2.x
var dy = p1.y - p2.y
return getAngle(dx, dy)
}
$(document).mousemove(function (e) {
if (selectionBounds) {
var midpoint = new pe.Classes.Point(selectionBounds.Left + (selectionBounds.Width / 2), selectionBounds.Top + (selectionBounds.Height / 2));
var mousepoint = new pe.Classes.Point(e.pageX, e.pageY);
var angle = getAngleBetweenPoints(midpoint, mousepoint);
if (lastAngle) {
var diff = angle - lastAngle;
rotate(degreesToRadians(diff));
}
lastAngle = angle;
}
});
This works well, as long as I move the mouse slowly, and as long as the mouse doesn't get too close to the origin (midpoint). Moving too quickly causes additional spin rotations, and coming close to the origin causes unexpected changes of direction.
How can I fix this code? I really just need to know which direction the mouse is moving in (clockwise or anti-clockwise), as I can get an idea of the speed just from the change in mousepoint and then update the rotation based on that.
There are literally dozens of SO threads on topics related to this (How to get the direction (angle) of rectangle after rotating it from a pivot point, How to get cardinal mouse direction from mouse coordinates, Moving a rotated element in the direction of the rotation in JavaScript) - but I haven't been able to find anything that can answer this question, except one comment referring to this requiring the cross product, which I didn't fully understand.

http://jsfiddle.net/wRexz/3/ (click and drag to rotate the rectangle)
var angle = 0, sp = startpoint, mp = midpoint;
var p = {x:e.offsetX, y:e.offsetY};
var sAngle = Math.atan2((sp.y-mp.y),(sp.x - mp.x));
var pAngle = Math.atan2((p.y-mp.y),(p.x - mp.x));
angle = (pAngle - sAngle) * 180/Math.PI;
$("#display").text(angle);
$('#rotateme').css({ rotate: '+=' + angle });
startpoint = {x:p.x, y:p.y};
The concept here is basic trig. You find the angle from 0 of the "start point" and do the same for the "end point" or "current point". Subtract the first from the second, and that is your "delta angle".
You will still get erratic behavior around the midpoint, due to the nature of how rapidly the angles can change. One solution to this is stopping rotation when within a certain distance of the midpoint.