"on" -> "in" the figure/image/movies; minor grammar fixes

Author: bluebarnacles

03-quickstart.rst

@@ -73,7 +73,7 @@ the better) and the homogeneity of the triangles (we prefer to have triangles
 that have more or less the same size and to not have any degenerated triangle).
 
 In our case, we want to render a square and we need to find the proper
-triangulation (which is not unique as illustrated on the figure). Since we want
+triangulation (which is not unique as illustrated in the figure). Since we want
 to minimize the number of triangles, we'll use the 2 triangles solution that
 requires only 4 (shared) vertices corresponding to the four corners of the
 quad. However, you can see from the figure that we could have used different
@@ -110,7 +110,7 @@ GL Primitives
 Ok, now things are getting serious because we need to actually tell OpenGL what
 to do with the vertices, i.e. how to render them? What do they describe in terms
 of geometrical primitives? This is quite an important topic since this will
-determine how fragments will actually be generated as illustrated on the image
+determine how fragments will actually be generated as illustrated in the image
 below:
 
 
@@ -151,12 +151,12 @@ choice, because a triangle offers the possibility of having a nice and intuitive
 interpolation of any point that is inside the triangle. If you look back at
 the graphic pipeline as it has been introduced in the `Modern OpenGL`_ section,
 you can see that the rasterisation requires for OpenGL to generate fragments
-inside the triangle but also to interpolate values (colors on the figure). One
+inside the triangle but also to interpolate values (colors in the figure). One
 of the legitimate questions to be solved is then: if I have a triangle
 (V₁,V₂,V₃), each summit vertex having (for example) a different color, what is
 the color of a fragment `p` inside the triangle? The answer is `barycentric
 interpolation <https://en.wikibooks.org/wiki/GLSL_Programming/Rasterization>`_
-as illustrated on the figure on the right.
+as illustrated in the figure on the right.
 
 More precisely, for any point p inside a triangle `A = (V₁,V₂,V₃)`, we consider
 triangles:

04-maths.rst

@@ -67,7 +67,7 @@ and default value of 1 for all the `w` such that our new point set is now
 point `(x,w)` in projective space corresponds to the point `x/w` (if `w` ≠ 0)
 in our unidimensional Euclidean space. From this conversion, we can see
 immediately that there exists actually an infinite set of homogenous coordinates
-that correspond to a single Cartesian coordinate as illustrated on the figure.
+that correspond to a single Cartesian coordinate as illustrated in the figure.
 
 .. figure:: images/chapter-04/1D-Projection.png
    :figwidth: 100%
@@ -85,7 +85,7 @@ that correspond to a single Cartesian coordinate as illustrated on the figure.
 Projections
 +++++++++++
 
-We are now ready to project our point set onto the screen. As shown on the
+We are now ready to project our point set onto the screen. As shown in the
 figure above, we can use an orthographic (all rays are parallel) or a linear
 projection (rays originate from the camera point and hit the screen, passing
 through points to be projected). For these two projections, results are similar
@@ -96,7 +96,7 @@ homogenous coordinates make sense. For this (arbitrary) projection, we decided
 that the further the point is from the origin, the further away from the
 origin its projection will be. To do that, we measure the distance of the point
 to the origin and we add this distance to its `w` value before projecting it
-(this corresponds to the black circles on the figure) using the linear
+(this corresponds to the black circles in the figure) using the linear
 projection. It is to be noted that this new projection does not conserve the
 distance relationship and if we consider the set of projected points `[P(-1.0),
 P(-0.5), P(0.0), P(+0.5), P(+1.0)]`, we have `║P(-1.0)-P(-0.5)]║ >
@@ -359,8 +359,8 @@ For example, here is a translation matrix as returned by the
                                                      ↑   ↑   ↑
                                                      13  14  15
 
-So this means you would use this translation on the left when uploaded to the
-GPU, but you would use on the right with Python/NumPy:
+So this means you would use the translation on the left when uploading to the
+GPU, but you would use that on the right with Python/NumPy:
 
 .. code:: python
 
@@ -377,16 +377,16 @@ Projections
 In order to define a projection, we need to specify first what do we want
 to view, that is, we need to define a viewing volume such that any object
 within the volume (even partially) will be rendered while objects outside
-won't. On the image below, the yellow and red spheres are within the volume
-while the green one is not and does not appear on the projection.
+won't. In the image below, the yellow and red spheres are within the volume
+while the green one is not and does not appear in the projection.
 
 .. image:: images/chapter-04/projection.png
    :width: 100%
 
 There exist many different ways to project a 3D volume onto a 2D screen but
 we'll only use the `perspective projection`_ (distant objects appear smaller)
 and the `orthographic projection`_ which is a parallel projection (distant
-objects have the same size as closer ones) as illustrated on the image
+objects have the same size as closer ones) as illustrated in the image
 above. Until now (previous section), we have been using implicitly an
 orthographic projection in the z=0 plane.
 

06-anti-grain.rst

@@ -55,7 +55,7 @@ circle (center and radius), the rasterizer examines the center of each pixel to
 determine if it falls inside or outside the shape. The result is illustrated on
 the right part of the figure. Even if the center of a pixel is very close but
 outside of the circle, it is not painted as it is shown for the thicker square
-on the figure. More generally, without anti-aliasing, a pixel will be only on
+in the figure. More generally, without anti-aliasing, a pixel will be only on
 (inside) or off (outside), leading to very hard jagged edges and a very
 approximate shape for small sizes as well.
 
@@ -82,7 +82,7 @@ Sample based methods
 One of the simplest method to remove aliasing consists of using several
 samples to estimate the final color of a fragment. Instead of only considering
 the center of the pixel, one case use several samples over the whole surface of
-a pixel in order to have a better estimate as shown on the figure on the
+a pixel in order to have a better estimate as shown in the figure on the
 right. A fragment that was previously considered outside, based on its center
 only, can now be considered half inside / half outside. This multi-sampling
 helps to attenuate the jagged edges we've seen in the previous section. In the
@@ -160,7 +160,7 @@ Coverage methods
    Rendering of a disc using exact coverage anti-aliasing.
 
 Another approach for anti-aliasing is to compute the exact coverage of a shape
-over each pixel surface as shown on the figure on the right. To do so, we need
+over each pixel surface as shown in the figure on the right. To do so, we need
 of course to know precisely the shape we want to display and where it is
 located in order to compute the coverage of the shape onto the pixel grid. In
 the figure, this corresponds to the grey areas that give us direct access to the

07-points.rst

@@ -38,7 +38,7 @@ primitive that displays a quad that is always facing the camera
 dimension, even though we'll use this primitive to draw discs and circles in
 the next section. The size of the quad must be specified within the vertex
 shader using the `gl_PointSize` variable (note that the size is expressed in
-pixels). As shown on the figure, the result is quite ugly.
+pixels). As shown in the figure, the result is quite ugly.
 
 .. code:: python
 
@@ -173,7 +173,7 @@ Last, we setup our python program to display some discs:
    Circles positionned vertically with a 0.2 pixel increase.
    See `circles-aligned.py <code/chapter-07/circles-aligned.py>`_
 
-You can see the result on the image on the right. Not only the discs are
+You can see the result in the image on the right. Not only the discs are
 properly antialiased, but they are also positionned at the subpixel level. In
 the image on the right, each disc is actually vertically shifted upward by 0.2
 pixels compared to its left neightbour. However, you cannot see any artefacts
@@ -280,7 +280,7 @@ Flat sphere
    A lit sphere
 
 If you look closely at a sphere, you'll see that that the projected shape on
-screen is actually a disc as shown on the figure on the right. This is actually
+screen is actually a disc as shown in the figure on the right. This is actually
 true independently of the viewpoint and we can take advantage of it. A long
 time ago (with the fixed pipeline), rendering a sphere meant tesselating the
 sphere with a large number of triangles. The larger the number of triangles,
@@ -336,7 +336,7 @@ coordinate is maximal in the center and null on the border.
 
 We're ready to simulate lighting on our disc using the `Phong model
 <https://en.wikipedia.org/wiki/Phong_reflection_model>`_. I won't give all the
-detail now because we'll see that later. However, as you can see on the source
+detail now because we'll see that later. However, as you can see in the source
 below, this is quite easy and the result is flawless.
 
 .. figure:: images/chapter-07/sphere-3.png
@@ -380,7 +380,7 @@ True sphere
    A bunch of fake spheres.
 
 We can use this technique to display several "spheres" having different sizes
-and positions as shown on the figure on the right. This can be used to
+and positions as shown in the figure on the right. This can be used to
 represent molecules for examples. Howewer, we have a problem with sphere
 intersecting each other. If you look closely the figure, you might have notices
 that no sphere intersect any sphere. This is due to the depth testing of the
@@ -419,7 +419,7 @@ the `gl_FragDepth` variable (that must be between 0 and 1):
        gl_FragColor = vec4(max(diffuse*color, specular*vec3(1.0)), 1.0);
    }
 
-You can see on the figures that the spheres now intersect each other correctly.
+You can see in the figures that the spheres now intersect each other correctly.
 
 
 Exercises
@@ -436,7 +436,7 @@ Tiny discs
    Disc spiral
 
 Adapting the shader from the "Dots, discs, circles" section, try to write a
-script to draw discs on a spiral as displayed on the figure on the right. Be
+script to draw discs on a spiral as displayed in the figure on the right. Be
 careful with small discs, especially when the radius is less than one pixel. In
 such case, you'll have to find a convincing way to suggest the size of the
 disc...

08-markers.rst

@@ -146,7 +146,7 @@ Markers
    Some example of markers constructed using CSG. See below for corresponding
    GLSL code.
 
-As illustrated on the right figure creating markers is merely a matter of
+As illustrated in the figure on the right, creating markers is merely a matter of
 imagination. Try to think of a precise shape and see how you can decompose it
 in terms of constructive solid geometry. I've put a collection of such markers
 in the (open access) article `Antialiased 2D Grid, Marker, and Arrow Shaders
@@ -336,7 +336,7 @@ Arrows
 
 Arrows are a bit different from markers because they are made of a body, which
 is a line basically, and a head. Most of the difficulty lies in the head
-definition that may vary a lot depending on the type the arrow. For example,
+definition that may vary a lot depending on the type of arrow. For example,
 the stealth arrow shader reads:
 
 .. code:: glsl
@@ -495,8 +495,8 @@ If you run the code below, you should obtain the image on the right.
    image = Image.fromarray((Z*255).astype(np.ubyte))
    image.save("firefox-sdf.png")
    
-Even though the logo is barely recognisable on the resulting image, it carries
-nonetheless the necessary information to compute the distance to the border
+Even though the logo is barely recognisable in the resulting image, it nonetheless
+carries the necessary information to compute the distance to the border
 from within the shader. When the texture will be read inside the fragment
 shader, we'll subtract 0.5 from the texture value (texture value are
 normalized, hence the 0.5) to obtain the actual signed distance field. You're
@@ -556,7 +556,7 @@ Quiver plot
 
 Now that we know how to draw arrows, we can make a quiver plot very easily. The
 obvious solution would be to draw n arrows using 2×n triangles (since one arrow
-is two triangle). However, if your arrows are evenly spaced as on the figure on
+is two triangle). However, if your arrows are evenly spaced as in the figure on
 the right, there is a smarter solution using only two triangles.
 
 Solution: `quiver.py <code/chapter-08/quiver.py>`_

09-lines.rst

@@ -448,8 +448,8 @@ the same primitives:
        program.draw(gl.GL_LINE_STRIP_ADJACENCY_EXT, I)
 
 
-I won't further describe the method that is a bit complicated but you can all
-the details in the provided demo script. See the caption of the image below.
+I won't describe this method further as it is a bit complicated, but you can see
+all the details in the provided demo script. See the caption of the image below.
 
 .. figure:: images/chapter-09/stars.png
    :figwidth: 100%
@@ -472,8 +472,8 @@ Bézier curves
 
    Bézier demo from the `antigrain geometry library <http://antigrain.com/>`_
 
-There is a huge litterature on Bézier curves and a huge litterature on GPU
-Bézier curves as well (+ lot of patents). I won't explain everything here
+There is a huge literature on Bézier curves and a huge literature on GPU
+Bézier curves as well (+ lots of patents). I won't explain everything here
 because it would require a whole book and I'm not sure I understand every
 aspect anyway. If you're interested in the topic, you can have a look at `A
 Primer on Bézier curves <https://pomax.github.io/bezierinfo>`_ by Mike
@@ -484,7 +484,7 @@ a search using the "Bézier" or "bezier" keyword (I even commited `one
 
 For the time being, we'll use an approximation of Bézier curves using an
 `adaptive subdivision <http://antigrain.com/research/adaptive_bezier/>`_ as
-designed by Maxim Shemarev (and translated in Python by me, see `curves.py
+designed by Maxim Shemarev (and translated to Python by me, see `curves.py
 <code/chapter-09/curves.py>`_). You can see in the images below that this
 method provides a very good approximation in a reasonable number of segments
 (third figure on the right).
@@ -561,7 +561,7 @@ Simple dotted pattern
    `linestrip-dotted.py <code/chapter-09/linestrip-dotted.py>`_.
 
 Rendering a simple dotted pattern is surprinsingly simple. If you look at the
-fragmen code from the smooth line sections, the computation of the signed
+fragment code from the smooth line sections, the computation of the signed
 distance reads:
 
 .. code:: glsl
@@ -579,7 +579,7 @@ distance reads:
    ...
        
 We can slightly change this code in order to compute the signed distance to
-discs whose centers area spread over the whole. Do you remember that we took
+discs whose centers' areas spread over the whole. Do you remember that we took
 care of computing the line curvilinear coordinate? Having centers spread along
 this line is then just a matter of a modulo.
 
@@ -611,13 +611,13 @@ this line is then just a matter of a modulo.
    `linestrip-spaded.py <code/chapter-09/linestrip-spaded.py>`_.
 
 The animation is obtained by slowly increasing the phase that makes all dot
-centers to move along the lines.
+centers move along the lines.
 
 By the way, you may have noticed that I've been using the simplest marker I
 could think of (disc) for the example above. But we could have used any of the
 marker from the previous chapter actually. For example, on the figure on the
 right, I use the spade marker and I've added a fading at line start and end to
-prevent the sudden apparition/disparition of a marker.
+prevent the sudden apparition/disapparition of a marker.
 
 
 Arbitrary dash patterns                                                        
@@ -630,7 +630,7 @@ explaining how this can be done. If you want to know more, just read See
 "`Shader-based Antialiased Dashed Stroke Polylines
 <http://jcgt.org/published/0002/02/08/>`_" for a full explanation as well as
 `Python implementation <http://jcgt.org/published/0002/02/08/code.zip>`_. The
-result is illustrated on the movies below.
+result is illustrated in the movies below.
 
 .. figure:: movies/chapter-09/stars.mp4
    :loop:
@@ -779,7 +779,7 @@ applying the full transformation, we'll restict it to the model transformation
 (i.e. no view nor projection) resulting in a normal vector where the `z`
 coordinate indicates if the shape is orienting towards the camera. Then,
 depending on this, we can modulate the thickness or the color of the line as
-shown on the figure on the right. In this example, we modify the thickness in
+shown in the figure on the right. In this example, we modify the thickness in
 the vertex shader and the color in the fragment shader.
 
 
@@ -833,7 +833,7 @@ Variable thickness
 We've seen in the `Smooth lines`_ section how to render smooth lines using
 bevel joints. The thickness of the resulting line was (implicitly)
 constant. How would you transform the shader to have a varying thickness as
-illustrated on the figure on the right?
+illustrated in the figure on the right?
 
 Solution:
 `linestrip-varying-thickness.py <code/chapter-09/linestrip-varying-thickness.py>`_

10-polygons.rst

@@ -27,7 +27,7 @@ To know if a given polygon is concave or convex, it is rather easy. Convex
 polygons have all their diagonals contained inside, while it is not true for
 concave polygons, i.e. you can find two summits such that when you connect
 them, the segment is outside the polygon. Another test is to find a straight
-line that cross a concave polygon at more than two points as shown on the
+line that cross a concave polygon at more than two points as shown in the
 figure above with the red lines.
 
 
@@ -60,7 +60,7 @@ render the polygon using the `gl.GL_TRIANGLE_FAN` primitives:
        window.clear()
        polygon.draw(gl.GL_TRIANGLE_FAN)
 
-You can see on the figures below that it is better to use only the convex hull
+You can see in the figures below that it is better to use only the convex hull
 points to compute the triangulation. You can also check that all other points
 are actually inside the polygon area.
 
@@ -100,7 +100,7 @@ Concave polygons
 For concave polygons, we could consider the two aforementionned cases where
 points are either ordered and describe the contour of the polygon or points are
 unordered and spread randomly onto the 2d plane. However, for the latter case,
-things become more difficult because the solution is not unique as shown on the
+things become more difficult because the solution is not unique as shown in the
 figure below.
 
 .. figure:: images/chapter-10/concave-hull.png
@@ -139,7 +139,7 @@ library but there are others:
 
 
  
-On the image on the right, we've parsed (see `svg.py
+In the image on the right, we've parsed (see `svg.py
 <code/chapter-10/svg.py>`_) the firefox icon SVG path and tesselated the Bézier
 curves into line segments. Then we have triangulated the resulting path and
 obtained the displayed triangulation using `gl.GL_TRIANGLES`. See `firefox.py
@@ -352,7 +352,7 @@ Antialiasing
 
 As you have noticed, the polygon we've renderered so far are not antialised
 (because we've been using only raw triangles). While it might be possible to
-write a specific shader to take car of antiliasing on the border, it is far
+write a specific shader to take care of antialiasing on the border, it is far
 more easier to draw an antialiased polygon in two steps. First, we draw the
 interio of the polygon and then, we render a half-line on the contour. We need
 a half-line because we do not want the line to cover the already rendered