I am trying to create horizontal cylinder. I have found the below link which is used for creating vertical cylinder.
How to draw a cylinder on html5 canvas
can someone tell me the changes to create a horizontal cylinder?
In general, if you have a drawing you want to rotate, you can use transforms.
Transforms move, rotate (and scale) the canvas without the need to recode your desired drawing.
A Demo: http://jsfiddle.net/m1erickson/RU26r/
This transform will rotate your original drawing 90 degrees:
drawRotatedCylinder(100,100,50,30,90);
function drawRotatedCylinder(x,y,w,h,degreeAngle){
// save the context in its unrotated state
context.save();
// translate to the rotation point
// your object will rotate around the rotation point
// so if you want it to rotate from the center then
// translate to x+width/2, y+height/2
context.translate(x+w/2,y+h/2);
// rotate by 90 degrees
// rotate() takes radians, so convert to radians
// with radians==degrees*Math.PI/180
context.rotate(degreeAngle*Math.PI/180);
// draw your original shape--no recoding required!
drawCylinder(-w/2,-h/2,w,h);
// restore the context to its untransformed state
context.restore();
}
Related
I have a model with joints that individual shapes rotate around. The model is translated to the center. The matrix applied with applyMatrix() is a rotation matrix based on a quaternion value so it can rotate around without gimbal lock.
But then I want to translate and rotate around a JOINT point, which uses an offset of the model, so I can find that point, because it's just model.x/y/z + offset.x/y/z. However, this doesn't take into consideration the rotation from applyMatrix(), but I want to be able to calculate where the Joint point (x,y,z) is at whatever rotation it's in.
translate(width/2, height/2, 0);
applyMatrix(m[1][1],m[1][2],m[1][0],0,
m[2][1],m[2][2],m[2][0],0,
m[0][1],m[0][2],m[0][0],0,
0,0,0,1);
pushMatrix();
// rotate around this joint point
translate(offsetX, offsetY, offsetZ);
// !!!!
// WHAT is the new x,y,z right here??
// !!!!
rotate(amt);
translate(-offsetX, -offsetY, -offsetZ);
shape(component)
popMatrix();
Check out the coordinates section of the reference.
Specifically, it sounds like you're looking for the screenX() and screenY() functions. Or you could use the modelX() and modelY() functions to go the other way and convert your screen coordinates into model coordinates.
I have a background pixmap, basically a canvas, which I draw a bunch of
rectangles on and I need to rotate the pixmap and rectangles.
However rotating the background pixmap and the rectangles needs to be done
seperately, that is the rotation of the background pixmap gets handled via an
external library routine and I need to rotate and redraw the rectangles
on top manually.
So far I am actually able to rotate the rectangles by applying a
transformation matrix I got from Wikipedia
to each vertex. What I don't know is how to translate them that each rectangle retains its position relative to the canvas.
Here is a quick drawing for illustration of what I want to achieve:
I need to do this with C and Xlib, but I'm not necessarily looking for code but would appreciate some general hints/algorithms.
To get the translated position for the child object, you need to rotate the relative position vector for the child object, and then add it to the origin:
Pseudocode would be:
public static Vector2 OffsetByRotation(Vector2 childPos, Vector2 parentPos, float angle)
{
var relativeVector = childPos - parentPos;
relativeVector = Rotate(relativeVector, angle);
return parentPos + relativeVector;
}
Note that your example image not only rotates the parent object, but also translates it: your left image is rotated around (0, 300), but this point is then translated to (0, 0).
The requested transformation is
X' = 300 - Y
Y' = X
Is there a way to offset the world coordinates in three.js? I want to translate the center(0,0,0) by some value so the center will be at the center of my div element.
You can add a translation transform to your scene hierarchy.
scene.position.set( x, y, z );
But if you have only one object hanging of your scene you should apply the transform there.
I have a scene in Three.js (r67) with a camera that is controlled by OrbitControls.
If I now select an arbitrary point (Vector3) in the scene, what would be the best way to bring this point (programmatically) to the nearest camera position just by rotating the camera?
Example Scenario
In the below picture the left side is the starting point. The camera rotates around the green sphere (like OrbitControls) where the center of the camera is the center of the sphere. I now like to automatically rotate the camera around the sphere (doing the minimum amount of moves) so that the red box is nearest to the camera (like on the right side).
Independntly to the method of selecting the point in the scene, there's several understanding to what you mean by "bringing camera just by rotating".
I suppose, You want to rotate the camera in the way, to make the selected point in the center of the screen.
This is simple:
camera.lookAt(your_point_in_scene);
You could do this more complicated. Firstly, find the current pointing vector. By default camera looks in direction Vector(0,0,1). When we rotate it in the same rotation as a camera, we will have camera direction:
var vec = new THREE.Vector3(0,0,1);
vec.applyQuaternion(camera.rotation._quaternion);
Now we must determine angle to rotate our camera, and axis, around which we would rotate.
Axis of rotation could be found as a cross product of camera direction and vector from camera to object. Angel could be extracted from dot product:
var object_dir = object_world_point.clone().sub(camera.position);
var axis = vec.clone().crossProduct(object_dir);
var angle = Math.acos( vec.clone().dot(object_dir) / vec.length() / object_dir.length());
Having angle and axis, we could rotate camera:
camera.rotateOnAxis(axis, angle);
Or, if you want to make it smooth:
// before animation started
var total_rotation = 0,
rotateon,
avel = 0.01; // 0.01 radian per second
if(total_rotation < angle){
rotateon = avel * time_delta;
camera.rotateOnAxis(axis, angle);
total_rotation += rotateon;
}
Well that's not hard Oo
You have a center/target point for the camera. You calculate the difference from the target position to the point position and normalize that vector to the length of the camera-centerpoint-distance (i.e. something like pointdistance.multiplyScalar(cameradistance.length() / pointdistance.length()) ).
And that's it. If I understood your question correctly. All you do is "extend" the point's positioni onto your "camera movement dome" and then you have the ideal new camera position. The camera's rotation is done automatic since you always target the center point.
Aaand if you want to smoothen the camera movement a bit you can just interpolate the angle (not the positions directly) with e.g. an exponential function, whatever you prefer.
Hi Dear please follow this
Independntly to the method of selecting the point in the scene, there's several understanding to what you mean by "bringing camera just by rotating".
I suppose, You want to rotate the camera in the way, to make the selected point in the center of the screen.
This is simple:
camera.lookAt(your_point_in_scene);
You could do this more complicated. Firstly, find the current pointing vector. By default camera looks in direction Vector(0,0,1). When we rotate it in the same rotation as a camera, we will have camera direction:
var vec = new THREE.Vector3(0,0,1);
vec.applyQuaternion(camera.rotation._quaternion);
Now we must determine angle to rotate our camera, and axis, around which we would rotate.
Axis of rotation could be found as a cross product of camera direction and vector from camera to object.
Angle could be extracted from dot product:
var object_dir = object_world_point.clone().sub(camera.position);
var axis = vec.clone().crossProduct(object_dir);
var angle = Math.acos( vec.clone().dot(object_dir) / vec.length() / object_dir.length());
I know the camera is at 0,0,0 and I need to rotate the world around it, but I'm getting confused as to what order to do translations and rotations.
If have a theoretical x,y,z coordinate system where the camera is at cx,cy,cz and it's oriented to cox,coy,coz and I have a cube which sits at bx,by,bz oriented to box,boy,boz then what series of glTranslatef and glRotatef are required to rotate the box correctly and at the correct location away from the camera?
Here are the basic operations, but I have no idea what order to put them in and what other operations are required to make it show up as expected.
gl.glLoadIdentity();
// rotation and translation for cube
gl.glRotatef(box, 1,0,0);
gl.glRotatef(boy, 0,1,0);
gl.glRotatef(boz, 0,0,1);
gl.glTranslatef(bx,by,bz);
// rotation and translation for camera
gl.glRotatef(cox, 1,0,0);
gl.glRotatef(coy, 0,1,0);
gl.glRotatef(coz, 0,0,1);
gl.glTranslatef(cx,cy,cz);
// draw the cube
cube.draw(gl);
Do it the other way around: camera transform first, then your object(s):
gl.glLoadIdentity();
// rotation and translation for camera
gl.glRotatef(-cox, 1,0,0);
gl.glRotatef(-coy, 0,1,0);
gl.glRotatef(-coz, 0,0,1);
gl.glTranslatef(-cx,-cy,-cz);
// rotation and translation for cube
gl.glRotatef(box, 1,0,0);
gl.glRotatef(boy, 0,1,0);
gl.glRotatef(boz, 0,0,1);
gl.glTranslatef(bx,by,bz);
// draw the cube
cube.draw(gl);