You are currently browsing the tag archive for the ‘math’ tag.

Just added a color palette to GridMaths, so it now has rectangles, lines, ellipses in few simple colors and weights.  The idea is to help make diagrams clearer, and help with Venn diagrams and other cases where you want to group things together.

Heres a grid sheet comparing fractions : 2/3 and 4/5 … then we show the product and sum using the same visual representation.


If you look carefully, you may notice that I ‘abuse’ the grid in that each grid square is 1/5 high and 1/6 wide – so a 1 unit x 1 unit square is actually 6×5 grid squares.  I think this is a legal abuse, in that we often graph things with different x and y axis scales.

The alternative is to have a resizeable non-square grid.. which I think creates too much complexity for not much gain.  The philosophy of GridMaths is “keep it simple”, so you can do the basics quickly and easily.   I used to think more features = more power = better, but after my son showed me the Minecraft game, and all the cool things people have built with it, I changed my mind about this.  I kept thinking.. why is Minecraft so popular, when you can do all that and more in Blender ?  Blender is a superb free 3D modelling package, which like all powerful modelling packages takes a while to become proficient at.  So, it dawned on me that Minecraft is so brilliant because it brings down the barrier to entry, and makes the 80% of things you need to do to make a world, really easy and quick for everyone.

So I’m adding the most useful things to GridMaths in a way that keeps it really simple.  Its not an algebra system, it most likely wont have handwriting recognition… but it should be a really fast way for math teachers to make Math diagrams and for students to do a wide range of worked Math problems, replacing grid paper for that 80% of tasks and adding some nice features.   Its kind of like an infinite supply of grid paper, that weights nothing and can be erased and replayed, and saved for later use  And.. you can step forward and back thru your edits and change stuff, and students can step thru a worked problem.  And you have counting beans and … :-]

I did a couple of worksheets on Multiplication, to test out the GridMaths tools.

My feeling is that multiplication should be taught with Rectangles.  So once students are familiar with counting in groups, they can play around with something like this interactive demo to get a basic feel for the distributive rule.


[ The above animation is a custom interactive widget created in javascript, using Raphael and HTML5 divs for the draggable UI.  You drag the red dots and the diagram resizes and recalculates in realtime.  Other screenshots in this post are all done using MathsGrid itself ]

The distributive rule says we can divide up A and divide up B any way we like, and the product is just all the pieces of A times all the pieces of B, summed up together.

For humans with 10 fingers, its easy to break A and B up by 1s,10s,100s, which means we need to multiply each digit of A by each digit of B, then sum them up.


So long multiplication kind of falls into place, as a way of keeping the pieces straight :


Then the Lattice method can be seen as just another convenient system for keeping all the pieces organised and lining up the 1s,10s,100s etc :


The first time I saw this Lattice method on Hacker News it looked like Magic.. but after you do one you realize it really is the same thing, just a cool way of keeping track of the pieces.

My 9 year old son has discovered Chess, after watching the movie “Searching for Bobby Fischer”.

We bought a chess set so we could play with some chess puzzles and strategies.. but we were a bit dismayed at the quality of the plastic pieces.  Anyway one thing led to another, and so I spent a couple days hacking up a web based Chess app.

The basics are there :

  • the board
  • piece movements
  • castling
  • loading puzzles in FEN format
  • chess move notation / SAN


As time allows I’ll gradually add the remaining features, such as :

  • en-passant for pawns, pawn promotion
  • check-detection for kings
  • pgn game import/export
  • design & share chess board puzzle

One of the reasons I decided to bite the bullet and do this, was so I can write a few articles on developing a board game in Javascript for young programmers [ my son has been enjoying the programming environment and tutorials on ] and also Id like to be able to design my own puzzle games and share them, as a good way to help young people learn basic moves and strategy.

In other news, Ive been fighting stockfish chess AI.. and it wins every time, except on the lowest setting.   But its been fun to take up the game again, so I can play against my son and answer some of his questions/attacks.

I much enjoyed Kalid Azads Interactive Guide to Fourier Transform article on [ and was much impressed he mentioned my animated sine demo, which he extended upon in wonderful ways. ]

With recent javascript and web 2D/3D, I think we’re at the cusp of a kind of interactive learning renaissance.. because Math concepts can be made really physical, tactile and intuitive :  Show-me-how-it-works + let-me-drive beats verbose-monologue every time.

I wanted to mention another variant of the animated sine demo, where you can add a second circle and slide back and forth to see the first 2 terms of a Fourier series.


It seems like a gentle intro that would get young people thinking..’hmm, what if I add another circle… and how big should that circle be…’.

Obligatory Tolkien quote : “It’s a dangerous business, Frodo, going out of your door. You step into the Road, and if you don’t keep your feet, there is no knowing where you might be swept…”

Counting with coffee Beans on grid paper

When I started teaching my son maths we did a lot of counting coffee beans.  We would arrange 12 beans in groups of 3 and groups of 4… The idea was to start building up intuition and then segway into multiplication.

Don’t ask me why coffee beans.. I must be a bad parent!  The beans just happened to be handy, being dark they were easily visible when put on 5mm math grid paper and fit nicely in the squares.  You can use small buttons or raisins even.  Its pretty tactile, so works okay for young kids [ as long as they are old enough not to swallow small things ]

Abstracting to Multiplication

Later we drew the ‘beans’ in the squares and then just drawing a circle in the box instead of placing a bean.  This gradually led to  tracing out the rectangle outlines of the groups and let the squares on paper take the place of actual beans.. so it abstracts really well in a fairly natural and unforced way.

There are some nice ‘tricks’ you can do on squared paper that grow out of this approach –

  • every rectangle is a multiplication product, so you can use it to figure out any times table question
  • you can work out all the times-tables and write them in the top right square before reciting them
  • introduce distributive property (a+b)*c = a*c + b*c by showing the rectangles add up
  • ask.. are there any numbers that cant be made by a rectangle product? [ numbers]
  • show square numbers – 1,4,9,16 …
  • you can show how to add 2n+1 to n squared to get the next square number
  • you can introduce series – 1+3+5+7+ … and show how they sum to make the square numbers
  • make a stepped-triangle 1+2+3+4+5+6 and show how two of these can be put together to make a rectangle, which leads to sum 1 to n = n(n+1)/2

So this approach leads very naturally into some really nice mathematics.  Along the way it reinforces the rote learning of times tables (auditory repetition) with visual intuition.

The web app – introducing Doctor X

I thought there was probably an App or web page to do this kind of thing interactively.  I googled around and found lots of times table grids, math systems but nothing that seemed to take the grid-paper-rectangles-and-counting-beans approach into an interactive medium.

I made notes on what the app might look like, and then spent some time making a quick prototype in Javascript.  I found It needed a way to step through some basic usage notes and examples, so I added a howto box.  Then we came up with a silly name for this thing.

Anyway, here is the current version of the visual grid calculator for kids, which I’m calling :

“The Doctor X Amazing Griddable Multiplication Contraption”

The Doctor X Amazing Griddable Multiplication Contraption

When I get time Ill make some more in-depth tutorials and worksheets on some of the concepts I mentioned above.   Let me know what you’d like to see,



I get a few hits for the Animated Sine demo in Javascript – maybe this is a good way to introduce young people to math?

Here is a minor update I did a while ago that shows what happens when a second circle spins around the point on the outside of the first circle…

[click the pic or here to view the animation ]

This might be a nice lead into Fourier Series…

Some amazing javascript libraries are coming out now, which enable interactive math directly in the browser.

One of the most impressive is jsxGraph, from Bayreuth University, which is purpose built upon SVG for plotting mathematical functions.  See their wiki for superb demos.

On the jsxGraph blog, there is a video showing a construction being manipulated by touch on the iPhone – very cool.

Experimenting with their circles-on-circles web app, by sliding the parameters around I uncovered this delightful piece, which reminded me of those ornate calligraphy end-notes you see in olde books.

Its a lot of fun to experiment.  For the curious, the parameters of this specimen are : c1:0.51 f1:7 c2:0.32 f2:17

SVG coolness

I think SVG is the right way to go, and a more natural approach than using canvas [as I did for my interactive sine generator last week].

There’s no technical reason now why something as featured as GeoGebra or KGeo could not be implemented directly in the browser.. it just has to be done!

Geogebra is really nice, but I do prefer the simplicity of not having to download the java applet and approve it for access.  Each extra step supposedly halves the audience, and I want math to be interactive and accessible.

I’ve been thoroughly enjoying Paul Zeitz’s book “The Art and Craft of Problem Solving“.

One of the early problems in the book is from 1994 Putnam math competition, but surprisingly easy once you see that it can be scaled into a much simpler question.

The problem :

Find the positive value of m such that the area enclosed by the ellipse x^2/9 + y^2=1, the x-axis, and the line y=2x/3 is equal to the area in the first quadrant enclosed by the ellipse x^2/9 + y^2=1, the y-axis, and the line y=mx.

Heres a drawing of the areas mentioned using GeoGebra, with each area in separate quadrants for comparison, with an approximate area.  The Qn asks what is the slope of the line through point F [or -ve slope of line through Q here].

Problem as stated, with areas colored

Well its a bit hard to pick the point Q [ the slope -m ] so that these colored regions have the same area…

… but then you realize that the whole problem becomes easy if you simply scale the ellipse back to the unit circle.

To do this, x is scaled back by 3x, so areas become 1/3 of what they were [y remains the same].  So the problem now looks like this :


scaled back to the unit circle : areas are x 1/3, slopes x 3

So the line that gives the same area is y=x/2.  When this is scaled back to the original ellipse, the slope gets divided by 3;  so the line we want is y=x/6.

Quite surprised to see this in a Putnam, but it does show a really common motif in math, namely :

Transform to a simpler domain, solve it there, then transform the solution back.

The astute reader will have noticed that I cheated : the areas of the colored regions in the top picture are of course ~1.65 or 3 x area of regions in the second diagram.

The areas marked were calculated by rough approximation with a polygon and the GeoGebra area function. [  The ellipse itself was drawn to fit using foci – I wasn’t sure how to edit the formula in GeoGebra to make it exact. ]

I’ve added a secondary ‘slave’ circle, which I think introduces the idea of Fourier series in a natural way.

The animation starts as before with a sine curve,  then you can add in the second circle by clicking ‘toggle’.

Click this picture to see the Javascript web animation :

I wanted to explain the math-magic of the circle generating the sine wave with a simple animation of a point rotating on the edge and the height matching the sine wave.

I had a look around but most of the math animations are Java applets which I find a bit top heavy, and this should be doable in Javascript.

This is what I came up with, [click to view animation] –

I tried several approaches to get this working, not perfectly happy with any of them, although I did get a basic demo up and running as you see above.

First approach was using SVG, but for some reason I had problems getting svg to appear at all in an html5 page… go figure, this should be simple.   In the process I was impressed by SVGEdit which is an early stage, usable if not polished, in browser SVG editor. cool.. I just couldnt get any of my pages to show svg.  Ill have another go when the frustration has been forgotten, its possibly some syntax glitch I missed.

I then tried RaphaelJS library which did work reasonably well.  Its a nice api.  Some things like animating along a path you get out of the box, which is nice.  After some basic success I did find myself scratching my head on how to rotate a path – and I’m not sure how to apply a rotate transformation to an item generally [which is a cool feature of SVG ].

Partial demo of sine wave animation implemented in Raphael here.  Animates quickly in Safari on mac, Chrome on mac, slightly choppy on Firefox on mac, and quite slow but functional on Safari iPod/webkit.

Wanting a bit more control over exact placement, I decided to try pure HTML5 Canvas rendering.  This worked well, was simpler to understand exact x,y pixel placement.  I haven’t solved a side issue which is that for some reason if I have the preferred HTML5 “<DOCTYPE html>” tag it ignores exact placement of div elements.. finding this side effect drove me nuts!   Im wondering if this is in the spec, it seems it would break a lot of code.

Anyway, layout of the animation was easy in HTML5 canvas.  See sine animation demo here.

It does seem to be busy drawing, and Id like to eliminate back flicker [which you’d normally do by drawing to back buffer, or having dirty regions].  Performs ok on desktop safari, firefox and chrome [which seems fastest of all the browsers].  Comes up on iPhone but animates slowly as you’d expect.

A faster approach might be to render the background into a separate layer and draw the dots and lines per frame, as its probably touching only 1 in 1000 of the total pixels.

Anyway, seems to be a promising way to get Math animations up and running, which fine tuning will improve.  See page source for Javascript, BSD licence, feel free to reuse.