Lines, Segments and Rays

In Algebra, students learn that lines can be described or determined in a number of ways, including:

• By giving two points on a line.

• By specifying a slope and one point on the line.

• With an equation, such as $y = mx + b$ or $y - b = m(x - a)$. . More generally, we can write the equation of any line, including vertical lines with an undefined slope, in the form $ax + by = c$.

Defining Lines

All of these approaches are possible in DoenetML as well, using various attributes of the <line> tag.

• Two points $(a,b)$ and $(c,d)$ can be specified using the through attribute:

      <line through="(a,b) (c,d)" />

  Notice that the points are given in a list separated by a space, not a comma.

• Similarly, you can use the through and slope attributes to define a line through a point with a certain slope:

      <line through="(a,b)" slope="m" />

• Finally, you can define a line via an equation, using the (aptly named!) equation attribute:

      <line equation="a x + b y = c" />

  The equation must be a valid equation of a line in $\mathbb{R}^2$, but it does not have to be in any particular standard form (slope-intercept, point-slope, etc.).

We already could graph a line in slope-intercept form $y = mx + b$ by graphing the function $f(x) = mx + b$. This approach is more general, though; for example, a vertical line $x = c$ doesn’t have a valid slope-intercept equation! We can graph a vertical line using <line>, but not as a <function>.

All three methods are illustrated in the example below. Try adjusting the attributes and clicking “update,” to make sure you know how to use each type of definition. Notice how, similar to the <point> tag, you can adjust the appearances of lines using styleNumber.

<graph showNavigation="false">
 
  <line through="(-8,8) (9,6)" />
  <line through="(0,4)" slope="1/2" styleNumber="2" />
 
  <line equation="y=2x-8" styleNumber="3" />
  <line equation="x=-6" styleNumber="4" />
  
</graph>

Test code here.

Also similar to <point>, you can define a line outside of a <graph> object, either in a <setup> block or in your regular text. If you define a line (or reference it using $lineName) within regular text, Doenet will print an equation of the line.

<setup>
  <line name="line1" equation="y=6-x" />
</setup>
 
<p>$line1</p>
<p><line name="line2" equation="y=x" /></p>
 
<graph showNavigation="false" size="small">
  $line1
  $line2
</graph>

Test code here.

Finally, and again like points, lines can be dragged around in Doenet. Try dragging one of the lines in the previous example, and notice that Doenet will automatically update the equation of the line as it moves. (If you want to prevent this behavior, the fixed attribute you learned about in the previous section will prevent a line from moving.)

Parallel and Perpendicular Lines

In geometry, we frequently want to define a line $l$ which goes through a point $P$ and is either parallel or perpendicular to some other line $k$. For these applications, the parallelTo and perpendicularTo attributes can be useful, as shown in the following example.

<graph>
  <line name="k">y = 3x + 4</line>
  <line through="(1,2)" parallelTo="$k"  styleNumber="2"/>
  <line through="(-1,-2)" perpendicularTo="$k"  styleNumber="3"/>
</graph>

Test code here.

Line Segments and Rays

The ray $\overrightarrow{PQ}$ starts at its endpoint $P$ (sometimes called its vertex) and goes through $Q$. DoenetML has a <ray> tag with attributes that match those terms:

    <ray endpoint="(a,b)" through="(c,d)" />

(In geometry we sometimes define rays by giving an endpoint and a direction vector. That approach is also possible in DoenetML… but we haven’t covered vectors yet! If you’re interested, you can check the documentation for <ray>, or wait until the tutorial section which covers <vector>.)

Meanwhile, a line segment is defined in terms of its two endpoints:

    <lineSegment endpoints="(a,b) (c,d)" />

Similar to defining a <line> through two points, the endpoints are separated by a space.

In the example below, you can adjust $\overrightarrow{PQ}$ and $\overline{RS}$ by dragging the four labeled points. You can also drag the ray or line segments themselves, and the labeled points will translate accordingly.

<graph showNavigation="false">
  <point name="P" coords="(-8,8)"  labelIsName />
  <point name="Q" coords="(6,4)"   labelIsName />
  <point name="R" coords="(-6,2)"  labelIsName />
  <point name="S" coords="(-4,-4)" labelIsName />
 
  <ray name="r1" endpoint="$P" through="$Q" />
  <lineSegment name="r2" endpoints="$R $S" />
  <lineSegment endpoints="(2,-5) (8,-5)" />
</graph>

Test code here.

Stylish Segments

As with lines, you can change how rays and segments are displayed on screen using the styleNumber attributes. You’ve already seen how points are displayed with each styleNumber. Below you can see points combined with a line segment.

<graph xmin="0" xmax="7.5" ymin="-1" ymax="2" 
           showNavigation="false" identicalAxisScales
           displayXAxis="false" displayYAxis="false" >  
 
      <map>
        <template><point labelPosition="bottom" styleNumber="$i">
          ($i,0)
          <label>$i</label>
        </point>
        <lineSegment endpoints="($i,0) ($i+0.5,1)" styleNumber="$i"/>
        </template>
        <sources alias="i"><sequence from="1" to="6" /></sources>
      </map>
 
    </graph>

Geometry Example

Now that we have points, segments, and rays, we can use DoenetML to create an interactive example which shows the medians and centroid of $\triangle{ABC}$ for any points $A$, $B$, and $C$. The code below does the following:

• Creates three points $A$, $B$, and $C$, which can be moved by the user.

• Draws $\overline{AB}$, $\overline{BC}$, and $\overline{AC}$ to display $\triangle{ABC}$

• Computes and displays the midpoints of each side of the triangle.

• Draws a segment from each vertex (of the triangle) to the midpoint of the opposite side.

• Uses the <intersection> tag to find the intersection of two (and hence all three) of the rays.

  (Note, currently, <intersection> works with lines, line segments, rays, polygons and circles.)

<graph showNavigation="false" displayXAxis="false" displayYAxis="false">
  <point name="A" coords="(-6,6)" labelIsName />
  <point name="B" coords="(7,4)"  labelIsName />
  <point name="C" coords="(0,-5)" labelIsName labelPosition="bottom"/>
 
  <lineSegment endpoints="$A $B" />
  <lineSegment endpoints="$B $C" />
  <lineSegment endpoints="$A $C" />
  
  <point name="D" styleNumber="2">($B+$C)/2</point>
  <point name="E" styleNumber="2">($A+$C)/2</point>
  <point name="F" styleNumber="2">($A+$B)/2</point>
 
  <lineSegment name="AD" endpoints="$A $D" styleNumber="3" />
  <lineSegment name="BE" endpoints="$B $E" styleNumber="3" />
  <lineSegment name="CF" endpoints="$C $F" styleNumber="3" />
 
  <intersection styleNumber="5">$AD $BE</intersection>
</graph>

Test code here.

Next Steps

There are many more geometric objects you can display in Doenet, including polygons and circles. Before we get to those shapes, however, it’s time to take a step back and learn about another DoenetML feature. The next section will cover properties, which are an important tool for interacting with DoenetML ccmponents.