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.
GOLDUST!GOLDUST!
The Helper Functions are here: Helpers.js
Widgets.js
No shaders are used: these techniques can be used on simple embedded devices. [Tutorial]

HTML5 canvas drawing [source]

Most images on this page are drawn live with javascript on HTML canvases purely as pixel blocks, using very few lines of code!

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

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.

Procedural Pin [source]

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

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] and [Widgets.js]

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

Hypno-Progress [source]

Pixel maths: no arc/text()


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

🔍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 Honeycomb [source]



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

Procedural Wall [source]



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

Particle Sim [source]

Green Zombies ignore forces
and attempt pincer movements
to infect the others!
Boid behaviour plus 9 forces
Velocity held in pixel RGBA

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







Hover mouse for attention.
Tap canvas for new Tiddlers.

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.

Procedural Tetris [source]

With Recovery Bonus as well as Combos, T-Spins, Perfect Clears and Back-to-back Difficults
This browser doesn't support the canvas element :-( Next:
This browser doesn't support the canvas element :-(
Level:0
Games:0
Score:0
High:0
Lines:0
Total:0
Time:00 00:00:00
Total:00 00:00:00
Statistics:
I: 0
T: 0
O: 0
J: 0
L: 0
S: 0
Z: 0
↺ Q ↶ W ↓ E ↷ R ↻ T
↞ A ← S ↡ D → F ↠ G
⏵ Space
Next challenge (with source): [Extreme Rookery]

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, cryptography and metal sintering
This browser doesn't support the canvas element :-(


Spiral [source]

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.

Diff Text Strings [source]


 

Diagram:
 
 
 
Cosine Similarity:
of sentences (used in Vector Databases)

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.
Pauses other animating canvases on this page while playing!


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 #set to play with procedurally rendered lensed settings.
Type #joy to play with a procedurally rendered joystick.
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. . . .