From 9129f21b4ad371d87ac04d30defeaa61df748b2e Mon Sep 17 00:00:00 2001 From: Barafu Albino Cheetah Date: Tue, 15 Oct 2024 15:54:59 +0300 Subject: [PATCH] Make dendraclock look more like original --- src-tauri/src/dream_runner.rs | 4 - src/dreams/dendraclock.ts | 266 +++++++++++++++++----------------- src/main.ts | 2 +- 3 files changed, 136 insertions(+), 136 deletions(-) diff --git a/src-tauri/src/dream_runner.rs b/src-tauri/src/dream_runner.rs index 93f498f..b7e2627 100644 --- a/src-tauri/src/dream_runner.rs +++ b/src-tauri/src/dream_runner.rs @@ -53,7 +53,6 @@ impl DreamRunner { } std::result::Result::Ok(()) }) - .plugin(tauri_plugin_shell::init()) .plugin(tauri_plugin_process::init()) .run(tauri::generate_context!()) .expect("error while running tauri application"); @@ -61,9 +60,6 @@ impl DreamRunner { } } -#[tauri::command] -fn window_finished_loading() {} - fn compare_monitors(a: &tauri::window::Monitor, b: &tauri::window::Monitor) -> bool { a.name() == b.name() && a.position() == b.position() && a.size() == b.size() } diff --git a/src/dreams/dendraclock.ts b/src/dreams/dendraclock.ts index ab8c4da..cb8daf2 100644 --- a/src/dreams/dendraclock.ts +++ b/src/dreams/dendraclock.ts @@ -1,143 +1,147 @@ class Hand { - startX: number; - startY: number; - length: number; - angle: number; - - constructor(startX: number, startY: number, length: number, angle: number) { - this.startX = startX; - this.startY = startY; - this.length = length; - this.angle = angle; // in radians, 0.0 is straight up - } - - calculateEndPoint() { - let angle = this.angle - Math.PI / 2.0; - - // Calculate the change in x and y - const deltaX = this.length * Math.cos(angle); - const deltaY = this.length * Math.sin(angle); - - // Calculate end point - const endX = this.startX + deltaX; - const endY = this.startY + deltaY; // Subtract because y-axis is inverted in most computer graphics systems - - return { x: endX, y: endY }; - } - - rotateClockwise(angleInRadians: number) { - this.angle = sum_rotations(this.angle, angleInRadians); - } + startX: number; + startY: number; + length: number; + angle: number; + + constructor(startX: number, startY: number, length: number, angle: number) { + this.startX = startX; + this.startY = startY; + this.length = length; + this.angle = angle; // in radians, 0.0 is straight up } - class AnalogClock { - time: Date; - centerX: number; - centerY: number; - current_depth: number; - settings: any; - hourHand: Hand; - minuteHand: Hand; - secondHand: Hand; - constructor(time: Date, centerX: number, centerY: number, current_depth: number, settings: any) { - this.time = time; - this.centerX = centerX; - this.centerY = centerY; - this.current_depth = current_depth; - this.settings = settings; - - const hours = time.getHours() + time.getMinutes() / 60.0 + time.getSeconds() / 3600.0; - const minutes = time.getMinutes() + time.getSeconds() / 60.0; - const seconds = time.getSeconds() + time.getMilliseconds() / 1000.0; - - const arm_length = 100 * Math.pow(settings.LENGTH_FACTOR, current_depth); - - this.hourHand = new Hand(centerX, centerY, 50, hours * Math.PI / 6); - this.minuteHand = new Hand(centerX, centerY, arm_length, minutes * Math.PI / 30); - this.secondHand = new Hand(centerX, centerY, arm_length, seconds * Math.PI / 30); - } - - draw(ctx: CanvasRenderingContext2D) { - const arm_width = this.settings.START_LINE_WIDTH * Math.pow(this.settings.WIDTH_FACTOR, this.current_depth); - ctx.lineWidth = arm_width; - if (this.current_depth == 1) { - const hourEndPoint = this.hourHand.calculateEndPoint(); - ctx.beginPath(); - ctx.moveTo(this.centerX, this.centerY); - ctx.lineTo(hourEndPoint.x, hourEndPoint.y); - ctx.strokeStyle = "green"; - ctx.stroke(); - } - - const minuteEndPoint = this.minuteHand.calculateEndPoint(); - ctx.beginPath(); - ctx.moveTo(this.centerX, this.centerY); - ctx.lineTo(minuteEndPoint.x, minuteEndPoint.y); - ctx.strokeStyle = "white"; - ctx.stroke(); - - const secondEndPoint = this.secondHand.calculateEndPoint(); + + calculateEndPoint() { + let angle = this.angle - Math.PI / 2.0; + + // Calculate the change in x and y + const deltaX = this.length * Math.cos(angle); + const deltaY = this.length * Math.sin(angle); + + // Calculate end point + const endX = this.startX + deltaX; + const endY = this.startY + deltaY; // Subtract because y-axis is inverted in most computer graphics systems + + return { x: endX, y: endY }; + } + + rotateClockwise(angleInRadians: number) { + this.angle = sum_rotations(this.angle, angleInRadians); + } +} +class AnalogClock { + time: Date; + centerX: number; + centerY: number; + current_depth: number; + settings: DendraClockPersistentOptions; + hourHand: Hand; + minuteHand: Hand; + secondHand: Hand; + constructor(time: Date, centerX: number, centerY: number, current_depth: number, settings: any) { + this.time = time; + this.centerX = centerX; + this.centerY = centerY; + this.current_depth = current_depth; + this.settings = settings; + + const hours = time.getHours() + time.getMinutes() / 60.0 + time.getSeconds() / 3600.0; + const minutes = time.getMinutes() + time.getSeconds() / 60.0; + const seconds = time.getSeconds() + time.getMilliseconds() / 1000.0; + + const arm_length = settings.START_ARM_LENGTH * Math.pow(settings.LENGTH_FACTOR, current_depth); + + this.hourHand = new Hand(centerX, centerY, arm_length * 0.7, hours * Math.PI / 6); + this.minuteHand = new Hand(centerX, centerY, arm_length, minutes * Math.PI / 30); + this.secondHand = new Hand(centerX, centerY, arm_length, seconds * Math.PI / 30); + } + + draw(ctx: CanvasRenderingContext2D) { + const arm_width = this.settings.START_LINE_WIDTH * Math.pow(this.settings.WIDTH_FACTOR, this.current_depth); + const transparency_factor = Math.pow(this.settings.LUMINANCE_FACTOR, this.current_depth-1); + const color = `rgba(255, 255, 255, ${transparency_factor})`; + ctx.lineWidth = arm_width; + ctx.lineCap = "round"; + ctx.strokeStyle = color; + + if (this.current_depth == 1) { + const hourEndPoint = this.hourHand.calculateEndPoint(); ctx.beginPath(); ctx.moveTo(this.centerX, this.centerY); - ctx.lineTo(secondEndPoint.x, secondEndPoint.y); - ctx.strokeStyle = "yellow"; + ctx.lineTo(hourEndPoint.x, hourEndPoint.y); ctx.stroke(); } - - rotateClockwise(angleInRadians: number) { - this.hourHand.rotateClockwise(angleInRadians); - this.minuteHand.rotateClockwise(angleInRadians); - this.secondHand.rotateClockwise(angleInRadians); - } - - rotateToHour(hour_angle: number) { - const current_hour_angle = this.hourHand.angle; - const rotation = hour_angle - current_hour_angle; - this.rotateClockwise(rotation); - } + + const minuteEndPoint = this.minuteHand.calculateEndPoint(); + ctx.beginPath(); + ctx.moveTo(this.centerX, this.centerY); + ctx.lineTo(minuteEndPoint.x, minuteEndPoint.y); + ctx.stroke(); + + const secondEndPoint = this.secondHand.calculateEndPoint(); + ctx.beginPath(); + ctx.moveTo(this.centerX, this.centerY); + ctx.lineTo(secondEndPoint.x, secondEndPoint.y); + ctx.stroke(); } - - class DendraClockPersistentOptions { - ZOOM = 0.25; - START_LINE_WIDTH = 8; - DEPTH = 9; - LENGTH_FACTOR = 0.95; - LUMINANCE_FACTOR = 0.8; - WIDTH_FACTOR = 0.7; + + rotateClockwise(angleInRadians: number) { + this.hourHand.rotateClockwise(angleInRadians); + this.minuteHand.rotateClockwise(angleInRadians); + this.secondHand.rotateClockwise(angleInRadians); } - - export function dendraClock(canvas: HTMLCanvasElement) { - const settings = new DendraClockPersistentOptions(); - const ctx = canvas.getContext("2d")!; - const now = new Date(); - ctx.clearRect(0, 0, canvas.width, canvas.height); - dendra_clock_recursive(settings, now, ctx,0, canvas.width / 2, canvas.height / 2, 0.0); + + rotateToHour(hour_angle: number) { + const current_hour_angle = this.hourHand.angle + Math.PI; + const rotation = hour_angle - current_hour_angle; + this.rotateClockwise(rotation); } - - function dendra_clock_recursive(settings: DendraClockPersistentOptions, now: Date, ctx: CanvasRenderingContext2D, current_depth: number, x: number, y: number, extra_rotation: number) { - current_depth++; - if (current_depth == settings.DEPTH) return; - const clock = new AnalogClock(now, x, y, current_depth, settings); +} + +class DendraClockPersistentOptions { + ZOOM = 0.25; + START_LINE_WIDTH = 10; + DEPTH = 9; + LENGTH_FACTOR = 0.9; + LUMINANCE_FACTOR = 0.9; + WIDTH_FACTOR = 0.7; + START_ARM_LENGTH = 150; +} + +export function dendraClock(canvas: HTMLCanvasElement) { + const settings = new DendraClockPersistentOptions(); + const ctx = canvas.getContext("2d")!; + ctx.globalCompositeOperation = "destination-over"; + const now = new Date(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + dendra_clock_recursive(settings, now, ctx, 0, canvas.width / 2, canvas.height / 2, 0.0); +} + +function dendra_clock_recursive(settings: DendraClockPersistentOptions, now: Date, ctx: CanvasRenderingContext2D, current_depth: number, x: number, y: number, extra_rotation: number) { + if (current_depth == settings.DEPTH) return; + current_depth++; + const clock = new AnalogClock(now, x, y, current_depth, settings); + if (current_depth != 1) { clock.rotateToHour(extra_rotation); - clock.draw(ctx); - //const hour_pos = clock.hourHand.calculateEndPoint(); - const minute_pos = clock.minuteHand.calculateEndPoint(); - const seconds_pos = clock.secondHand.calculateEndPoint(); - const minutes_rotation = clock.minuteHand.angle; - const seconds_rotation = clock.secondHand.angle; - //dendra_clock_recursive(settings, current_depth, hour_pos.x, hour_pos.y); - dendra_clock_recursive(settings, now, ctx, current_depth, minute_pos.x, minute_pos.y, minutes_rotation); - dendra_clock_recursive(settings, now, ctx,current_depth, seconds_pos.x, seconds_pos.y, seconds_rotation); } - - function sum_rotations(rotation1: number, rotation2: number) { - // Add the two rotation values - let sum = rotation1 + rotation2; - // Normalize the result to be within the range [0, 2π) - sum = sum % (2 * Math.PI); - // If the result is negative, add 2π to make it positive - while (sum < 0) { - sum += 2 * Math.PI; - } - return sum; + clock.draw(ctx); + //const hour_pos = clock.hourHand.calculateEndPoint(); + const minute_pos = clock.minuteHand.calculateEndPoint(); + const seconds_pos = clock.secondHand.calculateEndPoint(); + const minutes_rotation = clock.minuteHand.angle; + const seconds_rotation = clock.secondHand.angle; + dendra_clock_recursive(settings, now, ctx, current_depth, minute_pos.x, minute_pos.y, minutes_rotation); + dendra_clock_recursive(settings, now, ctx, current_depth, seconds_pos.x, seconds_pos.y, seconds_rotation); +} + +function sum_rotations(rotation1: number, rotation2: number) { + // Add the two rotation values + let sum = rotation1 + rotation2; + // Normalize the result to be within the range [0, 2π) + sum = sum % (2 * Math.PI); + // If the result is negative, add 2π to make it positive + while (sum < 0) { + sum += 2 * Math.PI; } - \ No newline at end of file + return sum; +} diff --git a/src/main.ts b/src/main.ts index e4ec9e8..4a81bc0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -7,7 +7,7 @@ import { dendraClock } from "./dreams/dendraclock"; let canvas: HTMLCanvasElement = document.getElementById("dreamCanvas") as HTMLCanvasElement; -let dream: string = "clock"; +let dream: string = "dendraclock"; addEventListener("mouseup", (event) => { if (event.button == 0) {