Added

Hacky fix to this issue gpujs/gpu.js#820 by renaming  all "GPU" instances in gpu-browser.min to "GPUX" by:
1) Adding a local version of gpu-browser.min.js and running replace all
2) Making a change to skeletonization.js line 23 (skeletonization.thinning_gpu = new GPUX();)

tegnemaskinenChromefix/drawingClass.js

@@ -0,0 +1,127 @@
+class drawing {
+  constructor(category, nodes, skins) {
+    this.category = category;
+    this.nodes = nodes;
+    this.skins = skins;
+    this.scaling = 1.0;
+    this.wiggleFactor = 0.5;
+    this.x = Math.random()*master_canvas.width-canvas.width;
+    this.y = Math.random()*master_canvas.height-canvas.height;
+
+    if (this.category === "plant") {
+      //this.x = getRandomArbitrary(0.27*master_canvas.width, master_canvas.width-canvas.width); //Sloppy
+      this.x = getRandomArbitrary(0, master_canvas.width*0.8-canvas.width); //reversed for new bg
+      this.y = getRandomArbitrary(0.20*master_canvas.height, 0.8*master_canvas.height-canvas.height);
+      this.wiggleFactor = 0.02;
+    } else if(this.category === "fish") {
+      this.scaling = 0.3;
+      this.wiggleFactor = 0.5;
+    } else if(this.category === "ship") {
+      this.scaling = 0.5;
+      this.wiggleFactor = 0.2;
+    }else if (this.category === "vehicle") {
+      this.wiggleFactor = 0.2;
+    } else if (this.category === "bird") {
+      this.wiggleFactor = 0.5;
+      this.scaling = 0.5;
+    }
+     else if (this.category === "architecture" || this.category === "container" || this.category === "food"  || this.category === "fruit"  || this.category === "furniture"  
+     || this.category === "garment" || this.category === "instrument"  || this.category === "technology"  || this.category === "tool" ) { //All the drawings we are not sure what are
+      this.x = (master_canvas.width - canvas.width) + Math.random()*canvas.width*this.scaling*0.7;
+      this.y = getRandomArbitrary(0.6*master_canvas.height, 0.75*master_canvas.height);
+      this.wiggleFactor = 0.2;
+      this.scaling = 0.3;
+    }    
+    this.noiseX = Math.random()*1000;
+    this.noiseY = Math.random()*1000;
+    }
+
+  animate() {
+    for (var i = 0; i < this.nodes.length; i++) {
+      if (this.nodes[i].parent) {
+        var r = Math.min(Math.max(parseFloat(atob(this.nodes[i].id)), 0.3), 0.7);
+        this.nodes[i].th = this.nodes[i].th0 + Math.sin((new Date()).getTime() * 0.003 / r + r * Math.PI * 2) * r * this.wiggleFactor;
+      } else {
+        this.nodes[i].th = this.nodes[i].th0
+      }
+    }
+    doodleMeta.forwardKinematicsNodes(this.nodes);
+    doodleMeta.calculateSkin(this.skins);
+  }
+
+  //let xTrans = generator.getVal(noiseX)*100;
+  //console.log(xTrans);
+  //noiseX+=0.01;
+  //let xTrans = Math.sin((new Date()).getTime()*0.003)*150;
+  //master_context.translate(xTrans,0);
+
+
+  show() {
+    master_context.save();
+    master_context.scale(this.scaling, this.scaling);
+    if (this.category === "bird") {
+      let xTrans = generator.getVal(this.noiseX)*(master_canvas.width)*(1/this.scaling)-WIDTH/3*(1/this.scaling);
+      let yTrans = generator.getVal(this.noiseY)*master_canvas.height * 0.25-WIDTH*0.25; //sloppy
+      this.noiseX+=0.003;
+      this.noiseY+=0.007;
+      master_context.translate(xTrans,yTrans);
+    } else if (this.category === "fish") {
+      //let xTrans = master_canvas.width*(1/this.scaling) - generator.getVal(this.noiseX)*master_canvas.width*0.22*(1/this.scaling); //sloppy
+      let xTrans = (master_canvas.width-WIDTH/3)*(1/this.scaling) - generator.getVal(this.noiseX)*master_canvas.width*0.21*(1/this.scaling); //sloppy
+      let yTrans = generator.getVal(this.noiseY)*master_canvas.height * 0.25*(1/this.scaling)+0.25*master_canvas.height*(1/this.scaling); //sloppy
+      this.noiseX+=0.001;
+      this.noiseY+=0.004;
+      master_context.translate(xTrans,yTrans);
+    } else if (this.category === "ship") {
+      let xTrans = (master_canvas.width-WIDTH/3)*(1/this.scaling) - generator.getVal(this.noiseX)*master_canvas.width*0.21*(1/this.scaling); //sloppy
+      let yTrans = generator.getVal(this.noiseY)*master_canvas.height * 0.25*(1/this.scaling)+0.15*master_canvas.height*(1/this.scaling); //sloppy
+      this.noiseX+=0.002;
+      this.noiseY+=0.004;
+      master_context.translate(xTrans,yTrans);
+    }else if (this.category === "humanoid" || this.category === "insect" || this.category === "quadruped") {
+      //let xTrans = master_canvas.width*(1/this.scaling) - generator.getVal(this.noiseX)*(master_canvas.width-WIDTH*2)+master_canvas.width*0.2; //sloppy
+      let xTrans = master_canvas.width*(1/this.scaling)*generator.getVal(this.noiseX)*0.6;
+      //if (xTrans > master_canvas.width)
+      let yTrans = generator.getVal(this.noiseY)*master_canvas.height * 0.5 + master_canvas.height*0.1;
+      this.noiseX+=0.002;
+      this.noiseY+=0.002;
+      master_context.translate(xTrans,yTrans);
+    } else if (this.category === "plant") {
+      //let xTrans = getRandomArbitrary(0.27*master_canvas.width, master_canvas.width-canvas.width);
+      //let yTrans = getRandomArbitrary(0.25*master_canvas.height, 0.8*master_canvas.height-canvas.height);
+
+      //this.noiseX+=0.01
+      //this.noiseY+=0.001
+      master_context.translate(this.x,this.y);
+    } else if (this.category === "vehicle") {
+      this.x+=generator.getVal(this.noiseX)*3 + 1;
+      this.noiseX+=0.01;
+      if (this.x > master_canvas.width) this.x = -WIDTH;
+      let yTrans = generator.getVal(this.noiseY+ this.y)*(master_canvas.height-WIDTH) * 0.2+0.87*(master_canvas.height-WIDTH);
+      //this.noiseY+=0.01
+      //this.noiseY+=0.01
+      master_context.translate(this.x,yTrans);
+    } 
+    // THIS IS NOT WORKING PROPERLY...
+    else if (this.category === "architecture" || this.category === "container" || this.category === "food"  || this.category === "fruit"  || this.category === "furniture"  
+    || this.category === "garment" || this.category === "instrument"  || this.category === "technology"  || this.category === "tool" ) {
+      //this.x = this.x * 1/this.scaling;
+      //this.y = this.y * 1/this.scaling;
+      master_context.translate(this.x* 1/this.scaling,this.y* 1/this.scaling);
+    }
+
+    for (var i = 0; i < this.skins.length; i++) {
+      if (!this.skins[i].connect) {
+        if (i != 0) {
+          master_context.stroke();
+        }
+        master_context.beginPath();
+        master_context.moveTo(this.skins[i].x, this.skins[i].y);
+      } else {
+        master_context.lineTo(this.skins[i].x, this.skins[i].y);
+      }
+    }
+    master_context.stroke();
+    master_context.restore();
+  }
+} 

tegnemaskinenChromefix/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title></title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- import the webpage's stylesheet -->
+  <link rel="stylesheet" href="style.css">
+
+  <!-- <script src="https://docs.opencv.org/master/opencv.js"></script> -->
+  <script src="opencv.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gpu.js/1.10.4/gpu.min.js"></script> -->
+  <!-- <script src="gpu.min.js"></script> -->
+  <!-- <script src="https://unpkg.com/gpu.js@latest/dist/gpu-browser.min.js"></script> -->
+  <script src="gpu-browser.min.js"></script>
+
+
+  <!-- <script src="https://cdn.jsdelivr.net/gh/LingDong-/Okb.js@337f4b52f74729ce29f4b720dabca7b2d92d4254/Okb.js"></script> -->
+  <script src="Okb.js"></script>
+
+  <!-- <script src="https://cdn.jsdelivr.net/npm/quicksettings@latest/quicksettings.min.js"></script> -->
+  <script src="quicksettings.min.js"></script>
+
+  <!-- <script src="https://skeletonization-js.glitch.me/skeletonization.js"></script> -->
+  <script src="skeletonization.js"></script>
+  <script src="doodle-rig.js"></script>
+  <script src="noise.js"></script>
+
+  <!-- guess stuff    -->
+  <!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script> -->
+  <script src="tf.min.js"></script>
+  <script src="nn17.js"></script>
+
+  <!-- import the webpage's javascript file -->
+  <script src="script.js" defer></script>
+  <script src="drawingClass.js" defer></script>
+</head>
+
+<body>
+</body>
+
+</html>

tegnemaskinenChromefix/models/tfjs-model-08203352991272772.json

@@ -0,0 +1 @@
+{"modelTopology":{"class_name":"Sequential","config":[{"class_name":"Conv2D","config":{"filters":32,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[5,5],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D1","trainable":true,"batch_input_shape":[null,32,32,1],"dtype":"float32"}},{"class_name":"MaxPooling2D","config":{"pool_size":[2,2],"padding":"valid","strides":[2,2],"data_format":"channels_last","name":"max_pooling2d_MaxPooling2D1","trainable":true}},{"class_name":"Conv2D","config":{"filters":64,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[5,5],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D2","trainable":true}},{"class_name":"MaxPooling2D","config":{"pool_size":[2,2],"padding":"valid","strides":[2,2],"data_format":"channels_last","name":"max_pooling2d_MaxPooling2D2","trainable":true}},{"class_name":"Conv2D","config":{"filters":64,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[3,3],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D3","trainable":true}},{"class_name":"Flatten","config":{"name":"flatten_Flatten1","trainable":true}},{"class_name":"Dense","config":{"units":256,"activation":"relu","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense1","trainable":true}},{"class_name":"Dropout","config":{"rate":0.5,"noise_shape":null,"seed":null,"name":"dropout_Dropout1","trainable":true}},{"class_name":"Dense","config":{"units":2,"activation":"softmax","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense2","trainable":true}}],"keras_version":"tfjs-layers 1.0.0","backend":"tensor_flow.js"},"format":"layers-model","generatedBy":"TensorFlow.js tfjs-layers v1.0.0","convertedBy":null,"weightsManifest":[{"paths":["./tfjs-model-08203352991272772.weights.bin"],"weights":[{"name":"conv2d_Conv2D1/kernel","shape":[5,5,1,32],"dtype":"float32"},{"name":"conv2d_Conv2D1/bias","shape":[32],"dtype":"float32"},{"name":"conv2d_Conv2D2/kernel","shape":[5,5,32,64],"dtype":"float32"},{"name":"conv2d_Conv2D2/bias","shape":[64],"dtype":"float32"},{"name":"conv2d_Conv2D3/kernel","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv2d_Conv2D3/bias","shape":[64],"dtype":"float32"},{"name":"dense_Dense1/kernel","shape":[576,256],"dtype":"float32"},{"name":"dense_Dense1/bias","shape":[256],"dtype":"float32"},{"name":"dense_Dense2/kernel","shape":[256,2],"dtype":"float32"},{"name":"dense_Dense2/bias","shape":[2],"dtype":"float32"}]}]}

tegnemaskinenChromefix/models/tfjs-model-4274720942338297.json

@@ -0,0 +1 @@
+{"modelTopology":{"class_name":"Sequential","config":[{"class_name":"Conv2D","config":{"filters":32,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[5,5],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D1","trainable":true,"batch_input_shape":[null,32,32,1],"dtype":"float32"}},{"class_name":"MaxPooling2D","config":{"pool_size":[2,2],"padding":"valid","strides":[2,2],"data_format":"channels_last","name":"max_pooling2d_MaxPooling2D1","trainable":true}},{"class_name":"Conv2D","config":{"filters":64,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[5,5],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D2","trainable":true}},{"class_name":"MaxPooling2D","config":{"pool_size":[2,2],"padding":"valid","strides":[2,2],"data_format":"channels_last","name":"max_pooling2d_MaxPooling2D2","trainable":true}},{"class_name":"Conv2D","config":{"filters":64,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[3,3],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D3","trainable":true}},{"class_name":"Flatten","config":{"name":"flatten_Flatten1","trainable":true}},{"class_name":"Dense","config":{"units":512,"activation":"relu","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense1","trainable":true}},{"class_name":"Dense","config":{"units":24,"activation":"softmax","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense2","trainable":true}}],"keras_version":"tfjs-layers 1.0.0","backend":"tensor_flow.js"},"format":"layers-model","generatedBy":"TensorFlow.js tfjs-layers v1.0.0","convertedBy":null,"weightsManifest":[{"paths":["./tfjs-model-4274720942338297.weights.bin"],"weights":[{"name":"conv2d_Conv2D1/kernel","shape":[5,5,1,32],"dtype":"float32"},{"name":"conv2d_Conv2D1/bias","shape":[32],"dtype":"float32"},{"name":"conv2d_Conv2D2/kernel","shape":[5,5,32,64],"dtype":"float32"},{"name":"conv2d_Conv2D2/bias","shape":[64],"dtype":"float32"},{"name":"conv2d_Conv2D3/kernel","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv2d_Conv2D3/bias","shape":[64],"dtype":"float32"},{"name":"dense_Dense1/kernel","shape":[576,512],"dtype":"float32"},{"name":"dense_Dense1/bias","shape":[512],"dtype":"float32"},{"name":"dense_Dense2/kernel","shape":[512,24],"dtype":"float32"},{"name":"dense_Dense2/bias","shape":[24],"dtype":"float32"}]}]}

tegnemaskinenChromefix/models/tfjs-model-5300477367364287.json

@@ -0,0 +1 @@
+{"modelTopology":{"class_name":"Sequential","config":[{"class_name":"Conv2D","config":{"filters":32,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[5,5],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D1","trainable":true,"batch_input_shape":[null,32,32,1],"dtype":"float32"}},{"class_name":"MaxPooling2D","config":{"pool_size":[2,2],"padding":"valid","strides":[2,2],"data_format":"channels_last","name":"max_pooling2d_MaxPooling2D1","trainable":true}},{"class_name":"Conv2D","config":{"filters":64,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[5,5],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D2","trainable":true}},{"class_name":"MaxPooling2D","config":{"pool_size":[2,2],"padding":"valid","strides":[2,2],"data_format":"channels_last","name":"max_pooling2d_MaxPooling2D2","trainable":true}},{"class_name":"Conv2D","config":{"filters":64,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"kernel_regularizer":null,"kernel_constraint":null,"kernel_size":[3,3],"strides":[1,1],"padding":"valid","data_format":"channels_last","dilation_rate":[1,1],"activation":"relu","use_bias":true,"bias_initializer":{"class_name":"Zeros","config":{}},"bias_regularizer":null,"activity_regularizer":null,"bias_constraint":null,"name":"conv2d_Conv2D3","trainable":true}},{"class_name":"Flatten","config":{"name":"flatten_Flatten1","trainable":true}},{"class_name":"Dense","config":{"units":512,"activation":"relu","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense1","trainable":true}},{"class_name":"Dropout","config":{"rate":0.5,"noise_shape":null,"seed":null,"name":"dropout_Dropout1","trainable":true}},{"class_name":"Dense","config":{"units":2,"activation":"softmax","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense2","trainable":true}}],"keras_version":"tfjs-layers 1.0.0","backend":"tensor_flow.js"},"format":"layers-model","generatedBy":"TensorFlow.js tfjs-layers v1.0.0","convertedBy":null,"weightsManifest":[{"paths":["./tfjs-model-5300477367364287.weights.bin"],"weights":[{"name":"conv2d_Conv2D1/kernel","shape":[5,5,1,32],"dtype":"float32"},{"name":"conv2d_Conv2D1/bias","shape":[32],"dtype":"float32"},{"name":"conv2d_Conv2D2/kernel","shape":[5,5,32,64],"dtype":"float32"},{"name":"conv2d_Conv2D2/bias","shape":[64],"dtype":"float32"},{"name":"conv2d_Conv2D3/kernel","shape":[3,3,64,64],"dtype":"float32"},{"name":"conv2d_Conv2D3/bias","shape":[64],"dtype":"float32"},{"name":"dense_Dense1/kernel","shape":[576,512],"dtype":"float32"},{"name":"dense_Dense1/bias","shape":[512],"dtype":"float32"},{"name":"dense_Dense2/kernel","shape":[512,2],"dtype":"float32"},{"name":"dense_Dense2/bias","shape":[2],"dtype":"float32"}]}]}