1. Introduction

Word wheel is a practice project resulting from:

• being adept with spatial mathematics;

• having recently done an intensive study of CSS and JavaScript with an HTML refresher; and

• knowing about an artistic thing called “color distance” where color alone can convey distance.

  • Against a dark background, purple appears the “farthest” and then you rotate away from red on the color wheel to get gradually nearer, with bright red appearing as the “nearest” color. So the colors progress through:

    Color	Distance	Illustrated
    black	farthest	Basic Color Wheel on a Dark Background
    purple
    blue
    cyan
    green
    yellow
    orange
    red	nearest

    If you picture it like you are looking down on a spiral staircase, you can see it, even though no actual distance, lighting or shadowing are represented—the colors do it by themselves.

  • In contrast, against a light background, blue appears the “farthest” and then you rotate through red and finally stop and cyan appearing as the “nearest”. So the colors progress through:

    Color	Distance	Illustrated
    black	farthest	Basic Color Wheel on a Light Background
    blue
    purple
    red
    orange
    yellow
    green
    cyan	nearest

    If you picture it like you are looking down on a spiral staircase, you can see it, even though no actual distance, lighting or shadowing are represented—the colors do it by themselves.

I woke up this morning (12-Apr-2025 04:44 MDT) realizing I could build this app to run on a web browser and it would be a great practice project to help cement my knowledge and agility with CSS, JavaScript and HTML.

It will include:

Tech Area	Description
CSS	positioning (absolute)
CSS	coloring
CSS	font-size control
CSS	z-axis management
CSS	transitions
JavaScript	Dynamic HTML (JavaScript creates and manages HTML elements acting in animation)
JavaScript	DOM parsing (importing words from web pages)
JavaScript	intervals (animation)
JavaScript	regular expressions
JavaScript	managing CSS styles
Spatial Math	computing intersection points on screen to give position and word height

So here we go!