Chris Burnell · Code Demos

Fibonacci Spiral Navigation

2024-06-28T01:40:31+08:00

Inspired by a discussion in the 32-Bit Café Discord, I made this Navigation using the paths of a Fibonacci spiral in SVG

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Mixing Colours in Different Colour Spaces

2024-03-05T04:58:00+08:00

Visualise how different colour spaces will mix two given colours.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Kaprekar’s Constant

2024-01-18T17:00:00+08:00

I came across an interesting mathematical observation today called Kaprekar’s constant, named after the mathematician, Dattatreya Ramchandra Kaprekar, and built an interactive tool to demonstrate it.

Take any four-digit number, using at least two different digits (leading zeros are allowed).

Arrange the digits in descending and then in ascending order to get two four-digit numbers, adding leading zeros if necessary.

Subtract the smaller number from the bigger number.

Go back to step 2 and repeat.

Wikipedia

Following the above steps always leads you to the same number, Kaprekar’s Constant: 6174.

8541 - 1458 = 7083

8730 - 0378 = 8352

8532 - 2358 = 6174

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Meteora

2023-06-28T14:13:00+01:00

The beloved and renowned Linkin Park album, Meteora, as a spinning CD case.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

One Hypotenuse to rule them all

2022-11-01T15:27:00+00:00

Here’s a fun little demo of some math I found interesting.

If a right triangle has two side-lengths both equal to √2 / 2, what is the length of its hypotenuse?

We’ll build a function to calculate the length of the hypotenuse given the length of the triangle’s other two sides.

For this, we’ll use a bit of algebra you’re probably quite familiar with:

Pythagorean Theorum

a² + b² = c²

Where c represents the hypotenuse, and a and b the other two sides.

Let’s put everything together and calculate this with some JavaScript:

const side = Math.sqrt(2) / 2
// We’re looking for c in the equation:

// a² + b² = c²

const calculateHypotenuse = (a, b) => {

// Start with getting the square of the sides,

// a and b

const a2 = Math.pow(a, 2)

const b2 = Math.pow(b, 2)
// Then, to isolate c, take the square root of

// both sides of the equation

return Math.sqrt(a2 + b2)

}
const hypotenuse = calculateHypotenuse(side, side)

Which gives us… 1

Interesting! 🤔

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

The Workplace

2022-10-09T15:45:00+01:00

Relaxing, back-to-the-basics little pen playing with text effects.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Rainbow HSL Underline

2020-07-30T19:46:00+01:00

Thought it would be fun to flex my SCSS loop skills, and actually went for a while loop! Use at your leisure.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Moon Phases

2019-12-12T00:38:00+00:00

In part of building a weather app, I wanted to represent the phases of the moon somehow, and I’m getting values 0–99 from my data, so I needed a solution that worked easily with that in mind.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Color Transition Demo

2019-12-09T18:41:00+00:00

A demo to visually see how different duration offsets affect transitioning both background-color and color.

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.

Doubly-Center-Aligned Text

2018-12-31T18:08:00+00:00

Thanks for subscribing and reading this post via RSS!

You can read this post and others on my website.