The Algebra of Straight Lines

A quick graphical calculator for straight lines — based on This. It’s still incomplete, but it’s functional, and a useful complement to the equation of a straight line animation and the parabola graphing.

You can graph lines based on the equation of a line (in either the slope-intercept or point-slope forms), or from two points.

[inline]

Straight Lines


Slope-Intercept Form Two Points Point-Slope Form

y = m x + b
(x1, y1) =
( ,
)
y – y1 = m ( x – x1)
y =
x +
(x2, y2) =
( ,
) 		y –
=
( x –
)
x intercept:

Slope:

Equation:
y intercept:

Points:


Your browser does not support the canvas element.

[script type=”text/javascript”]

var width=500;
var height=500;
var xrange=10;
var yrange=10;

mx = width/(2.0*xrange);
bx = width/2.0;
my = -height/(2.0*yrange);
by = height/2.0;

document.getElementById(‘testing’).innerHTML = “Hello2”;

function draw_9359(ctx, polys) {

t_9359=t_9359+dt_9359;
//ctx.fillText (“t=”+t, xp(5), yp(5));
ctx.clearRect(0,0,width,height);

polys[0].drawAxes(ctx);
ctx.lineWidth=2;
polys[0].draw(ctx);

polys[0].write_eqn2(ctx);

//ctx.fillText (polys[0].get_parabola_vertex_form_eqn(), xp(5), yp(-5) );

// SHOW 2 POINTS USED TO CALCULATE LINE
if (show_2pts_ctrl_9359.checked==true) {
polys[0].circle_point(ctx, polys[0].p1.x, polys[0].p1.y, “#000”, 0.15);
polys[0].label_point_on_line(ctx, polys[0].p1.x, polys[0].p1.y);
polys[0].circle_point(ctx, polys[0].p2.x, polys[0].p2.y, “#000”, 0.15);
polys[0].label_point_on_line(ctx, polys[0].p2.x, polys[0].p2.y);

}

// SHOW Y INTERCEPT
if (show_y_intercept_ctrl_9359.checked==true) {
polys[0].draw_y_intercept_line(ctx);
document.getElementById(‘y_intercept_pos_9359’).innerHTML = “( 0 , “+ polys_9359[0].c.toPrecision(2)+ ” )”;

if (polys[0].b > 0.0) {
ctx.textAlign=”right”;
xoff = -0.5;
}
else {
ctx.textAlign=”left”;
xoff = 0.5;
}
ctx.fillText (‘y intercept: y = ‘+polys[0].c.toPrecision(2), xp(xoff), yp(polys_9359[0].c+0.25));

} else { document.getElementById(‘y_intercept_pos_9359’).innerHTML = “”;}

// SHOW SLOPE
if (show_slope_ctrl_9359.checked==true) {
polys[0].draw_slope_line(ctx);
document.getElementById(‘slope_pos_9359’).innerHTML = ” = “+polys[0].b.toPrecision(2);

} else { document.getElementById(‘slope_pos_9359’).innerHTML = “”;}

document.getElementById(‘slope_int_equation_9359’).innerHTML = polys[0].get_eqn2();

//SHOW INTERCEPTS
ctx.textAlign=”center”;
if (show_intercepts_ctrl_9359.checked==true) {
polys[0].x_intercepts(ctx);
if (polys[0].order == 2) {
if (polys[0].x_intcpts.length > 0) {
line = “0 = “;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
line = line + “(x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ “)”;
}
ctx.fillText (line, xp(6), yp(7));
for (var i=0; i 0) {
if (polys[0].b > 0.0) {
ctx.textAlign=”right”;
xoff = -0.5;
}
else {
ctx.textAlign=”left”;
xoff = 0.5;
}
ctx.font = “12pt Calibri”;
ctx.fillStyle = “#00f”;
ctx.fillText (‘x intercept: x = ‘+polys[0].x_intcpts[0].toPrecision(2), xp(polys[0].x_intcpts[0]+xoff), yp(0.5));
document.getElementById(‘intercepts_pos_9359’).innerHTML = “( “+ polys[0].x_intcpts[0].toPrecision(2) + “, 0 )”;
}
else {
ctx.fillText (‘None’, xp(7), yp(7));
}

}

}
else {
document.getElementById(‘intercepts_pos_9359’).innerHTML = ” “;
}

// Finding the slope
outln = “

Finding the Slope

“;
outln += “

The slope of the line between the two points is the rise divided by the run: the change in elevation divided by the horizontal distance between the points.”;

// Write out intercept solution
outln = “

Finding the x-intercept

“;
outln += “

Start with the slope-intercept form of the equation:”;
outln += “

     “+polys[0].get_eqn2(“y”,”x”,”html”)+”“;
outln += “

Know that at the x-intercept, y = 0 , which you substitute into the equation to get:”;
outln += “

     “+polys[0].get_eqn2(“0″,”x”,”html”)+”“;
outln += “

Now move the b coefficient to the other side of the equation:”;
outln += “

     “+(-polys[0].c).toPrecision(2)+” = “+ polys[0].b.toPrecision(2)+”x”+”“;
outln += “

And divide both sides by the slope to solve for x:”;
outln += “

     “+(-polys[0].c).toPrecision(2)+ ” / “+ polys[0].b.toPrecision(2) + ” = “+ polys[0].b.toPrecision(2)+”x”+ ” / “+ polys[0].b.toPrecision(2)+”“;
outln += “

     “+(-polys[0].c/polys[0].b).toPrecision(2)+” = “+”x”+”“;
outln += “

Therefore, the line intercepts the x axis at the point:”;
outln += “

     ( “+(-polys[0].c/polys[0].b).toPrecision(2)+” , 0 )”;
outln += “

When,”;
outln += “

     “+”x = “+ (-polys[0].c/polys[0].b).toPrecision(2) +”“;

document.getElementById(‘x_intercept_9359’).innerHTML = outln;

//Write out the solution by factoring
solution = “

Finding the y-intercept

“;
if (polys[0].order == 2) {
solution = solution + “y = “+polys[0].a.toPrecision(2)+” x2 “+polys[0].bsign+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;

solution = solution + ‘Factoring:      ‘;

if (polys[0].x_intcpts.length > 0) {
solution = solution + ‘0 = ‘;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
solution = solution + “(x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ “)”;
}
solution = solution + ‘

‘;
solution = solution + ‘Set each factor equal to zero:
     ‘;
for (var i=0; i 0.0) { sign=”-“;} else {sign=”+”;}
solution = solution + “x “+sign+” “+ Math.abs(polys[0].x_intcpts[i].toPrecision(2))+ ” = 0           “;
}
solution = solution + ‘

and solve for x:
     ‘;
for (var i=0; i‘;
}
document.getElementById(‘equation_9359’).innerHTML = solution;
}

else if (polys[0].order == 1) {
solution = solution + ‘

At the y-axis x = 0.
To find the y intercept, take the equation of the line, set x = 0, and solve for x.’;
solution = solution + ‘

     ‘;
solution = solution + “y = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;
solution = solution + ‘     ‘;
solution = solution + ” 0 = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+ polys[0].csign+” “+Math.abs(polys[0].c.toPrecision(2))+”

“;
solution = solution + ‘     ‘;
solution = solution + (-1.0*polys[0].c).toPrecision(2) +” = “+” “+Math.abs(polys[0].b.toPrecision(2))+” x “+”

“;
solution = solution + ‘     ‘;
solution = solution + (-1.0*polys[0].c).toPrecision(2)+”/”+polys[0].b.toPrecision(2)+” = “+” x “+”

“;
solution = solution + ‘     ‘;
solution = solution + “x = “+ (-1.0*polys[0].c/polys[0].b).toPrecision(4)+”

“;

document.getElementById(‘equation_9359’).innerHTML = solution;

}

}

function update_form_9359 () {
b_coeff_9359.value = polys_9359[0].b+””;
c_coeff_9359.value = polys_9359[0].c+””;

y1_coeff_9359.value = polys_9359[0].y1+””;
b1_coeff_9359.value = polys_9359[0].b+””;
x1_coeff_9359.value = polys_9359[0].x1+””;

p1_x_9359.value = polys_9359[0].p1.x+””;
p1_y_9359.value = polys_9359[0].p1.y+””;
p2_x_9359.value = polys_9359[0].p2.x+””;
p2_y_9359.value = polys_9359[0].p2.y+””;
}

//init_mouse();

var c_9359=document.getElementById(“myCanvas_9359”);
var ctx_9359=c_9359.getContext(“2d”);

var change = 0.0001;

function create_lines_9359 () {
//draw line
//document.write(“hello world! “);
var polys = [];
polys.push(addPoly(0,2, 3));
document.getElementById(‘testing’).innerHTML = “Hello”;
polys[0].set_2_points_line();
document.getElementById(‘testing’).innerHTML = “Hello4″;

// polys[1].color = ‘#8C8’;

return polys;
}

var polys_9359 = create_lines_9359();

var x1=xp(-10);
var y1=yp(1);
var x2=xp(10);
var y2=yp(1);
var dc_9359=0.05;

var t_9359 = 0;
var dt_9359 = 100;
//end_ct = 0;
var st_pt_x_9359 = 2;
var st_pt_y_9359 = 1;
var show_y_intercept_9359 = 1; //1 to show y intercept on startup
var show_intercepts_9359 = 0; // 1 to show the intercepts
var show_slope_9359 = 0; // 1 to show the slope
var show_2pts_9359 = 0; // 1 to show the two points from which line can be calculated

var move_dir_9359 = 1.0; // 1 for up

//document.getElementById(‘comment_spot’).innerHTML = polys_9359[0].a+” “+polys_9359[0].b+” “+polys_9359[0].c+” : “+polys_9359[0].h+” “+polys_9359[0].k+” “;

document.getElementById(‘testing’).innerHTML = “Hello3”;

//slope-intercept form
var b_coeff_9359 = document.getElementById(“b_coeff_9359”);
var c_coeff_9359 = document.getElementById(“c_coeff_9359”);

//point-slope form
var y1_coeff_9359 = document.getElementById(“y1_coeff_9359”);
var b1_coeff_9359 = document.getElementById(“b1_coeff_9359”);
var x1_coeff_9359 = document.getElementById(“x1_coeff_9359”);

//equation from two points
var p1_x_9359 = document.getElementById(“x1_9359”);
var p1_y_9359 = document.getElementById(“y1_9359”);
var p2_x_9359 = document.getElementById(“x2_9359”);
var p2_y_9359 = document.getElementById(“y2_9359”);

//options
var show_y_intercept_ctrl_9359 = document.getElementById(“show_y_intercept_9359”);
if (show_y_intercept_9359 == 0) {show_y_intercept_ctrl_9359.checked=false;
} else {show_y_intercept_ctrl_9359.checked=true;}

var show_intercepts_ctrl_9359 = document.getElementById(“show_intercepts_9359”);
if (show_intercepts_9359 == 0) {show_intercepts_ctrl_9359.checked=false;
} else {show_intercepts_ctrl_9359.checked=true;}

var show_slope_ctrl_9359 = document.getElementById(“show_slope_9359”);
if (show_slope_9359 == 0) {show_slope_ctrl_9359.checked=false;
} else {show_slope_ctrl_9359.checked=true;}

var show_2pts_ctrl_9359 = document.getElementById(“show_pts_9359”);
if (show_2pts_9359 == 0) {show_2pts_ctrl_9359.checked=false;
} else {show_2pts_ctrl_9359.checked=true;}

update_form_9359();

//document.write(“test= “+c_coeff_9359.value+” “+polys_9359[0].c);
setInterval(“draw_9359(ctx_9359, polys_9359)”, dt_9359);

b_coeff_9359.onchange = function() {
polys_9359[0].set_b(parseFloat(this.value));
polys_9359[0].update_point_slope_form_line();
polys_9359[0].set_2_points_line();
update_form_9359();
}
c_coeff_9359.onchange = function() {
//polys_9359[0].c = parseFloat(this.value);
polys_9359[0].set_c(parseFloat(this.value));
polys_9359[0].update_point_slope_form_line();
polys_9359[0].set_2_points_line();
update_form_9359();
}

y1_coeff_9359.onchange = function() {
//polys_9359[0].a = parseFloat(this.value);
polys_9359[0].y1 = parseFloat(this.value);
polys_9359[0].update_slope_intercept_form_line();
polys_9359[0].set_2_points_line();
update_form_9359();
}

b1_coeff_9359.onchange = function() {
polys_9359[0].set_b(parseFloat(this.value));
polys_9359[0].update_slope_intercept_form_line();
polys_9359[0].set_2_points_line();
update_form_9359();
}

x1_coeff_9359.onchange = function() {
polys_9359[0].x1 = parseFloat(this.value);
polys_9359[0].update_slope_intercept_form_line();
polys_9359[0].set_2_points_line();
polys_9359[0].set_order()
update_form_9359();
}

p1_x_9359.onchange = function() {
polys_9359[0].p1.x = parseFloat(this.value);
polys_9359[0].update_line_from_2pts();
polys_9359[0].set_order()
update_form_9359();
}

p2_x_9359.onchange = function() {
polys_9359[0].p2.x = parseFloat(this.value);
polys_9359[0].update_line_from_2pts();
polys_9359[0].set_order()
update_form_9359();
}

p1_y_9359.onchange = function() {
polys_9359[0].p1.y = parseFloat(this.value);
polys_9359[0].update_line_from_2pts();
polys_9359[0].set_order()
update_form_9359();
}

p2_y_9359.onchange = function() {
polys_9359[0].p2.y = parseFloat(this.value);
polys_9359[0].update_line_from_2pts();
polys_9359[0].set_order()
update_form_9359();
}

//draw_9359();
//document.write(“x”+x2+”x”);
//ctx_9359.fillText (“n=”, xp(5), yp(5));

[/script]

[/inline]

Leave a Reply