Trying out Dat.gui for a ui?

rschenk · Dec 5, 2018 · f83defc · f83defc
1 parent 3fa4cbf
commit f83defc
Show file tree

Hide file tree

Showing 27 changed files with 137 additions and 22 deletions.
diff --git a/ajsecord_msc_thesis.pdf b/ajsecord_msc_thesis.pdf
diff --git a/dist/dolphin.png b/dist/dolphin.png
diff --git a/dist/donut.png b/dist/donut.png
diff --git a/dist/headshot.jpeg b/dist/headshot.jpeg
diff --git a/dist/index.html b/dist/index.html
@@ -3,6 +3,8 @@
     <title>Stipulator</title>
   </head>
   <body>
+    <input type="file" id="file" name="file" accept="image/*" style="display: none" />
+
     <script src="bundle.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
   </body>

diff --git a/dist/memphis2.png b/dist/memphis2.png
diff --git a/dist/memphis3.png b/dist/memphis3.png
diff --git a/dist/memphis4.png b/dist/memphis4.png
diff --git a/dist/memphis4_sm.png b/dist/memphis4_sm.png
diff --git a/dist/memphis5.png b/dist/memphis5.png
diff --git a/dist/sphere.png b/dist/sphere.png
diff --git a/example_images/dolphin.png b/example_images/dolphin.png
diff --git a/example_images/donut_border.png b/example_images/donut_border.png
diff --git a/dist/grace.jpg → example_images/grace.jpg b/dist/grace.jpg → example_images/grace.jpg
diff --git a/example_images/jazz.jpg b/example_images/jazz.jpg
diff --git a/dist/memphis6.png → example_images/memphis.png b/dist/memphis6.png → example_images/memphis.png
diff --git a/dist/pineapple.jpg → example_images/pineapple.jpg b/dist/pineapple.jpg → example_images/pineapple.jpg
diff --git a/dist/plant4h.png → example_images/plant4h.png b/dist/plant4h.png → example_images/plant4h.png
diff --git a/example_images/sphere.png b/example_images/sphere.png
diff --git a/example_images/tea.jpg b/example_images/tea.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,20 +4,21 @@
   "description": "Stipples a greyscale image",
   "main": "index.js",
   "scripts": {
-    "build": "webpack",
-    "watch": "webpack --watch",
-    "start": "webpack-dev-server --open"
+    "build": "webpack --config webpack.prod.js",
+    "start": "webpack-dev-server --open --config webpack.dev.js"
   },
   "author": "Ryan Schenk",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^4.14.0",
     "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.4",
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
     "array-bounds": "^1.0.1",
+    "dat.gui": "^0.7.2",
     "getboundingbox": "^1.0.0",
     "paper": "^0.11.5",
     "segseg": "^0.2.2",

diff --git a/src/image_processor.worker.js b/src/image_processor.worker.js
@@ -20,6 +20,9 @@ onmessage = (e) => {
     case 'process':
       process(e.data.image_data, e.data.num_points)
       break
+    case 'reprocess':
+      reprocess(e.data.num_points)
+      break
     default:
       console.log(`[image processor] unknown command: ${e.data.cmd}, data: ${e.data}`)
   }
@@ -41,6 +44,18 @@ function process(image_data, num_points) {
   timeout = setTimeout(relax_points_and_send, 1000 / fps)
 }
 
+function reprocess(num_points) {
+  iteration_count = 0
+  points = dither(grayscale_image, num_points, w, h)
+  postMessage({
+    cmd: 'points',
+    points: points
+  })
+
+  if(timeout) { clearTimeout(timeout) }
+  timeout = setTimeout(relax_points_and_send, 1000 / fps)
+}
+
 function relax_points_and_send() {
   let time_start = Date.now()
   let { new_points, average_distance } = weighted_voronoi.relax(points)

diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,28 @@
-const paper = require('paper/dist/paper-core')
 const strftime = require('strftime')
+import * as dat from 'dat.gui'
 import  { render_tsp } from './tsp.js'
 
 import ImageProcessor from './image_processor.worker.js'
 
+console.log(process.env.NODE_ENV)
+if (process.env.NODE_ENV !== 'production') {
+  console.log('Looks like we are in development mode!');
+}
+
+const gui = new dat.GUI()
+let StipulatorParams = function() {
+  this.num_points = 1450
+  this.point_radius = 1
+  this.open_file = function() {
+    document.getElementById('file').click()
+  }
+  this.save_tsp = save_as_tsp
+}
+let params = new StipulatorParams()
+
 let render_times = []
 
-let url = "/donut.png",
-    num_points = 2000,
+let url = "/dolphin.png",
     dpr = window.devicePixelRatio || 1,
     canvas,
     context,
@@ -22,19 +37,24 @@ image_processor.onmessage = handle_image_processor_message
 let image = new Image();
 image.onload = raster_loaded
 image.src = url
+image.title = url
 
 function raster_loaded() {
   console.log("[main] raster loaded, sending to processor")
 
   canvas.width = image.width
   canvas.height = image.height
 
+  context.fillStyle = "#FFFFFF"
+  context.rect(0, 0, canvas.width, canvas.height)
+  context.fill()
+
   context.drawImage(image, 0, 0);
   let image_data = context.getImageData(0, 0, image.width, image.height)
   image_processor.postMessage({
     cmd: 'process',
     image_data: image_data,
-    num_points: num_points
+    num_points: params.num_points
   })
 
   // Set up retina
@@ -45,16 +65,20 @@ function raster_loaded() {
   context.scale(dpr, dpr);
 }
 
+function reprocess() {
+  image_processor.postMessage({
+    cmd: 'reprocess',
+    num_points: params.num_points
+  })
+}
+
 function handle_image_processor_message(e) {
   if (e.data.cmd == "points") {
     let tstart = new Date(), tend
     console.log("[main] Received points from processor")
 
-    context.clearRect(0, 0, canvas.width, canvas.height)
-    context.fillStyle = "#000000"
-
     points = e.data.points
-    points.map(draw_point)
+    draw_points()
 
     tend = new Date()
 
@@ -63,15 +87,21 @@ function handle_image_processor_message(e) {
     console.log("[main] Done")
     let sum = render_times.reduce(function(a, b) { return a + b; });
     let avg = sum / render_times.length;
-    alert(`[main] Average render time: ${avg}`)
+    console.log(`[main] Average render time: ${avg}`)
   } else {
     console.log("[main] received unknown message from processor")
     console.log(e)
   }
 }
 
+function draw_points() {
+    context.clearRect(0, 0, canvas.width, canvas.height)
+    context.fillStyle = "#000000"
+    points.map(draw_point)
+}
+
 function draw_point(point) {
-  let radius = 2
+  let radius = params.point_radius
   let [x, y] = point
   context.beginPath()
   context.arc(x, y, radius, 0, Math.PI * 2, true)
@@ -108,7 +138,7 @@ function save_as_tsp() {
   let w = image.width,
       h = image.height,
       time = strftime('%F-%H-%M'),
-      image_basename = image.src.split(/[\\/]/).pop().split(".").shift(),
+      image_basename = image.title.split(/[\\/]/).pop().split(".").shift(),
       name = `${image_basename}_stpl_${time}`,
       filename = `${name}.tsp`,
       body = render_tsp(points, name, w, h)
@@ -124,3 +154,44 @@ function save_file(filename, data) {
   link.href = url
   link.click()
 }
+
+
+
+
+
+function handleFileSelect(evt) {
+  var files = evt.target.files; // FileList object
+  console.log(files)
+  if (files) {
+    read_image(files[0])
+  }
+}
+
+function read_image(file) {
+  // Make sure `file.name` matches our extensions criteria
+  if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+    var reader = new FileReader();
+
+    reader.addEventListener("load", function () {
+
+      image_processor.terminate()
+      image_processor = new ImageProcessor()
+      image_processor.onmessage = handle_image_processor_message
+
+      image = new Image();
+      image.onload = raster_loaded
+      image.src = this.result
+      image.title = file.name
+
+    }, false);
+
+    reader.readAsDataURL(file);
+  }
+
+}
+document.getElementById('file').addEventListener('change', handleFileSelect, false);
+
+gui.add(params, "open_file")
+gui.add(params, "num_points", 100, 10000).onChange(reprocess)
+gui.add(params, "point_radius", 0.5, 5).onChange(draw_points)
+gui.add(params, "save_tsp")
diff --git a/webpack.config.js → webpack.common.js b/webpack.config.js → webpack.common.js
@@ -1,12 +1,7 @@
 const path = require('path');
 
 module.exports = {
-  mode: 'development',
   entry: './src/index.js',
-  devtool: 'inline-source-map',
-  devServer: {
-  	contentBase: './dist',
-  },
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,10 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+  	contentBase: './dist',
+  }
+});
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map'
+});