Skip to content

Commit

Permalink
remove 'notranslate' 8 (#2520)
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterbe
peterbe authored Feb 19, 2021
1 parent 6fe4472 commit c7d9128
Show file tree
Hide file tree
Showing 726 changed files with 3,959 additions and 3,959 deletions.
16 changes: 8 additions & 8 deletions files/en-us/games/anatomy/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h2 id="Building_a_main_loop_in_JavaScript">Building a main loop in JavaScript</

<p>Some code needs to be run frame-by-frame so why attach that function to anything other than the browser's redraw schedule? On the Web, <code>{{ domxref("window.requestAnimationFrame()") }}</code> will be the foundation of most well-programmed per-frame main loops.  A callback function must be passed in to it when it is called. That callback function will be executed at a suitable time before the next repaint. Here is an example of a simple main loop:</p>

<pre class="brush: js notranslate">window.main = function () {
<pre class="brush: js">window.main = function () {
window.requestAnimationFrame( main );

// Whatever your main loop needs to do
Expand All @@ -57,7 +57,7 @@ <h2 id="Building_a_better_main_loop_in_Javascript">Building a <em>better</em> ma

<p>There are two obvious issues with our previous main loop: <code>main()</code> pollutes the <code>{{ domxref("window") }}</code> object (where all global variables are stored) and the example code did not leave us with a way to <em>stop</em> the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).</p>

<pre class="brush: js notranslate">/*
<pre class="brush: js">/*

This comment has been minimized.

Sign in to view

Copy link
@hdsportstv

hdsportstv Mar 16, 2021

translate
* Starting with the semicolon is in case whatever line of code above this example
* relied on automatic semicolon insertion (ASI). The browser could accidentally
* think this whole example continues from the previous line. The leading semicolon
Expand All @@ -82,7 +82,7 @@ <h2 id="Building_a_better_main_loop_in_Javascript">Building a <em>better</em> ma

<p>For the second issue, stopping the main loop, you will need to cancel the call to <code>main()</code> with <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. You will need to pass <code>cancelAnimationFrame()</code> the ID token given by <code>requestAnimationFrame()</code> when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called <code>MyGame</code>. Expanding our last example, the main loop would now look like:</p>

<pre class="brush: js notranslate">/*
<pre class="brush: js">/*
* Starting with the semicolon is in case whatever line of code above this example
* relied on automatic semicolon insertion (ASI). The browser could accidentally
* think this whole example continues from the previous line. The leading semicolon
Expand All @@ -103,7 +103,7 @@ <h2 id="Building_a_better_main_loop_in_Javascript">Building a <em>better</em> ma

<p>We now have a variable declared in our <code>MyGame</code> namespace, which we call <code>stopMain</code>, that contains the ID returned from our main loop's most recent call to <code>requestAnimationFrame()</code>. At any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token.</p>

<pre class="brush: js notranslate">window.cancelAnimationFrame( MyGame.stopMain );</pre>
<pre class="brush: js">window.cancelAnimationFrame( MyGame.stopMain );</pre>

<p>The key to programming a main loop, in JavaScript, is to attach it to whatever event should be driving your action and pay attention to how the different systems involved interplay. You may have multiple components driven by multiple different types of events. This feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). The problem is that you are not programming a typical main loop. In Javascript, you are using the browser's main loop and you are trying to do so effectively.</p>

Expand All @@ -130,12 +130,12 @@ <h2 id="Building_a_more_optimized_main_loop_in_JavaScript">Building a <em>more</

<p>This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call <code>window.performance.now()</code> and store the result as a variable.</p>

<pre class="brush: js notranslate">var tNow = window.performance.now();
<pre class="brush: js">var tNow = window.performance.now();
</pre>

<p>Back to the topic of the main loop. You will often want to know when your main function was invoked. Because this is common, <code>window.requestAnimationFrame()</code> always provides a <code>DOMHighResTimeStamp</code> to callbacks as an argument when they are executed. This leads to another enhancement to our previous main loops.</p>

<pre class="brush: js notranslate">/*
<pre class="brush: js">/*
* Starting with the semicolon is in case whatever line of code above this example
* relied on automatic semicolon insertion (ASI). The browser could accidentally
* think this whole example continues from the previous line. The leading semicolon
Expand Down Expand Up @@ -169,7 +169,7 @@ <h3 id="What_most_browser_games_should_look_like">What most browser games should

<p>If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can update, render, and then do nothing until VSync.</p>

<pre class="brush: js notranslate">/*
<pre class="brush: js">/*
* Starting with the semicolon is in case whatever line of code above this example
* relied on automatic semicolon insertion (ASI). The browser could accidentally
* think this whole example continues from the previous line. The leading semicolon
Expand Down Expand Up @@ -241,7 +241,7 @@ <h3 id="Other_ways_to_handle_variable_refresh_rate_needs">Other ways to handle v
<p><strong>Note:</strong> This example, specifically, is in need of technical review.</p>
</div>

<pre class="brush: js notranslate">/*
<pre class="brush: js">/*
* Starting with the semicolon is in case whatever line of code above this example
* relied on automatic semicolon insertion (ASI). The browser could accidentally
* think this whole example continues from the previous line. The leading semicolon
Expand Down
14 changes: 7 additions & 7 deletions files/en-us/games/techniques/2d_collision_detection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ <h2 id="Axis-Aligned_Bounding_Box">Axis-Aligned Bounding Box</h2>

<p>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.</p>

<pre class="brush: js notranslate">var rect1 = {x: 5, y: 5, width: 50, height: 50}
<pre class="brush: js">var rect1 = {x: 5, y: 5, width: 50, height: 50}
var rect2 = {x: 20, y: 10, width: 10, height: 10}

if (rect1.x &lt; rect2.x + rect2.width &amp;&amp;
Expand All @@ -40,12 +40,12 @@ <h2 id="Axis-Aligned_Bounding_Box">Axis-Aligned Bounding Box</h2>
<div class="hidden">
<h5 id="Rect_code">Rect code</h5>

<pre class="brush: html notranslate">&lt;div id="cr-stage"&gt;&lt;/div&gt;
<pre class="brush: html">&lt;div id="cr-stage"&gt;&lt;/div&gt;
&lt;p&gt;Move the rectangle with arrow keys. Green means collision, blue means no collision.&lt;/p&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"&gt;&lt;/script&gt;
</pre>

<pre class="brush: js notranslate">Crafty.init(200, 200);
<pre class="brush: js">Crafty.init(200, 200);

var dim1 = {x: 5, y: 5, w: 50, h: 50}
var dim2 = {x: 20, y: 10, w: 60, h: 40}
Expand Down Expand Up @@ -83,18 +83,18 @@ <h2 id="Circle_Collision">Circle Collision</h2>
<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;div id="cr-stage"&gt;&lt;/div&gt;
<pre class="brush: html">&lt;div id="cr-stage"&gt;&lt;/div&gt;
&lt;p&gt;Move the circle with arrow keys. Green means collision, blue means no collision.&lt;/p&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"&gt;&lt;/script&gt;
</pre>

<pre class="brush: css notranslate">#cr-stage {
<pre class="brush: css">#cr-stage {
position: static !important;
height: 200px !important;
}
</pre>

<pre class="brush: js notranslate">Crafty.init(200, 200);
<pre class="brush: js">Crafty.init(200, 200);

var dim1 = {x: 5, y: 5}
var dim2 = {x: 20, y: 20}
Expand Down Expand Up @@ -148,7 +148,7 @@ <h6 id="Playable_code">Playable code</h6>
</pre>
</div>

<pre class="brush: js notranslate">var circle1 = {radius: 20, x: 5, y: 5};
<pre class="brush: js">var circle1 = {radius: 20, x: 5, y: 5};
var circle2 = {radius: 12, x: 10, y: 5};

var dx = circle1.x - circle2.x;
Expand Down
24 changes: 12 additions & 12 deletions ...iques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h3 id="Instantiating_boxes">Instantiating boxes</h3>

<p>To create a <strong><code>Box3</code> instance</strong>, we need to provide the <strong>lower and upper boundaries</strong> of the box. Usually we will want this AABB to be "linked" to an object in our 3D world (like a character.) In Three.js, <code>Geometry</code> instances have a <code>boundingBox</code> property with <code>min</code> and <code>max</code> boundaries for the object. Keep in mind that in order for this property to be defined, you need to manually call <code>Geometry.computeBoundingBox</code> beforehand.</p>

<pre class="brush: js notranslate">var knot = new THREE.Mesh(
<pre class="brush: js">var knot = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.5, 0.1),
new MeshNormalMaterial({}));

Expand All @@ -39,7 +39,7 @@ <h3 id="Instantiating_boxes">Instantiating boxes</h3>

<p>A more simple alternative that fixes the previous issue is to set those boundaries later on with <code>Box3.setFromObject</code>, which will compute the dimensions taking into account a 3D entity's <strong>transformations <em>and</em> any child meshes</strong> as well.</p>

<pre class="brush: js notranslate">var knot = new THREE.Mesh(
<pre class="brush: js">var knot = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.5, 0.1),
new MeshNormalMaterial({}));

Expand All @@ -50,7 +50,7 @@ <h3 id="Instantiating_spheres">Instantiating spheres</h3>

<p>Instantiating <strong><code>Sphere</code> objects</strong> is similar. We need to provide the sphere's center and radius, which can be added to the <code>boundingSphere</code> property available in <code>Geometry</code>.</p>

<pre class="brush: js notranslate">var knot = new THREE.Mesh(
<pre class="brush: js">var knot = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.5, 0.1),
new MeshNormalMaterial({}));

Expand All @@ -61,7 +61,7 @@ <h3 id="Instantiating_spheres">Instantiating spheres</h3>

<p>Unfortunately, there is no equivalent of <code>Box3.setFromObject</code> for Sphere instances. So if we apply transformations or change the position of the <code>Mesh</code>, we need to manually update the bounding sphere. For instance:</p>

<pre class="brush: js notranslate">knot.scale.set(2, 2, 2);
<pre class="brush: js">knot.scale.set(2, 2, 2);
knotBSphere.radius = knot.geometry.radius * 2;
</pre>

Expand All @@ -71,14 +71,14 @@ <h4 id="Point_vs._Box3_Sphere">Point vs. <code>Box3</code> / <code>Sphere</code

<p>Both <code>Box3</code> and <code>Sphere</code> have a <strong><code>containsPoint</code></strong> method to do this test.</p>

<pre class="brush: js notranslate">var point = new THREE.Vector3(2, 4, 7);
<pre class="brush: js">var point = new THREE.Vector3(2, 4, 7);
knotBBox.containsPoint(point);</pre>

<h4 id="Box3_vs._Box3"><code>Box3</code> vs. <code>Box3</code></h4>

<p>The <strong><code>Box3.intersectsBox</code></strong> method is available for performing this test.</p>

<pre class="brush: js notranslate">knotBbox.intersectsBox(otherBox);</pre>
<pre class="brush: js">knotBbox.intersectsBox(otherBox);</pre>

<div class="note">
<p><strong>Note</strong>: This is different from the <code>Box3.containsBox</code> method, which checks whether the Box3 <em>fully</em> wraps another one.</p>
Expand All @@ -88,13 +88,13 @@ <h4 id="Sphere_vs._Sphere"><code>Sphere</code> vs. <code>Sphere</code></h4>

<p>In a similar fashion as before, there is a <code><strong>Sphere.intersectsSphere</strong></code> method to perform this test.</p>

<pre class="brush: js notranslate">knotBSphere.intersectsSphere(otherSphere);</pre>
<pre class="brush: js">knotBSphere.intersectsSphere(otherSphere);</pre>

<h4 id="Sphere_vs._Box3"><code>Sphere</code> vs. <code>Box3</code></h4>

<p>Unfortunately this test is not implemented in Three.js, but we can patch Sphere to implement a <a href="/en-US/docs/Games/Techniques/3D_collision_detection">Sphere vs. AABB intersection</a> algorithm.</p>

<pre class="brush: js notranslate">// expand THREE.js Sphere to support collision tests vs Box3
<pre class="brush: js">// expand THREE.js Sphere to support collision tests vs Box3
// we are creating a vector outside the method scope to
// avoid spawning a new instance of Vector3 on every check

Expand Down Expand Up @@ -138,7 +138,7 @@ <h2 id="Using_BoxHelper">Using <code>BoxHelper</code></h2>

<p>To use it, we need to create a new <code>BoxHelper</code> instance and supply the geometry and — optionally — a color that will be used for the wireframe material. We also need to add the newly created object to the <code>three.js</code> scene in order to render it. We assume our scene variable to be called <code>scene</code>.</p>

<pre class="brush: js notranslate">var knot = new THREE.Mesh(
<pre class="brush: js">var knot = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.5, 0.1),
new THREE.MeshNormalMaterial({})
);
Expand All @@ -147,20 +147,20 @@ <h2 id="Using_BoxHelper">Using <code>BoxHelper</code></h2>

<p>In order to also have our actual <code>Box3</code> bounding box, we create a new <code>Box3</code> object and make it assume the <code>BoxHelper</code>'s shape and position.</p>

<pre class="brush: js notranslate">var box3 = new THREE.Box3();
<pre class="brush: js">var box3 = new THREE.Box3();
box3.setFromObject(knotBoxHelper);</pre>

<p>If we change the <code>Mesh</code> position, rotation, scale, etc. we need to call the <code>update()</code> method so the <code>BoxHelper</code> instance matches its linked <code>Mesh</code>. We also need to call <code>setFromObject</code> again in order to make the <code>Box3</code> follow the <code>Mesh</code>.</p>

<pre class="brush: js notranslate">knot.position.set(-3, 2, 1);
<pre class="brush: js">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);</pre>

<p>Performing <strong>collision tests</strong> is done in the same way as explained in the above section — we use our Box3 object in the same way as described above.</p>

<pre class="brush: js notranslate">// box vs box
<pre class="brush: js">// box vs box
box3.intersectsBox(otherBox3);
// box vs point
box3.containsPoint(point.position);</pre>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/games/techniques/3d_collision_detection/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ <h3 id="Sphere_vs._AABB">Sphere vs. AABB</h3>

<p>In JavaScript, we'd do this test like so:</p>

<pre class="brush: js notranslate">function intersect(sphere, box) {
<pre class="brush: js">function intersect(sphere, box) {
// get box closest point to sphere center by clamping
var x = Math.max(box.minX, Math.min(sphere.x, box.maxX));
var y = Math.max(box.minY, Math.min(sphere.y, box.maxY));
Expand Down
20 changes: 10 additions & 10 deletions files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ <h3 id="HTML_structure">HTML structure</h3>

<p>Here's the HTML structure we will use.</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
Expand Down Expand Up @@ -101,7 +101,7 @@ <h3 id="The_vertex_shader_code">The vertex shader code</h3>

<p>Let's continue by writing a simple vertex shader — add the code below inside the body's first <code>&lt;script&gt;</code> tag:</p>

<pre class="brush: glsl notranslate">void main() {
<pre class="brush: glsl">void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
}
</pre>
Expand All @@ -118,7 +118,7 @@ <h3 id="The_texture_shader_code">The texture shader code</h3>

<p>Now we'll add the texture shader to the code — add the code below to the body's second <code>&lt;script&gt;</code> tag:</p>

<pre class="brush: glsl notranslate">void main() {
<pre class="brush: glsl">void main() {
gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
}
</pre>
Expand All @@ -129,12 +129,12 @@ <h3 id="Applying_the_shaders">Applying the shaders</h3>

<p>To actually apply the newly created shaders to the cube, comment out the <code>basicMaterial</code> definition first:</p>

<pre class="brush: js notranslate">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
<pre class="brush: js">// var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
</pre>

<p>Then, create the <a href="http://threejs.org/docs/#Reference/Materials/ShaderMaterial"><code>shaderMaterial</code></a>:</p>

<pre class="brush: js notranslate">var shaderMaterial = new THREE.ShaderMaterial( {
<pre class="brush: js">var shaderMaterial = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});
Expand All @@ -144,12 +144,12 @@ <h3 id="Applying_the_shaders">Applying the shaders</h3>

<p>Then, in the line that defines the cube we need to replace the <code>basicMaterial</code>:</p>

<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
</pre>

<p>...with the newly created <code>shaderMaterial</code>:</p>

<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
</pre>

<p>Three.js compiles and runs the shaders attached to the mesh to which this material is given. In our case the cube will have both vertex and texture shaders applied. That's it — you've just created the simplest possible shader, congratulations! Here's what the cube should look like:</p>
Expand All @@ -162,7 +162,7 @@ <h2 id="Final_code">Final code</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"&gt;&lt;/script&gt;
<pre class="brush: html">&lt;script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"&gt;&lt;/script&gt;
&lt;script id="vertexShader" type="x-shader/x-vertex"&gt;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
Expand All @@ -177,7 +177,7 @@ <h3 id="HTML">HTML</h3>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js notranslate"> var WIDTH = window.innerWidth;
<pre class="brush: js"> var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

var renderer = new THREE.WebGLRenderer({antialias:true});
Expand Down Expand Up @@ -210,7 +210,7 @@ <h3 id="JavaScript">JavaScript</h3>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">body { margin: 0; padding: 0; font-size: 0; }
<pre class="brush: css">body { margin: 0; padding: 0; font-size: 0; }
canvas { width: 100%; height: 100%; }
</pre>

Expand Down
Loading

0 comments on commit c7d9128

Please sign in to comment.