Because the two triangles are similar we know that the ratios of the lengths are the same:

Multiplying through and solving for x₂, we get:

This formula is the core of an ancient idea for solving arbitrary equations.

Getting out of Algebra Homework

In an effort to make an algebra-homework-solver, Anthony recently built a simple root-finder on his own that probed values at constant 0.1-separated values of x, looking for sign changes.

After he worked on it for a long time, he came to me trying to explain the idea, and showing me that it did not work that well because it was too coarse.

So I showed him the secant method, and we coded it up as a javascript example here.

The Secant Method

Suppose we have already made two incorrect guesses while searching for a zero of a function, and at those two values, the function passes through the points (x₀, y₀) and (x₁, y₁). We could continue making more guesses by crawling along the number line, looking for a sign change or for a point with y values closer to zero.

But the secant method tries to jump straight to the answer by drawing a straight line between the two observations and calculating the point x₂ where that line crosses zero, as above.

If the initial guesses are close enough, the method converges very quickly and makes mincemeat out of polynomial root finding.

Hopefully Anthony will continue to work on his algebra homework by hand anyway.

History of the Regula Falsi

The secant method is similar to Newton's method but does not require knowledge of derivatives or other calculus. It is sometimes described as a finite-difference approximation to Newton's method. However, it actually predates Newton.

Joanna Papakonstantinou has unearthed evidence that the secant method was being used by Babylonians and Egyptians in 18th century BC to solve linear relationships and by Chinese scholars to approximate nonlinear relationships in the 2nd century BC. The idea of drawing a line between two incorrect answers to make a correct answer was called "the rule of too much and not enough;" "the method of double false positions;" "the method of scales;" or "Regula Falsi." It made appearances around the world in 9th century Arabic, 11th century European, 12th century Indian, and 13th century African mathematical texts.

Cardano documented the modern idea of iterating the method to increase precision arbitrarily. He used it to solve cubics in his 1545 Ars Magna, one hundred years before Newton was born.]]> 2010-06-20T00:18:29-05:00 http://davidbau.com/archives/2010/05/28/wiki_javascript_at_dabblerorg.html I have spent a few days teaching kids (a handful of 5th-8th graders) to program in Javascript. Teaching is hard. My conclusions: Kids like graphics. Drawing simple paths in SVG is a big hit. You need to take a little... 390@http://davidbau.com/ I have spent a few days teaching kids (a handful of 5th-8th graders) to program in Javascript. Teaching is hard. My conclusions:

• Kids like graphics. Drawing simple paths in SVG is a big hit.
• You need to take a little time to learn basic HTML before Javascript.
• The most frustrating thing for kids is getting their junkware-infested laptops to behave.
• Getting set up with a plaintext editor to write code is a steep climb.

I am rethinking my little curriculum. We need a more gradual path that steps through very simple basics before jumping into more exciting things.

To let the kids program directly online I have posted a collaborative learning-to-program site at dabbler.org that is the simplest possible solution I could think of.

It is wiki in spirit: it is a self-editable website that hosts a syntax coloring programming editor and a bunch of Javascript examples. It is a single shared collaborative space, and it has no access controls to jump through. The kids had a terrific time sharing code with each other and stealing each others' ideas.

Try it if you like. Etiquette and explanation here.

Anthony: "What does SAT stand for?"

Me: "SAT Aptitude Test."

Anthony: "Hm, but then what does SAT stand for?"

Me: "SAT Aptitude Test.... S.A.T. S - SAT, A - Aptitude, T - Test."

Anthony: "But why SAT?"

Me: "It tests your aptitude for taking the SAT."

Anthony: "I'm just going to look it up on the Internet."

(By the way, Anthony, it's true. Here it is on the Internet, right here.)

Thanks to the ideas from readers of this blog, I am collecting together materials for them that might turn into a book someday. Here it is: Learning to Program in Javascript.

The guinea pigs this time around are all boys. The next time around I will teach Piper and her group of girl friends.

The code uses a bit of trigonometry to aim the cannon and a bit of physics to provide gravity. It introduces the idea of using timers for animation and hit-testing for collisions. The gameplay is governed by a three-state state machine with an explicit state variable.

I am still looking for more ideas. Let me know if you think of any good beginner-programmer exercises that might be able to distilled down to about 80 lines of HTML.

Click on the button to compute and display the next row of Pascal's triangle. Useful for figuring out how many ways to you can divide up kids into teams or for expanding powers of a binomial.

The kids love custom-poem.html (view source), which uses document.write to produce a one-of-a-kind custom poem just for you. Refresh to get a new poem.

The bits of wisdom are generated madlibs-style, by inserting a random choice out of of a list of words for each of several spots. A simple idea, but the resulting poems are incredibly entertaining to the 3rd-6th grader set.

I chatted with one of the kids who will be in my trial "programming class," and I was floored to hear this sixth-grader say - without me mentioning jQuery at all - that he "wants to learn jQuery." When I pointed him to Douglas Crockford's talks about the good parts of Javascript, he said, "oh yeah, I've watched that."

So we will definitely follow up with the more-advanced (but conceptually the same) dynamic-poem.html (view source) that uses jQuery instead of document.write. That gives the poem the ability to change itself over time.

The program is an example of a very simple state machine with three states: none chosen, a first item is chosen, and a second item is chosen.

For symbols the game uses a bunch of cute and cryptic Unicode glyphs. This works fine on Windows with its Unicode Times New Roman font. Let me know if this is problematic on other platforms.

It breaks down the work for drawing a random maze into five functions:

• fillsquares sets up a global array with a grid of SVG squares.
• setcolor sets the color of a single square at position (x, y).
• getcolor returns the color of a single square at position (x, y).
• shuffled returns a shuffled copy of an array.
• makemaze draws a random maze in the grid using recursion.

The program is begging to be extended by adding a maze solver.

Maze-making and maze-solving is a good excuse for explaining recursion. Any ideas for a gentler (but interesting) introduction to functions?

It uses recursion to fully explore the tic-tac-toe tree and play a perfect game against you. The code is short, but I am concerned it is probably too difficult for kids to understand. The other problem is that (at least on my laptop) IE is too slow to run the AI on move #1 without a "script appears hung" warning.

Nevertheless, "how to program Tic-Tac-Toe" is an extremely common request from the kids, so it goes into the pile of examples.

Let me know if you come up with a way of simplifying the code.

It is a pretty interesting example, and I like it a lot. In an attempt to simplify it, I made a jquery version of it here: mastermind.html (view source). The jquery version has a slightly different flavor - less string-hacking and more conceptual stuff.

Unfortunately, I do not think the jquery conversion makes the code easier to understand for a beginner. It uses too many idioms and so it is probably harder.

But maybe it is useful as an advanced example some jquery and javascript tricks. What do you think? Is there a simpler way?

Here is a simpler variant: polygon-drawing.html is a 50-line program (view source) that lets you experiment with drawing polygons on the screen. The user can click or enter SVG path syntax directly.

It is an introduction to using mouse events with jQuery, SVG paths, and Raphael.

The idea of this tutorial is to be a gentle introduction to event-based programming. The encryption code runs every time a keyup event is received on any of the input boxes. (view source)

I decided to use indexOf/charAt instead of charCodeAt/fromCharCode do do the conversion between letters and numbers, because there are fewer edge cases in the code, and it means there's one fewer concept to worry about.

Not very modern, but a classic first program. Javascript certainly permits this style.

Any other ideas? What other "good first programs" are there?

I feel like I'm looking for some intersection between "what is understandable" to a sixth grader and "what is cool" to the same set.