Skip to content

Commit

Permalink
cleaning up
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkallen78
dkallen78 committed Dec 4, 2023
1 parent 656ed85 commit 5a586e9
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 16 deletions.
23 changes: 16 additions & 7 deletions ternary-clock/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
# [Ternary Clock v0.1](https://dkallen78.github.io/clocks/ternary-clock/v0.1/ternary-clock-v0.1.html)
# [Ternary Clock v0.3](https://dkallen78.github.io/clocks/ternary-clock/v0.3/ternary-clock-v0.3.html)

This clock was inspired by a conversation I had with someone on Reddit.
This is basically the same on the outside but I changed a bunch on the inside. The first big thing I changed was giving points their own class with a static method for finding the midpoint between two points and the vector between two points. This makes things easier to read when I'm navigating the code.

The basic idea is a a clock built around base 3 so the fundamental division of the day is into three parts. In my code I call these parts "terns" but if someone has something better, I'll use that instead. Each tern is divided into 9 hours; each hour into 27 minutes, and each minute into 81 seconds. This makes the hour<sub>3</sub> 89% the length of the hour<sub>60</sub>, the minute<sub>3</sub> 97% longer than the minute<sub>60</sub>, and the second<sub>3</sub> 46% longer than the second<sub>60</sub>.
The second thing is instead of finding the vector and cell center on the fly I tie it directly to the element when I create it. The center I do by just giving it a `transform-origin` property and the vector I do with custom HTML attributes.

The hardest part was wrapping my head around drawing part of a circle with the `<path>` element of SVG and ironing out those kinks. I've made enough clocks that the trigonometry of distributing points on a circle came back to me pretty quickly. The tricky part was finding a way to ensure that all of the gaps between the cells would be the same. The solution to that was in calculating the angle of the gap between each concentric cell based on the distance I wanted between them. Basically I needed to double the arcsine of half the gap divided by the radius to the arc.

`2 * Math.asin((gap / 2) / radius)`
The third thing I did was put all of my time based functions inside an object just to keep them organized better and tie them together.

# [Ternary Clock v0.2](https://dkallen78.github.io/clocks/ternary-clock/v0.2/ternary-clock-v0.2.html)

Expand All @@ -22,4 +20,15 @@ That's a lie. I think part of the problem is my method of finding the center is

I fixed the wonky center/vector issue. Since I was using the bounding box to find the center, and that center to find the vector to rotate, it was throwing some of the animations off when I was doing 90 and 180 degree rotations. Now I'm directly interrogating the `d` attribute of the `<path>` element to get the coordinates for the cell. From there I can just find the midpoints between opposite corners and find a vector from the outer midpoint to the inner midpoint. And for my new and improved transform-origin I'm using the center of the two midpoints which still isn't perfect, but it's much better.

I'll clean up my code and comments tomorrow.
I'll clean up my code and comments tomorrow.

# [Ternary Clock v0.1](https://dkallen78.github.io/clocks/ternary-clock/v0.1/ternary-clock-v0.1.html)

This clock was inspired by a conversation I had with someone on Reddit.

The basic idea is a a clock built around base 3 so the fundamental division of the day is into three parts. In my code I call these parts "terns" but if someone has something better, I'll use that instead. Each tern is divided into 9 hours; each hour into 27 minutes, and each minute into 81 seconds. This makes the hour<sub>3</sub> 89% the length of the hour<sub>60</sub>, the minute<sub>3</sub> 97% longer than the minute<sub>60</sub>, and the second<sub>3</sub> 46% longer than the second<sub>60</sub>.

The hardest part was wrapping my head around drawing part of a circle with the `<path>` element of SVG and ironing out those kinks. I've made enough clocks that the trigonometry of distributing points on a circle came back to me pretty quickly. The tricky part was finding a way to ensure that all of the gaps between the cells would be the same. The solution to that was in calculating the angle of the gap between each concentric cell based on the distance I wanted between them. Basically I needed to double the arcsine of half the gap divided by the radius to the arc.

`2 * Math.asin((gap / 2) / radius)`

84 changes: 75 additions & 9 deletions ternary-clock/v0.3/ternary-clock-v0.3.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,42 @@
class Point {
//----------------------------------------------------//
//A data structure to make managing and representing //
// Cartesian points easier //
//----------------------------------------------------//
//x(float): x coordinate of the point //
//y(float): y coordinate of the point //
//----------------------------------------------------//

constructor(x, y) {
this.x = x;
this.y = y;
}

static center(p1, p2) {
//----------------------------------------------------//
//Finds the center point between p1 and p2 //
//----------------------------------------------------//
//p1, p2(Point): points to find the center of //
//----------------------------------------------------//
//return(Point): the point at the midpoint between the//
// original two points //
//----------------------------------------------------//

const midX = (p1.x + p2.x) / 2;
const midY = (p1.y + p2.y) / 2;
const newCenter = new Point(midX, midY);
return newCenter;
}

static vector(p1, p2) {
//----------------------------------------------------//
//Finds the vector from p1 to p2 //
//----------------------------------------------------//
//p1, p2(Point): points on the vector to be found //
//----------------------------------------------------//
//return(Point): the vector from p1 to p2 //
//----------------------------------------------------//

const vecX = (p1.x - p2.x);
const vecY = (p1.y - p2.y);
const newVector = new Point(vecX, vecY);
Expand All @@ -21,6 +46,13 @@ class Point {

const time = {
get ms() {
//----------------------------------------------------//
//Returns the number of milliseconds that have passed //
// in the current day //
//----------------------------------------------------//
//return(integer): elapsed ms in current day //
//----------------------------------------------------//

let totalms = 0;

let newTime = new Date();
Expand Down Expand Up @@ -98,17 +130,28 @@ function toDeg(rad) {
}

function makeArcs(n, r1, r2, type) {
//----------------------------------------------------//
//Makes the paths that draw the clock cells in the //
// SVG element //
//----------------------------------------------------//
//n(integer): number of cells to draw //
//r1(float): lower bound of the cells given as a //
// percentage of the SVG element size //
//r2(float): upper bound of the cells given as a //
// percentage of the SVG element size //
//type(string): the type of cell to be drawn //
//----------------------------------------------------//

//
//Change in angle for the starting point of each chunk
//Change in angle for the starting point of each cell
let angleDelta = 360 / n;
//
//The radii of my arcs converted from percentages to
// absolute units
let radius1 = r1 * box.width;
let radius2 = r2 * box.width;
//
//The angle required to leave a 1% gap between the circle chunks
//The angle required to leave a 1% gap between the cells
let angleGap1 = toDeg(2 * (Math.asin((box.width * (gap / 2)) / radius1)));
let angleGap2 = toDeg(2 * (Math.asin((box.width * (gap / 2)) / radius2)));
//
Expand All @@ -122,6 +165,8 @@ function makeArcs(n, r1, r2, type) {
let angleB1 = angleA1 + angleDelta - angleGap1;
let angleB2 = angleA2 + angleDelta - angleGap2;

//
//Points that will be needed when drawing the cells
let a1 = new Point(0, 0);
let a2 = new Point(0, 0);
let b1 = new Point(0, 0);
Expand Down Expand Up @@ -163,7 +208,7 @@ function makeArcs(n, r1, r2, type) {
L ${a2.x} ${a2.y}
A ${radius2} ${radius2} 0 0 1 ${b2.x} ${b2.y}
L ${b1.x} ${b1.y}
A ${radius1} ${radius1} 0 0 ${type === "tern" ? 1 : 0}
A ${radius1} ${radius1} 0 0 ${type === "terns" ? 1 : 0}
${a1.x} ${a1.y}
`);
path.classList.add(type);
Expand Down Expand Up @@ -250,33 +295,54 @@ function clearBand(band) {
cellDown(paths[count], false);
count++;
if (count === paths.length) clearInterval(pathClear);
}, (clearSpeed * 33));
}, (clearSpeed * 50));
}

function cellUp(elem) {
//----------------------------------------------------//
//Uses a CSS transform to rotate the clock cells and //
// make them visible //
//----------------------------------------------------//
//elem(DOM element): element to be "flipped" //
//----------------------------------------------------//

let vecX = Number.parseFloat(elem.dataset.vecX);
let vecY = Number.parseFloat(elem.dataset.vecY);

elem.style.transform = `rotate3d(${vecX}, ${vecY}, 0, 0deg)`;
elem.style.fillOpacity = 1;
//elem.style.fillOpacity = 1;
}

function cellDown(elem, fast = true) {
//----------------------------------------------------//
//Uses a CSS transform to rotate the clock cells and //
// make them invisible //
//----------------------------------------------------//
//elem(DOM element): element to be "flipped" //
//fast(boolean): whether or not to apply a delay to //
// the transition //
//----------------------------------------------------//

let vecX = Number.parseFloat(elem.dataset.vecX);
let vecY = Number.parseFloat(elem.dataset.vecY);

elem.style.transform = `rotate3d(${vecX}, ${vecY}, 0, 90deg)`;

if (fast) {
elem.style.fillOpacity = 0;
/*if (fast) {
//elem.style.fillOpacity = 0;
} else {
setTimeout(function() {
elem.style.fillOpacity = 0;
//elem.style.fillOpacity = 0;
}, 500);
}
}*/
}

function gears() {
//----------------------------------------------------//
//The repeating function that updates the clock face //
// when the time changes //
//----------------------------------------------------//

if (time.second !== second) {

if (time.minute !== minute) {
Expand Down

0 comments on commit 5a586e9

Please sign in to comment.