From 006265ce67ed909da26ed8d829732d6860548b3b Mon Sep 17 00:00:00 2001 From: OSTERITE Date: Tue, 24 Jan 2023 13:34:47 +0100 Subject: [PATCH] ready for release --- color_function/library/classdefinitions.js | 19 ++++++------- color_function/library/functions.js | 33 +++++++++++----------- 2 files changed, 24 insertions(+), 28 deletions(-) diff --git a/color_function/library/classdefinitions.js b/color_function/library/classdefinitions.js index f0e718c..f0e2bda 100644 --- a/color_function/library/classdefinitions.js +++ b/color_function/library/classdefinitions.js @@ -7,7 +7,6 @@ class Square { this.lightness = lightness; this.square_size = square_size; this.ctx = ctx; - // this.draw(); } draw() { @@ -77,8 +76,8 @@ class Square_matrix { } for (let y = start_y, runs = length; y <= runs; y++) { - let color_x = x * this.pixel_ratio; - let color_y = y * this.pixel_ratio; + const color_x = x * this.pixel_ratio; + const color_y = y * this.pixel_ratio; const hue = Function( `return ${this.hue_expression .replace(/X/g, color_x) .replace(/Y/g, color_y)}` )(); const saturation = Math.abs( ((100 + Function( `return + ${this.saturation_expression .replace(/X/g, color_x) .replace(/Y/g, color_y)}` )()) % 200) - 100 ); @@ -104,8 +103,8 @@ class Square_matrix { // row for (let x = start_y, runs = length; x <= runs; x++) { for (let y = start_x, runs = width; y <= runs; y++) { - let color_x = x * this.pixel_ratio; - let color_y = y * this.pixel_ratio; + const color_x = x * this.pixel_ratio; + const color_y = y * this.pixel_ratio; const hue = Function( `return ${this.hue_expression .replace(/X/g, color_x) .replace(/Y/g, color_y)}` )(); const saturation = Math.abs( ((100 + Function( `return + ${this.saturation_expression .replace(/X/g, color_x) .replace(/Y/g, color_y)}` )()) % 200) - 100 ); @@ -149,7 +148,7 @@ class Square_matrix { } else if (method === "lightness") { - this.lightness = component; + this.lightness_expression = component; var class_method = Square.prototype.lightness_changed; } @@ -168,7 +167,7 @@ class Square_matrix { this.size_lower = size_lower; this.size_upper = size_upper; - //old_size_bipartite means its either the old size_lower or old size_upper + // old_size_bipartite means its either the old size_lower or old size_upper switch (true) { //size_upper changed @@ -190,16 +189,14 @@ class Square_matrix { } zoom(cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y) { + const zoom_area = largest_drawable_square( cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y ); const canvas_current_x = cursor_start_x + zoom_area.width; const canvas_current_y = cursor_start_y + zoom_area.height; - const canvas_start_x = 0; - const canvas_start_y = 0; - //zooms if a perfect square is makeable, guiding box fits the canvas - if ( canvas_start_x < canvas_current_x && canvas_current_x < this.canvas.width && canvas_start_y < canvas_current_y && canvas_current_y < this.canvas.height ) { + if ( 0 < canvas_current_x && canvas_current_x < this.canvas.width && 0 < canvas_current_y && canvas_current_y < this.canvas.height ) { //start is the smallest value, while end is the largest, opposite for y value because it is distance from top of canvas const start_x = Math.min( ~~(cursor_start_x / this.absolute_width) + this.distance_left_x, ~~((cursor_start_x + zoom_area.width) / this.absolute_width) + this.distance_left_x ); diff --git a/color_function/library/functions.js b/color_function/library/functions.js index 200735d..f220197 100644 --- a/color_function/library/functions.js +++ b/color_function/library/functions.js @@ -1,11 +1,10 @@ //Returns angle between two vectors, unit can be "deg" or radians function v2a(vector1, vector2, unit) { - const vector1_length = Math.sqrt(vector1[0] ** 2 + vector1[1] ** 2); const vector2_length = Math.sqrt(vector2[0] ** 2 + vector2[1] ** 2); - - if (vector1_length == 0 || vector2_length == 0){ - return NaN + + if (vector1_length == 0 || vector2_length == 0) { + return NaN; } const vector_product = vector1[0] * vector2[0] + vector1[1] * vector2[1]; //angle as degrees @@ -22,9 +21,8 @@ function v2a(vector1, vector2, unit) { } function largest_drawable_square(cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y) { - let height = 0; //Positive values down, negative values up. - let width = 0; //positive values to the right, negative to the left. + let width = 0; //positive values to the right, negative to the left. //checks which quadrant mouse is in relation to the initially clicked point (think unit circle quadrants or whatever) let quadrant = "top_right"; @@ -40,8 +38,8 @@ function largest_drawable_square(cursor_start_x, cursor_end_x, cursor_start_y, c } } - const square_width = cursor_end_x - cursor_start_x - const square_height = cursor_end_y - cursor_start_y + const square_width = cursor_end_x - cursor_start_x; + const square_height = cursor_end_y - cursor_start_y; //finds the cursor x or y position which would give the greatest width or height (both?) //current mouse position is in top right or bottom left quadrant (quadrant top_right or bottom_left) if (quadrant == "top_right" || quadrant == "bottom_left") { @@ -65,21 +63,22 @@ function largest_drawable_square(cursor_start_x, cursor_end_x, cursor_start_y, c height = width; } } - return {cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y, width, height, }; + return { cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y, width, height, }; } -function draw_square(canvas_info, background_img, cursor_start_x, cursor_end_x,cursor_start_y, cursor_end_y) { - let canvas = canvas_info; +function draw_square(canvas_info, background_img, cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y) { + const canvas = canvas_info; const ctx = canvas.getContext("2d", { alpha: false }); - let current_square = largest_drawable_square(cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y); + const current_square = largest_drawable_square(cursor_start_x, cursor_end_x, cursor_start_y, cursor_end_y); - let parameter_x = cursor_start_x + ~~current_square.width; - let parameter_y = cursor_start_y + ~~current_square.height; + const parameter_x = cursor_start_x + ~~current_square.width; + const parameter_y = cursor_start_y + ~~current_square.height; + //Draws the guiding box if it fits the canvas - if ( (parameter_x < canvas.width && parameter_x > 0) && (parameter_y < canvas.height && parameter_y > 0) ) { + if ( (0 < parameter_x && parameter_x < canvas.width) && (0 < parameter_y && parameter_y < canvas.height ) ) { ctx.drawImage(background_img, 0, 0, canvas.width, canvas.height); ctx.beginPath(); - ctx.rect(cursor_start_x, cursor_start_y, current_square.width, current_square.height); + ctx.rect( cursor_start_x, cursor_start_y, current_square.width, current_square.height ); ctx.stroke(); } } @@ -87,4 +86,4 @@ function draw_square(canvas_info, background_img, cursor_start_x, cursor_end_x,c function get_cursor_position(canvas, event) { //finds the absolute coordinates clicked, given as distence from top left. return [event.offsetX, event.offsetY]; -} \ No newline at end of file +}