Sharing lumpy source code, algorithms and 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: [source]
No shaders are used so these techneques 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.

Wordlet [source]

A mini Wordle emulator.
  • Guess from 488 simplest British English words.
  • Entered words are not validated.
  • Physical keyboard can be used.
  • After doing today's word, click the ♻ key that appears, to suffer play with a new word!
  • Select the following white text to
    see the answer:
    "(Have a few guesses first!)"
  • Avoid Confirmation Bias: the word is not Tarot!
QWERTYUIOP
ASDFGHJKL
✔ ZXCVBNM ♻❌
You won't beat [Extreme Rookery]...

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!

Touch my nose... [source]

This browser doesn't support the canvas element :-(
Search for 'Face' in the source for this page.

HTML5 canvas drawing [source]

Most images on this page are drawn live with javascript on HTML5 canvases using very few lines of code!
So you can interact:
This browser doesn't support the canvas element :-(
Check out the tutorial.

Procedural Button [source]

Down
Highlight
Click it until you like it! This browser doesn't support the canvas element :-(
In-depth tutorial

Procedural Slider Control [source]

This browser doesn't support the canvas element :-(
View source and search for Slider

Procedural Wall [source]

Simple: Lock Sliders:

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

Spherical Lens [source]

Drag the Lens around:
This browser doesn't support the canvas element :-(
Hemisphere
Check out the bottom of
this page's source to see
how this is done...

Space-filling Curves [source]

Fractals used for grouping similar information in databases, interleaving, cryptograpahy and metal sintering!




Seed Head [source]

The Golden Ratio and Fibonacci Series are used to draw this:
Seeds
0 Red Spirals
0 Blue Spirals
This browser doesn't support the canvas element :-(
It's like the top of a fir cone!
 See the other examples.

Quadrature
Decoder [source]

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

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

Play
Raw (loud)!

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