You are currently browsing the category archive for the ‘Javascript’ category.

Initial beta release of my instant web wallet for Bitcoin Cash : moosh.io

I talked to a few people about getting started with BCH, but they had issues setting up a wallet to accept payments.

The first time you visit moosh.io, it creates a random wallet address for BCH, so you can receive funds and send them on.

The other problem is how to accept payments as a small business – a cafe, restaurant or food stall. Basically you need a simple way to know which order/product/sale matches up to which payment – who has paid for what. I achieve this by having a temporary BCH address to accept the payment for a given order, and then forward it on to the main vendors wallet as soon as payment is detected.

All the keys are kept on the client side, in localStorage on the local device, and transactions signed within the browser.

Ill be extending this to look nice and work well on mobile devices – now that money is purely digital, all those heavy point-of-sale hardware can be replaced by a nice web app running on your phone.

For experimenting with some ideas on improving blockchain scaling :

https://github.com/justgord/blksimjs

Currently simulates the growth of a crypto-currency blockchain ( similar to Bitcoin ), loops thru a cycle of :

- spend – pick addresses at random and spend to another address
- mine – put waiting transactions into the block, mine the cryptographic hash, add to chain

### Features / Limitations :

- uses single sha256 bit hash for ids
- uses an easy Proof-of-work [ 256 tries on average to get a block hashs with ’00’ leading bytes ]
- uses node.js byte buffers for transactions and blocks
- runs around 7000 tps on i5 laptop

### Motivation

I wanted to simulate the growth of a blockchain with unspent transactions spread somewhat sparsely at the early older parts of the blockchain, and more dense at the top of the blockchain [as more recent transactions havent had time to be spent yet ].

The reason for this is to test the feasibility of reducing the size of the data needed to bootstrap a new node. eg. in Bitcoin the whole dataset is :

- around 150GB of transactions [ 250Mn txns ]
- utxo of around 2GB [ ~50Mn txns ]
- so unspent ‘utxo’ set is around 20% of transactions

### Bring UTXO set forward

We can use much less data [5x smaller ] when spinning up a new node, by bringing utxo set forward to nearer the front of the chain. The sim gathers old utxos and injects them into the blockchain in baches of ids, so they are stamped into the block at block creation.

These ‘utxo catchup sections’ are read when starting a new processing node – ie. it only needs a provable list of utxos, not the complete history of all spent transactions.

### skip links [ todo ]

Using block extension areas, we can also include skip links to blocks much earlier in the chain – the process of walking back thru the links of transactions inputs and outputs all the way back to the initial ‘genesis’ block is like walking a DAG tree, as un-needed areas of the blockchain are skipped over. These skip links are validated at block creation time by other nodes.

This is useful for clients which want to traverse the chain to make better proof of validity that SPV, and for nodes that use utxo bring forward above, so they can trace PoW to an arbitrary level back to the genesis block.

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 :

- What is a Math Circle
- Circle In a Box – how to build and run a Math Circle
- MathCircles – Washington University vid
- San Francisco MathCircle – vid
- Introduction to Programming – Khan Academy

So GridMaths.com is in open beta, now works reasonably well on iPad and recent desktop browsers. Android browser support coming sometime soon.

Heres a pic my 9yo created while testing things out on the iPad.. with the obligatory battle scene [ dad vs browser quirks ? ] :

Here’s a couple of sheets on how I like to present long multiplication…

Firstly a concrete rectangle where you can actually count the squares to satisfy yourself its right…

Then move to a more compact form, which still shows the rectangle grid, but not to scale..

This shows that lots of digits should not induce panic.. the same systematic approach works [ which is why computers can do multiplication so well ].

I think having the box grid is a nice way to remember where all the pieces come from [ single digit products ]. Also I think it really helps to use the blank grid spaces, rather than fill in every 0.

The lattice method is slightly more compact, but I think this box approach reminds students of whats really going on.

Thanks for all the emails and encouragement so far as I build this.

Enjoy, and let me know how your using GridMaths.

When I was a kid there was this class where each student prepared their very own ice-cream container full of counting items – marbles, colored buttons, hexagonal Meccano nuts, etc. Somehow the teacher sold us on ‘owning’ and preparing our own stash, and I was very proud of sneaking in two tiny model mini cars and a couple of cool shells I picked up from the beach.

I also remember those lengths of wood in various colors used for counting/measuring things. These “Cuisenaire Rods” are magic, you can pick up a set on eBay from $10 to $15, or improvise with flat Lego units of different lengths and colors if you have those.

It would be unconscionable of me to not include this staple of Western math diet, so I give you a peak at Cuisinaire Rods in GridMaths. I hope you like the spicy Mexican color scheme :

Simple things, but these can be a very tactile way of developing a feel for fractions and division. They lead into strange discoveries, like the fact that some numbers can’t be made exactly from repeats of smaller lengths… prime numbers !

A special note to those of you who have taken time to read my experiments, and egg me on with your comments and feedback – your support is so important to me and my son, we heart you !

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.

Just wanted to share a small ‘teaser’ from a project I’m really excited about, GridMaths.com

I’ve just finished adding support for the buttons keyboard which lets you make cool counting lessons for younger kids, so here’s a screenshot teaser to enjoy before we go live with the beta site in a few days :

If you haven’t guessed already from the above pic, the idea of GridMaths.com is to have an interactive quad grid paper environment in your browser or tablet, where you can work out math problems like long division, multiplication and so on.

My 9yo son has been doing lots of KhanAcademy exercises, working his way up to multiplying decimals..[ which Im pretty chuffed with ]. You really need grid paper to do those as you have lots of adding up in columns.. so anyway we spent ages getting quad ruled grid paper in Bangkok, as this is less common, or at least not easily found in the otherwise excellent stationary shops in the main shopping malls.

Some of these problems take a fair bit of working, so its easy to make typo mistakes .. it seemed to me if you could type in a grid that would really help. When I thought about how much time Id spent hunting down stationary and that Id spent about $50 in the last year on grid paper… something kind of clicked and I decided to make a prototype and see if it would help. thus was born GridMaths.

Heres a worked example, of a ‘long multiplication with decimals’ problem done on a GridMaths sheet :

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

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