Merge remote-tracking branch 'origin/develop'

schalkt · Jan 15, 2016 · ff13455 · ff13455
2 parents d088cea + 1c7896b
commit ff13455
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # tgen.js
 
-Javascript seamless texture generator v0.4.3
+Javascript seamless texture generator v0.4.4
 
 ## Sample textures
 
@@ -227,8 +227,8 @@ Try the online generator [here](http://seamless-texture.com/generator/)
 * more shapes
 * copy from outer canvas
 * sprites
+* electricity
 * etc.
-* random spheres, squares, lines by seed
 
 # License
 MIT

diff --git a/index.html b/index.html
@@ -581,21 +581,21 @@
 				"rgba": "random"
 			}],
 			[0, "spheres", {
-				"blend": "linearlight",
+				"blend": "random",
 				"origin": "random",
 				"dynamic": true,
 				"count": 21,
 				"size": [10, 60]
 			}],
 			[0, "spheres", {
-				"blend": "darken",
+				"blend": "random",
 				"origin": "random",
 				"dynamic": true,
 				"count": 21,
 				"size": [10, 60]
 			}],
 			[0, "spheres", {
-				"blend": "lineardodge",
+				"blend": "random",
 				"origin": "random",
 				"dynamic": true,
 				"count": 44,
@@ -811,9 +811,9 @@
 				"count": [2, 3],
 				"size": [20, 25]
 			}],
-			[0, "spheres",{"blend":"softlight","dynamic": true}],
-			[0, "circles",{"blend":"softlight","opacity": 128}],
-			[0, "noise",{"blend":"softlight","opacity": 32}]
+			[0, "spheres", {"blend": "softlight", "dynamic": true}],
+			[0, "circles", {"blend": "softlight", "opacity": 128}],
+			[0, "noise", {"blend": "softlight", "opacity": 32}]
 		]
 	}
 </script>
@@ -942,14 +942,14 @@
 			[0, "waves", {"blend": "", "rgba": [128, 128, 128, 0.5]}],
 			[0, "lines2", {"blend": ["opacity", "screen"], "count": [4, 44], "size": [0.1, 7]}],
 			[0, "lines2", {"blend": "random", "type": "horizontal", "count": [4, 44], "size": [0.1, 7]}],
-			[0, "squares", {"blend": ["opacity", "darken", "softligt"]}],
+			[0, "squares", {"blend": ["opacity", "darken", "softlight", ""]}],
 			[0, "squares", {
-				"blend": ["opacity", "darken", "softligt"],
+				"blend": ["opacity", "darken", "softlight", ""],
 				"count": [4, 44],
 				"size": [7, 21]
 			}],
 			[0, "squares", {
-				"blend": ["opacity", "darken", "softligt"],
+				"blend": ["opacity", "darken", "softlight", ""],
 				"count": [21, 44],
 				"size": [4, 7]
 			}],
@@ -963,7 +963,10 @@
 				"count": [21, 44],
 				"size": [0.1, 1]
 			}],
-			[0, "lines2", {"blend": ["opacity"], "rgba": [0, 0, 0, [0.1, 0.5]], "count": [4, 21], "size": [0.2, 0, 5]}]
+			[0, "lines2", {"blend": ["opacity"], "rgba": [0, 0, 0, [0.1, 0.5]], "count": [4, 21], "size": [0.2, 0, 5]}],
+			[0, "sharpen", {
+				"type": 1
+			}]
 		]
 	}
 </script>
@@ -976,14 +979,14 @@
 			[0, "waves", {"blend": "", "rgba": [128, 128, 128, 0.5]}],
 			[0, "lines2", {"blend": ["opacity", "screen"], "count": [4, 44], "size": [0.1, 7]}],
 			[0, "lines2", {"blend": "random", "type": "horizontal", "count": [4, 44], "size": [0.1, 7]}],
-			[0, "squares", {"blend": ["opacity", "darken", "softligt"]}],
+			[0, "squares", {"blend": ["opacity", "darken", "softlight", ""]}],
 			[0, "squares", {
-				"blend": ["opacity", "darken", "softligt"],
+				"blend": ["opacity", "darken", "softlight", ""],
 				"count": [4, 44],
 				"size": [7, 21]
 			}],
 			[0, "squares", {
-				"blend": ["opacity", "darken", "softligt"],
+				"blend": ["opacity", "darken", "softlight", ""],
 				"count": [21, 44],
 				"size": [4, 7]
 			}],
@@ -996,7 +999,10 @@
 				"count": [21, 44],
 				"size": [0.1, 1]
 			}],
-			[0, "lines2", {"blend": ["opacity"], "rgba": [0, 0, 0, [0.1, 0.5]], "count": [4, 21], "size": [0.2, 0, 5]}]
+			[0, "lines2", {"blend": ["opacity"], "rgba": [0, 0, 0, [0.1, 0.5]], "count": [4, 21], "size": [0.2, 0, 5]}],
+			[0, "sharpen", {
+				"type": 1
+			}]
 		]
 	}
 </script>
@@ -1008,9 +1014,10 @@
 		"height": 256,
 		"items": [
 			[0, "checkerboard", {"size": 32, "rgba": "randomalpha", "blend": ""}],
-			[0, "checkerboard", {"size": 16, "rgba": "randomalpha", "blend": "random"}],
-			[0, "checkerboard", {"size": 8, "rgba": "randomalpha", "blend": "random"}],
-			[0, "checkerboard", {"size": 4, "rgba": "randomalpha", "blend": "random"}],
+			[0, "checkerboard", {"size": 16, "rgba": "randomalpha", "blend": "opacity"}],
+			[0, "checkerboard", {"size": 8, "rgba": "randomalpha", "blend": "opacity"}],
+			[0, "checkerboard", {"size": 4, "rgba": "randomalpha", "blend": "opacity"}],
+			[0, "checkerboard", {"size": 2, "rgba": "randomalpha", "blend": "opacity"}],
 			[0, "sharpen", {"type": 2}],
 			[0, "spheres", {"blend": "random", "dynamic": true, "opacity": 255}]
 		]
@@ -1033,6 +1040,20 @@
 	}
 </script>
 
+<script type="text/javascript" id="checkerboards-multiply" class="preset" title="checkerboards-multiply">
+	var params = {
+		"width": 256,
+		"height": 256,
+		"items": [
+			[0, "checkerboard", {"size": [[16, 21], [16, 21]], "rgba": "randomalpha", "blend": ""}],
+			[0, "checkerboard", {"size": [[5, 16], [5, 16]], "rgba": "randomalpha", "blend": "multiply"}],
+			[0, "checkerboard", {"size": [[2, 4], [2, 4]], "rgba": "randomalpha", "blend": "multiply"}],
+			[0, "sharpen", {"type": 2}],
+			[0, "spheres", {"blend": "multiply", "dynamic": true, "opacity": 255}]
+		]
+	}
+</script>
+
 
 <script type="text/javascript" id="lines" class="preset" title="lines (under dev)">
 	var params = {

diff --git a/index.js b/index.js
@@ -344,7 +344,7 @@ $(document).ready(function () {
 				clearTimeout(to);
 				$('body').removeClass('rendering');
 				message('Syntax error in params! ' + e.message, 9000);
-				console.error(e);
+				console.error(e.stack);
 
 			}
 

diff --git a/src/tgen-base.js b/src/tgen-base.js
@@ -6,14 +6,14 @@
  * Copyright (c) 2015 Tamas Schalk
  * MIT license
  *
- * @version 0.4.3
+ * @version 0.4.4
  */
 
 (function (fn) {
 
 	window[fn] = {
 
-		version: '0.4.3',
+		version: '0.4.4',
 		defaults: {},
 		effects: {},
 		blends: {},
@@ -690,9 +690,20 @@
 						callback(colormap);
 					}
 
-					if (typeof self.colormaps[colormap] == "function") {
-						var items = self.colormaps[colormap](size);
-						this.data = this.render(items);
+					if (typeof colormap == 'string') {
+
+						var reverse = false;
+
+						if (colormap.charAt(0) == '!') {
+							colormap = colormap.substring(1);
+							reverse = true;
+						}
+
+						if (typeof self.colormaps[colormap] == "function") {
+							var items = self.colormaps[colormap](size);
+							this.data = this.render(items, reverse);
+						}
+
 					}
 
 					if (typeof colormap == 'object') {
@@ -701,7 +712,7 @@
 
 				},
 
-				render: function (items) {
+				render: function (items, reverse) {
 
 					var colormap = [];
 
@@ -714,7 +725,9 @@
 
 						for (var i = currentIndex; i <= nextIndex; i++) {
 
-							colormap[i] = [
+							var idx = reverse ? this.size - i : i;
+
+							colormap[idx] = [
 								current.rgba[0] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[0] - current.rgba[0]),
 								current.rgba[1] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[1] - current.rgba[1]),
 								current.rgba[2] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[2] - current.rgba[2]),
@@ -734,7 +747,7 @@
 						return this.data;
 					}
 
-					index = parseInt(index);
+					index = generator.calc.pingpong(parseInt(index), 0, 255);
 
 					if (index > this.size) {
 						index = index - this.size;

diff --git a/src/tgen-colormaps.js b/src/tgen-colormaps.js
@@ -2,6 +2,20 @@
 
 	var tgen = window[fn];
 
+	// dawn
+	tgen.colormap('blackwhite', function () {
+
+		return [
+			{percent: 0, rgba: [0, 0, 0, 255]},
+			{percent: 25, rgba: [255, 255, 255, 255]},
+			{percent: 50, rgba: [0, 0, 0, 255]},
+			{percent: 75, rgba: [255, 255, 255, 255]},
+			{percent: 100, rgba: [0, 0, 0, 255]}
+		];
+
+	});
+
+
 	// dawn
 	tgen.colormap('dawn', function () {
 

diff --git a/tgen.debug.js b/tgen.debug.js
@@ -6,10 +6,10 @@
  Copyright (c) 2015 Tamas Schalk
  MIT license
 
- @version 0.4.3
+ @version 0.4.4
 */
 (function(fn) {
-  window[fn] = {version:"0.4.3", defaults:{}, effects:{}, blends:{}, shapes:{}, colormaps:{}, events:{beforeEffect:{}, afterEffect:{}, beforeRender:{}, afterRender:{}}, config:{historyLast:15, historyName:"history", historyList:[]}, effect:function(name, defaults, func) {
+  window[fn] = {version:"0.4.4", defaults:{}, effects:{}, blends:{}, shapes:{}, colormaps:{}, events:{beforeEffect:{}, afterEffect:{}, beforeRender:{}, afterRender:{}}, config:{historyLast:15, historyName:"history", historyList:[]}, effect:function(name, defaults, func) {
     this.defaults[name] = defaults;
     this.effects[name] = func;
   }, event:function(when, name, func) {
@@ -398,30 +398,38 @@
       if (typeof callback == "function") {
         callback(colormap);
       }
-      if (typeof self.colormaps[colormap] == "function") {
-        var items = self.colormaps[colormap](size);
-        this.data = this.render(items);
+      if (typeof colormap == "string") {
+        var reverse = false;
+        if (colormap.charAt(0) == "!") {
+          colormap = colormap.substring(1);
+          reverse = true;
+        }
+        if (typeof self.colormaps[colormap] == "function") {
+          var items = self.colormaps[colormap](size);
+          this.data = this.render(items, reverse);
+        }
       }
       if (typeof colormap == "object") {
         this.data = this.render(colormap);
       }
-    }, render:function(items) {
+    }, render:function(items, reverse) {
       var colormap = [];
       for (var p = 0;p < items.length - 1;p++) {
         var current = items[p];
         var next = items[p + 1];
         var currentIndex = Math.round(this.size * (current.percent / 100));
         var nextIndex = Math.round(this.size * (next.percent / 100));
         for (var i = currentIndex;i <= nextIndex;i++) {
-          colormap[i] = [current.rgba[0] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[0] - current.rgba[0]), current.rgba[1] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[1] - current.rgba[1]), current.rgba[2] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[2] - current.rgba[2]), current.rgba[3] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[3] - current.rgba[3])];
+          var idx = reverse ? this.size - i : i;
+          colormap[idx] = [current.rgba[0] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[0] - current.rgba[0]), current.rgba[1] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[1] - current.rgba[1]), current.rgba[2] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[2] - current.rgba[2]), current.rgba[3] + (i - currentIndex) / (nextIndex - currentIndex) * (next.rgba[3] - current.rgba[3])];
         }
       }
       return colormap;
     }, get:function(index, rgba) {
       if (index == undefined) {
         return this.data;
       }
-      index = parseInt(index);
+      index = generator.calc.pingpong(parseInt(index), 0, 255);
       if (index > this.size) {
         index = index - this.size;
       }
@@ -712,6 +720,9 @@
 })("tgen");
 (function(fn) {
   var tgen = window[fn];
+  tgen.colormap("blackwhite", function() {
+    return [{percent:0, rgba:[0, 0, 0, 255]}, {percent:25, rgba:[255, 255, 255, 255]}, {percent:50, rgba:[0, 0, 0, 255]}, {percent:75, rgba:[255, 255, 255, 255]}, {percent:100, rgba:[0, 0, 0, 255]}];
+  });
   tgen.colormap("dawn", function() {
     return [{percent:0, rgba:[255, 255, 192, 255]}, {percent:25, rgba:[255, 255, 128, 255]}, {percent:50, rgba:[255, 128, 128, 255]}, {percent:75, rgba:[128, 0, 128, 255]}, {percent:100, rgba:[0, 0, 128, 255]}];
   });