Carteasian Coordinates

• I picked this up in algebra, trig and calc.
• We graph things with a "line" system called Cartesian coordinates.
  • Points in two space are determined by a pair (x,y)
  • x represents the distance from the origin along the x axis.
  • y represents the distance from the origin along the y axis.

The HTML file

<h1> Carteasian Coordinates</h1>
<ul>
      <li> I picked this up in  algebra, trig and calc.
      <li> We graph things with a "line" system called Cartesian coordinates.
      <ul>
           <li> Points in two space are determined by a pair (x,y)
           <li> x represents the distance from the origin along the x axis.
           <li> y represents the distance from the origin along the y axis.
           <p>
      <ul>
</ul> 

<script src="code/five.js"></script>

<canvas id="cart1" width="400" height="400" style="border:1px solid #000000;"></canvas>

<script>
   CartGrid("cart1");
</script> 

five.js

"use strict"

function CartGrid(canvasName) {
    let canvas = document.getElementById(canvasName);
    let ctx = canvas.getContext('2d');
    let width = canvas.width;
    let height = canvas.height;
    let cellSize = width/10;


    let cx = width/2;
    let cy = height/2;

    let x,y;

    // draw the grid.
    DrawGrid(ctx, width, height, cellSize);

    // draw the axis
    Line(ctx,cx,0, cx, height, "blue");
    Line(ctx,0, cy, width,cy, "blue");

    // draw x = 2 line
    [x,y] = PointToGrid(2,0,cx,cy,cellSize);
    Line(ctx,cx, cy+3, x , y+3, "green");

    // label x=2 line
    ctx.font="20px serif";
    ctx.lineWidth = 1;

    // placement is yucky
    ctx.beginPath();
    ctx.strokeText("x = 2", cx+2, cy+cellSize-4);
    ctx.stroke();

    // draw a line to represent change in y
    [x,y] = PointToGrid(0,3,cx,cy,cellSize);
    Line(ctx, cx-3, cy, x-2, y, "red");

    // label the y = 3 line
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.strokeText("y = 3", cx-50, cy-1.5*cellSize);
    ctx.stroke();

    // draw the point
    [x,y] = PointToGrid(2,3,cx,cy,cellSize);
    ctx.lineWidth = 1;
    ctx.fillStyle = "blue"

    ctx.beginPath();
    ctx.arc(x, y, 5,0,Math.PI*2,0);
    ctx.fill();

    // label the piont
    ctx.lineWidth = 1;
    ctx.strokeStyle = "blue"

    ctx.beginPath();
    ctx.strokeText("(2,3)", x+7, y);
    ctx.stroke();

    return;
}

function PointToGrid(x,y, cx, cy, cellSize) {
     let a,b;
     a = cx + x*cellSize;
     b = cy - y*cellSize;

     return [a,b];
}

function DrawGrid(ctx, width, height, cellSize) {
    let x,y;

    ctx.lineWidth = 1;
    ctx.strokeStyle = "black";
    ctx.beginPath();

    for(x = 0; x < width; x+= cellSize) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
    }

    for(y = 0; y < height; y+= cellSize) {
       ctx.moveTo(0,y);
       ctx.lineTo(width,y);
    }

    ctx.stroke();
    return;
}

function Line(ctx, sx, sy, ex, ey, color) {
    ctx.lineWidth = 2;
    ctx.strokeStyle = color;

    ctx.beginPath();
    ctx.moveTo(sx,sy);
    ctx.lineTo(ex, ey);
    ctx.stroke();

    return;
}