This page shows every widget that a post can embed. Each part gives the name to write in a post, and one or more examples that run here.
Fountain codes
A droplet-by-droplet decoder for a fountain code. The sender emits endless droplets, each one an XOR of a few message blocks, and the reader accepts or rejects them. It shows how a peeling decoder starts from a droplet of degree 1 and unlocks the rest, and what a stream that gives it none looks like.
Write <FountainCode /> in a post.
Step0Accepted0Rejected0Blocks0 / 5Pool floor—Step 0, no droplets offered yet, 0 of 5 blocks decoded.
the message so farjust recovered, on this stepstill missingthe droplet that arriveda known block being removed from itthe block that fell outprobability of each degreeshare of the degrees drawn so far
The sender cut The eagle has landed into 5 blocks and is spraying droplets, each one the XOR of a random subset of them. No droplet is more important than another, so accept the ones you want and reject the rest. Nothing you drop is ever sent again.
The robust soliton senderThe default sender. Five blocks come out of seven accepted droplets, so the mechanism shows itself in the first few steps.
Step0Accepted0Rejected0Blocks0 / 20Pool floor—Step 0, no droplets offered yet, 0 of 20 blocks decoded.
Fountain code, step 0: 0 of 20 blocks decodedTb1hb2eb3␣b4eb5ab6gb7lb8eb9␣b10hb11ab12sb13␣b14lb15ab16nb17db18eb19db20K = 20 blocks of 1 byte, no padding▣ recovered, · held, ✕ redundant, ▢ rejecteddecoded message · 0 of 20 blocks · 0 of 20 bytesdroplet #1 · degree 2 · covers b1 and b12the channel has not offered a droplet yetpool: no droplets heldprogress: blocks decoded and droplets held at each stepblockspool024681005101520stepcountdegrees: the probability of each degree and the share drawn so far510152000.10.20.30.40.5degreesharestepsmessage▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒b1b2b3b4b5b6b7b8b9b10b11b12b13b14b15b16b17b18b19b20
the message so farjust recovered, on this stepstill missingthe droplet that arriveda known block being removed from itthe block that fell outprobability of each degreeshare of the degrees drawn so far
The sender cut The eagle has landed into 20 blocks and is spraying droplets, each one the XOR of a random subset of them. No droplet is more important than another, so accept the ones you want and reject the rest. Nothing you drop is ever sent again.
A stream the ideal soliton stalls onTwenty blocks on a seed whose ideal-soliton stream carries almost no degree-1 droplets. The decoder recovers 2 blocks and then sits on a filling pool. The same seed under the robust soliton finishes at droplet 22.
Ideal against robust soliton
Blocks decoded at each droplet for one stream under the two degree distributions, with every droplet accepted. The ideal soliton stalls on a stream that the robust soliton decodes early. The chart marks the stall and where each run finishes, so the numbers the post gives are a drawing and not a claim to take on trust.
Write <FountainComparison /> in a post.
blocks decoded at each droplet, ideal soliton against robust solitonfirst 40 droplets: ideal holds 2 of 20robust: droplet 22ideal: droplet 6702040608005101520dropletblocks decoded
robust soliton, solid lineideal soliton, dashed line
Both senders cut the message into 20 blocks and draw from the same seed, and the receiver accepts every droplet. The robust soliton decodes all 20 blocks on droplet 22. At droplet 40 the ideal soliton has 2 of 20 blocks, and it decodes all 20 blocks on droplet 67.
The stream the post namesThe seed the post names, over a budget that reaches past the ideal finish. Both runs finish, so the reader sees how long the ideal soliton waits and that the wait does end.
blocks decoded at each droplet, ideal soliton against robust solitonfirst 40 droplets: ideal holds 2 of 20robust: droplet 2201020304005101520dropletblocks decoded
robust soliton, solid lineideal soliton, dashed line
Both senders cut the message into 20 blocks and draw from the same seed, and the receiver accepts every droplet. The robust soliton decodes all 20 blocks on droplet 22. The ideal soliton has 2 of 20 blocks after 40 droplets and is not finished.
Stopped at the budget the post argues fromThe same seed, stopped at the droplet where the post reads the stall. The robust run finishes and the ideal run does not, so the chart draws no finish for it and the caption says it is not finished.
The Kelly criterion
A coin game with a five percent edge, and the stake that decides whether a player keeps it. Three strategies play one run of flips: the whole bankroll, the Kelly stake, and whatever the reader sets. Under them is the growth rate of every stake there is, computed rather than played, so the peak the formula names is a place on a drawing rather than a number to take on trust.
Write <KellySandbox /> in a post.
expected return per $11.05xKelly stake25%break even50%
all-in$0.71Kelly 25%$186yours 10%$149Stake 10%. Under Kelly. Final bankroll $149, worst drawdown 34%.
Three stakes played against one run of coin flipsstartbrokeall-inKelly 25%yours 10%020406080100$1$10$100$1,000roundsbankroll
Growth per round at every stakeno growthKelly 25%break even 50%yours 10%0%20%40%60%80%100%-5%-4%-3%-2%-1%0%stakegrowth per round
all-in: the whole bankroll, every roundKelly: the stake that grows this game fastestyours: the stake you setthe bankroll you began withbroke: a stake the table will not takegrowth per round, at every stakebreak even: where growth runs outevery stake past it, which loses
Kelly says stake 25%. The three lines play the same coin flips, so the only thing between them is the stake. The second drawing is where that stake comes from: it is the growth per round of every stake there is, computed rather than played, and its peak is Kelly. Drag your stake up to the peak, then past it, and watch the wealth chart give the gain back.
StrategyFinal bankrollWorst drawdownOutcome
all-in$0.71100%broke on round 95
Kelly 25%$18670%never broke
yours 10%$14934%never broke
The game the post is written aroundA fair coin that pays 1.5 on a win and returns 0.6 on a loss, played a hundred times. The stake opens at a tenth of the bankroll, under the quarter Kelly recommends, so the first thing the reader does is drag it up.
expected return per $11.05xKelly stake25%break even50%
Three stakes played against one run of coin flipsstartbrokeall-inKelly 25%yours 25%0100200300400500$1$10$100$1,000$10,000roundsbankroll
Growth per round at every stakeno growthKelly 25%break even 50%yours 25%0%20%40%60%80%100%-5%-4%-3%-2%-1%0%stakegrowth per round
all-in: the whole bankroll, every roundKelly: the stake that grows this game fastestyours: the stake you setthe bankroll you began withbroke: a stake the table will not takegrowth per round, at every stakebreak even: where growth runs outevery stake past it, which loses
Kelly says stake 25%. The three lines play the same coin flips, so the only thing between them is the stake. The second drawing is where that stake comes from: it is the growth per round of every stake there is, computed rather than played, and its peak is Kelly. Drag your stake up to the peak, then past it, and watch the wealth chart give the gain back.
StrategyFinal bankrollWorst drawdownOutcome
all-in$0.71100%broke on round 95
Kelly 25%$79,30874%never broke
yours 25%$79,30874%never broke
The stake on the peak, over five hundred roundsThe reader line and the Kelly line are one line, because this stake is the Kelly stake to the last digit. Five hundred rounds is the longest run the card offers: it ends at $79,308, after a fall of 74% along the way. The all-in player is still broke on round 95.
expected return per $11.00xKelly stake0%break even0%
all-in$0.74Kelly 0%$100yours 10%$92Stake 10%. No edge, do not play. Final bankroll $92, worst drawdown 46%.
Three stakes played against one run of coin flipsstartbrokeall-inKelly 0%yours 10%020406080100$1$10$100roundsbankroll
Growth per round at every stakeno growthyours 10%0%20%40%60%80%100%-8%-6%-4%-2%0%stakegrowth per round
all-in: the whole bankroll, every roundKelly: the stake that grows this game fastestyours: the stake you setthe bankroll you began withbroke: a stake the table will not takegrowth per round, at every stakebreak even: where growth runs outevery stake past it, which loses
This game has no edge, so Kelly says do not play. The three lines play the same coin flips, so the only thing between them is the stake. The second drawing is where that stake comes from: it is the growth per round of every stake there is, computed rather than played, and its peak is Kelly. Drag your stake up to the peak, then past it, and watch the wealth chart give the gain back.
StrategyFinal bankrollWorst drawdownOutcome
all-in$0.74100%broke on round 67
Kelly 0%$1000%never broke
yours 10%$9246%never broke
A coin with no edge to bet onThe win pays 1.4 and the loss returns 0.6, so the two sides cancel. The card answers with a sentence rather than a stake, the growth curve falls away from a stake of nothing, and there is no peak on it to aim at.
The average player who does not exist
A thousand players of one coin game, every one of them staking the same share of what they hold. The mean bankroll climbs and the median falls, out of the same thousand players, because a few of them win nearly every toss and carry the average on their own. Cut the crowd to a few dozen and the mean jumps around while the median stays where it was.
Write <KellyPopulation /> in a post.
mean$1,965median$0.90gap2,181xended above $10012.6%could not finish69.6%1,000 players. Mean $1,965, median $0.90, a gap of 2,181x. 12.6% ended above where they started, 69.6% went broke.
A whole population playing one stakestartmean $1,965median $0.90020406080100$1$10$100$1,000roundsbankroll
mean: the average bankroll of the whole populationmedian: the middle player, who is the ordinary onethe middle half: everyone between the worst quarter and the bestone player, faintly, a few of them for texturethe bankroll everybody began with
The average player in this game does not exist. Everybody here plays the same coin the first figure plays, and everybody stakes the same share of what they hold. The mean climbs because a few players win nearly every toss and carry the whole average up with them. The median falls because most players do not. Both lines are correct, and neither one describes a person. Drop the player count to a few dozen and the mean jumps around, because it is one lucky player away from anywhere.
ReadingNumberWhat it is
mean$1,965the average over 1,000 players
median$0.90the middle of 1,000 players
gap2,181xthe mean divided by the median
ended above $10012.6%126 of 1,000 players
could not finish69.6%696 of 1,000 players
A thousand players betting everythingThe figure the post is written around. The mean ends at $1,965 and the median at 90 cents, and 696 of the thousand cannot finish the hundred rounds at all.
mean$29median$0.97gap29.87xended above $1007.1%could not finish61.9%42 players. Mean $29, median $0.97, a gap of 29.87x. 7.1% ended above where they started, 61.9% went broke.
A whole population playing one stakestartmean $29median $0.97020406080100$1$10$100$1,000roundsbankroll
mean: the average bankroll of the whole populationmedian: the middle player, who is the ordinary onethe middle half: everyone between the worst quarter and the bestone player, faintly, a few of them for texturethe bankroll everybody began with
The average player in this game does not exist. Everybody here plays the same coin the first figure plays, and everybody stakes the same share of what they hold. The mean climbs because a few players win nearly every toss and carry the whole average up with them. The median falls because most players do not. Both lines are correct, and neither one describes a person. Drop the player count to a few dozen and the mean jumps around, because it is one lucky player away from anywhere.
ReadingNumberWhat it is
mean$29the average over 42 players
median$0.97the middle of 42 players
gap29.87xthe mean divided by the median
ended above $1007.1%3 of 42 players
could not finish61.9%26 of 42 players
Forty two playersThe same seed over a small crowd. The mean falls to $29 while the median holds at 97 cents, because the mean is one lucky player away from anywhere and the median is not. This is the figure to hold in mind before trusting an average of forty two of anything.
mean$332median$186gap1.79xended above $10068.7%could not finish0.1%1,000 players. Mean $332, median $186, a gap of 1.79x. 68.7% ended above where they started, 0.1% went broke.
A whole population playing one stakestartmean $332median $186020406080100$10$100roundsbankroll
mean: the average bankroll of the whole populationmedian: the middle player, who is the ordinary onethe middle half: everyone between the worst quarter and the bestone player, faintly, a few of them for texturethe bankroll everybody began with
The average player in this game does not exist. Everybody here plays the same coin the first figure plays, and everybody stakes the same share of what they hold. The mean climbs because a few players win nearly every toss and carry the whole average up with them. The median falls because most players do not. Both lines are correct, and neither one describes a person. Drop the player count to a few dozen and the mean jumps around, because it is one lucky player away from anywhere.
ReadingNumberWhat it is
mean$332the average over 1,000 players
median$186the middle of 1,000 players
gap1.79xthe mean divided by the median
ended above $10068.7%687 of 1,000 players
could not finish0.1%1 of 1,000 players
The same thousand players, staking KellyThe control. One player in a thousand goes broke rather than 696, the median climbs to $186 instead of falling to 90 cents, and the mean is 1.79 times the median rather than 2,181 times it. The stake parts the two averages, not the crowd.
git rebase --onto
An animated commit graph for git rebase --onto. It shows where the command cuts a range of commits, and where it puts those commits again. Change the command to see when --onto gives a different result and when it does not.
Write <RebaseOnto /> in a post.
git rebase --onto origin/main B: commit graphB..HEADonto origin/mainABCDEFGEFGorigin/mainyour-branch (HEAD)
base branchcutoff (upstream)replayed rangenew commitsabandoned originals
Before: this cuts at B and replays B..HEAD (E F G).
A branch that forked off the base branchBoth commands cut at the same commit, so they do the same work. Here --onto gives you nothing.
git rebase origin/main: commit graphorigin/main..HEADonto origin/mainABP+QPQEFGPQEFGorigin/mainyour-branch (HEAD)
base branchcutoff (upstream)already merged into the basereplayed rangenew commitsduplicated work → conflictsabandoned originals
Before: this cuts at A and replays origin/main..HEAD (P Q E F G). That range includes P Q, whose changes origin/main already has in P+Q.
A branch on a squash-merged parentA plain rebase replays commits that the base branch already has, which is your conflict. Switch to --onto to cut them off.
Wave tank
A tank of shallow water, solved cell by cell. The shallow water equations are integrated across 400 cells of a 60 metre tank, and a solitary wave is driven in at the ocean end. Over a flat sea floor the wave crosses without breaking, which is the control case. Over a floor that rises to a beach the same wave grows, turns into a bore, runs up the sand and drains back, and the figure reads out where it broke. What the far end of the tank does is a choice rather than a fact: the shipped run lets the wave out, and the second example puts a wall there so the same wave comes back.
Write <WaveTank /> in a post.
Time0.0 sCrest0.00 mCrest at—Vertical exaggeration7.9×Broke at—Still water depth there—A 0.30 metre wave over the flat sea floor, ending in open water, ready to launch.
wave tank: the water over the flat sea floor, ending in open waterstill water010203040506000.511.5metres from the ocean endmetres
the waterthe sea floorthe still water line, where the surface sits with no wavethe whitewater, where the wave is breaking
A solitary wave crossing a 60 metre tank of shallow water, driven in at the ocean end on the left and solved cell by cell. The flat sea floor does not break it, so no whitewater appears, and that is the point: this is the control case, so a figure over a sloping floor can show that the sea floor, and not the wave, is what breaks a wave. The two buttons above choose the land end, which is what the tank does at its right hand edge: at open the wave runs off that edge and leaves the tank for good, and at wall it meets a solid wall there and reflects back across the water it arrived over. The vertical scale is exaggerated by the factor the readout above gives. The tank is 60 metres long and under 2 metres deep, so a drawing true to both scales at once would be a flat strip.
An open end, which is what the figure shipsNothing under the wave changes, so nothing breaks it. The crest leaves the wave maker at 3.23 seconds, crosses at about 4.2 metres per second, and runs off the open end at around 16 seconds. Nothing in this tank ever stands taller than the wave that was launched into it: the tallest water of the whole run is 0.98 times the launch height, and it is the wave itself, at the maker. The 21 second run ends with 3.1% of that height left standing, and 0.1% of it is left by 25 seconds.
Time0.0 sCrest0.00 mCrest at—Vertical exaggeration7.0×Broke at—Still water depth there—A 0.30 metre wave over the flat sea floor, ending at a wall, ready to launch.
wave tank: the water over the flat sea floor, ending at a wallstill water010203040506000.511.52metres from the ocean endmetres
the waterthe sea floorthe still water line, where the surface sits with no wavethe whitewater, where the wave is breaking
A solitary wave crossing a 60 metre tank of shallow water, driven in at the ocean end on the left and solved cell by cell. The flat sea floor does not break it, so no whitewater appears, and that is the point: this is the control case, so a figure over a sloping floor can show that the sea floor, and not the wave, is what breaks a wave. The two buttons above choose the land end, which is what the tank does at its right hand edge: at open the wave runs off that edge and leaves the tank for good, and at wall it meets a solid wall there and reflects back across the water it arrived over. The vertical scale is exaggerated by the factor the readout above gives. The tank is 60 metres long and under 2 metres deep, so a drawing true to both scales at once would be a flat strip.
A wall, which is what a flume hasThe same wave, the same floor, and a wall at the far end. The crest meets it at 16.27 seconds and the tank stands to 1.70 times the launch height there, which is the arriving wave standing on its own reflection. The 18 second run ends about a second and a half into the crossing back. A beach does not answer a wave that way and a laboratory flume does, which is the whole argument for shipping the open end and keeping this one to compare it against.
Time0.0 sCrest0.00 mCrest at—Vertical exaggeration6.2×Broke at—Still water depth there—A 0.30 metre wave over the sloping sea floor, ending in open water, ready to launch.
wave tank: the water over the sloping sea floor, ending in open waterstill water010203040506000.511.52metres from the ocean endmetres
the waterthe sea floorthe still water line, where the surface sits with no wavethe whitewater, where the wave is breaking
A solitary wave crossing a 60 metre tank of shallow water towards a beach, driven in at the ocean end on the left and solved cell by cell. Over the slope the water grows shallower, so the wave grows and its face steepens, and near the beach it turns into a bore: a steep step of water that runs on. The thick white line on its face is the whitewater, where the surface is breaking. The bore runs up the sand and drains back, and the tank settles. In these equations a breaking wave never curls over: each cell holds one surface height, so no crest can fold over the water in front of it. The two buttons above choose the land end, which is what the tank does at its right hand edge: at open a wave would run off that edge, and at wall it would reflect back. On this beach the water never reaches that edge, so the two run the same water. The vertical scale is exaggerated by the factor the readout above gives. The tank is 60 metres long and under 2 metres deep, so a drawing true to both scales at once would be a flat strip.
A beach, which is what breaks the waveThe same wave over a floor that rises. The first 35 metres are the flat floor, so the crest crosses them as it crosses the control case, and then a 1 in 10 beach climbs out of the water at 50 metres. The water grows shallower and the wave steepens into a bore, and the figure first marks it breaking 47.5 metres from the ocean end, over 0.25 metres of still water, at 13.8 seconds. The whitewater, a thick white line, shows on its face until about 14.7 seconds. The bore runs up the dry sand to 0.66 metres above still water at 19.1 seconds, 3.4 metres short of the land end, so a wall there would run the same water. It drains back, the shoreline is on its own cell again from 44.6 seconds, and the last wave the beach sent out leaves through the ocean end at 52.3 seconds, so the 54 second run ends on a settled tank.
Counter
A button that counts clicks. It shows that a post can hold live React state after the page loads. The post sets the first count with the start prop.
Write <Counter /> in a post.
The count is: 0
From zeroA post that gives no props starts the count at 0.
The count is: 10
From tenThe start prop sets the first count. This one starts at 10.
Three.js scene
A small three.js scene with three shapes. The scene needs a browser, so the page draws it only after the code loads.
Write <ThreeJsSample /> in a post.
This widget draws only in a browser. The page shows a placeholder until the code loads.
Loading…
The default sceneA cone, a box and a sphere with toon shading. Drag to turn the camera.