reverted to using "Function" instead of math.eval

color_function/index.html

@@ -33,8 +33,8 @@
 
 	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js"></script> -->
 
-	<script src="./library/mathjs/node_modules/mathjs/lib/browser/math.js"></script>
 	<script src="./library/functions.js"></script> <!-- Can convert vectors to angles (degress or radians) -->
+	<script src="./library/mathjs/node_modules/mathjs/lib/browser/math.js"></script>
 	<script src="./library/classdefinitions.js"></script>
 	<!-- <script src="worker.js"></script> -->
 	<script src="script.js"> </script>

color_function/library/classdefinitions.js

@@ -27,17 +27,15 @@ class Square {
   }
 
   hue_changed(expression, x, y) {
-
-    this.hue = math.evaluate(`${expression}`.replace(/X/g, x).replace(/Y/g, y));
+    this.hue = Function( `return ${expression.replace(/X/g, x).replace(/Y/g, y)}` )();
     this.draw();
   }
   saturation_changed(expression, x, y) {
-    this.saturation = Math.abs( ((100 +  math.evaluate(`${expression}`.replace(/X/g, x).replace(/Y/g, y))) % 200) - 100 );
-
+    this.saturation = Math.abs( ((100 + Function(`return ${expression.replace(/X/g, x).replace(/Y/g, y)}`)()) % 200) - 100 );
     this.draw();
   }
   lightness_changed(expression, x, y) {
-    this.lightness = Math.abs( ((100 + math.evaluate(`${expression}`.replace(/X/g, x).replace(/Y/g, y))) % 200) - 100 );
+    this.lightness = Math.abs( ((100 + Function(`return ${expression.replace(/X/g, x).replace(/Y/g, y)}`)()) % 200) - 100 );
     this.draw();
   }
 }
@@ -82,9 +80,9 @@ class Square_matrix {
         let color_x = x * this.pixel_ratio;
         let color_y = y * this.pixel_ratio;
 
-        const hue = math.evaluate(`${this.hue_expression}`.replace(/X/g, color_x).replace(/Y/g, color_y));
-        const saturation = Math.abs( ((100 +  math.evaluate(`${this.saturation_expression}`.replace(/X/g, color_x).replace(/Y/g, color_y))) % 200) - 100 );
-        const lightness = Math.abs( ((100 + math.evaluate(`${this.lightness_expression}`.replace(/X/g, color_x).replace(/Y/g, color_y))) % 200) - 100 );
+        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 );
+        const lightness = Math.abs( ((100 + Function( `return + ${this.lightness_expression .replace(/X/g, color_x) .replace(/Y/g, color_y)}` )()) % 200) - 100 );
 
         this.square_matrix[x][y] = new Square(
           this.ctx,
@@ -109,9 +107,9 @@ class Square_matrix {
         let color_x = x * this.pixel_ratio;
         let color_y = y * this.pixel_ratio;
 
-        const hue = math.evaluate(`${this.hue_expression}`.replace(/X/g, color_x).replace(/Y/g, color_y));
-        const saturation = Math.abs( ((100 +  math.evaluate(`${this.saturation_expression}`.replace(/X/g, color_x).replace(/Y/g, color_y))) % 200) - 100 );
-        const lightness = Math.abs( ((100 + math.evaluate(`${this.lightness_expression}`.replace(/X/g, color_x).replace(/Y/g, color_y))) % 200) - 100 );
+        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 );
+        const lightness = Math.abs( ((100 + Function( `return + ${this.lightness_expression .replace(/X/g, color_x) .replace(/Y/g, color_y)}` )()) % 200) - 100 );
 
         this.square_matrix[x][y] = new Square(
           this.ctx,

color_function/library/functions.js

@@ -1,18 +1,22 @@
 //Returns angle between two vectors, unit can be "deg" or radians
 function v2a(vector1, vector2, unit) {
-  vector1_length = Math.sqrt(vector1[0] ** 2 + vector1[1] ** 2);
-  vector2_length = Math.sqrt(vector2[0] ** 2 + vector2[1] ** 2);
-  vector_product = vector1[0] * vector2[0] + vector1[1] * vector2[1];
 
+  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
+  }
+  const vector_product = vector1[0] * vector2[0] + vector1[1] * vector2[1];
   //angle as degrees
   if (unit == "deg") {
-    var angle = (Math.acos(vector_product / (vector1_length * vector2_length)) * 180) / Math.PI;
+    const angle = (Math.acos(vector_product / (vector1_length * vector2_length)) * 180) / Math.PI;
     return angle;
   }
 
   //angle as radians
   else {
-    var angle = Math.acos(vector_product / (vector1_length * vector2_length));
+    const angle = Math.acos(vector_product / (vector1_length * vector2_length));
     return angle;
   }
 }

color_function/script.js

@@ -11,23 +11,23 @@ const get_pixel_ratio = document.querySelector("#pixel_ratio");
 const get_upscale_button = document.querySelector("#upscale");
 
 get_hue_expression.addEventListener("change", function () {
-  hue_expression = get_hue_expression.value;
+  // hue_expression = get_hue_expression.value;
   ctx.clearRect(0, 0, canvas.width, canvas.height)
-  matrix_squares.class_method_loop("hue", hue_expression);
+  matrix_squares.class_method_loop("hue", get_hue_expression.value);
   update_images(canvas)
 });
 
 get_saturation_expression.addEventListener("change", function () {
-  saturation_expression = get_saturation_expression.value;
+  // saturation_expression = get_saturation_expression.value;
   ctx.clearRect(0, 0, canvas.width, canvas.height)
-  matrix_squares.class_method_loop("saturation", saturation_expression);
+  matrix_squares.class_method_loop("saturation", get_saturation_expression.value);
   update_images(canvas)
 });
 
 get_lightness_expression.addEventListener("change", function () {
-  lightness_expression = get_lightness_expression.value;
+  // lightness_expression = get_lightness_expression.value;
   ctx.clearRect(0, 0, canvas.width, canvas.height)
-  matrix_squares.class_method_loop("lightness", lightness_expression);
+  matrix_squares.class_method_loop("lightness", get_lightness_expression.value);
   update_images(canvas)
 });
 
@@ -37,6 +37,7 @@ get_pixel_ratio.addEventListener("change", function () {
   size_lower = Math.floor(+get_size_lower.value / pixel_ratio);
   distance_left_x_zooming = size_lower
   distance_top_y_zooming = size_lower
+
   matrix_squares.create_squares(size_lower, size_lower, size_upper, size_upper, pixel_ratio)
   update_images(canvas)
 });
@@ -48,9 +49,7 @@ get_size_lower.addEventListener("change", function () {
   var distance_from_top_left = (absolute_width) * (old_size - size_lower)
   var image_size = ((absolute_width) * (size_upper - old_size + index_zero ))
   ctx.drawImage(resizing_img, distance_from_top_left, distance_from_top_left, image_size, image_size);
-
-
-
+
   matrix_squares.change_size(size_lower, size_upper, old_size, 'lower');
   update_images(canvas)
 });
@@ -83,24 +82,22 @@ const ctx = canvas.getContext("2d", { alpha: false });
 
 //----------------Creation of pixels--------------------------------
 
-const index_zero = 1
 let matrix_pixels = [];
 let size_lower = +get_size_lower.value;
 let size_upper = +get_size_upper.value;
-let size = size_upper - size_lower + index_zero;
-var pixel_ratio = parseFloat(get_pixel_ratio.value);
+var pixel_ratio= +(get_pixel_ratio.value);
+const index_zero = 1
 
-let hue_expression = get_hue_expression.value;
-let saturation_expression = get_saturation_expression.value;
-let lightness_expression = get_lightness_expression.value;
+// let hue_expression = get_hue_expression.value;
+// let saturation_expression = get_saturation_expression.value;
+// let lightness_expression = get_lightness_expression.value;
 
 //-------------------------------ZOOMING--------------------
 
 let initial_cursor_position = []
 let current_cursor_position = []
 let mouse_is_down = false
 
-
 // Event listener for all cursor on canvas events
 function handle_canvas_event_zoom(event) {
   switch (event.type) {
@@ -166,9 +163,10 @@ var distance_top_y_zooming = size_lower
 window.onload = winInit;
 function winInit() {
   // ctx.filter = "hue-rotate(200deg)" //INTERESTING!
-  matrix_squares = new Square_matrix(canvas, hue_expression, saturation_expression, lightness_expression)
+  matrix_squares = new Square_matrix(canvas, get_hue_expression.value, get_saturation_expression.value, get_lightness_expression.value)
   matrix_squares.create_squares(size_lower, size_lower, size_upper, size_upper, pixel_ratio)
   update_images(canvas)
+
 }
 
 //\\\\\\\\\\\\\\\\\\\\FUNCTIONS\\\\\\\\\\\\\\\\\\\\\\\
@@ -197,20 +195,19 @@ function update_images(canvas){
 //     }
 //     runspeed = get_runspeed.value;
 //     animId = setInterval(draw_pixels, 1000 / runspeed);
-//TODO: the draw_pixels function must be made again if i want make a changing variable that changes every second or whatever
 //   }
 // }
 //------------------END--------------------
 
 //!HUGE? TODO: use webworkers, ask chat gpt-3 for help, not viable? passing information between webworker and main script removes class
 
-//TODO: Research complex plotting or whatever, make an option to change to using complex numbers?
+//TODO: !Research complex plotting or whatever, make an option to change to using complex numbers?
 
-//TODO: Create a settings button where settings can be changed/toggled?
-//TODO:! Add a button for the option to redraw the black background, creates very interesting patterns when the size of the pixels are < 1
-//TODO: Make an option to turn on the sawtooth pattern for hue too? and create lower and upper limit, this.hue =  Math.abs(( (100 + Function("return " + hue_expression)()) % 200) - 100)
+//TODO: create a settings button where settings can be changed/toggled?
+//TODO:! add a button for the option to redraw the black background, creates very interesting patterns when the size of the pixels are < 1
+//TODO: make an option to turn on the sawtooth pattern for hue too? and create lower and upper limit, this.hue =  Math.abs(( (100 + Function("return " + hue_expression)()) % 200) - 100)
 //!TODO: Create a option to toggle between clicking a button to run script and running script when a variable is changed.
-//!TODO: Performance mode and fast mode, ise ctx.drawimage method for fast and redraw every pixel every time for fast mode.
+//!TODO: quality mode and fast mode, ise ctx.drawimage method for fast and redraw every pixel every time for fast mode.
 //TODO: save settings in localstorage
 
 //TODO: Create option to make a variable that changes every second f.eks. goes from 1 to 10 then 10 to 1, call it n and then n can be used in the color chooser
@@ -235,4 +232,4 @@ function update_images(canvas){
 //* WONTFIX Minor fix in the new_pixels function, it creates the corner piece twice
 //* make it possible to zoom in on inzoomed image.
 //* made zooming more general
-//* made functions into methods
+//* made functions into methods