Treasure Chest

This is an Open Source site
sharing lumpy source code,
algorithms && ideas.

See the Site Map and leave Feeback (spam is filtered)

View Source on this page to see the code if you're into graphics or game development.
The Helper Functions are here: Helpers.js
Widgets.js
No shaders are used so these techniques can be used on simple embedded devices.

Dot Product [source]

Drag the green and blue lines.
This browser doesn't support the canvas element :-(
Blue Dot Green
(Length of Green) squared
= Red Length relative to green
= 0
Check out the Vector section and these per-pixel rendered lines in this page's source.

HTML5 canvas drawing [source]

Most images on this page are drawn live with javascript on HTML5 canvases using very few lines of code!

This browser doesn't support the canvas element :-(
Check out the tutorial.

Procedural Button [source]



Click it until you like it! This browser doesn't support the canvas element :-(

In-depth tutorial

⏳Procedural Progress Bar
[source] [Widgets.js]

This browser doesn't support the canvas element :-(

(Click a Progress bar to stop)

🎚Procedural Slider [source] [Widgets.js]

This browser doesn't support the canvas element :-(
View source and search for Slider to see all the places they're used

🔍Spherical Lens [source]

Drag the Lens around:
This browser doesn't support the canvas element :-(

Find the cyan pixel!
(All pixels are procedurally generated - no line drawing)
Type #set to see it used in a settings page.

Procedural Bulb [source]


This browser doesn't support the canvas element :-(

BSP Panels [source]

Binary Space Partitioning

This browser doesn't support the canvas element :-(
Tap panels for new pattern

Procedural Wall [source]



This browser doesn't support the canvas element :-(
Yet another tutorial

Particle Sim [source]

Boid behaviour plus 9 forces
Velocity held in pixel RGBA

This browser doesn't support the canvas element :-(







Hover mouse for attention.
Tap box for new Tiddlers.
Have you picked one
and given it a name?

Fractal Fern [source]

Drawn in just a few
lines of code
This browser doesn't support the canvas element :-(
Click it to turn the pixels in to sand!

Don't touch my nose! [source]

This browser doesn't support the canvas element :-(

Search for 'Face' in the source for this page.

Wordlet [source]

A mini Wordle emulator.
QWERTYUIOP
ASDFGHJKL
 ZXCVBNM 
Next challenge (with source): [Extreme Rookery]

Chimp Test [source]

Click the circle to start the timer
The timer stops when you click 1
Wins:0
Last Time:-
Best Time:-
Next challenge (with source): [Extreme Rookery]

Space-filling Curves [source]

Fractals used for grouping similar information in databases, interleaving, cryptograpahy and metal sintering!
This browser doesn't support the canvas element :-(


Seed Head [source]

The Golden Ratio and Fibonacci Series are used to draw this:



This browser doesn't support the canvas element :-(
It's like the top of a fir cone!
See the other examples.

What is the wavelength of that pitch? [source]

The base standard that orchestras tune to:
A4 is the 10th semitone (Octaves start at C) of octave 4
and has a frequency of 440Hz.

You can find the frequency and wavelength of other musical notes
with this free online javascript calculator:

The Frequency of is 440Hz
which at Temperature °C (giving a speed of sound of 344.97m/s)
results in a Wavelength of 0.784m
(Note that the speed of sound does not depend on altitude)

Procedural Music [source]

'Dream' was voted most popular Ring-tone in the days when 'phones could only beep.
It's a particularly clever composition, playing for 192 notes over 40 seconds before repeating, yet it can be massively compressed to 52 bytes of data for use in embedded systems.


This browser doesn't support the canvas element :-(  Pitch
 Tempo
(loud)!🙉

Quadrature
Decoder [source]

Position:0
[Both]
→ +1 →
← -1 ←
In 4 lines of code!

Unlock/Backdoor/Cheat Codes [source]

Keypresses (regardless of focus) are monitored (except phones which don't show the keyboard).
If #rook is typed, the Rookery game on this site is opened.
Type #joy to play with a procedurally rendered joystick.
Type #set to play with procedurally rendered lensed settings.
Usually the # wouldn't be neccesary but changing page while typing in the Wordlet part of this page would be rude!
View the source to check out the tiny algorithm.