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

A MathCircle is where a group of young people get together and work on some interesting Math-related topics introduced by a mentor.

The topics are sometimes problems like you find on ArtOfProblemSolving.com or Math Competitions [ vis AMC Sample Questions ].  They can cover quirky topics that aren’t normally seen in the school curriculum, such as Catalan Numbers.

The idea sounds geeky, and is un-apologetically so, yet has the potential to engage students who might be bored with the traditional material.   It preps interested students for careers in science / finance / medicine / engineering and helps the school do well in math and science competitions.  Math Circle meets can also be a lot of fun.

Why

Question : “Why do we need more math.. we already do that in school, right?”

Answer : “yeah..but you don’t learn enough Tennis in PE class to become a club player, and you don’t get enough Instrument practice in Music class to get into music school .. you really need to train, to play in an ensemble and have dedicated practice for that.”

MathCircle takes the same approach of intensive practice which you find in Basketball practice, Dance club, Swim meet or musical instrument group … except focused on math-related skills.

Practice with Duration + Intensity

One important aspect that both Math problem solving and programming share is the sustained concentration on one task – in my opinion we have gone too far in the direction of byte size chunks of learning.  Sometimes you need to chew on things for a while.

We can look at how Basketball and Music are learnt, and apply what works to math.   Training sessions often last for 2 hours, and this is accepted as a social norm – it is well understood it takes time to get into the zone.. repeat the basics, introduce a new skill, practice it, and integrate and perfect it over time thru a range of scenarios.

Its also not about the one or two elite players – the whole team improves and transfer skills around and offer peer-support thru the shared activity.  It can help develop individual qualities that are useful for success in other areas of life, namely ‘character’.

With Code

MathCircle is something most parents haven’t heard of .. but teaching young people how to program is an easy sell – it has had a lot of positive marketing over the last year or so, and its a clear pathway to a good salary.

I also think that writing small programs is a great way to introduce and discover math ideas .. its tactile, interactive, hands on, iterative, experimental.  Your also working with the real concepts – a lot of educational apps and games seem to win in terms of engaging and entertaining, but lose in terms of conveying deeper ideas.  When your making a program you are really tinkering under the hood with the engine, not just zooming around the racetrack.  So a MathCircle with an emphasis on making your own programs to investigate math topics, and using tools like Geogebra, might work really well.

Example Topics

A MathCircle which has a code-things-up emphasis, we could call a MathCodeCircle.

Here are some topics that might be covered in such a MathCodeCircle :

  • find prime number factors, use for solving lcm/gcf problems
  • pong game variant – balls bounce around and collide
  • adding waves together – beats, square waves
  • simulate jumpy stock prices, compare with compound interest
  • planets orbiting / solar system simulator
  • circle inversion using GeoGebra

Most of these would be developed in javascript, and run in the browser – using the canvas api to render 2D graphics – its real programming.

More

Some links if your interested :

 

 

 

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.

gridmaths_com_teaser_010

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 … :-]

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

Image

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 khanacademy.org/cs ] 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 BetterExplained.com [ 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.

Image

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…”

Lokenote

Lokenote is a very simple way to share notes based at a particular location… a kind of geo PostIt note taker.

There are great apps out there such as Gowalla, FourSquare, Yelp but I felt the need for something ultra simple with low overhead where you dont need to register or signup – just drop a note where you are, and leave it for other people to find.

I still see notices pasted up on supermarkets and on lampposts for Missing Cat,  Part-time Work,  Flatmate Needed or Garage Sale.. so I think there is a need for this kind of utility belt app.  I specifically wanted a tool to jot down nice graffiti snippets from around St Kilda where I live, and mention handy places a non-local might not know about such as the well hidden laundry shop.  Id like to give a virtual nod to some of the superb out of the way food places that exist in my version of Melbourne.

Next

In developing Lokenote I took the ‘Fire!… Ready? Aim‘ approach – I had a rough idea, started as simply as I could, implemented feverishly and only added things I thought were absolutely essential.

Not being able to entertain any extra features had the perverse effect of generating many more ideas.. but these had a more organic character growing out of reality.  Beware ideas that have clean academic edges, they tend to not fit the world.

The process of building Lokenote gives me a a furtive and voyeuristic sense of the kind of realtime app which I think is just around the next bend.

We can safely assume Next apps are :

  • mobile/web hybrids with touch UI
  • reactive in realtime, via flowing data feed
  • location aware, fulltext searchable
  • online/offline robust
  • built on graph style data models

But what might they actually do ?

  • live auction or product sales [ the last 15mins of an eBay auction without the 6 day lead-up ]
  • convergence of blog, web page and chatroom with live comment feeds
  • realtime automated sentiment, trend summary
  • flexible links between any kinds of data
  • scrolling realtime chat, tethered to a location, keyword/topic, group or event

Feedback

Feedback is the best word I have to describe the qualitative difference of realtime apps.

An example – rather than go to a conference and wait for surveys to come in from attendees and adapt in time for the next event, the feedback loop is immediate enough to customise as it progresses.  This already happens, with some presenters saying ‘tweet me if you want more or less on this topic’ – a tweet is more anonymous and less impolite than interrupting the speaker, and feedback is current.

We might see more prices that are changing moment to moment, or other micro-optimisations –  the cost of a flight might be offered within a range, and be fixed only once the aircraft leaves the gate.

Realtime Dating?

Another example of a realtime next app is for dating.  I envision this as a kind of randomised, localised topic-chat :

  • nominate a topic and post a comment, or join an active topic that looks interesting
  • chat away anonymously for a while
  • notice someone interesting, share your profile
  • get a nudge back or an invite for a one-on-one chat
  • if things progress, decide to meetup at a cafe on neutral ground

Most dating apps use the profile photo as the initial filter.. but Im not so sure that is the initial filter in Life.. sometimes people with unremarkable looks win you over and in fact become more attractive over time as conversation unveils their personality.  So conversation as the initial filter might actually work.

The very same app could be a great way to generate ideas in business or science or political activism… it just seems the old chat room needs to be upgraded for the realtime web, so that it resides next to all the other things I do on the web.  I might want to attach a web page or doc or graphic or photo or video to my realtime comment.  Parties might agree to go private with some comments.  You might want to limit the audience to a group or post anonymously then go back on-record.

Lets Build

We have all the plumbing to do this feasibly – technologies such as nginx, node.js, Mongo, Couch, Riak, Redis, Web Sockets, JSON, HTML5 are really at the point of becoming the normal way to write dynamic data-driven responsive web/mobile apps.

Its about taking some risk to walk over the local maxima and build these things that will make life simpler, leaving more time for people to enjoy the roses.

Well, those are my thoughts for now… enjoy, gord.

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…

NPM Module

So that we can reuse the simple serialq code from the previous blog post, I have tidied things up and packaged into an NPM module.Apparently its now installable using “npm install serialq”.

Creating the module was a breeze –

  • within your directory run ‘npm install’ and fill in the questions
  • npm adduser, npm publish
  • test with npm install

After publishing, the module magically shows up on the extremely handy npm.mape.me module search site, under keyword ‘serial’.  See isaacs article ‘How to Module‘ for overview.

Code

The code is a bit simpler to read, as you can see its a very short implementation :

exports.SerialQueue = function()
{
    var sq = 
    {
        funcs : [],
        next : function()
        {
            var Q = this;
            var f = Q.funcs.shift();
            if (f)
                f(function() {Q.next();});    
        },
        add : function(f)
        {
            this.funcs.push(f);
        },
        run : function()
        {
            this.next();
        }
    };
    return sq;
}

Usage :

    var Q = SerialQueue();
    Q.add(fn_first);
    Q.add(fn_second);
    Q.run();</code>

[ For a more readable version of the code snippets above, see this github Gist. Would be nice if wordpress.com supported Gists, Posterous do..ahh maybe time to move my blog. ]

Thoughts

I found this module handy for serializing access to a mysql database. Breaking out this boilerplate made the rest of the code clearer.  Code is up on github

Surprisingly Javascript + Node.js is a real workhorse.  I actually prefer it to Perl/PHP and even Ruby/Python for data plumbing tasks.  You have hashmaps and regex handling built in, garbage collection, and a superb general purpose data format in JSON.  Perhaps Javascript is the hundred-year-language?

Be aware this is ‘cooperative’ sequencing.. each function gets passed a done or next argument, and will have to invoke that to signal completion [ causing the next function to be run ].

Node is Async by Default

The whole crux of Node.js is that everything is done async by default – you fire off something now and get a callback at some later time.  Its a beautiful paradigm and means that you can get great performance, because it fits so closely with the underlying operating system calls [ libevent, completion ports, sockets etc. ]

However, there are times you do need to enforce serial processing… for example checking for valid user/password must return a result before getting sensitive data and displaying it on the web page.

There are now sophisticated serial modules for Node, which Id recommend you look at for real work.  For example Conductor can mark sequential dependencies and will allow the most async processing to happen, while honoring those sequential constraints – the best of both worlds.  Another nice approach is this fork() primitive via stackoverflow.com.

Lets have a look at the simplest case, to see whats under the hood…

Demo Code

I made a test program to compare sync versus async,  This illustrates a very direct approach for serial processing using a queue of work functions. Code on github, here : async_vs_serial.js

Read the rest of this entry »

Been hacking in Node.js and am really enjoying the saneness of this dev environment.

Some handy links before I forget  :

  • howto.no.de articles – especially Part I, II and III of ‘Learning Javascript with Object Graphs’
  • Joyeur blogs – people working for Joyent on Node / DTrace / Solaris
  • no.de Joyent Node hosting [ built atop – ‘open’ solaris, ZFS, DTrace ]
  • NodeJitsu blog
  • npm.mape.me – searchable Node.js Modules list
  • connect-it guide – web framework with chained middleware layers
  • express guide – article on express web framework for Node
  • eventserver – Tom Lee’s internet tee piping for notifications

In other news.. Im hacking over ssh via a long thin pipe to my linode server – using a very erratic mobile broadband connection, arrgh!

Cant wait for ADSL to _finally_ be connected here, so I can watch Bryan Cantrill talk about Cloud Analytics :]

As an aside.. why Javascript?  Consider

  • Javascript is a totally distinct language from Java
  • Javascript deserves its bum rap.. to mis-quote Dame Judi Dench, its bad parts are “arse-clench-ingly” bad :]
  • The good parts of Javascript feel very nice, like a modern lisp inspired language, fairly concise, many valid idioms
  • V8 js engine is fast
  • Javascript callback mechanism fits async event IO really well
  • Node.js embodies the above bullet point into a fine server development environment
  • JSON, the Javascript native data format, is all the good things of XML with none of the bad
  • feels like a unix-like web-plumbing philosophy
  • can keep the same language syntax hat on when writing front end web apps and back end servers

Xeno is a small demo project done over the weekend.  Click matching alien heiroglyphs to dissappear them.  Basic gameplay in HTML5 was pretty quick to prototype.

You can view it using Safari or Chrome browsers.  For iPhone, open in Safari and save to Home Screen, then you click the icon to load [for some reason fails to load directly, but works fine launched from Home Screen ]

For the path checking.. at first I did an exhaustive depth first search of all empty squares, but this exploded combinatorially.. so I used memoizing to reduce the repeat subpaths.. and then added a heuristic to find straight paths if they exist.  I probably should have looked up a decent path finding algorithm.  Sometimes its good to do things the blunt way yourself, so that you understand the problem and can then enjoy the beauty of a more elegant approach.

Hope you like the pictographs.. did them myself :]

Backstory

Lost in the dense Cambodian jungle you see what looks like an outcropping of ancient ruins.  Could that plynth be the entrance of an alien spacecraft which has lain dormant for thousands of years?  You wipe away the dust showing an irregular pattern of grooves.. you accidentally spill some water on the  console.

You hear a hiss followed by a gentle deep hum, and the panel under your palm begins to glow.   You must quickly match the glyphs to enter the Xeno’ ship…