return rgb/rgba instead of hex colors

ip413 · Dec 30, 2018 · b2b3e89 · b2b3e89
1 parent cc062c2
commit b2b3e89
Show file tree

Hide file tree

Showing 7 changed files with 1,129 additions and 1,002 deletions.
diff --git a/Readme.md b/Readme.md
@@ -16,7 +16,7 @@ npm install trianglify
 Include it in your HTML via CDNJS:
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.3.0/trianglify.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
 ```
 
 Or clone the repo:
@@ -29,7 +29,7 @@ git clone https://github.com/qrohlf/trianglify.git
 # Quickstart
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.3.0/trianglify.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
 <script>
 	var pattern = Trianglify({
 		width: window.innerWidth,

diff --git a/dist/trianglify.min.js b/dist/trianglify.min.js
diff --git a/examples/cutom-points-example.html → examples/custom-points-example.html b/examples/cutom-points-example.html → examples/custom-points-example.html
diff --git a/examples/transparency-example.html b/examples/transparency-example.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Trianglify transparency example</title>
+    <style>
+    html, body {
+      margin: 0 0;
+      padding: 0 0;
+      text-align: center;
+      font-size: 0;
+      height: 100%;
+      width: 100%;
+    }
+    #gradient-rotate {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+    #trianglify-overlay {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+    #color-stop-1 {
+      -webkit-animation: change-color-1 12s ease-in-out infinite alternate;
+      animation: change-color-1 12s ease-in-out infinite alternate
+    }
+
+    #color-stop-2 {
+      -webkit-animation: change-color-2 12s ease-in-out infinite alternate;
+      animation: change-color-2 12s ease-in-out infinite alternate
+    }
+
+    #color-stop-3 {
+      -webkit-animation: change-color-3 12s ease-in-out infinite alternate;
+      animation: change-color-3 12s ease-in-out infinite alternate
+    }
+    @keyframes change-color-1 {
+      0% {
+        stop-color: #22C8F6
+      }
+
+      25% {
+        stop-color: #ff0
+      }
+
+      50% {
+        stop-color: #00ffcb
+      }
+
+      75% {
+        stop-color: #70ff00
+      }
+    }
+    @keyframes change-color-2 {
+      0% {
+        stop-color: #20C498
+      }
+
+      25% {
+        stop-color: #ff00ad
+      }
+
+      350% {
+        stop-color: #d480ff
+      }
+
+      75% {
+        stop-color: #ff9200
+      }
+    }
+    @keyframes change-color-3 {
+      0% {
+        stop-color: #189932
+      }
+
+      25% {
+        stop-color: #c300cb
+      }
+
+      50% {
+        stop-color: #5600d4
+      }
+
+      75% {
+        stop-color: #ff46dc
+      }
+    }
+    </style>
+  </head>
+  <body>
+  <svg id="gradient-rotate" preserveAspectRatio="none" viewBox="0 0 500 500">
+    <defs>
+      <linearGradient x1="0%" y1="0%" y2="100%" id="a">
+        <stop id="color-stop-1" stop-color="#22C8F6" offset="0%"></stop>
+        <stop id="color-stop-2" stop-color="#20C498" offset="65%"></stop>
+        <stop id="color-stop-3" stop-color="#189932" offset="100%"></stop>
+      </linearGradient>
+    </defs>
+    <path fill="url(#a)" d="M0 0h500v500H0z"></path>
+  </svg>
+  <script src="../dist/trianglify.min.js"></script>
+  <script>
+  // set up the base pattern
+  var pattern = Trianglify({
+    height: window.innerHeight,
+    width: window.innerWidth,
+    x_colors: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 1)'],
+    stroke_width: 0,
+    cell_size: Math.ceil(window.innerWidth / 8)})
+  var svg = pattern.svg()
+  svg.id = 'trianglify-overlay'
+  document.body.appendChild(svg)
+  </script>
+  </body>
+</html>
diff --git a/lib/trianglify.js b/lib/trianglify.js
@@ -139,7 +139,7 @@ function Trianglify(opts) {
   for (var i=0; i < geom_indices.length; i += 3) {
     var vertices = [geom_indices[i], geom_indices[i+1], geom_indices[i+2]].map(lookup_point);
     var centroid = _centroid(vertices);
-    var color = gradient(norm_x(centroid.x), norm_y(centroid.y)).hex();
+    var color = gradient(norm_x(centroid.x), norm_y(centroid.y)).css();
     triangles.push([color, vertices]);
   }
   return Pattern(triangles, opts);