I need to rotate objects in a smooth way like Elbert F's freeTransform does.
Please anyone review my code and help me to solve this problem.
I don't need any other code or any other plugin but some editing in my own code
I think some correct formula of angle in move function of code is responsible for smooth rotation of object.
Thanks in advance
I have done this and its a bit tricky formula of Math which helped me.
Here is updated code
var centreX = "center of rectanlge, x-coordinate", centreY = "center of rectangle, y-coordinate";
var theta = Math.atan2(centreX - dx, centreY - dy); // dx and dy are movement of mouse from the rotating element
angle = 1 * (theta * 180)/3.1415;;
element.rotate(angle, centreX, centreY);
Related
I am new to three.js, I have created a simple particle app with three.js, but the flow of particles is moving from centre. I want move particles something like displayed in the attached screenshot (top right corner to bottom left corner).
working code is at https://jseditor.io/?key=ee98d51a9b4111eab74e00224d6bfcd5.
any reference will be very helpful. Thank you.
Your updateParticles function is only changing the particles' z position:
particle.position.z += mouseY * 0.1;
if(particle.position.z>1000) particle.position.z-=2000;
If you want to move them vertically and horizontally, you're going to have to update the x and y positions as well.
particle.position.x -= mouseY * 0.1;
particle.position.y -= mouseY * 0.1;
if(particle.position.x<-500) particle.position.x+=1000;
if(particle.position.y<-500) particle.position.y+=1000;
I don't know the size of your scene, so you might need to adjust the numbers accordingly.
I'm working on a project in three.js where I have a cube and can rotate it with some buttons (arrows). The rotation works, but after some rotations it doesn't spin in the right direction anymore. Probably because the axes of the cube are shifted? But this confuses me a little bit..
I need the cube to be able to rotate up, down, left and right by some controls. This is basically how it currently works:
When a direction is pressed, say 'right', we update the mesh.rotation.y with tween.js until mesh.rotation.y is rotated in a 90 degree angle.
//SCENE, MESH,.. SETUP
...
function rotateRight(){
var start = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y, z:cubeMesh.rotation.z};
//RIGHT: y + 90°
var end = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y + degreeToRadians(90),
z:cubeMesh.rotation.z};
var tween = new TWEEN.Tween(start)
.to(end, 1000)
.easing( TWEEN.Easing.Exponential.InOut )
.onUpdate(function(){
cubeMesh.rotation.x = this.x;
cubeMesh.rotation.y = this.y;
cubeMesh.rotation.z = this.z;
})
.start();
}
function animateScene(){
requestAnimationFrame(animateScene);
TWEEN.update();
renderer.render(scene, camera);
}
What do I need to change to keep this cube rotating in the right directions? Can we fix the axes of the cube so they won't shift? I've read something about world axis vs object axis, is this something I need to change and how can I implement this?
Thanks in advance!
Sorry, cannot comment and this is for sure not the perfect answer but if you have problems with the rotation, maybe your tweening is not quite right?
What strikes my eye is that your function is only doing rotation on 1 axis and still you update all three axes. Maybe you should leave away x and z and only update the correct axis? Maybe this helps with your problem, too because you know what you are actually changing. It is just an idea , though.
Figured it out, thanks to this post:
How to rotate a 3D object on axis three.js?
Turned the object around the world axes.
I'm trying to make the so called fine tune thing. Basically this looks like: http://jsfiddle.net/r9KQK/1/
Later I'll have some audio player and this thing will help to select seconds when we use it on a tablet.
The problem is when you try to move the red circle it strangely drops when it passes top and bottom of the green circle, but not at 0 or PI/2, something like at -260..-269 and 181..190 degrees
Just try to move it and you'll see the bug.
What's wrong in my code?
Thanks in advance
update
Last update: http://jsfiddle.net/r9KQK/17/
In this example I get degrees in 0..360 range. But instead I should get delta degrees between the point where I start dragging and where I end it, but I can't work out the maths. I should also take into account the direction of red circle, so that delta will be + or - =\
update
Finally: http://jsfiddle.net/r9KQK/18/
But the code is really awful. Though it's 2:46 AM and I'm kind of sleepy, so...
But anyway I think it could be much more simplified
That's happening because your parameter to Math.atan goes to infinity when DeltaX is zero. I recommend using atan2, which automatically handles this corner case:
function(dx, dy, x, y)
{
var deltaY = this.oy + dy - fineTuning.ring.attr('cy');
var deltaX = this.ox + dx - fineTuning.ring.attr('cx');
var angle = Math.atan2( deltaY, deltaX );
// etcetera, etcetera
Or check the fiddle.
I have a need to rotate an image in a web application. In an earlier post it was explained to me that on rotation I need to 'translate' the image because the center point changes.
I'm using the HeyGrady 2D transfrom JQuery plugin for rotating and provide it the translation as was suggested, which works fine on FF/Chrome/Safari/IE9. However, on IE8 this does not work well.
Please have a look at the following link.
If you run this on FF/Chrome/Safari/IE9 the image rotates just fine (stays within the black border). However, if you run this on IE8 it will cross the black border boundary when rotating to 90 or 270 degrees.
The plugin project page mentions that "IE also lacks support for transform-origin and translate() [...] The jQuery Transform plug-in handles these calculations automatically". However, it does not seem to do so.
Anyone has any ideas what the problem may be?
Thanks!
I also ran into this same issue in IE 8 using HeyGrady's jQuery transform plugin. Here's a fix by adding this to the execMatrix function, around line 290:
Replace this line:
this.fixPosition(matrix, tx, ty);
With this:
// factor in the object's current rotation so translation remains straight up/down/left/right
// otherwise, object will be translated along the rotated axis, which produces undesirable effects
var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted
radians = rotation * (Math.PI / 180), // convert degrees to radians
newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x
newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y
this.fixPosition(matrix, newX, newY);
For example it may be used in the application of manually adjusting the hands of the clock. I guess it probably involves translating the needle (to make the end point of the needle the centre of rotation) then rotating it, then translating the needle again.
But since the needle listens to the mouse event all the time, the 1st mouse event will be captured. The result is that the needle ends up being translated and not rotated at all. Mouse event is impossible to debug too...
Any idea or code snippets that I can refer to? Using Javascript or CSS to rotate both fine.
In your example, you will want to calculate the angle between the centre of the clock face (black dot), and the current mouse position (red dot), relative to the Y axis (cardinal north if you imagine a compass).
If I remember my trig correctly, you can calculate this by using the following:
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }
In the formula, x and y are the coordinates of the two points, one of which you will know (it is the centre of the clock face), and the other you can get from the mouse move event.
Once you have the angle, you can simply translate to the the centre of the circle, rotate the canvas by the calculated amount, and draw the hand.
Update: I created a jsfiddle to illustrate the angle calculation:
http://jsfiddle.net/DAEpy/1/