ready for release

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 );

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,26 +63,27 @@ 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();
   }
 }
 
 function get_cursor_position(canvas, event) {
   //finds the absolute coordinates clicked, given as distence from top left.
   return [event.offsetX, event.offsetY];
-}
+}