PannerNode.coneInnerAngle - Web APIs
ow the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. ...
...ents are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...ns, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(...
...And 3 more matches

PannerNode.coneOuterAngle - Web APIs
ow the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. ...
...ents are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...ns, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(...
...And 3 more matches

PannerNode.coneOuterGain - Web APIs
ow the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. ...
...ents are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...ns, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(...
...And 3 more matches

PannerNode.orientationX - Web APIs
ow the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. ...
...ents are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...ns, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(...
...And 3 more matches

PannerNode.orientationY - Web APIs
ow the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. ...
...ents are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...ns, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(...
...And 3 more matches

PannerNode.orientationZ - Web APIs
ow the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orientation vector. the x and z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. ...
...ents are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. ...
...ns, which are offset by the same amount in radians. however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`. it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation. // this utility converts amount of rotation around the y axis // (i.e. rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e. they range between -1 and 1 const x = math.cos(radians); const z = math.sin(...
...And 3 more matches

Animating objects with WebGL - Web APIs
mple, we'll actually rotate our square plane. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. making the square rotate let's start by making the square rotate. ...
...are plane. this example uses the glmatrix library to perform its matrix and vertex math. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. making the square rotate let's start by making the square rotate. ...
...ath. you'll need to include it if you create your own project based on this code. our sample loads a copy from a cdn in our html's <head>. making the square rotate let's start by making the square rotate. the first thing we'll need is a variable in which to track the current rotation of the square: var squarerotation = 0.0; now we need to update the drawscene() function to apply the current rotation to the square when drawing it. ...
...And 3 more matches

XRRigidTransform.matrix - Web APIs
syntax let matrix = xrrigidtransform.matrix; value a float32array containing 16 entries which represents the 4x4 transform matrix which is described by the position and orientation properties. usage notes matrix format all 4x4 transform matrices used in webgl are stored in 16-element float32arrays. ...
...0 & 0 & 0\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} this is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied. ...
...o the right-hand column, like this, resulting in a translation matrix that will transform a coordinate system by the specified distance in each dimension, with no rotational change. here px, py, and pz are the values of the x, y, and z members of the dompointreadonly position. ...
...And 3 more matches

Orientation and motion data explained - Developer guides
creen. note: on a phone or tablet, the orientation of the device is always considered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. ...
...ote: on a phone or tablet, the orientation of the device is always considered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. ...
...computer, the orientation is considered in relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. about rotation rotation is described about any given axis in terms of the number of degrees of difference between the device's coordinate frame and the earth coordinate frame, and is measured in degrees. ...
...And 3 more matches

Building up a basic demo with Babylon.js - Game development
for the box size) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. if you save and refresh now, your object will look like a square, because it's facing the camera. the good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. let's apply a little bit of rotation to the box, so we can see more than one face — again, add these lines below the previous one: box.rotation.x = -0.2; box.rotation.y = -0.4; the box looks black at the moment, because we haven't defined any material to apply to its faces. let's deal with that next. material material is that thing covering the object — the colors or texture on its surface. in our case we will use a simple ...
...you thought, right? here's how it should look: and here's the code we have created so far: you can also check it out on github. more shapes we have a box on the scene already; now let's try adding more shapes. torus let's try adding a torus — add the following lines below the previous code: var torus = babylon.mesh.createtorus("torus", 2, 0.5, 15, scene); torus.position.x = -5; torus.rotation.x = 1.5; this will create a torus and add it to the scene; the parameters are: name, diameter, thickness, tessellation (number of segments) and the scene to add it to. we also position it a bit to the left and rotate it on the x axis so it can be seen better. now let's add a material: var torusmaterial = new babylon.standardmaterial("material", scene); torusmaterial.emissivecolor = new babylon...
...the box element — we're creating the standard material, giving it a grayish color and assigning it to the torus. cylinder creating a cylinder and its material is done in almost exacly the same way as we did for the torus. add the following code, again at the bottom of your script: var cylinder = babylon.mesh.createcylinder("cylinder", 2, 2, 2, 12, 1, scene); cylinder.position.x = 5; cylinder.rotation.x = -0.2; var cylindermaterial = new babylon.standardmaterial("material", scene); cylindermaterial.emissivecolor = new babylon.color3(1, 0.58, 0); cylinder.material = cylindermaterial; the cylinder parameters are: name, height, diameter at the top, diameter at the bottom, tessellation, height subdivisions and the scene to add it to. it is then positioned to the right of the cube, rotated a bit ...
...And 2 more matches

Detecting device orientation - Web APIs
ontent when the device is rotated so that its width is greater than its height. there are two javascript events that handle orientation information. the first one is the deviceorientationevent, which is sent when the accelerometer detects a change to the orientation of the device. by receiving and processing the data reported by these orientation events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device. the second event is the devicemotionevent, which is sent when a change in acceleration was added. it is different from the deviceorientationevent because it is listening for changes in acceleration as opposed to orientation. sensors that are commonly capable of detecting devicemotionevent include sensors in laptops to protect moving sto...
...these are described in greater detail in the orientation and motion data explained article which is summarized below. the deviceorientationevent.alpha value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360. the deviceorientationevent.beta value represents the motion ...
... that they have their own event's name: devicemotion window.addeventlistener("devicemotion", handlemotion, true); what's really changed are the information provided within the devicemotionevent object passed as a parameter of the handlemotion function. the motion event contains four properties: devicemotionevent.acceleration devicemotionevent.accelerationincludinggravity devicemotionevent.rotationrate devicemotionevent.interval motion values explained the devicemotionevent objects provide web developers with information about the speed of changes for the device's position and orientation. the changes are provided along three axis (see orientation and motion data explained for details). for acceleration and accelerationincludinggravity, those axes correspond to the following: x: rep...
...And 2 more matches

Touch.radiusX - Web APIs
this may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. ...
...h events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var xradius = touchitem.radiusx; return value xradius the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface. example this example illustrates using the touch interface's touch.radiusx, touch.radiusx and touch.rotationangle properties. the touch.radiusx property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by the touch point's touch.rotationangle. likewise, the touch.radiusy property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated ...
...perties. the touch.radiusx property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by the touch point's touch.rotationangle. likewise, the touch.radiusy property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by touch.rotationangle. the touch.rotationangle is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center. the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events. when the src element is touched, the element's width and height will be calculate based on the touch point's radiusx and radiusy values and ...
...And 2 more matches

WebGLRenderingContext.getUniformLocation() - Web APIs
is example, taken from the animatescene() method in the article a basic 2d webgl animation example, obtains the locations of three uniforms from the shading program, then sets the value of each of the three uniforms. gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action. ...
...this, too, is a 2-component vertex. ...
...this, too, is a 2-component vertex. ...
...And 2 more matches

WebGL model view projection - Web APIs
this article explores how to take data within a webgl project, and project it into the proper spaces to display it on the screen. it assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. it explains the three core matrices that are typically used when composing a 3d scene: the model, view and projection matrices. note: this article is also available as an mdn content kit. it also uses a collection of utility functions available under the mdn global object. the model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation. these matrices can be composed together and grouped in special ways to make them useful for rendering compli...
...is computed and set. this matrix represents the transformations to be performed on every point making up the model in order to move it into the correct space, and to perform any other needed transforms on each point in the model. this applies not just to each vertex, but to every single point on every surface of the model as well. in this case, for every frame of the animation a series of scale, rotation, and translation matrices move the data into the desired spot in clip space. the cube is the size of clip space (-1,-1,-1) to (1,1,1) so it will need to be shrunk down in order to not fill the entirety of clip space. this matrix is sent directly to the shader, having been multiplied in javascript beforehand. the following code sample defines a method on the cubedemo object that will create the m...
... the z value which is typically ranged -1 to 1, then scale // it to be from 0 to some number, in this case 0-1. float w = (1.0 + transformedposition.z) * scalefactor; // save the new gl_position with the custom w component gl_position = vec4(transformedposition.xyz, w); the results view on jsfiddle see that small dark blue triangle? that's an additional face added to our object because the rotation of our shape has caused that corner to extend outside clip space, thus causing the corner to be clipped away. see perspective projection matrix below for an introduction to how to use more complex matrices to help control and prevent clipping. exercise if that sounds a little abstract, open up the vertex shader and play around with the scale factor and watch how it shrinks vertices more towards...
...And 2 more matches

Inputs and input sources - Web APIs
e transient input source is indeed transient—it exists only for the duration of handling the input and will as such not be listed in the input source list. facing and targeting facing is the direction in which the viewer is looking. this isn't provided using an input source. instead, it's obtained using the xrpose obtained from the current animation frame's xrframe.getviewerpose() method. the rotation component of the viewer pose's transform matrix is the viewer's facing direction. you can learn more about how to use this the viewer pose to determine the facing direction in the article viewpoints and viewers. targeting is the act of the user pointing in a particular direction using an input source. the input source's targetrayspace is an xrspace (and actually probably an xrreferencespace) w...
...the ray intersects with. if the targeting ray does intersect with an object in the scene, we can do whatever we need to with it. if you need to peel out the actual position of the target ray's origin and the ray's directionality, you can do so like this: const targetrayorigin = vec3.create(); const targetraydirection = quat.create(); mat4.gettranslation(targetrayorigin, viewerrefspace); mat4.getrotation(targetraydirection, viewerrefspace); <<<--- add diagram showing the targeting ray space (overlaid on the grip space) --->>> to determine what object is targeted, follow the targeting ray until it intersects an object. this process is called hit testing or collision detection. the approach you take to hit testing depends very much on the specific needs of your app. the first question is: are you...
... weapon. we covered the grip space above, but let's see how it can be used to draw objects representative of the hand or in the hand. since the origin of the grip space is located at the center of the hand's grip, you can use it as a starting point for rendering your object. simply apply any needed offset transform to shift the origin to the start point for rendering your object as you apply any rotation needed to orient your model correctly to align with the grip space's orientation. <<<--- diagram needed: applying transform to grip space to position/orient object --->>> advanced controllers using the gamepad object an xrinputsource has a gamepad property whose value, if not null, is a gamepad object which provides access to gamepad-style buttons, axis controllers (such as joysticks or thumbp...
...And 2 more matches

Building up a basic demo with Three.js - Game development
defined earlier. the last thing to do is to place the cube to our scene. add this line below the previous one: scene.add(cube); if you save, and refresh your web browser, our object will now look like a square, because it's facing the camera. the good thing about objects, is that we can move them on the scene, however we want. for example, rotating and scaling as we like. let's apply a little rotation to the cube, so we can see more than one face. again, adding our code below the previous: cube.rotation.set(0.4, 0.2, 0); congratulations, you've created an object in a 3d environment! this might have proven easier than you first thought? here's how it should look: and here's the code we have created so far: you can also check it out on github. more shapes and materials now we will ad...
...sible. you should check the documentation for other types of lights, like ambient, directional, hemisphere, or spot. experiment placing them on our scene, to see how they affect it. this looks a little boring though. in a game, something is usually happening. we might see animations and such. so let's try breathing a little life into these shapes, by animating them! animation we already used rotation, to adjust the position of the cube. we can also scale the shapes, or change their positions. to show animation, we need to make changes to these values inside the render loop, so they update on each frame. rotation rotating is straighforward. you add a value to a given direction of rotation on each frame. add this line of code, right after the requestanimationframe() invocation inside the rend...
... scaling we can also scale an object. applying a constant value, we would make it grow, or shrink just once. ...
...e math.sin, ending up with quite an interesting result. this scales the torus, repeating the process, as sin is a periodic function. we're wrapping the scale value in math.abs, to pass the absolute values, greater or equal to 0. as sin is between -1 and 1, negative values might render out torus in unexpected way. in this case it looks black half the time. now, onto movement. moving aside from rotation, and scaling, we can additionally move objects around the scene. add the following, again just below our requestanimationframe() invocation: dodecahedron.position.y = -7*math.sin(t*2); this will move the dodecahedron up and down, by applying the sin() value to the y axis on each frame, and a little adjustment to make it look cooler. try changing these values, to see how it affects the animatio...

nsIDOMWindowUtils
n unsigned long athirdclauseattr, in long acaretstart, in long acaretlength); obsolete since gecko 26 boolean sendtouchevent(in astring atype, [array, size_is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [optional] in boolean aignorerootscrollframe); void setcssviewport(in float awidthpx, in float aheightpx); void setdisplayport(in float axpx, in float aypx, in float awidthpx, in float aheightpx); void setresolution(in float axresolution, in float ayresolution); void sta...
...oid sendsimplegestureevent( in astring atype, in float ax, in float ay, in unsigned long adirection, in double adelta, in long amodifiers, in unsigned long aclickcount optional ); parameters atype event type. ax x offset in css pixels. ay y offset in css pixels. adirection direction, using constants defined in nsidomsimplegestureevent. adelta amount of magnification or rotation for magnify and rotation events. amodifiers modifiers pressed, using constants defined in nsidomnsevent. obsolete since gecko 15.0 using constants defined as modifier_*. aclickcount for tap gestures, the number of taps. sendtextevent() obsolete since gecko 26 this can create composition string with 3 or less clauses. use createcompositionstringsynthesizer() instead. new api doesn't have ...
...some cases, it may not even reach the target window, if one of those other windows accepts it. boolean sendtouchevent( in astring atype, [array, size_is(count)] in pruint32 aidentifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [optional] in boolean aignorerootscrollframe ); parameters atype the touch event type to dispatch to the window. this must be one of "touchstart", "touchend", "touchmove", or "touchcancel". aidentifiers an array of the identifiers for each of the touches. axs an array of x offsets in css pixel...
...s an array of the identifiers for each of the touches. axs an array of x offsets in css pixels for each touch to be sent to the window. ays an array of y offsets in css pixels for each touch to be sent to the window. arxs an array of touch x radii in css pixels for each touch to be sent to the window. arys an array of touch y radii in css pixels for each touch to be sent to the window. arotationangles an array of angles in degrees for each touch's touch oval. aforces an array of forces (from 0 to 1) indicating the amount of pressure applied at each touch point. count the number of touches; this is the number of entries in each of the preceding arrays. amodifiers modifiers pressed. using constants defined in nsidomnsevent. obsolete since gecko 15.0 using constants defined as modi...

EffectTiming.fill - Web APIs
box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. ...
...the box should be centered both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. first we'll define the two objects that describe the keyframes and the timing configuration to use, then we'll actually see the code that triggers and runs the animation when the "animatebutton" button is clicked. var boxrotationkeyframes = [ { transform: "rotate(-90deg)" }, { transform: "rotate(90deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process. in this case, we have just two keyframes; the first defines what affect is applied to the element immediately after the animation first begins to play, and the second d...
... to the left. that means that unless we specify otherwise using the fill property, the instant the animation is started the element will be rotated to the left 90°, and then it will animate smoothly from there. since by default the box isn't rotated, the last keyframe says that the animation's final frame should draw the animation rotated 90° to the right from its original orientation. var boxrotationtiming = { duration: 2000, iterations: 1, fill: "none" }; the boxrotationtiming object describes how long the animation should take to run, how many times it should run, what state the element should be in before the animation begins and after it ends, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the ...
...take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "none". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't actively running. document.getelementbyid("animatebutton").addeventlistener("click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxrotationtiming objects to describe the animation that should occur. result below we see what the result looks like. notice...

rotate3d() - CSS: Cascading Style Sheets
nction defines a transformation that rotates an element around a fixed axis in 3d space, without deforming it. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in 3d space, rotations have three degrees of liberty, which together describe a single axis of rotation. the axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin property). if, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. a non-normalizable vector, such...
... describe a single axis of rotation. the axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin property). if, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. a non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole css property. note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. syntax the amount of rotation created by rotate3d() is specified by three <number>s and one <angle>. the <number>s represent the x-, y-, and z-coordinate...
...g the whole css property. note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. syntax the amount of rotation created by rotate3d() is specified by three <number>s and one <angle>. the <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. the <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise. rotate3d(x, y, z, a) values x is a <number> describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1. ...
...r denoting the axis of rotation. the <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise. rotate3d(x, y, z, a) values x is a <number> describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1. y is a <number> describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1. z is a <number> describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1. a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. cartesian coordinates on ℝ2 this transformation applies to the 3d space and can't be rep...

rotateZ() - CSS: Cascading Style Sheets
rotatez() css function defines a transformation that rotates an element around the z-axis without deforming it. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatez(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. syntax the amount of rotation created by rotatez() is specified by an <angle>. if positive, the movement will be clockwise; if negative, it will be counter-clockwise. rotatez(a) values a is an <angle> representing the angle of the ...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...

Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "ro...
...initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey. here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); ...
...(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality. ...
...+ "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matrix rm00 = c + x*x * t, rm10 = z*s + y*x * t, rm20 = -y*s + z*x * t, rm01 = -z*s + x*y * t, rm11 = c + y*y * t, rm21 = x*s + z*y * t, rm02 = y*s + x*z * t, rm12 = -x*s + y*z * t, rm22 = c + z*z * t, to_deg = 180 / math.pi, ea = [], n = math.sqrt( rm22 * rm22 + rm20 * rm20 ); // rot...

transform - SVG: Scalable Vector Graphics
example html,body,svg { height:100% } <svg viewbox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="10" height="10" /> <!
...0" fill="yellow" transform="scale(1,4)" /> <!-- horizontal scale --> <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" /> <!-- no scale --> <circle cx="0" cy="0" r="10" fill="black" /> </svg> rotate the rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. if optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. ...
...="pink" transform="scale(4,1)" /> <!-- no scale --> <circle cx="0" cy="0" r="10" fill="black" /> </svg> rotate the rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. if optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. if optional parameters x and y are supplied, the rotation is about the point (x, y). ...
... a degrees about a given point. if optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. if optional parameters x and y are supplied, the rotation is about the point (x, y). example html,body,svg { height:100% } <svg viewbox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="10" height="10" /> <!-- rotation is done around the point 0,0 --> <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" /> <!-- rotation is done around the point 10,10 --> <rect x="0" y="0" width="10" height="10" fill="green" transform="rotate(100,10,10)" /> </svg> skewx the skewx(<a>) transform function specifies a skew transformation along the x axis by a degrees. example htm...

vector-effect - SVG: Scalable Vector Graphics
resentation attribute, vector-effect can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <foreignobject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position default value none animatable yes none this value specifies that no vector effect shall be applied, i.e. the default rendering behaviour is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint. non-scaling-stroke this value modifies the way an object is stroked. normally stro...
...on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level. non-scaling-size this value specifies a special user coordinate system used by the element and its descendants. the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space. ...
...escendants. the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of rotation and skew. also, it does not specify the origin of the user coordinate system. since this value suppresses scaling of the user coordinate system, it also has the characteristics of non-scaling-stroke. non-rotation this value specifies a special user coordinate system used by the element and its descendants. the rotation and skew of that user coordinate system is suppressed in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of scaling. also, it does not specify the origin of user coordinate system. fixed-position this value specifies a specia...
.... however, it does not specify the suppression of scaling. also, it does not specify the origin of user coordinate system. fixed-position this value specifies a special user coordinate system used by the element and its descendants. the position of user coordinate system is fixed in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of rotation, skew and scaling. when this vector effect and the transform property are defined at the same time, that property is consumed for this effect. example example: vector-effect="non-scaling-stroke" <svg viewbox="0 0 500 240"> <!-- normal --> <path d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" ...

3D collision detection - Game development
ng area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate. if you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still wraps the object, or opt to use another bounding geometry type, such as spheres (which are invariant to rotation.) the animated gif below shows a graphic example of an aabb that adapts its size to fit the rotating entity. the box constantly changes dimensions to snugly fit the entity contained inside. note: check out the bounding volumes with three.js article to see a practical implementation of this technique. point vs. aabb checking if a point is inside an aabb is pretty simple — we just need to ...
...in javascript, we'd use this: function intersect(a, b) { return (a.minx <= b.maxx && a.maxx >= b.minx) && (a.miny <= b.maxy && a.maxy >= b.miny) && (a.minz <= b.maxz && a.maxz >= b.minz); } bounding spheres using bounding spheres to detect collisions is a bit more complex than aabb, but still fairly quick to test. the main advantage of spheres is that they are invariant to rotation, so if the wrapped entity rotates, the bounding sphere would still be the same. their main disadvantage is that unless the entity they are wrapping is actually spherical, the wrapping is usually not a good fit (i.e. wrapping a person with a bounding sphere will cause a lot of false positives, whereas an aabb would be a better match). point vs. sphere to check whether a sphere contains a point w...
... (z - sphere.z) * (z - sphere.z)); return distance < sphere.radius; } using a physics engine 3d physics engines provide collision detection algorithms, most of them based on bounding volumes as well. the way a physics engine works is by creating a physical body, usually attached to a visual representation of it. this body has properties such as velocity, position, rotation, torque, etc., and also a physical shape. this shape is the one that is considered in the collision detection calculations. we have prepared a live collision detection demo (with source code) that you can take a look at to see such techniques in action — this uses the open-source 3d physics engine cannon.js. ...

KeyboardEvent.code - Web APIs
stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using. shipsize contains the size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play field. moverate and turnrate are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). finally, spaceship is set to refer to the element with the id "spaceship", which is the svg polygon representing the ship the player controls. let shipsize = { width: 30, height: 30 }; let position = { x: 200, y: 200 ...
... function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updati...
... svg transform. function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle. window.addeventlistener("keydown", function(event) { if (event.defaultprevented) { return; // do nothing if event already handled } switch(event.code) { case "keys": case "arrowdown": // handle "back" updateposition(-moverate); break; case "keyw": case "arrowup": // ha...

Touch() - Web APIs
reen, including any scroll offset. "pagey", optional and defaulting to 0, of type double, that is the vertical position of the touch on the client window of the user's screen, including any scroll offset. "radiusx", optional and defaulting to 0, of type float, that is the radius of the ellipse which most closely circumscribes the touching area (e.g. ...
...e touching area (e.g. finger, stylus) along the axis indicated by rotationangle, in css pixels of the same scale as screenx; 0 if no value is known. the value must not be negative. "radiusy", optional and defaulting to 0, of type float, that is the the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by rotationangle, in css pixels of the same scale as screeny; 0 if no value is known. the value must not be negative. "rotationangle", optional and defaulting to 0, of type float, that is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center; 0 if no value is known. the value must be greater than or equal to 0 and less than 90. if the ellipse descri...
...reeny; 0 if no value is known. the value must not be negative. "rotationangle", optional and defaulting to 0, of type float, that is the angle (in degrees) that the ellipse described by radiusx and radiusy is rotated clockwise about its center; 0 if no value is known. the value must be greater than or equal to 0 and less than 90. if the ellipse described by radiusx and radiusy is circular, then rotationangle has no effect. the user agent may use 0 as the value in this case, or it may use any other value in the allowed range. (for example, the user agent may use the rotationangle value from the previous touch event, to avoid sudden changes.). ​"force", optional and defaulting to 0, of type float, that is the relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and ...

Touch - Web APIs
this can be helpful when dealing with imprecise pointing devices such as fingers. these values are set to describe an ellipse that as closely as possible matches the entire area of contact (such as the user's fingertip). ...
... touch area touch.radiusx read only returns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screenx. touch.radiusy read only returns the y radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screeny. touch.rotationangle read only returns the angle (in degrees) that the ellipse described by radiusx and radiusy must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface. touch.forceread only returns the amount of pressure being applied to the surface by the user, as a float between 0.0 (no pressure) and 1.0 (maximum pressure). methods this interface ha...
...ressure being applied to the surface by the user, as a float between 0.0 (no pressure) and 1.0 (maximum pressure). methods this interface has no method and no parent, and doesn't inherits or implements any method. specifications specification status comment touch events – level 2the definition of 'touch' in that specification. draft added radiusx, radiusy, rotationangle, force properties, as well as the touch() constructor. touch eventsthe definition of 'touch' in that specification. recommendation initial definition. ...

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
want the second object to have relative to the position and orientation of the object on which you call getoffsetreferencespace(). then, when drawing the scene, you can use the offset reference space to not only position objects relative to one another, but to apply the needed transforms to render objects properly based upon the viewer's position. this is demonstrated in the example implementing rotation based on non-xr inputs, which demonstrates a way to use this method to let the user use their mouse to pitch and yaw their viewing angle. syntax offsetreferencespace = xrreferencespace.getoffsetreferencespace(originoffset); parameters originoffset an xrrigidtransform specifying the offset to the origin of the new reference space. these values are added to the position and orientation of th...
..., z:1.0, w: 1.0})); xrsession.requestanimationframe(drawframe); }); in this code, we obtain a local reference space, then use getoffsetreferencespace() to create a new space whose origin is adjusted to a position given by startposition and whose orientation is looking directly along the z azis. then the first animation frame is requested using xrsession's requestanimationframe(). implementing rotation based on non-xr inputs the input controls supported directly by webxr are all dedicated vr or ar input devices. in order to use mouse, keyboard, or other input devices to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements. this is another good use case for getoffs...
... user to move through the space—you'll need to write some code to read the inputs and move perform the movements. this is another good use case for getoffsetreferencespace(). in this example, we'll show code that lets the user look around by right-clicking and moving the mouse to change the viewing angle. first, we add an event handler for mousemove events, which calls our code to perform the rotation if the right mouse button is down. note also that we set oncontextmenu up to be ignored by calling preventdefault() on those events. this prevents the right-clicks from causing the context menu from appearing in the browser. canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx,...

conic-gradient() - CSS: Cascading Style Sheets
<position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axi...
...rules as color stops in svg gradients. description as with any gradient, a conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element it applies to, or size of the <image> is set to something other than the element size. to create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, conic-gradient() won't work on background-color and other properties that use the <color> data type. why is it called a "conic" gradient? if the color stops are much lighter on one side than the other, it can look like a c...
...adient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. a conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. brows...

hue-rotate() - CSS: Cascading Style Sheets
ource for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax hue-rotate(angle) parameters angle the relative change in hue of the input sample, specified as an <angle>. a value of 0deg leaves the input unchanged. ...
...ithub repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax hue-rotate(angle) parameters angle the relative change in hue of the input sample, specified as an <angle>. a value of 0deg leaves the input unchanged. a positive hue rotation increases the hue value, while a negative rotation decreases the hue value. ...
... angle the relative change in hue of the input sample, specified as an <angle>. a value of 0deg leaves the input unchanged. a positive hue rotation increases the hue value, while a negative rotation decreases the hue value. the lacuna value for interpolation is 0. there is no minimum or maximum value; hue-rotate(ndeg) evaluates to n modulo 360. examples hue-rotate(-90deg) /* same as 270deg rotation */ hue-rotate(0deg) /* no effect */ hue-rotate(90deg) /* 90deg rotation */ hue-rotate(.5turn) /* 180deg rotation */ hue-rotate(405deg) /* same as 45deg rotation */ specifications specification status filter effects module level 1the definition of 'hue-rotate()' in that specification. working draft ...

image-orientation - CSS: Cascading Style Sheets
es */ image-orientation: none; image-orientation: from-image; /* use exif data from the image */ /* global values */ image-orientation: inherit; image-orientation: initial; image-orientation: unset; /* obsolete values. obsolete since gecko 63 */ image-orientation: 90deg; /* rotate 90deg */ image-orientation: 90deg flip; /* rotate 90deg, and flip it horizontally */ image-orientation: flip; /* no rotation, only applies a horizontal flip */ syntax values none default initial value. will not apply any additional image rotation; the image is oriented as encoded or as other css property values dictate. from-image the exif information contained in the image will be used to rotate the image appropriately. <angle> obsolete since gecko 63 the <angle> of rotation to apply to the image. it is ro...
...e image is oriented as encoded or as other css property values dictate. from-image the exif information contained in the image will be used to rotate the image appropriately. <angle> obsolete since gecko 63 the <angle> of rotation to apply to the image. it is rounded to the nearest 90deg (0.25turn). flip obsolete since gecko 63 the image is flipped horizontally (i.e., reflected) after the rotation given by the <angle> value is applied. if no <angle> is given, 0deg is used. description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. it should not be used for arbitrary rotations. for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a transform property...
...ed. if no <angle> is given, 0deg is used. description this property is intended only to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. it should not be used for arbitrary rotations. for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a transform property with the rotate keyword to specify rotation. this includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation. if used in conjunction with other css properties, such as a <transform-function>, any image-orientation rotation is applied before any other transformations. formal definition initial value0degapplies toall elementsinheritedyescomputed valuean <an...

repeating-conic-gradient() - CSS: Cascading Style Sheets
<position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axi...
...ize the <image> is set to if it's set to something other than the element's size. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-conic-gradient() won't work on background-color and other properties that use the <color> data type. to create a conic gradient that doe not repeat, make the gradient a full 360 degree rotation, or use the conic-gradient() function instead. understanding repeating conic gradients the repeating-conic-gradient syntax is similar to the conic-gradient() and repeating-radial-gradient() syntax. like the non-repeating conic-gradient, the color-stops are placed around a gradient arc. like the repeating radial gradient, the size of the repeating section is the first color stop subtracted fro...
...e of a circle, rather than on the gradient line emerging from the center of the gradient. the colors transition as as if spun around the center of a circle, starting at the top if no from <angle> is declared, and going clockwise for the the size of the angle that is the different between the largest and smallest color angle, then repeating. a repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an <angle>. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. browsers supporting repeating conic gradients ...

rotate - CSS: Cascading Style Sheets
the rotate css property allows you to specify rotation transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property. syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis. equivalent to a rotate() (2d rotation) function. x, y, or z axis name plus angle value the name of the axis you want to rotate the affected element ar...
... angle value an <angle> specifying the angle to rotate the affected element through, around the z axis. equivalent to a rotate() (2d rotation) function. x, y, or z axis name plus angle value the name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an <angle> specifying the angle to rotate the element through. equivalent to a rotatex()/rotatey()/rotatez() (3d rotation) function. vector plus angle value three <number>s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an <angle> specifying the angle to rotate the element through. equivalent to a rotate3d() (3d rotation) function. none specifies that no rotation should be applied. formal definition initial valuenoneapplies totransformable elements...
...ent to a rotate3d() (3d rotation) function. none specifies that no rotation should be applied. ...

rotate() - CSS: Cascading Style Sheets
on that rotates an element around a fixed point on the 2d plane, without deforming it. its result is a <transform-function> data type. the fixed point that the element rotates around — mentioned above — is also known as the transform origin. this defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property. syntax the amount of rotation created by rotate() is specified by an <angle>. if positive, the movement will be clockwise; if negative, it will be counter-clockwise. a rotation by 180° is called point reflection. rotate(a) values a is an <angle> representing the angle of the rotation. a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. cartesian coordinates on ℝ2 ho...
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-r...
...nd-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. ...

rotateX() - CSS: Cascading Style Sheets
on defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatex(a) is equivalent to rotate3d(1, 0, 0, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. syntax the amount of rotation created by rotatex() is specified by an <angle>. if po...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...

rotateY() - CSS: Cascading Style Sheets
tion defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatey(a) is equivalent to rotate3d(0, 1, 0, a). note: unlike rotations in the 2d plane, the composition of 3d rotations is usually not commutative. in other words, the order in which the rotations are applied impacts the result. syntax the amount of rotation created by rotatey() is specified by an <angle>. if po...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...

SVG animation with SMIL - SVG: Scalable Vector Graphics
although chrome 45 deprecated smil in favor of css animations and web animations, the chrome developers have since suspended that deprecation. firefox 4 introduced support for animating svg using synchronized multimedia integration language (smil). smil allows you to: animate the numeric attributes of an element (x, y, ...) animate transform attributes (translation or rotation) animate color attributes follow a motion path this is done adding an svg element like <animate> inside the svg element to animate. below are examples for the four different ways. animating attributes of an element the following example animates the cx attribute of a circle. to do so, we add an <animate> element inside the <circle> element. the important attributes for <animate> are: attributename th...
...0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes. this new element is necessary because we are not animating a simple attribute like x which is just a number. rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. in the example below, we animate the center of the rotation and the angle. <svg width="300" height="100"> <title>svg smil animate with transform</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="...
...the path is defined the same way as in <path>. you can set the attribute to define whether the object rotates following the tangent of the path. example 1: linear motion in this example, a blue circle bounces between the left and right edges of a black box, over and over again, indefinitely. the animation here is handled by the <animatemotion> element. in this case, we're ...

Paths - SVG: Scalable Vector Graphics
ircles or ellipses. for a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). along either of those circles, there are two possible paths that can be taken to connect the points—so in any situation, there are four possible arcs available. because of that, arcs require quite a few parameters: a rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy at its start, the arc element takes in two parameters for the x-radius and y-radius. if needed, see <ellipse>s and how they behave. the final two parameters designate the x and y coordinates to end the stroke. together, these four values define the basic structure of the arc. the third parameter describes th...
...arge-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy at its start, the arc element takes in two parameters for the x-radius and y-radius. if needed, see <ellipse>s and how they behave. the final two parameters designate the x and y coordinates to end the stroke. together, these four values define the basic structure of the arc. the third parameter describes the rotation of the arc. this is best explained with an example: <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 315 l 110 215 a 30 50 0 0 1 162.55 162.45 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> the example shows a <path> element th...
... l 110 215 a 30 50 0 0 1 162.55 162.45 l 172.55 152.45 a 30 50 -45 0 1 215.1 109.9 l 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> the example shows a <path> element that goes diagonally across the page. at its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). in the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. for the second arc, though, the x-axis-rotation is set to -45 degrees. this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image. for the unrotated ellipse in the image above, there are only two dif...

Bounding volume collision detection with THREE.js - Game development
sh( new three.torusknotgeometry(0.5, 0.1), new three.meshnormalmaterial({}) ); var knotboxhelper = new three.boxhelper(knot, 0x00ff00); scene.add(knotboxhelper); in order to also have our actual box3 bounding box, we create a new box3 object and make it assume the boxhelper's shape and position. ...
... a new box3 object and make it assume the boxhelper's shape and position. var box3 = new three.box3(); box3.setfromobject(knotboxhelper); if we change the mesh position, rotation, scale, etc. we need to call the update() method so the boxhelper instance matches its linked mesh. we also need to call setfromobject again in order to make the box3 follow the mesh. knot.position.set(-3, 2, 1); knot.rotation.x = -math.pi / 4; // update the bounding box so it stills wraps the knot knotboxhelper.update(); box3.setfromobject(knotboxhelper); performing collision tests is done in the same way as explained in the above section — we use our box3 object in the same way as described above. // box vs box box3.intersectsbox(otherbox3); // box vs point box3.containspoint(point.position); demos there are tw...

Building up a basic demo with the PlayCanvas engine - Game development
function (deltatime) { timer += deltatime; // code executed on every frame }); the callback takes the deltatime as the parameter, so we have the relative time that has passed since the previous invocation of this update. for time based animations we'll use a timer variable that will store the time that has passed since the start of the app by adding the deltatime to it on every update. rotation rotating is quite easy — all you need to do is to add a defined value to the given direction of rotation on each frame. add this line of code inside the app.on("update") callback function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and ...
...bs(math.sin(timer)), 1); here we are using math.sin to scale the cylinder in a cycle, bigger and smaller again. we're wrapping the y scale value in math.abs to pass the absolute values (greater or equal to 0); sin varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.) now onto the movement part. moving beside rotation and scaling we can also move objects around the scene. add the following code to achieve that. cone.setposition(2, math.sin(timer*2), 0); this will move the cone up and down by applying the sin value to the y axis on each frame, with a little bit of adjustment to make it look cooler. try changing the value to see how it affects the animation. conclusion here's the final code listing, along w...

Quaternion - MDN Web Docs Glossary: Definitions of Web-related terms
a quaternion is the quotient of two 3d vectors and is used in 3d graphics and in accelerometer-based sensors to represent orientation or rotational data. while mathematical quaternions are more involved than this, the unit quaternions (or rotational quaternions) used to represent rotation while using webgl or webxr, for example, are represented using the same syntax as a 3d point. as such, the type dompoint (or dompointreadonly) is used to store quaternions. ...
... orientation or rotational data. while mathematical quaternions are more involved than this, the unit quaternions (or rotational quaternions) used to represent rotation while using webgl or webxr, for example, are represented using the same syntax as a 3d point. as such, the type dompoint (or dompointreadonly) is used to store quaternions. ...

HTMLIFrameElement.sendTouchEvent()
warning: removed in firefox 65. the sendtouchevent() method of the htmliframeelement allows you to fake a touch event and send it to the browser <iframe>'s content. note: this method is available for touch-enabled devices only. syntax instanceofhtmliframeelement.sendtouchevent(type, x, y, rx, ry, rotationangles, forces, count, modifiers); returns void. parameters type a string representing the event type. possible values are touchstart, touchend, touchmove, or touchcancel. x an array of numbers representing the x position of each touch point relative to the browser <iframe>'s visible area in css pixels. y an array of numbers representing the y position of each touch point relative to the brows...
...position of each touch point relative to the browser <iframe>'s visible area in css pixels. y an array of numbers representing the y position of each touch point relative to the browser <iframe>'s visible area in css pixels. rx an array of numbers representing the x radius of each touch point in css pixels. ry an array of numbers representing the y radius of each touch point in css pixels. rotationangles an array of numbers representing the angle of each touch point in degrees. forces an array of numbers representing the intensity of each touch in the range 0–1. count the number of touches that should be performed. modifiers a number representing a key pressed at the same time the mouse button was clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 16 : alt gr 32 : cap...

nsIScreen
long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes attribute type description colordepth long the screen's color depth; this is the number of bits used to represent a color. read only. pixeldepth long the screen's pixel depth; this is the number of bits used to represent a pixel. read only. rotation unsigned long the screen's current rotation; you may set this to any of the values listed in screen rotation constants. this will only have an effect on platforms that support screen rotation. gecko 1.9.2 note starting in gecko 1.9.2, gecko running on microsoft windows reports 24 bits per pixel instead of 32 bits per pixel on 8-bits per color component displays, since this is ty...
...onent displays, since this is typically what the caller is actually looking for. constants screen brightness constants constant value description brightness_dim 0 the screen is fully dimmed (that is, off). brightness_full 1 the screen is at full brightness. brightness_levels 2 the number of different brightness levels. screen rotation constants requires gecko 13.0(firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) constant value description rotation_0_deg 0 0° of rotation (that is, no rotation, or default orientation). rotation_90_deg 1 90° of rotation. rotation_180_deg 2 180° of rotation. rotation_270_deg 3 270° of rotation. methods getav...

CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix. syntax void ctx.rotate(angle); parameters angle the rotation angle, clockwise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, ...
...the non-rotated rectangle is gray, and the rotated rectangle is red. rotating a shape around its center this example rotates a shape around its center point. to do this, the following steps are applied to the matrix: first, translate() moves the matrix's origin to the shape's center. rotate() rotates the matrix by the desired amount. finally, translate() moves the matrix's origi...

DOMMatrix - Web APIs
it is a mutable version of the dommatrixreadonly interface. this interface should be available inside web workers, though some implementations don't allow it yet. constructor dommatrix() creates and returns a new dommatrix object. properties this interface inherits properties from dommatrixreadonly, though some of these properties are altered to be mutable. is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. if false, the matrix is 3d. isidentity read only a boolean whose value is true if the matrix is the identity matrix. ...
... m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth. a, b, c, d, e, f double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2d rotations and translations. these are aliases for specific components of a 4×4 matrix, as shown below. 2d 3d equivalent a m11 b m12 c m21 d m22 e m41 f m42 methods this interface includes the following methods, as well as the methods it inherits from dommatrixreadonly. ...

DOMMatrixReadOnly - Web APIs
this interface should be available inside web workers, though some implementations doesn't allow it yet. properties this interface doesn't inherit any properties. ...
... m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth. a, b, c, d, e, f double-precision floating-point values representing the components of a 4×4 matrix which are required in order to perform 2d rotations and translations. these are aliases for specific components of a 4×4 matrix, as shown below. 2d 3d equivalent a m11 b m12 c m21 d m22 e m41 f m42 methods this interface doesn't inherit any methods. none of the following methods alter the original matrix. domma...

GestureEvent - Web APIs
rface specific to webkit which gives information regarding multi-touch gestures. events using this interface include gesturestart, gesturechange, and gestureend. gestureevent derives from uievent, which in turn derives from event. constructor gestureevent() creates a gestureevent object. properties this interface also inherits properties of its parents, uievent and event. gestureevent.rotation read only change in rotation (in degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. initial value: 0.0 gestureevent.scale read only distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the gesture. values be...
... nochrome android no support nofirefox android no support noopera android no support nosafari ios full support 2samsung internet android no support norotation non-standardchrome no support noedge no support nofirefox no support noie no support noopera no support nosafari full support 9we...

MSGestureEvent - Web APIs
) constructor. constructor msgestureevent() creates an msgestureevent object. properties this interface also inherits properties of its parents, uievent and event. msgestureevent.expansion read only the diameter of the gesture area. for example, the distance between fingers. msgestureevent.gestureobject read only returns the msgesture object for this gesture event. msgestureevent.rotation read only amount of rotation (in radians) since the previous msgestureevent of the current gesture. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. msgestureevent.scale read only the difference in scale (for zoom gestures) from the previous msgestureevent of the current gesture. msgestureevent.translationx read only distance traversed along th...
... nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support norotation non-standardchrome no support noedge no support 12 — 79firefox no support noie full support 10opera no support nosafari no support nowebview andro...

SVGTransform - Web APIs
present the translation amounts (a=1, b=0, c=0 and d=1). for svg_transform_scale, a and d represent the scale amounts (b=0, c=0, e=0 and f=0). for svg_transform_skewx and svg_transform_skewy, a, b, c and d represent the matrix which will result in the given skew (e=0 and f=0). for svg_transform_rotate, a, b, c, d, e and f together represent the matrix which will result in the given rotation. when the rotation is around the center point (0, 0), e and f will be zero. methods name & arguments return description setmatrix(in svgmatrix matrix) void sets the transform type to svg_transform_matrix, with parameter matrix defining the new transformation. note that the values from the parameter matrix are copied. exceptions: ...
...h parameters sx and sy defining the scale amounts. exceptions: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setrotate(in float angle, in float cx , in float cy) void sets the transform type to svg_transform_rotate, with parameter angle defining the rotation angle and parameters cx and cy defining the optional center of rotation. exceptions: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. setskewx(in float angle) void sets the transform type to svg_transform_skewx, with parameter angle defining the amount...

TouchEvent - Web APIs
was fired. touchevent.targettouchesread only a touchlist of all the touch objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event. touchevent.touches read only a touchlist of all the touch objects representing all current points of contact with the surface, regardless of target or changed status. touchevent.rotation read only change in rotation (in degrees) since the event's beginning. positive values indicate clockwise rotation; negative values indicate anticlockwise rotation. initial value: 0.0 touchevent.scale read only distance between two digits since the event's beginning. expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. values be...
...ts) that were removed from the surface can be found in the touchlist specified by the changedtouches attribute. touchmove sent when the user moves a touch point along the surface. the event's target is the same element that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element. this event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change. note: the rate at which touchmove events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. you must not rely on a specific granularity of these events. touchcancel sent when a touch point has been disrupted in some way. there are several possible reasons why this might happen (and the exact rea...

Using Touch Events - Web APIs
for the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface). together, these interfaces define a relatively low-level set of features, yet they support many kinds of touch-based interaction, including the familiar multi-touch gestures such as multi-finger swipe, rotation, pinch and zoom. from interfaces to gestures an application may consider different factors when defining the semantics of a gesture. for instance, the distance a touch point traveled from its starting location to its location when the touch ended. another potential factor is time; for example, the time elapsed between the touch's start and the touch's end, or the time lapse between two consecut...
...browser support lagging although additional implementations are in progress. some new features regarding a touch point's touch area - the area of contact between the user and the touch surface - are in the process of being standardized. the new features include the x and y radius of the ellipse that most closely circumscribes a touch point's contact area with the touch surface. the touch point's rotation angle - the number of degrees of rotation to apply to the described ellipse to align with the contact area - is also be standardized as is the amount of pressure applied to a touch point. what about pointer events? the introduction of new input mechanisms results in increased application complexity to handle various input events, such as key events, mouse events, pen/stylus events, and touch ev...

Fundamentals of WebXR - Web APIs
es of freedom the term degrees of freedom is an indication of how much freedom of movement the user has within the virtual world. this is directly related to how many types of movement the webxr hardware configuration is capable of recognizing and reproducing into the virtual scene. diagram showing the movements possible with 3 degree of freedom hardware: yaw, roll, and pitch. freedom of rotational movement the first three degrees of freedom are rotational. the rotational degrees of freedom are: pitch: looking up and down yaw: looking left and right roll: tilting left and right in all of these cases, the viewer remains in the same location in space while pivoting on one or more of the three axes to alter the direction in which they're looking. a system with two degrees of freedom ...
...ft and right in all of these cases, the viewer remains in the same location in space while pivoting on one or more of the three axes to alter the direction in which they're looking. a system with two degrees of freedom can sense when the user looks left and right or up and down, but can't report any other kind of movement. a typical baseline headset offers three degrees of freedom, recognizing rotation around all three axes. this is often referred to by the shorthand 3dof. freedom of translational movement the other three degrees of freedom are translational, providing the ability to sense movement through space: forward and backward, left and right, up and down. support for all six degrees of freedom is referred to as 6dof. <<<--- replace image with an svg for future translation work and ...

XRView - Web APIs
e being drawn is identified // by view.eye. } special view transforms there are a few special transforms that are used on the view while rendering and lighting a scene. ...
...2], w: inverseorientation[3]}); mat4.copy(mousematrix, newtransform.matrix); // create a new reference space that transforms the object to the new // position and orientation, returning the new reference space. return refspace.getoffsetreferencespace(newtransform); } this code is broken into four sections. in the first, the quaternion inverseorientation is computed. this represents the rotation of the object given the values of mousepitch (rotation around the object's reference's space's x axis) and mouseyaw (rotation around the object's y axis). the second section computes the "up" vector for the object. this vector indicates the direction which is "up" in the scene overall, but in the object's reference space. the third section creates the new xrrigidtransform, specifying a point pr...

Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow. this guide provides an introduction to using transforms. css transforms are implemented using a set of css properties that let you apply affine linear transformations to html elements. these transformations include rotation, skewing, scaling, and translation both in the plane and in the 3d space. only elements positioned by the box model can be transformed. as a rule of thumb, an element is positioned by the box model if it has display: block. css transforms properties two major properties are used to define css transforms: transform and transform-origin transform-origin specifies the position of the origin. by default, it is at the center...
...he box model can be transformed. as a rule of thumb, an element is positioned by the box model if it has display: block. css transforms properties two major properties are used to define css transforms: transform and transform-origin transform-origin specifies the position of the origin. by default, it is at the center of the element and can be moved. it is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter. transform specifies the transforms to apply to the element. it is a space-separated list of transforms, which are applied one after the other, as requested by the composition operation. composite transforms are effectively applied in order from right to left. examples here is an unaltered image of the mdn logo: rotating her...

<transform-function> - CSS: Cascading Style Sheets
function> data type is specified using one of the transformation functions listed below. each function applies a geometric operation in either 2d or 3d. matrix transformation matrix() describes a homogeneous 2d transformation matrix. matrix3d() describes a 3d transformation as a 4×4 homogeneous matrix. perspective perspective() sets the distance between the user and the z=0 plane. rotation rotate() rotates an element around a fixed point on the 2d plane. rotate3d() rotates an element around a fixed axis in 3d space. rotatex() rotates an element around the horizontal axis. rotatey() rotates an element around the vertical axis. rotatez() rotates an element around the z-axis. scaling (resizing) scale() scales an element up or down on the 2d plane. scale3d() scales ...
...plication. thus, each coordinate changes based on the values in the matrix: ac bd xy = ax+cy bx+dy it is even possible to apply several transformations in a row: a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2 with this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (in fact, all transformations that are linear functions can be described.) composite transformations are effectively applied in order from right to left. however, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. the translation vector (tx, ty) must be expressed separately, as two additional parameters. not...

Mouse gesture events - Developer guides
he mozrotategesturestart and mozrotategestureupdate events. the delta value is the cumulative change over the course of handling the entire sequence of rotate gesture events. event fields mouse gesture events have additional fields providing information about the gesture. these are: direction the direction in which the swipe moved. delta the amount by which the gesture moved; for rotation, this value is in degrees. positive values are clockwise and negative values are counterclockwise. for magnification, this value is implementation-specific, but the value is positive for zooming in and negative for zooming out. direction constants the direction field in the gesture events can take one of the following values: simplegestureevent.direction_left leftward swipe. simpleg...
...for zooming in and negative for zooming out. direction constants the direction field in the gesture events can take one of the following values: simplegestureevent.direction_left leftward swipe. simplegestureevent.direction_right rightward swipe. simplegestureevent.direction_up upward swipe. simplegestureevent.direction_down downward swipe. simplegestureevent.rotation_counterclockwise counter-clockwise rotation. simplegestureevent.rotation_clockwise clockwise rotation. ...

d - SVG: Scalable Vector Graphics
than with a bézier curve. command parameters notes a (rx ry angle large-arc-flag sweep-flag x y)+ draw an arc curve from the current point to the coordinate x,y. the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. large-arc-flag allows to chose one of the large arc (1) or small arc (0), sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0) ...
...ge-arc-flag sweep-flag dx dy)+ draw an arc curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. the center of the ellipse used to draw the arc is determined automatically based on the other parameters of the command: rx and ry are the two radii of the ellipse; angle represents a rotation (in degrees) of the ellipse relative to the x-axis; large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. large-arc-flag allows a choice of large arc (1) or small arc (0), sweep-flag allows a choice of a clockwise arc (1) or anticlockwise arc (0) the current point gets its ...

rotate - SVG: Scalable Vector Graphics
the rotate attribute specifies how the animated element rotates as it travels along a path specified in an <animatemotion> element. usage notes value auto | auto-reverse | <number> default value 0 animatable no the auto and auto-reverse values allow the animated element's rotation to change dynamically as it travels along the path. if the value of rotate is auto, the element turns to align its right-hand side in the current direction of motion. if the value is auto-reverse, it turns its left-hand side in the current direction of motion. setting rotate's value to a number specifies a constant rotation, in degrees, that does not change with the animation. the default value of 0 keeps the animated element in its original orientation. examples sv...
...ackwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment svg animations level 2the definition of 'rotate' ...

Index - Game development
o one knows it exists. 11 techniques for game development games, guide this page lists essential core techniques for anyone wanting to develop games using open web technologies. 12 2d collision detection 2d, games, javascript, collision detection one of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. the algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. any gap means a collision does not exist. 13 3d collision detection 3d, games, javascript, bounding boxes, collision detection this article provides an introduction to the different bounding volume techniques used to implement collision detection in 3d environments. followup article...

2D collision detection - Game development
he entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities. this article provides a review of the most common techniques used to provide collision detection in 2d games. axis-aligned bounding box one of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. the algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. any gap means a collision does not exist. var rect1 = {x: 5, y: 5, width: 50, height: 50} var rect2 = {x: 20, y: 10, width: 10, height: 10} if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { // ...

Building up a basic demo with PlayCanvas editor - Game development
can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene. so, at this point we've created a blue box. click on the box to bring up its entity sidebar — you'll see options for changing its position, rotation, and scale. try applying the rotation values x: 10 and y: 20. now click on the play arrow in the top right corner of the scene to launch and render the scene — it will be opened in a separate browser tab. this looks great! let's add more shapes to the scene to make it look more interesting. adding more shapes to make way for more shapes, move the box to the left to make some room for ...

GLSL Shaders - Game development
...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
periment with ways to improve tcp and web application delivery. 349 quality values glossary, webmechanics quality values, or q-values and q-factors, are used to describe the order of priority of values in a comma-separated list. it is a special syntax allowed in some http headers and in html. 350 quaternion definition, glossary, orientation, quaternion, webxr, rotation a quaternion is the quotient of two 3d vectors and is used in 3d graphics and in accelerometer-based sensors to represent orientation or rotational data. 351 rail glossary, rail, timings, web performance rail, an acronym for response, animation, idle, and load, is a performance model originated by the google chrome team in 2015, focused on user experience and performanc...

Drawing graphics - Learn web development
ght.castshadow = true; scene.add(spotlight); an ambientlight object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. the spotlight object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact). last of all, let's add our draw() function to the bottom of the code: function draw() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); requestanimationframe(draw); } this is fairly intuitive; on each frame, we rotate our cube slightly on its x and y axes, then render the scene as viewed by our camera, then finally call requestanimationframe() to schedule drawing our next frame. let's have another quick look at what the finished product should look ...

OSFile.jsm
of files by web applications. os.file is designed for efficient, unrestricted, manipulation of files by firefox itself and by add-ons. why is off main thread file i/o important? one thing that all developers need to remember is that the duration of a file i/o operation is unbounded. depending on the current load of the kernel, the current disk activity, the current load of the bus, the current rotation speed of the disk, the amount of battery power, etc. operations can take an arbitrary amount of time. we are talking about several seconds to execute operations that look trivial, such as closing a file, or checking when it was last modified. if the operation is called on the main thread, this means that the whole user experience is stuck for several seconds, which is quite bad. why is i/o effi...

Extras
ect width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ</mi></mtd> <mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" ...

Performance
data is guaranteed to be committed. the problem is that these requirements make some operations, especially commits, very slow. for each commit, sqlite does two disk syncs among many other file operations (see the "atomic commit" section of http://www.sqlite.org/php2004/slides-all.html for more information on how this works). these disk syncs are very slow and limit the speed of a commit to the rotational speed of the mechanical disk. vacuuming and zero-fill sqlite has a vacuum command to compress unused space from the database. sqlite works like a memory manager or a file system. when data is deleted, the associated bytes are marked as free but are not removed from the file. this means that the file will not shrink, and some data may still be visible in the file. the way to work around this is ...

3D view - Firefox Developer Tools
often, layout problems ar...

CanvasRenderingContext2D.ellipse() - Web APIs
the canvasrenderingcontext2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path. syntax void ctx.ellipse(x, y, radiusx, radiusy, rotation, startangle, endangle [, anticlockwise]); the ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusx and radiusy. the path starts at startangle and ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the x-axis (horizontal) coordinate of the ellipse's center. y the y-axis (vertical) coordinate of the ellipse's center. radiusx the ellipse's major-axis radius. must be non-negative. radiusy the ellipse's minor-axis radius. must be non-negative. rotation the rotation of the ellipse, expressed in radians. startangle the angle a...

CanvasRenderingContext2D.filter - Web APIs
ur-radius>: the larger this value, the bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. <color>: see <color> values for possible keywords and notations. grayscale() a css <percentage>. converts the drawing to grayscale. a value of 100% is completely grayscale. a value of 0% leaves the drawing unchanged. hue-rotate() a css <angle>. applies a hue rotation on the drawing. a value of 0deg leaves the input unchanged. invert() a css <percentage>. inverts the drawing. a value of 100% means complete inversion. a value of 0% leaves the drawing unchanged. opacity() a css <percentage>. applies transparency to the drawing. a value of 0% means completely transparent. a value of 100% leaves the drawing unchanged. saturate() a css <percentage>. saturates...

CanvasRenderingContext2D - Web APIs
for historical and compatibility reasons as svgmatrix objects are used in most parts of the api nowadays and will be used in the future instead. canvasrenderingcontext2d.currenttransform current transformation matrix (svgmatrix object). canvasrenderingcontext2d.gettransform retrieves the current transformation matrix being applied to the context. canvasrenderingcontext2d.rotate() adds a rotation to the transformation matrix. the angle argument represents a clockwise rotation angle and is expressed in radians. canvasrenderingcontext2d.scale() adds a scaling transformation to the canvas units by x horizontally and by y vertically. canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. canva...

Transformations - Web APIs
, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate(). we use it to rotate the canvas around the current origin. rotate(angle) rotates the canvas clockwise around the current origin by the angle number of radians. the rotation center point is always the canvas origin. to change the center point, we will need to move the canvas by using the translate() method. a rotate example in this example, we'll use the rotate() method to first rotate a rectangle from the canvas origin and then from the center of the rectangle itself with the help of translate(). reminder: angles are in radians, not degrees. to convert, we are u...

DeviceMotionEvent.DeviceMotionEvent() - Web APIs
tions]) parameters type must be "devicemotion". optionsoptional options are as follows: acceleration: an object giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. accelerationincludinggravity: an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. rotationrate: an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is express in degrees per seconds. interval: a number representing the interval of time, in milliseconds, at which data is obtained from the device. specifications not part of any specifications. ...

DeviceMotionEvent - Web APIs
tionevent. properties devicemotionevent.accelerationread only an object giving the acceleration of the device on the three axis x, y and z. acceleration is expressed in m/s2. devicemotionevent.accelerationincludinggravityread only an object giving the acceleration of the device on the three axis x, y and z with the effect of gravity. acceleration is expressed in m/s2. devicemotionevent.rotationrateread only an object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. rotation rate is expressed in degrees per seconds. devicemotionevent.intervalread only a number representing the interval of time, in milliseconds, at which data is obtained from the device. example window.addeventlistener('devicemotion', function(event) { co...

DeviceOrientationEvent.alpha - Web APIs
see orientation and motion data explained for details. ...

DeviceOrientationEvent.beta - Web APIs
see orientation and motion data explained for details. ...

DeviceOrientationEvent.gamma - Web APIs
see orientation and motion data explained for details. ...

Document.createTouch() - Web APIs
note: previous versions of this method included the following additional parameters but those parameters are not included in either of the standards listed below. consequently, these parameters should be considered deprecated and not used. clientx the value for touch.clientx. clienty the value for touch.clienty. radiusx the value for touch.radiusx. radiusy the value for touch.radiusy. rotationangle the value for touch.rotationangle. force the value for touch.force. return value touch a touch object configured as described by the input parameters. example this example illustrates using the document.createtouch() method to create touch objects. in following code snippet, two touch objects are created for the target element. var target = document.getelementbyid("target"); v...

GlobalEventHandlers.onscroll - Web APIs
syntax target.onscroll = functionref value functionref a function name, or a function expression. ...

GlobalEventHandlers.onwheel - Web APIs
syntax target.onwheel = functionref; value functionref is a function name or a function expression. the function receives a wheelevent object as its sole argument. ...

OrientationSensor.populateMatrix() - Web APIs
where: w = cos(θ/2) x = vx * sin(θ/2) y = vy * sin(θ/2) z = vz * sin(θ/2) if a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. this is not something that would ever be shown to a user. see feature-policy for implementation instructions. syntax orientationinstance.populatematrix(targetmatrix) because orientationsensor is a base class, populatematrix may only be read from one of its derived classes. ...

OrientationSensor - Web APIs
onsensor below is a list of interfaces based on the orientationsensor interface. absoluteorientationsensor relativeorientationsensor properties orientationsensor.quaternion returns a four element array whose elements contain the components of the unit quaternion representing the device's orientation. methods orientationsensor.populatematrix() populates the given object with the rotation matrix based on the latest sensor reading. the rotation maxtrix is shown below. examples basic example the following example, which is loosely based on intel's orientation phone demo, instantiates an absoluteorientationsensor with a frequency of 60 times a second. on each reading it uses orientationsensor.quaternion to rotate a visual model of a phone. const options = { frequency: 60, refer...

PointerEvent.twist - Web APIs
syntax var twist = pointerevent.twist; return value a long value representing the amount of twist, in degrees, applied to the transducer (pointer). the value is in the range 0 to 359, inclusive. for devices that do not report twist, the value is 0. example when a pointerdown event is fired, different functions are called depending on the value of the event's twist property. ...

PointerEvent - Web APIs
the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the y axis. pointerevent.tilty read only the plane angle (in degrees, in the range of -90 to 90) between the x–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the x axis. pointerevent.twist read only the clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359. pointerevent.pointertype read only indicates the device type that caused the event (mouse, pen, touch, etc.) pointerevent.isprimary read only indicates if the pointer represents the primary pointer of this pointer type. methods pointerevent.getcoalescedevents() returns a sequence o...

Pointer Lock API - Web APIs
use around without any button clicking. the buttons are then freed up for other actions. other examples include apps for viewing maps or satellite imagery. pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. for example, your users can continue to rotate or manipulate a 3d model by moving the mouse without end. without pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game. basic concepts pointer lock is related to mouse capture. mouse capture provides continue...

Pointer events - Web APIs
is the neutral position of the control. tiltx the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the y axis. tilty the plane angle (in degrees, in the range of -90 to 90) between the x–z plane and the plane containing both the pointer (e.g. pen stylus) axis and the x axis. twist the clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range 0 to 359. pointertype indicates the device type that caused the event (mouse, pen, touch, etc.) isprimary indicates if the pointer represents the primary pointer of this pointer type. event types and global event handlers pointer events have ten event types, seven of which have similar semantics to...

SVGMatrix - Web APIs
ation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scale() post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotate() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotatefromvector() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. the rotation angle is determined by taking (+/-) atan(y/x). the direction of the vector (x, y) determines whether the positive or negative angle value is used. svgmatrix.fl...

SVGTextContentElement - Web APIs
nt.getendpositionofchar() returns a dompoint representing the trailing position of a typographic character after text layout has been performed. note: in svg 1.1 this method returned an svgpoint. svgtextcontentelement.getextentofchar() returns a domrect representing the computed tight bounding box of the glyph cell that corresponds to a given typographic character. svgtextcontentelement.getrotationofchar() returns a float representing the rotation of typographic character. svgtextcontentelement.getcharnumatposition() returns a long representing the character which caused a text glyph to be rendered at a given position in the coordinate system. because the relationship between characters and glyphs is not one-to-one, only the first character of the relevant typographic character is return...

Touch.radiusY - Web APIs
this may be a large ellipse representing the contact between a fingertip and the screen or a small one representing the tip of a stylus, for example. ...

Touch events - Web APIs
recommendation initial definition. ...

Creating 3D objects using WebGL - Web APIs
_buffer, buffers.indices); ... { const vertexcount = 36; const type = gl.unsigned_short; const offset = 0; gl.drawelements(gl.triangles, vertexcount, type, offset); } since each face of our cube is comprised of two triangles, there are 6 vertices per side, or 36 total vertices in the cube, even though many of them are duplicates. finally, let's replace our variable squarerotation by cuberotation and add a second rotation around the x axis: mat4.rotate(modelviewmatrix, modelviewmatrix, cuberotation * .7, [0, 1, 0]); at this point, we now have an animated cube rotating, its six faces rather vividly colored. view the complete code | open this demo on a new page « previousnext » ...

Taking still photos with WebRTC - Web APIs
n with filters since we're capturing images from the user's webcam by grabbing frames from a <video> element, we can very easily apply filters and fun effects to the video. as it turns out, any css filters you apply to the element using the filter property affect the captured photo. these filters can range from the simple (making the image black and white) to the extreme (gaussian blurs and hue rotation). you can play with this effect using, for example, the firefox developer tools' style editor; see edit css filters for details on how to do so. using specific devices you can, if needed, restrict the set of permitted video sources to a specific device or set of devices. to do so, call navigator.mediadevices.enumeratedevices(). when the promise is fulfilled with an array of mediadeviceinfo ob...

Geometry and reference spaces in WebXR - Web APIs
geometry operations with matrices we offer a guide to matrix mathematics as it pertains to 3d geometry, including how matrices are used for the three primary transforms that need to be performed when rendering 3d scenes: translation is the use of a matrix to shift the position of a point through the virtual space. this motion can be along any of the object's axes, or any combination of them. rotation is the application of a matrix that rotates a point around the origin of the object's coordinate system. scaling is the use of a matrix to alter the size of an object. note that when we say that a transform applies to a point, it also, by extension, can be applied to a collection of points. since an object is represented by some number of polygons made up of a number of points in space, applyi...

WebXR performance guide - Web APIs
3d scene means the memory management becomes a problem eventually if you keep allocating and de-allocating memory objects. consider the following function drawscene(gl, view, programinfo, buffers, texture, deltatime) { ... for (object in scene) { let vertexlist = ... let normalmatrix = mat4.create(); let modelviewmatrix = mat4.create(); let objectmatrix = mat4. // apply rotation updates to the object if needed mat4.rotate( } } this renders a scene. but it's inefficient, because it allocates as local variables a number of things, including at least two matrices, an array of vertices, and more. that means that for every frame, the javascript runtime has to allocate memory for those and set them up—possibly triggering garbage collection—and then when each intera...

Rendering and the WebXR frame animation callback - Web APIs
econds, we multiply by 0.001 to convert the time into seconds. in some cases, this saves time later. in other situations, you need the time in milliseconds, so you wouldn't need to change anything. with the elapsed time in hand, your rendering code has the means to compute just how much every moving object has moved in the time elapsed. for instance, if an object is rotating, you might apply the rotation like this: const xdeltarotation = (xrotationdegreespersecond * radians_per_degree) * deltatime; const ydeltarotation = (yrotationdegreespersecond * radians_per_degree) * deltatime; const zdeltarotation = (zrotationdegreespersecond * radians_per_degree) * deltatime; this computes the amount by which the object has rotated around each of the three axes since the last time the frame was drawn. wi...

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
ientation relative to the origin of the reference space from which it was created. in webxr, a pose is represented by an xrpose object, whose transform property is an xrrigidtransform defining the transform matrix that, applied to any coordinate, vector, or matrix in the original space, converts it to the target space. thus a pose can be used to not only convert and determine positions, but also rotational information. there is only one way to create an xrpose, and that's using the getpose() method on an animation frame as given using an xrframe object. this means that most frequently, you'll be using poses within your frame rendering code, which is executed as a callback from the xrframe method requestanimationframe(). getpose() computes the position of an xrreferencespace relative to the orig...

Using the Web Animations API - Web APIs
in the @keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop. moving it to javascript now let’s try creating the same animation with the web animations api. representing keyframes the first thing we n...

Window: devicemotion event - Web APIs
bubbles no cancelable no interface devicemotionevent event handler property window.ondevicemotion examples function handlemotionevent(event) { var x = event.accelerationincludinggravity.x; var y = event.accelerationincludinggravity.y; var z = event.accelerationincludinggravity.z; // do something awesome. ...

Window: deviceorientation event - Web APIs
gathered from a magnetometer inside the device. see orientation and motion data explained for details. ...

Window - Web APIs
ge fired at the global scope object when the user's preferred language changes. also available via the onlanguagechange property. orientationchange fired when the orientation of the device has changed. also available via the onorientationchange property. devicemotion fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available. deviceorientation fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the earth coordinate frame. resize fired when the window has been resized. also available via the onresize property. storage fired when a storage area (localstorage or sessionstorage) has been modified in the context of anot...

XRPose - Web APIs
see the article movement, orientation, and motion for further details and an example with thorough explanations of what's going on. properties xrpose.transform read only a xrrigidtransform which provides the position and orientation of the pose relative to the base xrspace. xrpose.emulatedpos...

XRRigidTransform.orientation - Web APIs
if you specify a quaternion whose length is not exactly 1.0 meters, it will be normalized for you. syntax let orientation = xrrigidtransform.orientation; value a dompointreadonly object which contains a unit quaternion providing the orientation component of the transform. as a unit quaternion, the length of the returned quaternion is always 1.0 meters. ...

XRRigidTransform - Web APIs
esents a transform that applies a specified position and/or orientation. attributes xrrigidtransform.position read only a dompointreadonly specifying a 3-dimensional point, expressed in meters, describing the translation component of the transform. the w attribute is always 1.0. xrrigidtransform.orientation read only a dompointreadonly which contains a unit quaternion describing the rotational component of the transform. as a unit quaternion, its length is always normalized to 1.0. xrrigidtransform.matrix read only returns the transform matrix in the form of a 16-member float32array. see the section matrix format for how the array is used to represent a matrix. xrrigidtransform.inverse read only returns a xrrigidtransform which is the inverse of this transform. that is, ...

Web APIs
mmatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_...

Using CSS gradients - CSS: Cascading Style Sheets
c type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want. <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom. you can change their rotation by specifying a direction. <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner. <div class="diagonal-gradient"></div> div { width: 200px; height: 100px; } .diagonal-gradient { backg...

filter - CSS: Cascading Style Sheets
the value of angle defines the number of degrees around the color circle the input samples will be adjusted. a value of 0deg leaves the input unchanged. the lacuna value for interpolation is 0. though there is no maximum value; the effect of values above 360deg wraps around. filter: hue-rotate(90deg) <table class="standard-table"> <thead> <tr> <th style="text-al...

offset-path - CSS: Cascading Style Sheets
s a path an animated element can follow. an offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. the element’s exact position on the offset path is determined by the offset-distance property. each shape or path must define an initial position for the computed value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position. early versions of the spec called this property motion-path. it was changed to offset-path because the property describes static positions, not motion. formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax none |...

offset-rotate - CSS: Cascading Style Sheets
the offset-rotate css property defines the orientation/direction of the element as it is positioned along the offset-path. note: early versions of the spec called this property motion-rotation. syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 45deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. this is the default value. <angle> the element has a constant clockwise rotation transformation applied to it by the specified rotation angle. auto...

offset - CSS: Cascading Style Sheets
ituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: non...

transform-origin - CSS: Cascading Style Sheets
rmations. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the transformation origin is the point around which a transformation is applied. for example, the transformation origin of the rotate() function is the center of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by...

Index - Developer guides
can be interpreted to perform specific tasks. 22 mutation events advanced, dom, guide mutation events provide a mechanism for a web page or an extension to get notified about changes made to the dom. use mutation observers instead if possible. 23 orientation and motion data explained intermediate, mobile, motion, needscontent, orientation, páginas_a_traducir, rotation when using orientation and motion events, it's important to understand what the values you're given by the browser mean. this article provides details about the coordinate systems at play and how you use them. 24 overview of events and handlers beginner, dom, example, javascript, needsbeginnerupdate, needsupdate, events this overview of events and event handling explain...

Date and time formats used in HTML - HTML: Hypertext Markup Language
(taking a leap year when the year can be divided by 400, and skipping leap years when the year is divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days). scientists occasionally add leap seconds to the calendar (seriously) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of earth's rotation. while month 02, february, normally has 28 days, it has 29 days in leap years. months of the year there are 12 months in the year, numbered 1 through 12. they are always represented by a two-digit ascii string whose value ranges from 01 through 12. see the table in the section days of the month for the month numbers and their corresponding names (and lengths in days). days of the month month...

HTTP Public Key Pinning (HPKP) - HTTP
ity for clients that have already noted the pins. this is important for example when the former key gets compromised. extracting the base64 encoded public key information note: while the example below shows how to set a pin on a server certificate, it is recommended to place the pin on the intermediate certificate of the ca that issued the server certificate, to ease certificates renewals and rotations. first you need to extract the public key information from your certificate or key file and encode them using base64. the following commands will help you extract the base64 encoded information from a key file, a certificate signing request, or a certificate. openssl rsa -in my-rsa-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64 openssl ec -in my-ecc-k...

Web video codec guide - Web media technologies
hat's commonly seen in film, in which a turning wheel appears to rotate at the wrong speed, or even in reverse, due to an interaction between the frame rate and the compression algorithm. the same effect can occur with any repeating pattern that moves, such as the ties on a railway line, posts along the side of a road, and so forth. this is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding. color edging color edging is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. these colors have no intentional color relationship to the contents of the frame. loss of sharpness the act of removing data in the process ...

glyph-orientation-vertical - SVG: Scalable Vector Graphics
raphic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph. text which is not fullwidth will be set with a glyph orientation of 90 degrees. this reorientation rule applies only to the first-level non-ideographic text. all further embedding of writing modes or bidirectional processing will be based on the first-level rotation. note: text set in this "rotated" manner may contain ligatures or other glyph combining and reordering common to the language and script. (this presentation form does not disable auto-ligature formation or similar context-driven variations.) the determination of which characters should be auto-rotated may vary across user agents. the determination is based on a complex interaction between...

<altGlyph> - SVG: Scalable Vector Graphics
ition of the element. value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative y-coordinate of ancestor <text> or <tspan>; animatable: yes rotate this attribute defines the supplemental rotation that will be applied to the element. value type: <list-of-numbers> ; default value: none; animatable: yes (non-additive) glyphref the glyph identifier, the format of which is dependent on the format defined by the format attribute of the given font. value type: <string> ; default value: none; animatable: no format the format of the given font. value type: <string> ; default value: none; an...

<animateMotion> - SVG: Scalable Vector Graphics
path> attributes keypoints this attribute indicate, in the range [0,1], how far is the object along the path for each keytimes associated values. value type: <number>*; default value: none; animatable: no path this attribute defines the path of the motion, using the same syntax as the d attribute. value type: <string>; default value: none; animatable: no rotate this attribute defines a rotation applied to the elment animated along a path, usually to make it pointing in the direction of the animation. value type: <number>|auto|auto-reverse; default value: 0; animatable: no note: for <animatemotion> the default value for the calcmode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation val...

<animateTransform> - SVG: Scalable Vector Graphics
the animatetransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attribut...

SVG documentation index - SVG: Scalable Vector Graphics
ransformation over time. 300 <animatemotion> element, svg, svg animation the svg <animatemotion> element let define how an element moves along a motion path. 301 <animatetransform> element, svg, svg animation the animatetransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. 302 <circle> circle, element, graphics, reference, svg the <circle> svg element is an svg basic shape, used to draw circles based on a center point and a radius. 303 <clippath> element, reference, svg the <clippath> svg element defines a clipping path, to be used by the clip-path property. 304 <color-profile> element, needs...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
te systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path commands implementation status unk...

Basic Transformations - SVG: Scalable Vector Graphics
osition it with the according attributes. for this purpose, the translate() transformation stands ready. <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0). if the second value is not given, it is assumed to be 0. rotation rotating an element is quite a common task. use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> this example shows a square that is rotated by 45 degrees. the value for rotate() is given in degrees. multiple transformations transformations can be concatenated easily just by separating the...

Introduction - SVG: Scalable Vector Graphics
me way svg provides elements for circles, rectangles, and simple and complex curves. a simple svg document consists of nothing more than the <svg> root element and several basic shapes that build a graphic together. in addition there is the <g> element, which is used to group several basic shapes together. starting from there, the svg image can become arbitrarily complex. svg supports gradients, rotations, filter effects, animations, interactivity with javascript, and so on. but all these extra features of the language rely on this relatively small set of elements to define the graphics area. before you start there are a number of drawing applications available such as inkscape which are free and use svg as their native file format. however, this tutorial will rely on the trusty xml or text edi...

Other content in SVG - SVG: Scalable Vector Graphics
of content in images as well. embedding raster images much like the img element in html svg has an image element to serve the same purpose. you can use it to embed arbitrary raster (and vector) images. the specification requests applications to support at least png, jpeg and svg format files. the embedded picture becomes a normal svg element. ...

Tutorials
ositioning, and new fangled layout tools like flexbox. css reference complete reference to css, with details on support by firefox and other browsers. fluid grids design layouts that fluidly resize with the browser window, while still using a typographic grid. css challenges flex your css skills, and see where you need more practice. advanced level using css transforms apply rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the changes take effect instantly. quick guide to implement web fonts (with @font-face) the @font-face feature from css3 allows you to use custom typefaces on the web in an accessible, manipulatable, a...