svgdotjs · Fuzzyma · Dec 1, 2018 · Dec 1, 2018 · Dec 1, 2018
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "lint": "eslint ./src",
     "rollup": "rollup -c .config/rollup.config.js",
     "server": "npx http-server ./ -d",
+    "demo": "run () { cd playgrounds; ../node_modules/.bin/webpack-dev-server --env=$1; }; run",
     "test": "npx karma start .config/karma.conf.js",
     "test:ci": "karma start .config/karma.conf.saucelabs.js",
     "test:svgdom": "node -r esm ./spec/runSVGDomTest.js || true",
@@ -101,7 +102,12 @@
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-terser": "^3.0.0",
     "rollup-plugin-uglify": "^6.0.0",
-    "svgdom": "github:svgdotjs/svgdom"
+    "svgdom": "latest",
+    "rollup-plugin-uglify-es": "0.0.1",
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10",
+    "yargs": "^12.0.5"
   },
   "browserslist": [
     "last 1 version",

diff --git a/playgrounds/colors/index.html b/playgrounds/colors/index.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <title>SVG Playground</title>
+    <link type="text/css" rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+
+    <h1>Color Playground</h1>
+
+    <p>
+      Lets test the different types of random colors we can make
+    </p>
+
+    <svg viewBox="0 0 1500 1500" id="canvas"></svg>
+
+  </body>
+
+  <script src="../../dist/svg.js" charset="utf-8"></script>
+  <script src="bundle.js" charset="utf-8"></script>
+
+</html>
diff --git a/playgrounds/colors/main.js b/playgrounds/colors/main.js
@@ -0,0 +1,29 @@
+
+
+let canvas = SVG('#canvas').group()
+  .translate( -150, 230 )
+
+// Make a bunch of rectangles
+function rectangles ( method='Vibrant') {
+
+  // Make a group
+  let group = canvas.group()
+  group.text(method).attr('font-size', 50).move( -230, 20 )
+
+  // Add the squares
+  for ( let i = 0; i < 20; i++ ) {
+    let color = SVG.Color.random( method.toLowerCase() ).hex()
+    let rect = group.rect(100, 100)
+      .x( 20 + 100 * i )
+      .fill( color )
+  }
+  return group
+}
+
+rectangles( 'Vibrant' ).translate( 0, 100 )
+rectangles( 'Sine' ).translate( 0, 220 )
+rectangles( 'Pastel' ).translate( 0, 340 )
+rectangles( 'Dark' ).translate( 0, 460 )
+rectangles( 'RGB' ).translate( 0, 580 )
+rectangles( 'LAB' ).translate( 0, 700 )
+rectangles( 'Grey' ).translate( 0, 820 )
diff --git a/playgrounds/playground.css → playgrounds/colors/style.css b/playgrounds/playground.css → playgrounds/colors/style.css
diff --git a/playgrounds/matrix/matrix.html → playgrounds/matrix/index.html b/playgrounds/matrix/matrix.html → playgrounds/matrix/index.html
diff --git a/playgrounds/matrix/style.css b/playgrounds/matrix/style.css
@@ -0,0 +1,70 @@
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background-color : #fefefe;
+}
+
+body {
+  margin: 0;
+  width: 100vw;
+  height: 99vh;
+  grid-gap: 30px;
+  display: inline-grid;
+  align-items: center;
+  grid-template-columns: 10vw 40vw auto 10vw;
+  grid-template-rows: 0 10vw auto 0;
+}
+
+h1 {
+  text-align: right;
+  border-right: solid 3px #f06;
+  padding-right: 12px;
+  color: #f06;
+  font-size: 52px;
+  font-family: Helvetica;
+  grid-row: 2;
+  grid-column: 2;
+  line-height: 1.8em;
+}
+
+p {
+  padding-right: 50px;
+  color: #444;
+  font-size: 18px;
+  font-family: Helvetica;
+  grid-row: 2;
+  grid-column: 3;
+}
+
+svg {
+  height: 100%;
+  width: 100%;
+  grid-row: 3;
+  grid-column: 2/4;
+  background-color: #f5f6f7;
+  border-radius: 20px;
+  border: #f065 1px solid;
+}
+
+.pink {
+  fill: #FF0066;
+}
+
+.green {
+  fill: #00ff99;
+}
+
+.dark-pink {
+  fill: #660029;
+}
+
+.light-pink {
+  fill: #FF99C2;
+}
+
+.off-white {
+   fill: #FFCCE0;
+}
diff --git a/playgrounds/transforms/transforms.html → playgrounds/transforms/index.html b/playgrounds/transforms/transforms.html → playgrounds/transforms/index.html
diff --git a/playgrounds/transforms/style.css b/playgrounds/transforms/style.css
@@ -0,0 +1,70 @@
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background-color : #fefefe;
+}
+
+body {
+  margin: 0;
+  width: 100vw;
+  height: 99vh;
+  grid-gap: 30px;
+  display: inline-grid;
+  align-items: center;
+  grid-template-columns: 10vw 40vw auto 10vw;
+  grid-template-rows: 0 10vw auto 0;
+}
+
+h1 {
+  text-align: right;
+  border-right: solid 3px #f06;
+  padding-right: 12px;
+  color: #f06;
+  font-size: 52px;
+  font-family: Helvetica;
+  grid-row: 2;
+  grid-column: 2;
+  line-height: 1.8em;
+}
+
+p {
+  padding-right: 50px;
+  color: #444;
+  font-size: 18px;
+  font-family: Helvetica;
+  grid-row: 2;
+  grid-column: 3;
+}
+
+svg {
+  height: 100%;
+  width: 100%;
+  grid-row: 3;
+  grid-column: 2/4;
+  background-color: #f5f6f7;
+  border-radius: 20px;
+  border: #f065 1px solid;
+}
+
+.pink {
+  fill: #FF0066;
+}
+
+.green {
+  fill: #00ff99;
+}
+
+.dark-pink {
+  fill: #660029;
+}
+
+.light-pink {
+  fill: #FF99C2;
+}
+
+.off-white {
+   fill: #FFCCE0;
+}
diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js
@@ -13,7 +13,6 @@ let a = canvas.rect(200, 400).move(200, 400)
   .addClass('pink')
   .transform({ px: 100, py: 500, origin: 'top-left' })
 
-debugger
   a.animate()
   .rotate({ rotate: 500, origin: 'top-right' })
 

diff --git a/playgrounds/webpack.config.js b/playgrounds/webpack.config.js
@@ -0,0 +1,33 @@
+var path = require('path')
+module.exports = function (env) {
+
+  let currentTest = path.resolve(__dirname, env)
+  return {
+
+    mode: 'development',
+    devtool: 'eval-source-map',
+    devServer: {
+      contentBase: [ currentTest, __dirname ],
+    },
+
+    devServer: {
+      contentBase: [currentTest, '..'],
+    },
+
+    entry: {
+      app: path.resolve(currentTest, "main.js"),
+    },
+
+    output: {
+      path: currentTest,
+      filename: 'bundle.js',
+    },
+
+    resolve: {
+      modules: [
+        path.resolve(__dirname, "node_modules"),
+        "node_modules"
+      ]
+    }
+  }
+}
diff --git a/src/types/Color.js b/src/types/Color.js
@@ -13,7 +13,8 @@ function sixDigitHex (hex) {
 
 function componentHex (component) {
   const integer = Math.round(component)
-  const hex = integer.toString(16)
+  const bounded = Math.max(0, Math.min(255, integer))
+  const hex = bounded.toString(16)
   return hex.length === 1 ? '0' + hex : hex
 }
 
@@ -349,14 +350,68 @@ export default class Color {
   Generating random colors
   */
 
-  static random (mode = 'vibrant') {
-    'sine'
-    'pastel'
-    'vibrant'
-    'dark'
-    'rgb'
-    'lab'
-    'grey'
+  static random (mode = 'vibrant', t, u) {
+
+    // Get the math modules
+    const { random, round, sin, PI: pi } = Math
+
+    // Run the correct generator
+    if (mode === 'vibrant') {
+
+      const l = (81 - 57) * random() + 57
+      const c = (83 - 45) * random() + 45
+      const h = 360 * random()
+      const color = new Color(l, c, h, 'lch')
+      return color
+
+    } else if (mode === 'sine') {
+
+      t = t == null ? random() : t
+      const r = round(80 * sin(2 * pi * t / 0.5 + 0.01) + 150)
+      const g = round(50 * sin(2 * pi * t / 0.5 + 4.6) + 200)
+      const b = round(100 * sin(2 * pi * t / 0.5 + 2.3) + 150)
+      const color = new Color(r, g, b)
+      return color
+
+    } else if (mode === 'pastel') {
+
+      const l = (94 - 86) * random() + 86
+      const c = (26 - 9) * random() + 9
+      const h = 360 * random()
+      const color = new Color(l, c, h, 'lch')
+      return color
+
+    } else if (mode === 'dark') {
+
+      const l = 10 + 10 * random()
+      const c = (125 - 75) * random() + 86
+      const h = 360 * random()
+      const color = new Color(l, c, h, 'lch')
+      return color
+
+    } else if (mode === 'rgb') {
+
+      const r = 255 * random()
+      const g = 255 * random()
+      const b = 255 * random()
+      const color = new Color(r, g, b)
+      return color
+
+    } else if (mode === 'lab') {
+
+      const l = 100 * random()
+      const a = 256 * random() - 128
+      const b = 256 * random() - 128
+      const color = new Color(l, a, b, 'lab')
+      return color
+
+    } else if (mode === 'grey') {
+
+      const grey = 255 * random()
+      const color = new Color(grey, grey, grey)
+      return color
+
+    }
   }
 
   /*