Slope Fields

[inline]

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

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

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

Dihydrogen Monoxide: Fatal if Inhaled

I just discovered there’s an entire website dedicated to the dangers of dihydrogen monoxide. I particularly like their research page that includes the results from several middle and high school research projects.

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 (units²)	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]

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

w3schools.com: HTML5 Canvas: for the code for the drawing above.
Volcano’s Inline Javascript plugin for WordPress to make it work on this blog.
The page for Opera developers is also a great HTML5 drawing reference.
Dive into HTML5 is another excellent resource.
Bill Mill’s canvas tutorial.

Should Liberals Homeschool?

Dana Goldstein posts a critique of liberal homeschooling (and, by inference, of private schooling as well).

The crux of her argument is collective (for the greater good); having middle class kids (who often have highly educated parents) benefits the poorer kids in the public schools and thus society at large.

… “peer effects” have a large impact on student achievement. Low-income kids earn higher test scores when they attend school alongside middle-class kids, while the test scores of privileged children are impervious to the influence of less-privileged peers. So when college-educated parents pull their kids out of public schools, whether for private school or homeschooling, they make it harder for less-advantaged children to thrive.

— Goldstein (2012): Liberals, Don’t Homeschool Your Kids in Slate

She backs up her argument with evidence (Schwartz, 2010) that mixed income schools show better outcomes. The fact that school funding and populations come from distinct geographic districts, some of which may be rich while others are poor, is a major part of the problem.

However reasonable the argument is for society at large, it’s going to be a hard argument to make to homeschooling parents who choose that option because of how bad they see the public schools as being. She’s not just asking for some shared sacrifice, but for having parents risk sacrifice their kids’ education.

Until the public schools change in the more progressive directions that these homeschooling parents have a problem with, I don’t think she’ll get much traction. For her idealism I’ll give her the last word, but I suspect that she’s got it backwards.

If progressives want to improve schools, we shouldn’t empty them out. We ought to flood them with our kids, and then debate vociferously what they ought to be doing.

— Goldstein (2012): Liberals, Don’t Homeschool Your Kids in Slate

Tess of the d’Urbervilles: Police Composite

Brian Joseph Davis creates composite sketches of literary characters using the same software used by the police, and the descriptions of the characters in the books.

tess-durbaville — Composite sketch of Tess from Thomas Hardy's novel Tess of the d'Urbervilles. Image by Brian Joseph Davis.

She was a fine and handsome girl—not handsomer than some others, possibly—but her mobile peony mouth and large innocent eyes added eloquence to colour and shape… The pouted-up deep red mouth to which this syllable was native had hardly as yet settled into its definite shape, and her lower lip had a way of thrusting the middle of her top one upward, when they closed together after a word…Phases of her childhood lurked in her aspect still. As she walked along to-day, for all her bouncing handsome womanliness, you could sometimes see her twelfth year in her cheeks, or her ninth sparkling from her eyes…a thick cable of twisted dark hair hanging straight down her back to her waist.

— description by Thomas Hardy, excerpted by Davis (2010): The Composites.