Tag: html5

Practicing Plotting Points on the Co-ordinate Plain

Pre-Algebra class starts next week, so in preparation for one of the early lessons on how to plot x,y co-ordinates, I put together an interactive plotter that lets students drag points onto the co-ordinate plain.

Students practice plotting points by dragging the red dot to the coordinates given.

Usage

The program generates random coordinate pairs within the area of the chart (or you can enter values of the coordinates yourself):

  • Clicking the “Show Point” button will place a yellow dot at the point.
  • When you’re confident you understand how the coordinate pairs work, you can practice by dragging the red dot to where you think the point is and the program will tell you if you’re right or not.

About the Program

This interactive application uses the jQuery and KineticJS javascript libraries. The latter library in particular is useful for making the HTML5 canvases interactive, so you can click on points on the graph and drag them.

When I have some time, after classes settle down, I’ll see if I can figure out how to embed this type of app into this (WordPress) blog. KineticJS is based off HTML5 canvases, which is what I use for the other interactive graphs I’ve posted, so it shouldn’t be terribly hard (at least in principle).

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]

Everything You (N)ever Wanted to Know About Parabolas

So that my students could more easily check their answers graphically, I put together a page with a more complete analysis of parabolas (click this link for more details).

[inline]

Analyzing Parabolas


Standard Form Vertex Form

y = a x2 + b x + c
y = a (x – h)2 + k
y =
x2 +
x +

 y =
( x –
) 2 +
Intercepts:

Vertex:
Focus:

Directrix:

Axis:


Your browser does not support the canvas element.

Solution by Factoring:

y = x2 x

[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;

function draw_9239(ctx, polys) {
t_9239=t_9239+dt_9239;
//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);

//polys[0].y_intercepts(ctx);
//write intercepts on graph

// SHOW VERTEX
if (show_vertex_ctrl_9239.checked==true) {
polys[0].draw_vertex(ctx);
document.getElementById(‘vertex_pos_9239’).innerHTML = “(“+polys_9239[0].vertex.x.toPrecision(2)+ ” , “+polys_9239[0].vertex.y.toPrecision(2)+ ” )”;
} else { document.getElementById(‘vertex_pos_9239’).innerHTML = “”;}

// SHOW FOCUS
if (show_focus_ctrl_9239.checked==true) {
polys[0].draw_focus(ctx);
document.getElementById(‘focus_pos_9239’).innerHTML = “(“+polys_9239[0].focus.x.toPrecision(2)+ ” , “+polys_9239[0].focus.y.toPrecision(2)+ ” )”;
} else { document.getElementById(‘focus_pos_9239’).innerHTML = “”;}

// SHOW DIRECTRIX
if (show_directrix_ctrl_9239.checked==true) {
polys[0].draw_directrix(ctx);
document.getElementById(‘directrix_pos_9239’).innerHTML = polys[0].directrix.get_eqn2(“y”,”x”,”html”);

polys[0].directrix.write_eqn2(ctx, polys[0].directrix.get_eqn2(“directrix: y”));
} else { document.getElementById(‘directrix_pos_9239’).innerHTML = “”;}

// SHOW AXIS
if (show_axis_ctrl_9239.checked==true) {
polys[0].draw_parabola_axis(ctx);
document.getElementById(‘axis_pos_9239’).innerHTML = “x = “+polys[0].vertex.x.toPrecision(2);
}

//SHOW INTERCEPTS
ctx.textAlign=”center”;
if (show_intercepts_ctrl_9239.checked==true) {
polys[0].x_intercepts(ctx);
ctx.fillText (‘x intercepts: (when y=0)’, xp(6), yp(8));
//ctx.fillText (‘intercepts=’+polys[0].x_intcpts.length, xp(5), yp(-5));
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) {
for (var i=0; i2 “+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_9239’).innerHTML = solution;
}

else if (polys[0].order == 1) {
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 + ‘

Set y=0 and solve for x:
     ‘;
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_9239’).innerHTML = solution;
}

}

function update_form_9239 () {
a_coeff_9239.value = polys_9239[0].a+””;
b_coeff_9239.value = polys_9239[0].b+””;
c_coeff_9239.value = polys_9239[0].c+””;

av_coeff_9239.value = polys_9239[0].a+””;
hv_coeff_9239.value = polys_9239[0].h+””;
kv_coeff_9239.value = polys_9239[0].k+””;

}

//init_mouse();

var c_9239=document.getElementById(“myCanvas_9239”);
var ctx_9239=c_9239.getContext(“2d”);

var change = 0.0001;

function create_lines_9239 () {
//draw line
//document.write(“hello world! “);
var polys = [];
polys.push(addPoly(1,6, 5));

// polys.push(addPoly(0.25, 1, 0));
// polys[1].color = ‘#8C8’;

return polys;
}

var polys_9239 = create_lines_9239();

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

var t_9239 = 0;
var dt_9239 = 100;
//end_ct = 0;
var st_pt_x_9239 = 2;
var st_pt_y_9239 = 1;
var show_vertex_9239 = 1; //1 to show vertex on startup
var show_focus_9239 = 1; // 1 to show the focus
var show_intercepts_9239 = 1; // 1 to show the intercepts
var show_directrix_9239 = 1; // 1 to show the directrix
var show_axis_9239 = 1; //1 to show the axis of the parabola

var move_dir_9239 = 1.0; // 1 for up

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

//standard form
var a_coeff_9239 = document.getElementById(“a_coeff_9239”);
var b_coeff_9239 = document.getElementById(“b_coeff_9239”);
var c_coeff_9239 = document.getElementById(“c_coeff_9239”);

//vertex form
var av_coeff_9239 = document.getElementById(“av_coeff_9239”);
var hv_coeff_9239 = document.getElementById(“hv_coeff_9239”);
var kv_coeff_9239 = document.getElementById(“kv_coeff_9239”);

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

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

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

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

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

update_form_9239();

//document.write(“test= “+c_coeff_9239.value+” “+polys_9239[0].c);
setInterval(“draw_9239(ctx_9239, polys_9239)”, dt_9239);

a_coeff_9239.onchange = function() {
//polys_9239[0].a = parseFloat(this.value);
polys_9239[0].set_a(parseFloat(this.value));
polys_9239[0].update_vertex_form_parabola();
update_form_9239();
}
b_coeff_9239.onchange = function() {
//polys_9239[0].b = parseFloat(this.value);
polys_9239[0].set_b(parseFloat(this.value));
polys_9239[0].update_vertex_form_parabola();
update_form_9239();
}
c_coeff_9239.onchange = function() {
//polys_9239[0].c = parseFloat(this.value);
polys_9239[0].set_c(parseFloat(this.value));
polys_9239[0].update_vertex_form_parabola();
update_form_9239();
}

av_coeff_9239.onchange = function() {
//polys_9239[0].a = parseFloat(this.value);
polys_9239[0].set_a(parseFloat(this.value));
polys_9239[0].update_standard_form_parabola();
update_form_9239();
}

hv_coeff_9239.onchange = function() {
polys_9239[0].h = parseFloat(this.value);
polys_9239[0].update_standard_form_parabola();
polys_9239[0].set_order()
update_form_9239();
}

kv_coeff_9239.onchange = function() {
polys_9239[0].k = parseFloat(this.value);
polys_9239[0].update_standard_form_parabola();
polys_9239[0].set_order()
update_form_9239();
}

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

[/script]

[/inline]

Converting the forms

The key relationships are the ones to convert from the standard form of the parabolic equation:

         y = a x^2 + b x + c (1)

to the vertex form:

         y = a (x - h)^2 + k (2)

If you multiply out the vertex equation form you get:

         y = a x2 – 2ah x + ah2 + k (3)

When you compare this equation to the standard form of the equation (Equation 1), if you look at the coefficients and the constants, you can see that:

To convert from the vertex to the standard form use:

         a = a (4)
         b = -2ah (5)
         c = ah^2 + k (6)

Going the other way,

To convert from the standard to the vertex form of parabolic equations use:

         a = a

(7)
         h = \frac{-b}{2a}

(8)
         k = c - ah^2

(9)

Although it is sometimes convenient to let k not depend on coefficients from its own equation:

         k = c - \frac{b^2}{4a} (10)

The Vertex and the Axis

The nice thing about the vertex form of the equation of the parabola is that if you want the find the coordinates of the vertex of the parabola, they’re right there in the equation.

Specifically, the vertex is located at the point:

         (x_v, y_v) = (h, k) (11)

The axis of the parabola is the vertical line going through the vertex, so:

The equation for the axis of a parabola is:

         x = h (12)

Focus and Directrix

Finally, it’s important to note that the distance (d) from the vertex of the parabola to its focus is given by:

         d = \frac{1}{4a} (13)

Which you can just add d on to the coordinates of the vertex (Equation 11) to get the location of the focus.

         (x_f, y_f) = (x_v, y_v + d) (14)

The directrix is just the opposite, vertical distance away, so the equation for the directrix is the equation of the horizontal line at:

         y = y_v + d (15)

References

There are already some excellent parabola references out there including:

Solving Quadratic Equations

So here we have a little grapher that solves quadratic equations visually. Just enter the coefficients in the equation.

[inline]

Quadratic Equation:       y = a x2 + b x + c

Enter:                              
y =
x2 +
x +


Your browser does not support the canvas element.

Solution:

Analytical solution by factoring (with a little help from the quadratic equation if necessary).

[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;

function draw_9114(ctx, polys) {
t_9114=t_9114+dt_9114;
//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_eqn(ctx);

//polys[0].y_intercepts(ctx);
polys[0].x_intercepts(ctx);
//write intercepts on graph

ctx.fillText (‘x intercepts: (when y=0)’, xp(9), yp(8));
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(9), yp(7));
// if (polys[0].order == 2 ) {
// if (polys[0].x_intcpts[0] > 0.0) { sign1=”-“;} else {sign1=”+”;}
// if (polys[0].x_intcpts[1] > 0.0) { sign2=”-“;} else {sign2=”+”;}
// ctx.fillText (‘0 = (x ‘+sign1+” “+Math.abs(polys[0].x_intcpts[0])+”) (x “+sign2+Math.abs(polys[0].x_intcpts[1])+”)”, xp(9), yp(7));
// }
for (var i=0; i2 “+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_9114’).innerHTML = solution;
}

else if (polys[0].order == 1) {
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 + ‘

Set y=0 and solve for x:
     ‘;
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_9114’).innerHTML = solution;
}

}

//init_mouse();

var c_9114=document.getElementById(“myCanvas_9114”);
var ctx_9114=c_9114.getContext(“2d”);

var change = 0.0001;

function create_lines_9114 () {
//draw line
//document.write(“hello world! “);
var polys = [];
polys.push(addPoly(1,6, 5));

// polys.push(addPoly(0.25, 1, 0));
// polys[1].color = ‘#8C8’;

return polys;
}

var polys_9114 = create_lines_9114();

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

var t_9114 = 0;
var dt_9114 = 100;
//end_ct = 0;
var st_pt_x_9114 = 2;
var st_pt_y_9114 = 1;

var move_dir_9114 = 1.0; // 1 for up

var a_coeff_9114 = document.getElementById(“a_coeff_9114″);
a_coeff_9114.value = polys_9114[0].a+””;
var b_coeff_9114 = document.getElementById(“b_coeff_9114″);
b_coeff_9114.value = polys_9114[0].b+””;
var c_coeff_9114 = document.getElementById(“c_coeff_9114″);
c_coeff_9114.value = polys_9114[0].c+””;

//document.write(“test= “+c_coeff_9114.value+” “+polys_9114[0].c);
//setInterval(“draw_9114(ctx_9114, polys_9114)”, dt_9114);
draw_9114(ctx_9114, polys_9114);

a_coeff_9114.onchange = function() {
polys_9114[0].set_a(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}
b_coeff_9114.onchange = function() {
polys_9114[0].set_b(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}
c_coeff_9114.onchange = function() {
polys_9114[0].set_c(parseFloat(this.value));
draw_9114(ctx_9114, polys_9114);
}

[/script]

[/inline]

Hopefully, this can help students learn about factoring and quadratics in a more graphical way.

Notes:

This is my first interactive post. I use Javascript in combination with HTML5. Now I need to figure out how to interact with the image itself, instead of the textboxes.

Slope Fields

[inline]

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;

function draw9083(ctx, polys) {
t=t+dt;
//ctx.fillText (“t=”+t, xp(5), yp(5));
ctx.clearRect(0,0,width,height);

polys[0].drawAxes(ctx);
polys[0].slopeField(ctx, 1.0, 1.0, 0.5);
ctx.lineWidth=2;
polys[0].draw(ctx);
polys[0].write_eqn(ctx, “dy/dx “);

}

//init_mouse();

var c9083=document.getElementById(“myCanvas9083”);
var ctx9083=c9083.getContext(“2d”);

var change = 0.0001;

function create_lines9083 () {
//draw line
//document.write(“hello world! “);
var polys = [];
polys.push(addPoly(0, 0.5, 1));

return polys;
}

var polys9083 = create_lines9083();

var x1=xp(-10);
var y1=yp(1);
var x2=xp(10);
var y2=yp(1);
var dy=0.01;

var t = 0;
var dt = 50;
end_ct = 0;

var move_dir = 1; // 1 for up

//draw9083();
//document.write(“x”+x2+”x”);
//ctx9083.fillText (“n=”, xp(5), yp(5));
setInterval(“draw9083(ctx9083, polys9083)”, dt);

[/script]
[/inline]

Say you have the equation that gives you the slope of a curve (let \frac{dy}{dx} ) be the slope):
! \frac{dy}{dx} = \frac{1}{2} x + 1

When you use integration to solve the equation, there are quite the number of possible solutions (infinite actually), because when you integrate:

! y = \int (\frac{1}{2} x + 1 ) dx

you get:
! y = \frac{1}{4} x^2 + x + c

where c is a constant. Unfortunately, you don’t know what c is without more information; it could be anything.

However, even without integrating, we can get a feel for what the curve will look like by plotting what the slope will look like at a bunch of different points in space. This comes in really handy when you end up with a equation for slope that is really hard — or even impossible — to solve.

The graph below show a curve of possible solutions to the slope equation. You should be able to see, as the graph slowly moves up and down, how the slope of the graph corresponds to the slope field.

[inline]

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;

function draw9083b(ctx, polys) {
t9083b=t9083b+dt9083b;
//ctx.fillText (“t=”+t, xp(5), yp(5));
ctx.clearRect(0,0,width,height);

polys[0].drawAxes(ctx);
polys[0].slopeField(ctx, 1.0, 1.0, 0.5);
ctx.lineWidth=2;
polys[0].draw(ctx);
polys[0].write_eqn(ctx, “dy/dx “);

if (polys[1].c > yrange) {
move_dir9083b = -1.0;
polys[1].c = yrange;
}
else if (polys[1].c < -yrange) { move_dir9083b = 1.0; polys[1].c = -yrange; } polys[1].c = polys[1].c + dc9083b*move_dir9083b; polys[1].draw(ctx); polys[1].write_eqn(ctx); //ctx.fillText (' c='+move_dir9083b+' '+polys[1].c, xp(5), yp(5)); } //init_mouse(); var c9083b=document.getElementById("myCanvas9083b"); var ctx9083b=c9083b.getContext("2d"); var change = 0.0001; function create_lines9083b () { //draw line //document.write("hello world! "); var polys = []; polys.push(addPoly(0, 0.5, 1)); polys.push(addPoly(0.25, 1, 0)); polys[1].color = '#8C8'; return polys; } var polys9083b = create_lines9083b(); var x1=xp(-10); var y1=yp(1); var x2=xp(10); var y2=yp(1); var dc9083b=0.05; var t9083b = 0; var dt9083b = 100; //end_ct = 0; var move_dir9083b = 1.0; // 1 for up //draw9083b(); //document.write("x"+x2+"x"); //ctx9083b.fillText ("n=", xp(5), yp(5)); setInterval("draw9083b(ctx9083b, polys9083b)", dt9083b); [/script] [/inline]

Straight Lines

[inline]

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;

function draw8587(ctx, polys) {
t=t+dt;
//ctx.fillText (“t=”+t, xp(5), yp(5));
ctx.clearRect(0,0,width,height);

polys[0].drawAxes(ctx);
//drawAxes(ctx);
ctx.lineWidth=3;
//ctx.beginPath();
//ctx.moveTo(x1,y1);
//ctx.lineTo(x2,y2);
//ctx.stroke();
//ctx.closePath();
//y2+=dyp(dy);

// add polynomial timing
// First move (from y=0 to y=1)
if (polys[0].c < 1.0) { polys[0].c = polys[0].c + 2.0*dt*change*move_dir; } // Second move (change from y=1 to y=0.5x+1) else if (polys[0].b < 0.5) { polys[0].b = polys[0].b + dt*change*move_dir; polys[0].order = 1; } // Third move (change from y=0.5x+1 to y=0.5x+4) else if (polys[0].c < 4.0) { polys[0].c = polys[0].c + 2.*dt*change*move_dir; //polys[0].order = 1; } else { //move_dir = move_dir * -1; end_ct = end_ct + dt; if (end_ct >= dt*40) {
polys[0].a = 0;
polys[0].b = 0;
polys[0].c = 0;
polys[0].order = 0;
}
}
ctx.textAlign=”center”;
ctx.textBaseline=”alphabetic”;
ctx.font = “14pt Arial”;
ctx.fillStyle = ‘#f00’;
ctx.fillText (“Equation of a Line”, xp(-5), yp(9));
ctx.fillText (“y = mx + b”, xp(-5), yp(5));
ctx.font = “12pt Arial”;
//ctx.fillText (“y = “+polys[0].b.toPrecision(1)+”x + “+ polys[0].c.toPrecision(2), xp(-5), yp(7));
ctx.fillText (“b = intercept = “+polys[0].c.toPrecision(2), xp(-7), yp(3));

//draw polynomials
ctx.lineWidth=3;
for (var i=0; i

Here’s a prototype for showing how the equation of a straight line changes as you change its slope (m) and intercept (b):
! y = mx + b

It starts with an horizontal line along the x-axis, where the slope is zero and the intercept is zero:
! y = 0.0

The line moves upward, but stays horizontal, until the intercept is 1.0:
! y = 1.0

The slope increases from horizontal (m = 0), gradually, until the slope is 0.5:
! y = 0.5x + 1.0

Finally, we move the line upwards again, without changing the slope (m = 0.5), until the intercept is equal to 4.0:
! y = 0.5x + 4.0

Now I just need to figure out how to make them interactive.

Numerical Integration

This is an attempt to illustrate numerical integration by animating an HTML5’s canvas.

We’re trying to find the area between x = 1 and x = 5, beneath the parabola:

y = -\frac{1}{4} x^2 + x + 4

By integrating, the area under the curve can be calculated as being 17 ⅔ (see below for the analytical solution). For numerical integration, however, the area under the curve is filled with trapezoids and the total area is calculated from the sum of all the areas. As you increase the number of trapezoids, the approximation becomes more accurate. The reduction in the error can be seen on the graph: with 1 trapezoid there is a large gap between the shaded area and the curve; more trapezoids fill in the gap better and better.

The table below show how the error (defined as the difference between the calculation using trapezoids and the analytic solution) gets smaller with increasing numbers of trapezoids (n).

Number of trapezoids Area (units2) Error (difference from 17.66)
1 15.00 2.66
2 17.00 0.66
3 17.37 0.29
4 17.50 0.16
5 17.56 0.10
6 17.59 0.07
7 17.61 0.05
8 17.63 0.03
9 17.63 0.03
10 17.64 0.02

Analytic solution

The area under the curve, between x = 1 and x = 5 can be figured out analytically by integrating between these limits.

Area = \int_{_1}^{^5} \left(-\frac{x^2}{4} + x + 4 \right) \,dx

Area = \left[-\frac{x^3}{12} + \frac{x^2}{2} + 4x \right]_1^5

Area = \left[-\frac{(5)^3}{12} + \frac{(5)^2}{2} + 4(5) \right] - \left[-\frac{(1)^3}{12} + \frac{(1)^2}{2} + 4(1) \right]

Area = \left[-\frac{125}{12} + \frac{25}{2} + 16 \right] - \left[-\frac{1}{12} + \frac{1}{2} + 4 \right]

Area = \left[ 22 \frac{1}{12} \right] - \left[4 \frac{5}{12} \right]

Area = 17 \frac{2}{3} = 17.6\bar{6}

(See also WolframAlpha’s solution).

Update

Demonstration of this numerical integration using four trapezoids in embeddable graphs.

Test HTML5 Canvas

[inline]

Your browser does not support the canvas element.

[script type=”text/javascript”]
document.write(“hello world!”);

var c2=document.getElementById(“myCanvas2”);
var ctx2=c2.getContext(“2d”);
ctx2.moveTo(10,10);
ctx2.lineTo(150,50);
ctx2.lineTo(10,50);
ctx2.stroke();
[/script]
[/inline]

So I’m experimenting with creating drawings using HTML5. And it works (mostly)!! I have to hardwire in paragraph breaks, but otherwise it works so far.

The key references: