Dev

Discovering 3D rendering with C# and Direct3D 11

To develop 3D applications, you will have to understand underlying concepts. The aim of this article is to define these concepts in order to use them with Direct3D 11.

The final project is available here : https://www.catuhe.com/msdn/DiscoverD3D11.zip

From vertex to pixel

The first element we have to know is the vertex (with its plural form : vertices). A vertex is a point in 3D space. We can represent it with its simplest structure : a 3 values vector : x, y and z.

All we can see in a 3D application is built upon a set of vertices which define the backbone of our objects.

clip_image002_thumb2


Figure 1. Vertices of a sphere

By the way, these vertices are not the only important actor. Indeed, to obtain a well shaped object, you also need to define faces.

Faces are triangles composed of 3 vertices. We use triangles because they are the simplest 2D geometric shape we can use to define a volume (a mesh).

Faces are a 3 values vector (i1, i2, i3) where each entry defines a vertex in the vertices list.

clip_image004_thumb2


Figure 2. Sphere faces

So the definition of a plane can be done by the following code:






  1. float[] vertices = new[]


  2. {


  3. -1.0f, -1.0f, 0f,


  4. 1.0f, -1.0f, 0f,


  5. 1.0f, 1.0f, 0f,


  6. -1.0f, 1.0f, 0f,


  7. };


  8. short[] faces = new[]


  9. {


  10. (short)0, (short)1, (short)2,


  11. (short)0, (short)2, (short)3


  12. };




A plane is composed of 4 vertices and 2 faces which connect the vertices (for a total of 6 indices).

The main goal of a 3D application will be to use these data to produce pixels. Indeed, we must produce an 2D array where each cell will contains a color. The size of the array will be [Screen Width x Screen Height].

So we must split our code in 2 steps. First of all, we will see how we can transform a list of vertices and faces to a list of pixels (which are 4 values vectors). Then we will see how we can attribute a color to each pixel.

Making movies!

To understand the transition for a R3 space (the 3D) to a R2 space (the screen), we will make an analogy with cinema.

We will become a movie director who wants to make a commercial with a tennis ball.

The global world

At first, we must consider that the ball is stored in a room. For the film, we have to bring it to the stage.

In 3D, we call that operation the world transformation: we take the coordinates of an object and we move them to the scene world. Indeed, to construct a scene (or to make a movie), we must use a lot of objects which are all defined (or stored) with coordinates relative to the center of their world ([0, 0, 0]). If we do nothing, they will all be rendered at the same place (Much easier to do with a virtual scene than in real world Sourire).

So we have to move them (and perhaps rotate and scale) to their final position.

To do so, we have to use a mathematical tool: the matrix! 
A matrix is the representation of a geometric transformation. So, the result of the product of a vector and a matrix will give a vector modified by the matrix.

By multiplying two matrices, we obtain a new matrix containing a new transformation which is equal to the combination of the transformation of each matrix.

For instance: let say that we have two matrices : M1 and M2. M1 is a translation matrix and M2 is a rotation matrix. The result of M1xM2 is a matrix which applies a translation followed by a rotation.

So finally, using a matrix (called world matrix), we are able to define all required transformations to move/rotate/scale objects from their original position to their final position.

The point of view of the “camera”

When all objects are correctly rotated, scaled and moved, we have to apply a new matrix to compute their position from the point of view of the camera (the eye of the observer).

This new matrix is called the view matrix because it defines the point of view. It is essentially defined by a position and a target (where is the camera? what is the target of the camera?)

The projection

Finally, a last matrix is required: the projection matrix. This matrix is responsible of the conversion from the 3D world to the screen space (2D).

For example, starting from (x1, y1, z1) the projection matrix will produce (x2, y2) using the size of the screen, the field of view of the camera and the aspect ratio.

Geometric pipeline

Finally, every vertex will be modified by the following transformation:

Matrixfinal = Matrixworld Matrixview Matrixprojection

Pixel = Vertex * Matrixfinal

The shaders or how to develop with your GPU ?

We are now ok with the theory. We will see how to use it with our GPU (Graphics Processing Unit, the brain of your graphics card) to unleash the power of accelerated rendering!

To develop on the  GPU, we will use a specific language called HLSL (High Level Shader Language). This language is similar to C and allows to build shaders which are the base programs of the GPU.

And we will see below, there are many categories of shaders.

Vertex shader

The vertex shaders are the first shaders called in the graphic pipeline. They are responsible for transforming vertices to pixels. By the way, they will use the Matrixfinal.






  1. cbuffer globals


  2. {


  3. matrix finalMatrix;


  4. }


  5.  


  6. struct VS_IN


  7. {


  8. float3 pos : POSITION;


  9. };


  10.  


  11. struct PS_IN


  12. {


  13. float4 pos : SV_POSITION;


  14. };


  15.  


  16. // Vertex Shader


  17. PS_IN VS( VS_IN input )


  18. {


  19. PS_IN output = (PS_IN);





  21. output.pos = mul(float4(input.pos, 1), finalMatrix);





  23. return output;


  24. }




The vertex shader is a function which takes a vertex as input parameter (we have to define its structure) and returns a pixel (we also need to define its structure).

For now, the structures are really simple: a vector3 in input and a vector4 in output. Of course, in the next steps we will add more information to our structures.

The work of the vertex shader is only to apply the final matrix (which is defined as a global variable) to every vertex. Of course, vertex shaders can be more complex if required.

Pixel shader

The aim of the pixel shader is to produce a color for each pixel. So after processing vertices with the vertex shader, the pixel shader will work on the produced list of pixels.

It is important to note that there is an additional stage between vertex shader and pixel shader: the rasterization. This step will clip the pixel (i.e. will  only keep visible pixels) and will do the required interpolation to generate all pixels to fill triangles.

Indeed, the vertex shader will only produce pixels for the three points of a face. The rasterizer will interpolate all missing pixels to fill the gap.


Finally for every pixel, the following pixel shader will be applied:





  1. // Pixel Shader


  2. float4 PS( PS_IN input ) : SV_Target


  3. {


  4. return float4(1, 1, 1, 1);


  5. }






Our pixel shader takes a pixel as input parameter and returns a color. For now, this is the same color for every pixel. So we need to add some code to use a texture in order to produce better looking results.

To do so, we have to update our vertices to add a texture coordinates alongside with the inner coordinates of the vertex.

The vertex shader will take the texture coordinates and will return it unmodified to the pixel shader.

The pixel shader will use the texture coordinates to read a color in a texture and return it as the color of the pixel. To read a texture, we will add a sampler (which is a tool to read a texture) and a texture variable:






  1. cbuffer globals


  2. {


  3. matrix finalMatrix;


  4. }


  5.  


  6. struct VS_IN


  7. {


  8. float3 pos : POSITION;


  9. float2 uv : TEXCOORD0;


  10. };


  11.  


  12. struct PS_IN


  13. {


  14. float4 pos : SV_POSITION;


  15. float2 uv : TEXCOORD0;


  16. };


  17.  


  18. // Vertex Shader


  19. PS_IN VS( VS_IN input )


  20. {


  21. PS_IN output = (PS_IN);





  23. output.pos = mul(float4(input.pos, 1), finalMatrix);


  24. output.uv = input.uv;





  26. return output;


  27. }


  28.  


  29. Texture2D yodaTexture;


  30. SamplerState currentSampler


  31. {


  32. Filter = MIN_MAG_MIP_LINEAR;


  33. AddressU = Wrap;


  34. AddressV = Wrap;


  35. };


  36.  


  37. // Pixel Shader


  38. float4 PS( PS_IN input ) : SV_Target


  39. {


  40. return yodaTexture.Sample(currentSampler, input.uv);


  41. }




.FX files

The .FX files (or effect files) allow users to gather all the shaders code in a single file. They also allow the declaration of variables and constants.

Finally they include one or more techniques. A technique is composed of one or more passes. A pass is a declaration of a complete pipeline with at least a vertex and a pixel shader.

In our case, the technique declaration can be:






  1. // Technique


  2. technique10 Render


  3. {


  4. pass P0


  5. {


  6. SetGeometryShader( );


  7. SetVertexShader( CompileShader( vs_4_0, VS() ) );


  8. SetPixelShader( CompileShader( ps_4_0, PS() ) );


  9. }


  10. }




This file will be used by Direct3D to configure the graphic pipeline.

Using Direct3D 11

To use DirectX 11 (and its 3D part: Direct3D 11), we will use a managed wrapper called SlimDX (https://slimdx.org/download.php).

Indeed, DirectX is a COM API and SlimDX allows us to use it efficiently (by reducing the overhead of marshalling between .NET and COM).

Initialization

To initialize Direct3D 11, we need to define 4 required variables:

  • The device which will be our broker to the driver of the graphic card
  • The swap chain which defines how the rendered image will be copied from the graphic card to the display window
  • The back-buffer which is the graphic card’s memory dedicated to produce the rendered image
  • The render view which is the view on the back-buffer. With Direct3D 11, the buffers are not used directly but through views. It is a really interesting concept as it allows us to have only one memory resource with many views on it (with different associated semantics)

The initialization code will be the following:






  1. // Creating device (we accept dx10 cards or greater)


  2. FeatureLevel[] levels = {


  3. FeatureLevel.Level_11_0,


  4. FeatureLevel.Level_10_1,


  5. FeatureLevel.Level_10_0


  6. };


  7.  


  8. // Defining our swap chain


  9. SwapChainDescription desc = new SwapChainDescription();


  10. desc.BufferCount = 1;


  11. desc.Usage = Usage.BackBuffer | Usage.RenderTargetOutput;


  12. desc.ModeDescription = new ModeDescription(0, 0, new Rational(0, 0), Format.R8G8B8A8_UNorm);


  13. desc.SampleDescription = new SampleDescription(1, 0);


  14. desc.OutputHandle = Handle;


  15. desc.IsWindowed = true;


  16. desc.SwapEffect = SwapEffect.Discard;


  17.  


  18. Device.CreateWithSwapChain(DriverType.Hardware, DeviceCreationFlags.None, levels, desc, out device11, out swapChain);


  19.  


  20. // Getting back buffer


  21. backBuffer = Resource.FromSwapChain<Texture2D>(swapChain, 0);


  22.  


  23. // Defining render view


  24. renderTargetView = new RenderTargetView(device11, backBuffer);


  25. device11.ImmediateContext.OutputMerger.SetTargets(renderTargetView);


  26. device11.ImmediateContext.Rasterizer.SetViewports(new Viewport(0, 0, ClientSize.Width, ClientSize.Height, 0.0f, 1.0f));




The main part is around the description of the swap chain. We indicate here that we want a swap chain on the back-buffer without anti-aliasing (SampleDescription with only one sample) using a windowed display.

We can also note the use of FeatureLevels which determine that we only want to work with graphic cards supporting Direct3D 10, 10.1 or 11.

Using our shaders

To use our shaders, we need to compile the .FX file:






  1. using (ShaderBytecode byteCode = ShaderBytecode.CompileFromFile(“Effet.fx”, “bidon”, “fx_5_0”, ShaderFlags.OptimizationLevel3, EffectFlags.None))


  2. {


  3. effect = new Effect(device11, byteCode);


  4. }


  5.  


  6. var technique = effect.GetTechniqueByIndex(0);


  7. var pass = technique.GetPassByIndex(0);


  8. layout = new InputLayout(device11, pass.Description.Signature, new[] {


  9. new InputElement(“POSITION”, 0, Format.R32G32B32_Float, 0, 0),


  10. new InputElement(“TEXCOORD”, 0, Format.R32G32_Float, 12, 0)


  11. });




Compilation of an effect is done using the Effect constructor which takes byte code produced by ShaderByteCode.CompileFromFile.

Then we need to describe how our vertices are structured. To do so we have to produce an InputLayout (it is worth noting that we use the signature of the first pass of the effect to ensure the compatibility of our layout with the input vertex structure of the effect).

Preparing geometric data

We will create buffers to save and use our geometric data. The buffers will be created inside the graphic card:

  • A vertex buffer for the vertices
  • An index buffer for the faces (the indices)





  1. float[] vertices = new[]


  2. {


  3. -1.0f, -1.0f, 0f, 0f, 1.0f,


  4. 1.0f, -1.0f, 0f, 1.0f, 1.0f,


  5. 1.0f, 1.0f, 0f, 1.0f, 0.0f,


  6. -1.0f, 1.0f, 0f, 0.0f, 0.0f,


  7.  


  8. };


  9.  


  10. short[] faces = new[]


  11. {


  12. (short)0, (short)1, (short)2,


  13. (short)0, (short)2, (short)3


  14. };


  15.  


  16. // Creating vertex buffer


  17. var stream = new DataStream(4 vertexSize, true, true);


  18. stream.WriteRange(vertices);


  19. stream.Position = 0;


  20.  


  21. var vertexBuffer = new Buffer(device11, stream, new BufferDescription


  22. {


  23. BindFlags = BindFlags.VertexBuffer,


  24. CpuAccessFlags = CpuAccessFlags.None,


  25. OptionFlags = ResourceOptionFlags.None,


  26. SizeInBytes = (int)stream.Length,


  27. Usage = ResourceUsage.Default


  28. });


  29. stream.Dispose();


  30.  


  31. // Index buffer


  32. stream = new DataStream(6 2, true, true);


  33. stream.WriteRange(faces);


  34. stream.Position = 0;


  35.  


  36. var indices = new Buffer(device11, stream, new BufferDescription


  37. {


  38. BindFlags = BindFlags.IndexBuffer,


  39. CpuAccessFlags = CpuAccessFlags.None,


  40. OptionFlags = ResourceOptionFlags.None,


  41. SizeInBytes = (int)stream.Length,


  42. Usage = ResourceUsage.Default


  43. });


  44. stream.Dispose();




The two buffers are created in a way the CPU cannot access them. Thus, Direct3D can create them in the graphic card memory (the more efficient for the GPU).

Then we just have to transfer them to the device:






  1. // Uploading to the device


  2. device11.ImmediateContext.InputAssembler.InputLayout = layout;


  3. device11.ImmediateContext.InputAssembler.PrimitiveTopology = PrimitiveTopology.TriangleList;


  4. device11.ImmediateContext.InputAssembler.SetVertexBuffers(0, new VertexBufferBinding(vertexBuffer, vertexSize, 0));


  5. device11.ImmediateContext.InputAssembler.SetIndexBuffer(indices, Format.R16_UInt, 0);




We also define the current input layout and the topology to use (triangle lists).

Affecting constants to shaders

The be ready, shaders need user to define constants and especially the MatrixFinal et the texture to use.

So for our effect, we can do something like that:






  1. // Texture


  2. Texture2D texture2D = Texture2D.FromFile(device11, “yoda.jpg”);


  3. ShaderResourceView view = new ShaderResourceView(device11, texture2D);


  4.  


  5. effect.GetVariableByName(“yodaTexture”).AsResource().SetResource(view);


  6.  


  7. RasterizerStateDescription rasterizerStateDescription = new RasterizerStateDescription {CullMode = CullMode.None, FillMode = FillMode.Solid};


  8.  


  9. device11.ImmediateContext.Rasterizer.State = RasterizerState.FromDescription(device11, rasterizerStateDescription);


  10.  


  11. // Matrices


  12. Matrix worldMatrix = Matrix.RotationY(0.5f);


  13. Matrix viewMatrix = Matrix.Translation(0, 0, 5.0f);


  14. const float fov = 0.8f;


  15. Matrix projectionMatrix = Matrix.PerspectiveFovLH(fov, ClientSize.Width / (float)ClientSize.Height, 0.1f, 1000.0f);


  16.  


  17. effect.GetVariableByName(“finalMatrix”).AsMatrix().SetMatrix(worldMatrix viewMatrix projectionMatrix);




As seen before, we compute our MatrixFinal by multiplying the three base matrices (built using statics methods of Matrix class).

And using GetVariableByName method, we can set the constants values.

Final render

So we have our geometry (vertex and index buffers) ready to use and our shaders are compiled and defined.


We just have now to launch the rendering process!





  1. // Render


  2. device11.ImmediateContext.ClearRenderTargetView(renderTargetView, new Color4(1.0f, 0, 0, 1.0f));


  3. effect.GetTechniqueByIndex(0).GetPassByIndex(0).Apply(device11.ImmediateContext);


  4. device11.ImmediateContext.DrawIndexed(6, 0, 0);


  5. swapChain.Present(0, PresentFlags.None);




The process is the following:

  • We clear the back-buffer
  • Using the desired technique, we get its first pass and we apply it (which means that we affect shaders and constants to the graphic card)
  • Then using the immediate context of the device, we launch the rendering process on 6 indices (2 faces)
  • Finally we present the result to the main window


Figure 3. The marvelous final render with Direct3D 11!

Conclusion

So we are now ready to produce high quality rendering. By using shaders and .fx files, we can render every kind of advanced materials. The only limit is our imagination (and our mastering of optical effects Sourire).

Our system renders a list of vertices and faces, so rendering a plane or a complete city is nearly the same thing (obviously, rendering a city will require some additional optimizations!)

Feel free to play with the associated code and unleash the power of 3D!

Dev

How to write a small game using HTML5 and JavaScript–BrikBrok

This post is a translation of a French article I wrote: https://blogs.msdn.com/b/eternalcoding/archive/2011/09/02/cahier-de-vacances-html-5-d-233-velopper-son-propre-jeu-de-casse-briques-en-html-5-avec-canvas-et-svg.aspx

Starter and full solution can be found here.

Summary

  1. Introduction

Introduction

The goal of this tutorial is discovering graphics development using SVG and Canvas (which are two majors technologies of HTML5).

To do so, we will write together a brick breaker game (à la Arkanoïd or Blockout). It will be composed of an animated background (using Canvas) and will use SVG for bricks, pad and ball.

You can try the final version here : https://www.catuhe.com/ms/en/index.htm

Prerequisites

## Adding JavaScript code

The background is handled by _background.js_ file (what a surprise!). So we have to register it inside index.htm. So just before the body closing tag, we will add the following code: 

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:207b6d20-6407-4255-8fb7-c42a26cb1c5d" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
        <li>
          <span style="color:#0000ff"><</span><span style="color:#800000">script</span> <span style="color:#ff0000">type</span><span style="color:#0000ff">="text/javascript"</span> <span style="color:#ff0000">src</span><span style="color:#0000ff">="background.js"></</span><span style="color:#800000">script</span><span style="color:#0000ff">></span>
        </li>
      </ol>
    </div></p>
  </div></p>
</div>

## Setting up constants

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e3a7453b-0342-4d8e-b9a5-d93573d6aea1">
  First of all, we need constants to drive the rendering:
</div>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px">
  &nbsp;
</div>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:91de7cc4-c4e6-46c9-982a-2be0f89e2395" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
        <li>
          <span style="color:#0000ff">var</span> circlesCount = 100; <span style="color:#006400">// Circles count used by the wormhole</span>
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> offsetX = 70; <span style="color:#006400">// Wormhole center offset (X)</span>
        </li>
        <li>
          <span style="color:#0000ff">var</span> offsetY = 40; <span style="color:#006400">// Wormhole center offset (Y)</span>
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> maxDepth = 1.5; <span style="color:#006400">// Maximal distance for a circle</span>
        </li>
        <li>
          <span style="color:#0000ff">var</span> circleDiameter = 10.0; <span style="color:#006400">// Circle diameter</span>
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> depthSpeed = 0.001; <span style="color:#006400">// Circle speed</span>
        </li>
        <li>
          <span style="color:#0000ff">var</span> angleSpeed = 0.05; <span style="color:#006400">// Circle angular rotation speed</span>
        </li>
      </ol>
    </div></p>
  </div></p>
</div>

You can of course modify these constants if you want different effects on your wormhole. 

## Getting elements

We also need to keep reference to main elements of the html page:

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:d6482365-1bf8-42d5-adca-ddc74c0576c2" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
        <li>
          <span style="color:#0000ff">var</span> canvas = document.getElementById(<span style="color:#800000">"backgroundCanvas"</span>);
        </li>
        <li style="background: #f3f3f3">
          <span style="color:#0000ff">var</span> context = canvas.getContext(<span style="color:#800000">"2d"</span>);
        </li>
        <li>
          <span style="color:#0000ff">var</span> stats = document.getElementById(<span style="color:#800000">"stats"</span>);
        </li>
      </ol>
    </div></p>
  </div></p>
</div>

## How to display a circle?

The wormhole is only a sequence of circles with different positions and sizes. So to draw it, we will use a circle function which is build around a depth, an angle and an intensity (the base color).

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ad6fc59a-f497-4275-9d93-26a8c55eac83">
  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
    <div style="background: #fff; max-height: 500px; overflow: auto">
      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
        <li>
          <span style="color: #0000ff">function</span> Circle(initialDepth, initialAngle, intensity) { <li style="background: #f3f3f3">
            }
          </li></ol> </div> </div> </div> 
          <pre></pre>

          <p>
            The angle and the intensity are private but the depth is public to allow the wormhole to change it.
          </p>

          <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:012ebe78-d859-4ae0-877a-a868e8ad4843">
            <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
              <div style="background: #fff; max-height: 500px; overflow: auto">
                <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                  <li>
                    <span style="color: #0000ff">function</span> Circle(initialDepth, initialAngle, intensity) { <li style="background: #f3f3f3">
                      <li>
                        <span style="color: #0000ff">var</span> angle = initialAngle; <li style="background: #f3f3f3">
                          <span style="color: #0000ff">this</span>.depth = initialDepth; <li>
                            <span style="color: #0000ff">var</span> color = intensity; <li style="background: #f3f3f3">
                              }
                            </li></ol> </div> </div> </div> 
                            <pre></pre>

                            <p>
                              We also need a public draw function to draw the circle and update depth, angle. So we need to define where to display the circle. To do so, two variables (x and y) are defined:
                            </p>

                            <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:e6d91ee9-85b3-4faa-9d28-a9dff0c9d5d0">
                              <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                <div style="background: #fff; max-height: 500px; overflow: auto">
                                  <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                    <li>
                                      <span style="color: #0000ff">var</span> x = offsetX * Math.cos(angle); <li style="background: #f3f3f3">
                                        <span style="color: #0000ff">var</span> y = offsetY * Math.sin(angle);
                                      </li></ol> </div> </div> </div> 
                                      <pre></pre>

                                      <p>
                                        As x and y are in space coordinates, we need to project them into the screen:
                                      </p>

                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:0ca3ba8a-9cfb-4dee-9bb2-ef5e858a219c" class="wlWriterEditableSmartContent">
                                        <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                            <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                              <li>
                                                <span style="color:#0000ff">function</span> perspective(fov, aspectRatio, x, y) {
                                              </li>
                                              <li style="background: #f3f3f3">
                                                    <span style="color:#0000ff">var</span> yScale = Math.pow(Math.tan(fov / 2.0), -1);
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">var</span> xScale = yScale / aspectRatio;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                &nbsp;
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">var</span> M11 = xScale;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                    <span style="color:#0000ff">var</span> M22 = yScale;
                                              </li>
                                              <li>
                                                &nbsp;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                    <span style="color:#0000ff">var</span> outx = x * M11 + canvas.width / 2.0;
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">var</span> outy = y * M22 + canvas.height / 2.0;
                                              </li>
                                              <li style="background: #f3f3f3">
                                                &nbsp;
                                              </li>
                                              <li>
                                                    <span style="color:#0000ff">return</span> { x: outx, y: outy };
                                              </li>
                                              <li style="background: #f3f3f3">
                                                }
                                              </li>
                                            </ol>
                                          </div>
                                        </div>
                                      </div>

                                      <pre></pre>

                                      <p>
                                        So final position of the circle is computed by the following code:
                                      </p>

                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c3a33e51-e2c1-4e1a-98a4-435c15d0a1cf">
                                        <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                            <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                              <li>
                                                <span style="color: #0000ff">var</span> x = offsetX * Math.cos(angle); <li style="background: #f3f3f3">
                                                  <span style="color: #0000ff">var</span> y = offsetY * Math.sin(angle); <li>
                                                    <li style="background: #f3f3f3">
                                                      <span style="color: #0000ff">var</span> project = perspective(0.9, canvas.width / canvas.height, x, y); <li>
                                                        <span style="color: #0000ff">var</span> diameter = circleDiameter / <span style="color: #0000ff">this</span>.depth; <li style="background: #f3f3f3">
                                                          <li>
                                                            <span style="color: #0000ff">var</span> ploX = project.x &#8211; diameter / 2.0; <li style="background: #f3f3f3">
                                                              <span style="color: #0000ff">var</span> ploY = project.y &#8211; diameter / 2.0;
                                                            </li></ol> </div> </div> </div> 
                                                            <pre></pre>

                                                            <p>
                                                              And using this position, we can simply draw our circle:
                                                            </p>

                                                            <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:21ecc93d-5b0b-4f92-9773-66c25055ddcc">
                                                              <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                  <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                    <li>
                                                                      context.beginPath(); <li style="background: #f3f3f3">
                                                                        context.arc(ploX, ploY, diameter, 0, 2 * Math.PI, <span style="color: #0000ff">false</span>); <li>
                                                                          context.closePath(); <li style="background: #f3f3f3">
                                                                            <li>
                                                                              <span style="color: #0000ff">var</span> opacity = 1.0 &#8211; <span style="color: #0000ff">this</span>.depth / maxDepth; <li style="background: #f3f3f3">
                                                                                context.strokeStyle = <span style="color: #800000">&#8220;rgba(&#8220;</span> + color + <span style="color: #800000">&#8220;,&#8221;</span> + color + <span style="color: #800000">&#8220;,&#8221;</span> + color + <span style="color: #800000">&#8220;,&#8221;</span> + opacity + <span style="color: #800000">&#8220;)&#8221;</span>; <li>
                                                                                  context.lineWidth = 4; <li style="background: #f3f3f3">
                                                                                    <li>
                                                                                      context.stroke();
                                                                                    </li></ol> </div> </div> </div> 
                                                                                    <pre></pre>

                                                                                    <p>
                                                                                      You can note that the circle is more opaque when it is closer.
                                                                                    </p>

                                                                                    <p>
                                                                                      So finally:
                                                                                    </p>

                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:85391355-6a2e-4342-bfd6-91cd2ae49850" class="wlWriterEditableSmartContent">
                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                            <li>
                                                                                              <span style="color:#0000ff">function</span> Circle(initialDepth, initialAngle, intensity) {
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  <span style="color:#0000ff">var</span> angle = initialAngle;
                                                                                            </li>
                                                                                            <li>
                                                                                                  <span style="color:#0000ff">this</span>.depth = initialDepth;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  <span style="color:#0000ff">var</span> color = intensity;
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  <span style="color:#0000ff">this</span>.draw = <span style="color:#0000ff">function</span> () {
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">var</span> x = offsetX * Math.cos(angle);
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> y = offsetY * Math.sin(angle);
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> project = perspective(0.9, canvas.width / canvas.height, x, y);
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">var</span> diameter = circleDiameter / <span style="color:#0000ff">this</span>.depth;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">var</span> ploX = project.x &#8211; diameter / 2.0;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> ploY = project.y &#8211; diameter / 2.0;
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.beginPath();
                                                                                            </li>
                                                                                            <li>
                                                                                                      context.arc(ploX, ploY, diameter, 0, 2 * Math.PI, <span style="color:#0000ff">false</span>);
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.closePath();
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">var</span> opacity = 1.0 &#8211; <span style="color:#0000ff">this</span>.depth / maxDepth;
                                                                                            </li>
                                                                                            <li>
                                                                                                      context.strokeStyle = <span style="color:#800000">"rgba("</span> + color + <span style="color:#800000">","</span> + color + <span style="color:#800000">","</span> + color + <span style="color:#800000">","</span> + opacity + <span style="color:#800000">")"</span>;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.lineWidth = 4;
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      context.stroke();
                                                                                            </li>
                                                                                            <li>
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                      <span style="color:#0000ff">this</span>.depth -= depthSpeed;
                                                                                            </li>
                                                                                            <li>
                                                                                                      angle += angleSpeed;
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                              &nbsp;
                                                                                            </li>
                                                                                            <li>
                                                                                                      <span style="color:#0000ff">if</span> (<span style="color:#0000ff">this</span>.depth < 0) {
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                          <span style="color:#0000ff">this</span>.depth = maxDepth + <span style="color:#0000ff">this</span>.depth;
                                                                                            </li>
                                                                                            <li>
                                                                                                      }
                                                                                            </li>
                                                                                            <li style="background: #f3f3f3">
                                                                                                  };
                                                                                            </li>
                                                                                            <li>
                                                                                              };
                                                                                            </li>
                                                                                          </ol>
                                                                                        </div>
                                                                                      </div>
                                                                                    </div>

                                                                                    <p>
                                                                                    </p>

                                                                                    <h2>
                                                                                      Initialization
                                                                                    </h2>

                                                                                    <p>
                                                                                      With our circle function, we can have an array of circles that we will initiate more and more close to us with a slight shift of the angle each time:
                                                                                    </p>

                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:59e6b8f9-9a6f-44a1-8cb3-4bb601a1aed9">
                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                            <li>
                                                                                              <span style="color: #006400">// Initialization</span> <li style="background: #f3f3f3">
                                                                                                <span style="color: #0000ff">var</span> circles = []; <li>
                                                                                                  <li style="background: #f3f3f3">
                                                                                                    <span style="color: #0000ff">var</span> angle = Math.random() * Math.PI * 2.0; <li>
                                                                                                      <li style="background: #f3f3f3">
                                                                                                        <span style="color: #0000ff">var</span> depth = maxDepth; <li>
                                                                                                          <span style="color: #0000ff">var</span> depthStep = maxDepth / circlesCount; <li style="background: #f3f3f3">
                                                                                                            <span style="color: #0000ff">var</span> angleStep = (Math.PI * 2.0) / circlesCount; <li>
                                                                                                              <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> index = 0; index < circlesCount; index++) { <li style="background: #f3f3f3">
                                                                                                                circles[index] = <span style="color: #0000ff">new</span> Circle(depth, angle, index % 5 == 0 ? 200 : 255); <li>
                                                                                                                  <li style="background: #f3f3f3">
                                                                                                                    depth -= depthStep; <li>
                                                                                                                      angle -= angleStep; <li style="background: #f3f3f3">
                                                                                                                        }
                                                                                                                      </li></ol> </div> </div> </div> 
                                                                                                                      <h2>
                                                                                                                        Computing FPS
                                                                                                                      </h2>

                                                                                                                      <p>
                                                                                                                        We can compute FPS by measuring the amount of time between two calls to a given function. In our case, the function will be <em>computeFPS</em>. It will save the last 60 measures and will compute an average to produce the desired result:
                                                                                                                      </p>

                                                                                                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:6b11d91b-436a-4ed9-97e0-e3994c39a454">
                                                                                                                        <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                            <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                              <li>
                                                                                                                                <span style="color: #006400">// FPS</span> <li style="background: #f3f3f3">
                                                                                                                                  <span style="color: #0000ff">var</span> previous = []; <li>
                                                                                                                                    <span style="color: #0000ff">function</span> computeFPS() { <li style="background: #f3f3f3">
                                                                                                                                      <span style="color: #0000ff">if</span> (previous.length > 60) { <li>
                                                                                                                                        previous.splice(0, 1); <li style="background: #f3f3f3">
                                                                                                                                          } <li>
                                                                                                                                            <span style="color: #0000ff">var</span> start = (<span style="color: #0000ff">new</span> Date).getTime(); <li style="background: #f3f3f3">
                                                                                                                                              previous.push(start); <li>
                                                                                                                                                <span style="color: #0000ff">var</span> sum = 0; <li style="background: #f3f3f3">
                                                                                                                                                  <li>
                                                                                                                                                    <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> id = 0; id < previous.length &#8211; 1; id++) { <li style="background: #f3f3f3">
                                                                                                                                                      sum += previous[id + 1] &#8211; previous[id]; <li>
                                                                                                                                                        } <li style="background: #f3f3f3">
                                                                                                                                                          <li>
                                                                                                                                                            <span style="color: #0000ff">var</span> diff = 1000.0 / (sum / previous.length); <li style="background: #f3f3f3">
                                                                                                                                                              <li>
                                                                                                                                                                stats.innerHTML = diff.toFixed() + <span style="color: #800000">&#8221; fps&#8221;</span>; <li style="background: #f3f3f3">
                                                                                                                                                                  }
                                                                                                                                                                </li></ol> </div> </div> </div> 
                                                                                                                                                                <h2>
                                                                                                                                                                  Drawing and animations
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  The canvas is a <strong>direct mode</strong> tool. This means that we have to reproduce all the content of the canvas every time we need to change something.
                                                                                                                                                                </p>

                                                                                                                                                                <p>
                                                                                                                                                                  And first of all, we need to clear the content before each frame. The better solution to do that is to use <em>clearRect</em>:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a5589b59-dd68-4019-91ce-1643f8cd7574" class="wlWriterEditableSmartContent">
                                                                                                                                                                  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color:#006400">// Drawing & Animation</span>
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">function</span> clearCanvas() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              context.clearRect(0, 0, canvas.width, canvas.height);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <pre></pre>

                                                                                                                                                                <p>
                                                                                                                                                                  So the full wormhole drawing code will look like:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:60a3e728-19b8-496d-a9eb-e5243048f51b" class="wlWriterEditableSmartContent">
                                                                                                                                                                  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color:#0000ff">function</span> wormHole() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              computeFPS();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              canvas.width = window.innerWidth;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              canvas.height = window.innerHeight &#8211; 130 &#8211; 40;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              clearCanvas();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> index = 0; index < circlesCount; index++) {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  circles[index].draw();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              }
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              circles.sort(<span style="color:#0000ff">function</span> (a, b) {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  <span style="color:#0000ff">if</span> (a.depth > b.depth)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                      <span style="color:#0000ff">return</span> -1;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  <span style="color:#0000ff">if</span> (a.depth < b.depth)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                      <span style="color:#0000ff">return</span> 1;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                                  <span style="color:#0000ff">return</span> 0;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              });
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <pre></pre>

                                                                                                                                                                <p>
                                                                                                                                                                  The sort code is used to prevent circles from overlapping.
                                                                                                                                                                </p>

                                                                                                                                                                <h2>
                                                                                                                                                                  Setting up mode button
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  To finalize our background, we just need to hook up the mode button to display or hide the background:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:2e1d93c1-ded2-4e5e-afff-d40dc4154536" class="wlWriterEditableSmartContent">
                                                                                                                                                                  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                    <div style="background: #fff; overflow: auto">
                                                                                                                                                                      <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">var</span> wormHoleIntervalID = -1;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">function</span> startWormHole() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              <span style="color:#0000ff">if</span> (wormHoleIntervalID > -1)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                  clearInterval(wormHoleIntervalID);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              wormHoleIntervalID = setInterval(wormHole, 16);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).onclick = stopWormHole;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).innerHTML = <span style="color:#800000">"Standard Mode"</span>;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          <span style="color:#0000ff">function</span> stopWormHole() {
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              <span style="color:#0000ff">if</span> (wormHoleIntervalID > -1)
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                                  clearInterval(wormHoleIntervalID);
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              clearCanvas();
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).onclick = startWormHole;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                              document.getElementById(<span style="color:#800000">"wormHole"</span>).innerHTML = <span style="color:#800000">"Wormhole Mode"</span>;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          }
                                                                                                                                                                        </li>
                                                                                                                                                                        <li style="background: #f3f3f3">
                                                                                                                                                                          &nbsp;
                                                                                                                                                                        </li>
                                                                                                                                                                        <li>
                                                                                                                                                                          stopWormHole();
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <h1>
                                                                                                                                                                  <a id="setupgame"></a>Setting up the game
                                                                                                                                                                </h1>

                                                                                                                                                                <p>
                                                                                                                                                                  In order to simplify a bit the tutorial, the mouse handling code is already done. You can find all you need in the <em>mouse.js</em> file.&nbsp;
                                                                                                                                                                </p>

                                                                                                                                                                <p>
                                                                                                                                                                  <a href="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/0121.image_68A289F4.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/0121.image_5F00_68A289F4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="image" border="0"  src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/6560.image_thumb_2EB34708.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/6560.image_5F00_thumb_5F00_2EB34708.png" width="640" height="440" /></a>
                                                                                                                                                                </p>

                                                                                                                                                                <h2>
                                                                                                                                                                </h2>

                                                                                                                                                                <h2>
                                                                                                                                                                  Adding the game JavaScript file
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  The background is handled by <em>game.js</em> file. So we have to register it inside <em>index.htm</em>. So right before the body closing tag, we will add the following code:
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:04782472-7d9a-4002-b72f-a0436cc39cf7">
                                                                                                                                                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color: #0000ff"><</span><span style="color: #800000">script</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">=&#8221;text/javascript&#8221;</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">=&#8221;game.js&#8221;></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
                                                                                                                                                                        </li>
                                                                                                                                                                      </ol>
                                                                                                                                                                    </div>
                                                                                                                                                                  </div>
                                                                                                                                                                </div>

                                                                                                                                                                <h2>
                                                                                                                                                                  Updating HTML5 page
                                                                                                                                                                </h2>

                                                                                                                                                                <p>
                                                                                                                                                                  The game will use <strong>SVG</strong> (Scalable Vector Graphics) to display the bricks, pad and ball. The SVG is a retained mode tool. So you don’t need to redraw all every time you want to move or change an item.
                                                                                                                                                                </p>

                                                                                                                                                                <p>
                                                                                                                                                                  To add a SVG tag in our page, we just have to insert the following code (just after the canvas):
                                                                                                                                                                </p>

                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9f7f060d-d7e1-46a5-83bf-0a5e168f6584">
                                                                                                                                                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                        <li>
                                                                                                                                                                          <span style="color: #0000ff"><</span><span style="color: #800000">svg</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8221;svgRoot&#8221;></span> <li style="background: #f3f3f3">
                                                                                                                                                                            <span style="color: #0000ff"><</span><span style="color: #800000">circle</span> <span style="color: #ff0000">cx</span><span style="color: #0000ff">=&#8221;100&#8243;</span> <span style="color: #ff0000">cy</span><span style="color: #0000ff">=&#8221;100&#8243;</span> <span style="color: #ff0000">r</span><span style="color: #0000ff">=&#8221;10&#8243;</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8221;ball&#8221;</span> <span style="color: #0000ff">/></span> <li>
                                                                                                                                                                              <span style="color: #0000ff"><</span><span style="color: #800000">rect</span> <span style="color: #ff0000">id</span><span style="color: #0000ff">=&#8221;pad&#8221;</span> <span style="color: #ff0000">height</span><span style="color: #0000ff">=&#8221;15px&#8221;</span> <span style="color: #ff0000">width</span><span style="color: #0000ff">=&#8221;150px&#8221;</span> <span style="color: #ff0000">x</span><span style="color: #0000ff">=&#8221;200&#8243;</span> <span style="color: #ff0000">y</span><span style="color: #0000ff">=&#8221;200&#8243;</span> <span style="color: #ff0000">rx</span><span style="color: #0000ff">=&#8221;10&#8243;</span> <span style="color: #ff0000">ry</span><span style="color: #0000ff">=&#8221;20&#8243;/></span> <li style="background: #f3f3f3">
                                                                                                                                                                                <span style="color: #0000ff"></</span><span style="color: #800000">svg</span><span style="color: #0000ff">></span>
                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                              <pre></pre>

                                                                                                                                                                              <p>
                                                                                                                                                                                As you can note, the SVG starts with two already defined objects : a circle for the ball and a rectangle for the pad.
                                                                                                                                                                              </p>

                                                                                                                                                                              <h2>
                                                                                                                                                                                Defining constants and variables
                                                                                                                                                                              </h2>

                                                                                                                                                                              <p>
                                                                                                                                                                                In game.js file, we will start by adding some variables:
                                                                                                                                                                              </p>

                                                                                                                                                                              <pre></pre>

                                                                                                                                                                              <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:68a429c4-8f1a-4ac3-b1de-2af2df0b158b">
                                                                                                                                                                                <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                  <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                    <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                      <li>
                                                                                                                                                                                        <span style="color: #006400">// Getting elements</span> <li style="background: #f3f3f3">
                                                                                                                                                                                          <span style="color: #0000ff">var</span> pad = document.getElementById(<span style="color: #800000">&#8220;pad&#8221;</span>); <li>
                                                                                                                                                                                            <span style="color: #0000ff">var</span> ball = document.getElementById(<span style="color: #800000">&#8220;ball&#8221;</span>); <li style="background: #f3f3f3">
                                                                                                                                                                                              <span style="color: #0000ff">var</span> svg = document.getElementById(<span style="color: #800000">&#8220;svgRoot&#8221;</span>); <li>
                                                                                                                                                                                                <span style="color: #0000ff">var</span> message = document.getElementById(<span style="color: #800000">&#8220;message&#8221;</span>);
                                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                                              <p>
                                                                                                                                                                                                The ball will be defined by:
                                                                                                                                                                                              </p>

                                                                                                                                                                                              <ul>
                                                                                                                                                                                                <li>
                                                                                                                                                                                                  A position <li>
                                                                                                                                                                                                    A radius <li>
                                                                                                                                                                                                      A speed <li>
                                                                                                                                                                                                        A direction <li>
                                                                                                                                                                                                          Its previous position
                                                                                                                                                                                                        </li></ul> 
                                                                                                                                                                                                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:a6f8559d-b981-4bcd-bf1f-1d6febdedc58">
                                                                                                                                                                                                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                            <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                              <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                  <span style="color: #006400">// Ball</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                    <span style="color: #0000ff">var</span> ballRadius = ball.r.baseVal.value; <li>
                                                                                                                                                                                                                      <span style="color: #0000ff">var</span> ballX; <li style="background: #f3f3f3">
                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> ballY; <li>
                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> previousBallPosition = { x: 0, y: 0 }; <li style="background: #f3f3f3">
                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> ballDirectionX; <li>
                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> ballDirectionY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                <span style="color: #0000ff">var</span> ballSpeed = 10;
                                                                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                              <pre></pre>

                                                                                                                                                                                                                              <p>
                                                                                                                                                                                                                                The pad will be defined by:
                                                                                                                                                                                                                              </p>

                                                                                                                                                                                                                              <ul>
                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                  Width <li>
                                                                                                                                                                                                                                    Height <li>
                                                                                                                                                                                                                                      Position <li>
                                                                                                                                                                                                                                        Speed <li>
                                                                                                                                                                                                                                          Inertia value (just to make things smoother <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Sourire" src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/8623.wlEmoticon-smile_6FC1C66C.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/8623.wlEmoticon_2D00_smile_5F00_6FC1C66C.png" />)
                                                                                                                                                                                                                                        </li></ul> 
                                                                                                                                                                                                                                        <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:aad41503-c202-4357-b66b-fed07785e1b3">
                                                                                                                                                                                                                                          <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                            <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                              <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                                  <span style="color: #006400">// Pad</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                    <span style="color: #0000ff">var</span> padWidth = pad.width.baseVal.value; <li>
                                                                                                                                                                                                                                                      <span style="color: #0000ff">var</span> padHeight = pad.height.baseVal.value; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> padX; <li>
                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> padY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> padSpeed = 0; <li>
                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> inertia = 0.80;
                                                                                                                                                                                                                                                            </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                            <pre></pre>

                                                                                                                                                                                                                                                            <p>
                                                                                                                                                                                                                                                              Bricks will be saved in an array and will be defined by:
                                                                                                                                                                                                                                                            </p>

                                                                                                                                                                                                                                                            <ul>
                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                Width <li>
                                                                                                                                                                                                                                                                  Height <li>
                                                                                                                                                                                                                                                                    Margin between them <li>
                                                                                                                                                                                                                                                                      Lines count <li>
                                                                                                                                                                                                                                                                        Columns count
                                                                                                                                                                                                                                                                      </li></ul> 
                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                        We also need an offset and a variable for counting destroyed bricks.
                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:19c1b02e-a946-426e-a442-942eaecec77d">
                                                                                                                                                                                                                                                                        <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                            <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                <span style="color: #006400">// Bricks</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                  <span style="color: #0000ff">var</span> bricks = []; <li>
                                                                                                                                                                                                                                                                                    <span style="color: #0000ff">var</span> destroyedBricksCount; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                      <span style="color: #0000ff">var</span> brickWidth = 50; <li>
                                                                                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> brickHeight = 20; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> bricksRows = 5; <li>
                                                                                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> bricksCols = 20; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> bricksMargin = 15; <li>
                                                                                                                                                                                                                                                                                                <span style="color: #0000ff">var</span> bricksTop = 20;
                                                                                                                                                                                                                                                                                              </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                              <pre></pre>

                                                                                                                                                                                                                                                                                              <p>
                                                                                                                                                                                                                                                                                                And finally we also need the limits of the playground and a start date to compute session duration.
                                                                                                                                                                                                                                                                                              </p>

                                                                                                                                                                                                                                                                                              <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:02ffa719-cad2-46d9-a7c1-0ccaebcc469d">
                                                                                                                                                                                                                                                                                                <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                  <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                    <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                      <li>
                                                                                                                                                                                                                                                                                                        <span style="color: #006400">// Misc.</span> <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> minX = ballRadius; <li>
                                                                                                                                                                                                                                                                                                            <span style="color: #0000ff">var</span> minY = ballRadius; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> maxX; <li>
                                                                                                                                                                                                                                                                                                                <span style="color: #0000ff">var</span> maxY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                  <span style="color: #0000ff">var</span> startDate;
                                                                                                                                                                                                                                                                                                                </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                <h2>
                                                                                                                                                                                                                                                                                                                  Handling a brick
                                                                                                                                                                                                                                                                                                                </h2>

                                                                                                                                                                                                                                                                                                                <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:63327f88-eeaf-4151-846d-02548b7a1b47">
                                                                                                                                                                                                                                                                                                                  <p>
                                                                                                                                                                                                                                                                                                                    To create a brick, we will need a function that will add a new element to the svg root. It will also configure each brick with required information:
                                                                                                                                                                                                                                                                                                                  </p>

                                                                                                                                                                                                                                                                                                                  <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                    <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                      <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                        <li>
                                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> rect = document.createElementNS(<span style="color: #800000">&#8220;https://www.w3.org/2000/svg&#8221;</span>, <span style="color: #800000">&#8220;rect&#8221;</span>); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                            svg.appendChild(rect); <li>
                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                rect.setAttribute(<span style="color: #800000">&#8220;width&#8221;</span>, brickWidth); <li>
                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color: #800000">&#8220;height&#8221;</span>, brickHeight); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                    <li>
                                                                                                                                                                                                                                                                                                                                      <span style="color: #006400">// Random green color</span>&nbsp; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                        <span style="color: #0000ff">var</span> chars = <span style="color: #800000">&#8220;456789abcdef&#8221;</span>; <li>
                                                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">var</span> color = <span style="color: #800000">&#8220;&#8221;</span>; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                            <span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0; i < 2; i++) { <li>
                                                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> rnd = Math.floor(chars.length * Math.random()); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                color += chars.charAt(rnd); <li>
                                                                                                                                                                                                                                                                                                                                                  } <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                    rect.setAttribute(<span style="color: #800000">&#8220;fill&#8221;</span>, <span style="color: #800000">&#8220;#00&#8221;</span> + color + <span style="color: #800000">&#8220;00&#8221;</span>);
                                                                                                                                                                                                                                                                                                                                                  </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                                                  <pre></pre>

                                                                                                                                                                                                                                                                                                                                                  <p>
                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:cee407f0-82b9-49af-a79f-f4ef6febd772">
                                                                                                                                                                                                                                                                                                                                                      The brick function will also provide a <em>drawAndCollide</em> function to display a brick and to check if there is a collision with the ball:
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:7a38ed5e-c7fe-4c1d-b96f-9e7444838db1" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">this</span>.drawAndCollide = <span style="color:#0000ff">function</span> () {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (isDead)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Drawing</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"x"</span>, position.x);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"y"</span>, position.y);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Collision</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballX + ballRadius < position.x || ballX &#8211; ballRadius > position.x + brickWidth)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballY + ballRadius < position.y || ballY &#8211; ballRadius > position.y + brickHeight)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Dead</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">this</span>.remove();
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  isDead = <span style="color:#0000ff">true</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  destroyedBricksCount++;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Updating ball</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  ballX = previousBallPosition.x;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballY = previousBallPosition.y;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      Finally the full brick function will look like:
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:fcb65aeb-7b67-41a1-baed-be7ac333e0bf" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#006400">// Brick function</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> Brick(x, y) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> isDead = <span style="color:#0000ff">false</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> position = { x: x, y: y };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> rect = document.createElementNS(<span style="color:#800000">"https://www.w3.org/2000/svg"</span>, <span style="color:#800000">"rect"</span>);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  svg.appendChild(rect);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"width"</span>, brickWidth);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"height"</span>, brickHeight);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Random green color</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> chars = <span style="color:#800000">"456789abcdef"</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> color = <span style="color:#800000">""</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> i = 0; i < 2; i++) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">var</span> rnd = Math.floor(chars.length * Math.random());
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      color += chars.charAt(rnd);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  rect.setAttribute(<span style="color:#800000">"fill"</span>, <span style="color:#800000">"#00"</span> + color + <span style="color:#800000">"00"</span>);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">this</span>.drawAndCollide = <span style="color:#0000ff">function</span> () {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (isDead)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Drawing</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      rect.setAttribute(<span style="color:#800000">"x"</span>, position.x);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      rect.setAttribute(<span style="color:#800000">"y"</span>, position.y);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Collision</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (ballX + ballRadius < position.x || ballX &#8211; ballRadius > position.x + brickWidth)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (ballY + ballRadius < position.y || ballY &#8211; ballRadius > position.y + brickHeight)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Dead</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">this</span>.remove();
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      isDead = <span style="color:#0000ff">true</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      destroyedBricksCount++;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Updating ball</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballX = previousBallPosition.x;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballY = previousBallPosition.y;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Killing a brick</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">this</span>.remove = <span style="color:#0000ff">function</span> () {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">if</span> (isDead)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      svg.removeChild(rect);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  };
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                      Collisions with the pad and the playground
                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      The ball will also have collision functions that will handle collisions with the pad and the playground. These functions will have to update the ball direction when a collision will be detected.
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:4694a0a5-0519-4962-b1d9-9a868f20ac70" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#006400">// Collisions</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> collideWithWindow() {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballX < minX) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballX = minX;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionX *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">else</span> <span style="color:#0000ff">if</span> (ballX > maxX) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballX = maxX;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionX *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballY < minY) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballY = minY;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">else</span> <span style="color:#0000ff">if</span> (ballY > maxY) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      ballY = maxY;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      lost();
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> collideWithPad() {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballX + ballRadius < padX || ballX &#8211; ballRadius > padX + padWidth)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (ballY + ballRadius < padY)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">return</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballX = previousBallPosition.x;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  ballY = previousBallPosition.y;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY *= -1.0;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> dist = ballX &#8211; (padX + padWidth / 2);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionX = 2.0 * dist / padWidth;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> square = Math.sqrt(ballDirectionX * ballDirectionX + ballDirectionY * ballDirectionY);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionX /= square;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY /= square;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      <em>collideWithWindow</em> checks the limits of the playground and <em>collideWithPad</em> checks the limits of the pad (We add a subtle change here: the horizontal speed of the ball will be computed using the distance with the center of the pad).
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                      Moving the pad
                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      You can control the pad with the mouse or with the left and right arrows. The <em>movePad</em> function is responsible for handling pad movement. It will also handle the <strong>inertia</strong>:
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:31edfdac-5b87-4ec4-8a6d-219ad5e2db7f" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#006400">// Pad movement</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> movePad() {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  padX += padSpeed;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  padSpeed *= inertia;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (padX < minX)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      padX = minX;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (padX + padWidth > maxX)
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      padX = maxX &#8211; padWidth;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      The code responsible for handling inputs is pretty <strong>simple</strong>:
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:25b7b2bb-7259-49a0-8939-19f195d91cc7" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              registerMouseMove(document.getElementById(<span style="color:#800000">"gameZone"</span>), <span style="color:#0000ff">function</span> (posx, posy, previousX, previousY) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  padSpeed += (posx &#8211; previousX) * 0.2;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              });
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              window.addEventListener(<span style="color:#800000">'keydown'</span>, <span style="color:#0000ff">function</span> (evt) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">switch</span> (evt.keyCode) {
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Left arrow</span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">case</span> 37:
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          padSpeed -= 10;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">break</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#006400">// Right arrow   </span>
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">case</span> 39:
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                          padSpeed += 10;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                          <span style="color:#0000ff">break</span>;
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                              }, <span style="color:#0000ff">true</span>);
                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                      Game loop
                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                      Before setting up the game loop we need a function to define the playground size. This function will be called when window is resized.
                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:6a978274-8027-4aa0-995f-ca5cb7d50e88">
                                                                                                                                                                                                                                                                                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">function</span> checkWindow() { <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                maxX = window.innerWidth &#8211; minX; <li>
                                                                                                                                                                                                                                                                                                                                                                  maxY = window.innerHeight &#8211; 130 &#8211; 40 &#8211; minY; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                    padY = maxY &#8211; 30; <li>
                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                    </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      By the way, the game loop is the <strong>orchestrator</strong> here:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:9ac0018b-5083-48bb-8e67-a04caaf14330" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> gameLoop() {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  movePad();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Movements</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.x = ballX;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.y = ballY;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ballX += ballDirectionX * ballSpeed;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ballY += ballDirectionY * ballSpeed;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Collisions</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  collideWithWindow();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  collideWithPad();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Bricks</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> index = 0; index < bricks.length; index++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                      bricks[index].drawAndCollide();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Ball</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ball.setAttribute(<span style="color:#800000">"cx"</span>, ballX);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ball.setAttribute(<span style="color:#800000">"cy"</span>, ballY);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Pad</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  pad.setAttribute(<span style="color:#800000">"x"</span>, padX);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  pad.setAttribute(<span style="color:#800000">"y"</span>, padY);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">

                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Victory ?</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">if</span> (destroyedBricksCount == bricks.length) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                      win();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <h2>
                                                                                                                                                                                                                                                                                                                                                                      Initialization and victory
                                                                                                                                                                                                                                                                                                                                                                    </h2>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      The first step of initialization is creating bricks:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:04c38d14-380b-49d0-8c7b-67fd62775f27" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> generateBricks() {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Removing previous ones</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> index = 0; index < bricks.length; index++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                      bricks[index].remove();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#006400">// Creating new ones</span>
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> brickID = 0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">var</span> offset = (window.innerWidth &#8211; bricksCols * (brickWidth + bricksMargin)) / 2.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> x = 0; x < bricksCols; x++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                      <span style="color:#0000ff">for</span> (<span style="color:#0000ff">var</span> y = 0; y < bricksRows; y++) {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                          bricks[brickID++] = <span style="color:#0000ff">new</span> Brick(offset + x * (brickWidth + bricksMargin), y * (brickHeight + bricksMargin) + bricksTop);
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      The next step is about setting variables used by the game:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:39e8ec66-dedb-4f47-8246-2ffbd0031f7b" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color:#0000ff">function</span> initGame() {
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  message.style.visibility = <span style="color:#800000">"hidden"</span>;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  checkWindow();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>

                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  padX = (window.innerWidth &#8211; padWidth) / 2.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ballX = window.innerWidth / 2.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ballY = maxY &#8211; 60;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.x = ballX;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  previousBallPosition.y = ballY;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>

                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  padSpeed = 0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  ballDirectionX = Math.random();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  ballDirectionY = -1.0;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                              &nbsp;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                                  generateBricks();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                  gameLoop();
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              }
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      Every time the user will change the window size, we will have to reset the game:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:c61593d3-998c-491c-a1e5-2835fbb1cdbf">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              window.onresize = initGame;
                                                                                                                                                                                                                                                                                                                                                                            </li>
                                                                                                                                                                                                                                                                                                                                                                          </ol>
                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                    </div>

                                                                                                                                                                                                                                                                                                                                                                    <p>
                                                                                                                                                                                                                                                                                                                                                                      Then we have to attach an event handler to the new game button:
                                                                                                                                                                                                                                                                                                                                                                    </p>

                                                                                                                                                                                                                                                                                                                                                                    <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:ccab9bc9-e132-406d-9270-4d172d330b3f">
                                                                                                                                                                                                                                                                                                                                                                      <div style="border-bottom: #000080 1px solid; border-left: #000080 1px solid; font-family: 'Courier New', courier, monospace; color: #000; font-size: 10pt; border-top: #000080 1px solid; border-right: #000080 1px solid">
                                                                                                                                                                                                                                                                                                                                                                        <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                          <ol style="padding-bottom: 0px; margin: 0px; padding-left: 5px; padding-right: 0px; background: #ffffff; padding-top: 0px">
                                                                                                                                                                                                                                                                                                                                                                            <li>
                                                                                                                                                                                                                                                                                                                                                                              <span style="color: #0000ff">var</span> gameIntervalID = -1; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                <span style="color: #0000ff">function</span> startGame() { <li>
                                                                                                                                                                                                                                                                                                                                                                                  initGame(); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                    <li>
                                                                                                                                                                                                                                                                                                                                                                                      destroyedBricksCount = 0; <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                        <li>
                                                                                                                                                                                                                                                                                                                                                                                          <span style="color: #0000ff">if</span> (gameIntervalID > -1) <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                            clearInterval(gameIntervalID); <li>
                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                startDate = (<span style="color: #0000ff">new</span> Date()).getTime(); ; <li>
                                                                                                                                                                                                                                                                                                                                                                                                  gameIntervalID = setInterval(gameLoop, 16); <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                    } <li>
                                                                                                                                                                                                                                                                                                                                                                                                      <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                        document.getElementById(<span style="color: #800000">&#8220;newGame&#8221;</span>).onclick = startGame;
                                                                                                                                                                                                                                                                                                                                                                                                      </li></ol> </div> </div> </div> 
                                                                                                                                                                                                                                                                                                                                                                                                      <pre></pre>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        Finally, we will add two functions for handling start and end of the game:
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:662cd033-60ad-4417-ac1a-c3335106d2d2" class="wlWriterEditableSmartContent">
                                                                                                                                                                                                                                                                                                                                                                                                        <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
                                                                                                                                                                                                                                                                                                                                                                                                          <div style="background: #fff; max-height: 500px; overflow: auto">
                                                                                                                                                                                                                                                                                                                                                                                                            <ol style="background: #ffffff; margin: 0; padding: 0 0 0 5px;">
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                <span style="color:#0000ff">var</span> gameIntervalID = -1;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                <span style="color:#0000ff">function</span> lost() {
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    clearInterval(gameIntervalID);
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    gameIntervalID = -1;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>

                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    message.innerHTML = <span style="color:#800000">"Game over !"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    message.style.visibility = <span style="color:#800000">"visible"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                &nbsp;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                <span style="color:#0000ff">function</span> win() {
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    clearInterval(gameIntervalID);
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    gameIntervalID = -1;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                &nbsp;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    <span style="color:#0000ff">var</span> end = (<span style="color:#0000ff">new</span> Date).getTime();
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                &nbsp;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                    message.innerHTML = <span style="color:#800000">"Victory ! ("</span> + Math.round((end &#8211; startDate) / 1000) + <span style="color:#800000">"s)"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    message.style.visibility = <span style="color:#800000">"visible"</span>;
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                              <li style="background: #f3f3f3">
                                                                                                                                                                                                                                                                                                                                                                                                                }
                                                                                                                                                                                                                                                                                                                                                                                                              </li>
                                                                                                                                                                                                                                                                                                                                                                                                            </ol>
                                                                                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                      </div>

                                                                                                                                                                                                                                                                                                                                                                                                      <h2>
                                                                                                                                                                                                                                                                                                                                                                                                        <a id="conclusion"></a>Conclusion
                                                                                                                                                                                                                                                                                                                                                                                                      </h2>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        You are now a <strong>game developer</strong>! Using the power of accelerated graphics, we have developed a small game but with really interesting special effects!
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        <a href="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/0525.image_2727D79B.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/0525.image_5F00_2727D79B.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px" title="image" border="0"  src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/44/73/metablogapi/1602.image_thumb_3F4B41F6.png" original-url="https://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-44-73-metablogapi/1602.image_5F00_thumb_5F00_3F4B41F6.png" width="640" height="400" /></a>
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <p>
                                                                                                                                                                                                                                                                                                                                                                                                        It’s now up to you to update the game to make it the next <strong>blockbuster</strong>!
                                                                                                                                                                                                                                                                                                                                                                                                      </p>

                                                                                                                                                                                                                                                                                                                                                                                                      <h1>
                                                                                                                                                                                                                                                                                                                                                                                                        To go further
                                                                                                                                                                                                                                                                                                                                                                                                      </h1>

                                                                                                                                                                                                                                                                                                                                                                                                      <ul>
                                                                                                                                                                                                                                                                                                                                                                                                        <li>
                                                                                                                                                                                                                                                                                                                                                                                                          <a title="https://www.beautyoftheweb.com/" href="https://www.beautyoftheweb.com/">https://www.beautyoftheweb.com/</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                            <a title="https://ie.microsoft.com/testdrive/" href="https://ie.microsoft.com/testdrive/">https://ie.microsoft.com/testdrive/</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                              <a title="https://blogs.msdn.com/b/eternalcoding/archive/2011/07/25/feedback-of-a-graphic-development-using-html5-amp-javascript.aspx" href="https://blogs.msdn.com/b/eternalcoding/archive/2011/07/25/feedback-of-a-graphic-development-using-html5-amp-javascript.aspx">https://blogs.msdn.com/b/eternalcoding/archive/2011/07/25/feedback-of-a-graphic-development-using-html5-amp-javascript.aspx</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                                <a title="https://dev.w3.org/html5/spec/Overview.html" href="https://dev.w3.org/html5/spec/Overview.html">https://dev.w3.org/html5/spec/Overview.html</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                                  <a title="https://www.w3.org/TR/SVG/" href="https://www.w3.org/TR/SVG/">https://www.w3.org/TR/SVG/</a> <li>
                                                                                                                                                                                                                                                                                                                                                                                                                    <a title="https://dev.w3.org/html5/spec/the-canvas-element.html" href="https://dev.w3.org/html5/spec/the-canvas-element.html">https://dev.w3.org/html5/spec/the-canvas-element.html</a>
                                                                                                                                                                                                                                                                                                                                                                                                                  </li></ul>
Dev

Silverlight 5 RC–What’s new in the 3D world?

Silverlight 5 RC is now available and you can grab it here.

If you want to know more about non 3D features, here are some interesting posts:

This release also introduces a lot of new features for XNA support in Silverlight 5:

Assemblies

The first thing you will note is the rename of the assemblies:

  • Microsoft.Xna.Framework.Silverlight became System.Windows.Xna.dll.
  • Audio moved from System.Windows.dll to Microsoft.Xna.Framework.dll

GraphicsDevice

The device is no longer handled by the DrawEventArgs class. It is now available on GraphicsDeviceManager.Current.GraphicsDevice. So it is far easier to initialize your code because you don’t have to wait for the first draw to get the device:






  1. private void myDrawingSurface_Draw(object sender, DrawEventArgs e)


  2. {


  3. // Render scene


  4. scene.Draw();


  5.  


  6. // Let’s go for another turn!


  7. e.InvalidateSurface();


  8. }


  9.  


  10. private void UserControl_Loaded(object sender, RoutedEventArgs e)


  11. {


  12. // Check if GPU is on


  13. if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware)


  14. {


  15. MessageBox.Show(“Please activate enableGPUAcceleration=true on your Silverlight plugin page.”, “Warning”, MessageBoxButton.OK);


  16. }


  17.  


  18. // Create the scene


  19. scene = new Scene(GraphicsDeviceManager.Current.GraphicsDevice);


  20. }




Effect classes

A new base class for effect was introduced. It has the same features as the Effect class in XNA.

Obviously the 5 children of this class are also supported:

So from now, you can write the following code:






  1. // Clearing screen


  2. GraphicsDeviceManager.Current.GraphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, new Color(0.2f, 0.2f, 0.2f, 1.0f), 1.0f, 0);


  3.  


  4. basicEffect = new BasicEffect(GraphicsDeviceManager.Current.GraphicsDevice);


  5. basicEffect.EnableDefaultLighting();


  6. basicEffect.VertexColorEnabled = true;


  7.  


  8. // Compute matrices


  9. Matrix world = Matrix.CreateRotationX(rotationAngle) * Matrix.CreateRotationY(rotationAngle);


  10. Matrix view = Matrix.CreateLookAt(new Vector3(0, 0, -5.0f), Vector3.Zero, Vector3.UnitY);


  11. Matrix projection = Matrix.CreatePerspectiveFieldOfView(0.85f, aspectRatio, 0.01f, 1000.0f);


  12.  


  13. // Affect parameters values


  14. basicEffect.World = world;


  15. basicEffect.View = view;


  16. basicEffect.Projection = projection;


  17.  


  18. foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)


  19. {


  20. // Apply pass


  21. pass.Apply();


  22.  


  23. // Drawing the cube


  24. cube.Draw();


  25. }


  26.  


  27. // Animate rotation


  28. rotationAngle += 0.05f;




Actually, this is really simple now to port a XNA 4.0 code to Silverlight 5.

RenderTargets

Silverlight 5 RC now supports render target (2d as well as cube). So you can produce stellar effects such as mirrors, real-time environment maps, shadows, etc.

Like in XNA 4.0, you can easily create and affect a render target:






  1. RenderTarget2D renderTarget2D = new RenderTarget2D(GraphicsDeviceManager.Current.GraphicsDevice, 200, 200, false, SurfaceFormat.Color, DepthFormat.Depth24, 2, RenderTargetUsage.DiscardContents);


  2.  


  3. GraphicsDeviceManager.Current.GraphicsDevice.SetRenderTarget(renderTarget2D);




Multisample

You can activate multisample on render targets and on the main DrawingSurface. For the DrawingSurface, you must define it directly in the XAML code:






  1. <DrawingSurface Draw=”OnDraw” x:Name=”renderSurface”>


  2. <DrawingSurface.CompositionMode>


  3. <OffscreenCompositionMode PreferredMultiSampleCount=”2” />


  4. </DrawingSurface.CompositionMode>


  5. </DrawingSurface>




You can note the soft edges on the roof for example.

Using the same Xaml tag (CompositionMode), you can also define the depth buffer and stencil buffer format.






  1. <DrawingSurface.CompositionMode>


  2. <OffscreenCompositionMode PreferredMultiSampleCount=”2” PreferredDepthStencilFormat=”Depth24Stencil8” RenderTargetUsage=”DiscardContents”/>


  3. </DrawingSurface.CompositionMode>




Math library

And last but not least, the Microsoft.Xna.Framework.Math is now included in the SDK! Vectors, Matrices and other painful mathematical concepts are now handled for you Sourire.

Conclusion

Finally Silverlight 5 offers a really well integrated XNA experience. You will be able to reuse directly a large part of your XNA 4.0 code. The only point which is missing is the support for the content pipeline….but…wait…. ^^

Dev

Mishra Reader beta 1 is out

Mishra Reader is a Google Reader client written with WPF 4.0. You can find the complete project with sources just here:


https://mishrareader.codeplex.com


So what’s new in this release?


Collapsible headers


The subscriptions are now group by categories which are represented by collapsible headers:



Publish to Facebook and Twitter

You can now link a post to your Facebook wall or to your Twitter status (including support for bit.ly)

Revamping of options UI

The options screen has been revamped and some new options were added.

For example, you can now change the accent color to personalize your Mishra Sourire

Starred items

Mishra Reader allows you to mark items as starred so you can keep them for further reading.

And a lot of others things

The complete what’s new is:

  • Scaled picture can be saved to clipboard
  • Application icon in notification area
  • Notifications support with ability to hide minimized application
  • French support
  • Starred support
  • Collapsible headers
  • Integration to Windows 7 Taskbar
  • Auto save of application size and position
  • About page
  • New keyboard shortcuts : J, K, M and V (same behavior as Google Reader)
  • Search in post content (Ctrl + F key)
  • Possibility to view all items in a category (click on the category name)
  • Accent color can be changed
  • Publish to Facebook
  • Publish to Twitter
  • Using NReadability, you can display a decluttered version of posts
  • Network optimizations
Dev

The design of Mishra Reader

As you may know, I’m currently working on Mishra Reader which is intended to be a cool Google Reader for Windows.

I develop it using WPF with design and usability in mind.

I’m not a designer (at all) but following some guidance I achieved to provide a visually appealing application. So I will try to expose here some tricks to help developers producing more beautiful applications

_Note: The screens here are from the beta 1 which will be available this Friday Clignement d'œil._

Colors choice

First of all, we have to keep the coherence of the application by selecting a few numbers of colors.

For Mishra Reader, I selected 4 colors:

  • Background color: this color is used to paint the background of controls
  • Foreground color: this color is used to draw text and border of unfocused controls
  • Darker foreground color: I use this color when I want to display some texts alongside a more descriptive version. The foreground color is for the main text and the darker one is for the description
  • Accent color : Like in Windows Phone, I have a special color to attract user attention

So with only 4 colors (and no more, we don’t want to draw a rainbow), we can produce something like that:

You have to be focused on keeping this coherence with colors and select the good one at the right place. For example, in the options screen, I designed a checkbox and use the accent color in it. Of course, the accent color must be displayed only when the checkbox is checked:

We can also note that help message use the darker foreground color to distinguish with the option text.

Finally, as I wanted to allow user to change the accent color, I cannot leave the application logo unchanged. So I developed a small bunch of code to apply the accent color to a grayscale logo:

The code used is the following:






  1. public static WriteableBitmap GetColoredLogo(OptionsManager optionsManager)


  2. {


  3. WriteableBitmap bmp = new WriteableBitmap(new BitmapImage(new Uri(“pack://application:,,,/Assets/MishraReader.png”)));


  4. int size = bmp.PixelHeight bmp.PixelWidth bmp.Format.BitsPerPixel / 8;


  5. byte[] pixels = new byte[size];


  6. Color accentColor = (Color) ColorConverter.ConvertFromString(optionsManager.AccentColorCode);


  7.  


  8. bmp.CopyPixels(pixels, bmp.PixelWidth bmp.Format.BitsPerPixel / 8, 0);


  9.  


  10. for (int index = 0; index < size; index += 4)


  11. {


  12. byte b = pixels[index];


  13. byte g = pixels[index + 1];


  14. byte r = pixels[index + 2];


  15.  


  16. if (r > 250 && g > 250 && b > 250)


  17. continue;


  18.  


  19. pixels[index + 2] = (byte)Range(0, 255, accentColor.R Range(0, 1, r / 255.0f + 0.4f));


  20. pixels[index + 1] = (byte)Range(0, 255, accentColor.G Range(0, 1, b / 255.0f + 0.4f));


  21. pixels[index] = (byte)Range(0, 255, accentColor.B Range(0, 1, b / 255.0f + 0.4f));


  22. }


  23.  


  24. bmp.WritePixels(new Int32Rect(0, 0, bmp.PixelWidth, bmp.PixelHeight), pixels, bmp.PixelWidth * bmp.Format.BitsPerPixel / 8, 0);


  25.  


  26. return bmp;


  27. }




Application in motion

The second point to take into account is the animations. You should never change something on your UI without an animation. And therefore you should never do something that can stuck the rendering and the animations.

In Mishra, I took a lot of time checking that my code is running in a background thread without interfering too much with the main thread. To do so, I always use the Dispatcher with a really low priority in order to not disturb animations:






  1. Dispatcher.BeginInvoke(DispatcherPriority.ContextIdle, new Action(() =>




I also spent a lot of time writing animations for each state that I had to change.

About animations, it is better to use some easing functions in order to have non linear transitions. Easing functions such as BackEase or CircleEase give an impression of performance. For example here is the code for displaying a control:






  1. <Storyboard x:Key=”showSubscription”>


  2. <DoubleAnimation Duration=”0:0:0.300” To=”1” Storyboard.TargetName=”addSubscription” Storyboard.TargetProperty=”Opacity”/>


  3. <DoubleAnimation Duration=”0:0:0.300” To=”0” Storyboard.TargetName=”addSubscription” Storyboard.TargetProperty=”(UIElement.RenderTransform).(TranslateTransform.Y)”>


  4. <DoubleAnimation.EasingFunction>


  5. <BackEase Amplitude=”0.6” EasingMode=”EaseOut”/>


  6. </DoubleAnimation.EasingFunction>


  7. </DoubleAnimation>


  8. <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”addSubscription” Storyboard.TargetProperty=”Visibility”>


  9. <DiscreteObjectKeyFrame KeyTime=”0”>


  10. <DiscreteObjectKeyFrame.Value>


  11. <Visibility>


  12. Visible


  13. </Visibility>


  14. </DiscreteObjectKeyFrame.Value>


  15. </DiscreteObjectKeyFrame>


  16. </ObjectAnimationUsingKeyFrames>


  17. </Storyboard>




As you can see, I animated the opacity with a linear DoubleAnimation but the TranslateTransform.Y is animated by a beautiful BackEase function.

With the entire user interface moving smoothly with non-linear animations, the application is seen as efficient even if you are performing a lot of computations in the background.

Help your users: give them only what they need

Finally the last trick I want to share is about simplicity. Simple is beautiful! So do not produce overloaded interface with a lot of buttons on it.

You should instead present a clean user interface and make appear controls when they are required. For example, here we can see new icons appear only when the mouse is over an item:

Conclusion

Of course there is a lot of others points to take in account when you want to produce a good user interface. But as a developer, following these simple tricks is a good start Sourire

Dev

Kinect Toolbox 1.1 : Template based posture detector and Voice Commander

In a previous article I introduced the Kinect Toolbox : https://blogs.msdn.com/b/eternalcoding/archive/2011/07/04/gestures-and-tools-for-kinect.aspx.

Kinect Toolbox v1.1 is now out and this new version adds support for some cool features:

  • Templated posture detector
  • Voice Commander
  • NuGet package

You can find the toolbox here : https://kinecttoolbox.codeplex.com or you can grad it using NuGet : https://nuget.org/List/Packages/KinectToolbox

Templated posture detector

Using the same algorithm as TemplatedGestureDetector, you can now use a learning machine and a matching system to detect postures. In the sample attached with the toolbox I detect the ”T” posture (i.e. when you body is like the T letter):

To do that, I developed a new class : TemplatedPostureDetector which uses an internal learning machine (like the gesture detector) :




public class TemplatedPostureDetector : PostureDetector
{
const float Epsilon = 0.02f;
const float MinimalScore = 0.95f;
const float MinimalSize = 0.1f;
readonly LearningMachine learningMachine;
readonly string postureName;




public LearningMachine LearningMachine
{
get { return learningMachine; }
}




public TemplatedPostureDetector(string postureName, Stream kbStream) : base(4)
{
this.postureName = postureName;
learningMachine = new LearningMachine(kbStream);
}




public override void TrackPostures(ReplaySkeletonData skeleton)
{
if (LearningMachine.Match(skeleton.Joints.ToListOfVector2(), Epsilon, MinimalScore, MinimalSize))
RaisePostureDetected(postureName);
}




public void AddTemplate(ReplaySkeletonData skeleton)
{
RecordedPath recordedPath = new RecordedPath(skeleton.Joints.Count);




recordedPath.Points.AddRange(skeleton.Joints.ToListOfVector2());




LearningMachine.AddPath(recordedPath);
}




public void SaveState(Stream kbStream)
{
LearningMachine.Persist(kbStream);
}
}





To use this class, we only need to instantiate it and give it some templates (using the [Capture T] button or using a previously saved file). After that, the class can track postures for each skeleton it receives:




Stream recordStream = File.Open(letterT_KBPath, FileMode.OpenOrCreate);
templatePostureDetector = new TemplatedPostureDetector(“T”, recordStream);
templatePostureDetector.PostureDetected += templatePostureDetector_PostureDetected;






templatePostureDetector.TrackPostures(skeleton);






void templatePostureDetector_PostureDetected(string posture)
{
MessageBox.Show(“Give me a…….” + posture);
}




Voice Commander


One thing worth noting when you develop with Kinect is that you will spend your time getting up and sitting down Sourire. In the previous article, I introduced the replay system which is very useful to record a Kinect session.


But when you are alone, even the recording is painful because you cannot be at the same time in front of the sensor and in front of your keyboard to start/stop the record.


So here enters the Voice Commander (tadam!!). This class can use a list of words and raise an event when it detect one of them (using the microphone array of the sensor). So for example, you can use “record” and “stop” orders to launch and stop the recording session while you stay in front of the sensor!


The code is really simple (thanks to Kinect for Windows SDK and Microsoft Speech Platform SDK):




public class VoiceCommander
{
const string RecognizerId = “SR_MS_en-US_Kinect_10.0”;
Thread workingThread;
readonly Choices choices;
bool isRunning;




public event Action<string> OrderDetected;




public VoiceCommander(params string[] orders)
{
choices = new Choices();
choices.Add(orders);
}




public void Start()
{
workingThread = new Thread(Record);
workingThread.IsBackground = true;
workingThread.SetApartmentState(ApartmentState.MTA);
workingThread.Start();
}




void Record()
{
using (KinectAudioSource source = new KinectAudioSource
{
FeatureMode = true,
AutomaticGainControl = false,
SystemMode = SystemMode.OptibeamArrayOnly
})
{
RecognizerInfo recognizerInfo = SpeechRecognitionEngine.InstalledRecognizers().Where(r => r.Id == RecognizerId).FirstOrDefault();




if (recognizerInfo == null)
return;




SpeechRecognitionEngine speechRecognitionEngine = new SpeechRecognitionEngine(recognizerInfo.Id);




var gb = new GrammarBuilder {Culture = recognizerInfo.Culture};
gb.Append(choices);




var grammar = new Grammar(gb);




speechRecognitionEngine.LoadGrammar(grammar);
using (Stream sourceStream = source.Start())
{
speechRecognitionEngine.SetInputToAudioStream(sourceStream, new SpeechAudioFormatInfo(EncodingFormat.Pcm, 16000, 16, 1, 32000, 2, null));




isRunning = true;
while (isRunning)
{
RecognitionResult result = speechRecognitionEngine.Recognize();




if (result != null && OrderDetected != null && result.Confidence > 0.7)
OrderDetected(result.Text);
}
}
}
}




public void Stop()
{
isRunning = false;
}
}




<p>
  Using this class is really simple:
</p>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:b69b555c-7afd-4ff3-9170-4a90f0997b96" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background-color: #ffffff; overflow: auto; padding: 2px 5px;">
      voiceCommander = <span style="color:#0000ff">new</span> <span style="color:#2b91af">VoiceCommander</span>(<span style="color:#a31515">"record"</span>, <span style="color:#a31515">"stop"</span>);<br /> voiceCommander.OrderDetected += voiceCommander_OrderDetected;</p> 

      <p>
        voiceCommander.Start();
      </p>
    </div></p>
  </div></p>
</div>

<div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:9ce6104f-a9aa-4a17-a79f-3a39532ebf7c:8e8c243c-89a5-494e-a962-29ee664dee83" class="wlWriterEditableSmartContent">
  <div style="border: #000080 1px solid; color: #000; font-family: 'Courier New', Courier, Monospace; font-size: 10pt">
    <div style="background-color: #ffffff; overflow: auto; padding: 2px 5px;">
      <span style="color:#0000ff">void</span> voiceCommander_OrderDetected(<span style="color:#0000ff">string</span> order)<br /> {<br />     Dispatcher.Invoke(<span style="color:#0000ff">new</span> <span style="color:#2b91af">Action</span>(() =><br />     {<br />         <span style="color:#0000ff">if</span> (audioControl.IsChecked == <span style="color:#0000ff">false</span>)<br />             <span style="color:#0000ff">return</span>;</p> 

      <p>
                <span style="color:#0000ff">switch</span> (order)<br />         {<br />             <span style="color:#0000ff">case</span> <span style="color:#a31515">"record"</span>:<br />                 DirectRecord(<span style="color:#2b91af">Path</span>.Combine(<span style="color:#2b91af">Environment</span>.GetFolderPath(<span style="color:#2b91af">Environment</span>.<span style="color:#2b91af">SpecialFolder</span>.Desktop), <span style="color:#a31515">"kinectRecord"</span> + <span style="color:#2b91af">Guid</span>.NewGuid() + <span style="color:#a31515">".replay"</span>));<br />                 <span style="color:#0000ff">break</span>;<br />             <span style="color:#0000ff">case</span> <span style="color:#a31515">"stop"</span>:<br />                 StopRecord();<br />                 <span style="color:#0000ff">break</span>;<br />         }<br />     }));<br /> }</div>
      </p>
    </div></p>
  </div>

  <h1>
    Conclusion
  </h1>

  <p>
    With Kinect Toolbox 1.1, you have a set of tools to help you develop fun and powerful applications with Kinect for Windows SDK!
  </p>
Dev

Mishra Reader–Alpha 3

The alpha 3 version of Mishra Reader is available through ClickOnce just here:

https://www.catuhe.com/mishrareader/publish.htm

(Edit: I just changed the target platform from AnyCPU to x86 to allow Flash inside Mishra. If you had already installed MishraReader, just uninstall it and reinstall it from the same location)

This new version includes:

  • Categories support
  • Full support of subscriptions : You can now add, update and delete subscriptions

  • UI revamping
  • Lots of bugs annihilated

The next version will be the first beta and will add the notification services.

Dev

Webcasts de la session “Taming GPU Compute with C++ AMP”

C++ AMP (pour Accelerated Massively Parallel) est une technologie qui va permettre à un programme écrit en C++ de faire appel à la puissance massive de traitement parallèle des GPU (grâce bien sur à DirectCompute) et ceci de manière imbriquée dans le code.

Vous pourrez tout au long de ces deux webcasts avoir le plaisir de voir Steve Teixeira, le directeur du groupe “Parallel Computing Platform”, décrire et présenter cette technologie:


 


“);

Dev

MishraReader Alpha 2

New alpha version of MishraReader is available there:

https://www.catuhe.com/files/mishrareader.zip (87ko)

This version includes:

  • Some UX improvements (thanks to Olivier Courtois)
  • Better background engine
  • Correction of tons of bugs (at least…)
  • Better HTML parser
  • Right picture in preview list is now clickable:

  • WebBrowser is now focused when a page is shown
  • You can now define how many items are retrieved for each blog:

  • “Mark all as read” button

 

The next version will in particular include tags support.