isobox

bit101 · Dec 24, 2015 · 8f5f655 · 8f5f655
1 parent f6cb58c
commit 8f5f655
Show file tree

Hide file tree

Showing 9 changed files with 378 additions and 1 deletion.
diff --git a/app/glc-min.js b/app/glc-min.js
@@ -1085,6 +1085,92 @@ define('app/shapes/heart',[],function() {
 	}
 });
 
+define('app/shapes/isobox',[],function() {
+
+	return {
+		draw: function(context, t) {
+			var x = this.getNumber("x", t, 100),
+				y = this.getNumber("y", t, 100),
+				size = this.getNumber("size", t, 60),
+				h = this.getNumber("h", t, 40),
+				colorLeft = this.getColor("colorLeft", t, "#999999"),
+				colorRight = this.getColor("colorRight", t, "#cccccc"),
+				colorTop = this.getColor("colorTop", t, "#eeeeee");
+
+			context.translate(x, y);
+
+			if(h >= 0) {
+				context.fillStyle = colorLeft;
+				context.beginPath();
+				context.moveTo(-size / 2, 0);
+				context.lineTo(0, size / 4);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(-size / 2, -h);
+				context.lineTo(-size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorRight;
+				context.beginPath();
+				context.moveTo(size / 2, 0);
+				context.lineTo(0, size / 4);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorTop;
+				context.beginPath();
+				context.moveTo(-size / 2, -h + 0.25);
+				context.lineTo(0, -size / 4 - h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(-size / 2, -h);
+				this.drawFillAndStroke(context, t, true, false);
+			}
+			else {
+				// clip path
+				context.beginPath();
+				context.moveTo(-size / 2, 0);
+				context.lineTo(0, -size / 4);
+				context.lineTo(size / 2, 0);
+				context.lineTo(0, size / 4);
+				context.lineTo(-size / 2, 0);
+				context.clip();
+
+
+				context.fillStyle = colorRight;
+				context.beginPath();
+				context.moveTo(-size / 2, 0);
+				context.lineTo(0, -size / 4);
+				context.lineTo(0, -size / 4 -h);
+				context.lineTo(-size / 2, -h);
+				context.lineTo(-size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorLeft;
+				context.beginPath();
+				context.moveTo(size / 2, 0);
+				context.lineTo(0, -size / 4);
+				context.lineTo(0, -size / 4 -h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorTop;
+				context.beginPath();
+				context.moveTo(-size / 2, -h);
+				context.lineTo(0, -size / 4 - h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(-size / 2, -h);
+				this.drawFillAndStroke(context, t, true, false);
+			}
+
+
+		}
+	}
+});
+
 define('app/shapes/line',[],function() {
 
 	return {
@@ -1397,6 +1483,7 @@ define('app/renderlist',[
 	"app/shapes/gear",
 	"app/shapes/grid",
 	"app/shapes/heart",
+	"app/shapes/isobox",
 	"app/shapes/line",
 	"app/shapes/oval",
 	"app/shapes/path",
@@ -1423,6 +1510,7 @@ define('app/renderlist',[
 		Gear,
 		Grid,
 		Heart,
+		Isobox,
 		Line,
 		Oval,
 		Path,
@@ -1525,6 +1613,10 @@ define('app/renderlist',[
 		return add(Shape.create(Heart, props));
 	}
 
+	function addIsobox(props) {
+		return add(Shape.create(Isobox, props));
+	}
+
 	function addLine(props) {
 		return add(Shape.create(Line, props));
 	}
@@ -1620,6 +1712,7 @@ define('app/renderlist',[
 		addGear: addGear,
 		addGrid: addGrid,
 		addHeart: addHeart,
+		addIsobox: addIsobox,
 		addLine: addLine,
 		addOval: addOval,
 		addPath: addPath,
@@ -1982,6 +2075,7 @@ define('app/controller',[],function() {
         size: size
     };
 });
+
 define('app/styles',[],function() {
 	var defaultStyles = {
 		backgroundColor: "#ffffff",
@@ -14731,6 +14825,9 @@ define('app/ui/toolbar',[],function() {
         fileInput = document.createElement("input");
         fileInput.type = "file";
         fileInput.addEventListener("change", controller.chooseFile);
+        fileInput.addEventListener("click", function() {
+            this.value = null;
+        })
     }
 
     function addListeners() {

diff --git a/docs/images/2.23.gif b/docs/images/2.23.gif
diff --git a/docs/objects.html b/docs/objects.html
@@ -24,6 +24,7 @@ <h1>GIF Loop Coder (GLC) Documentation</h1>
                         <li><a href="#gear">Gear</a></li>
                         <li><a href="#grid">Grid</a></li>
                         <li><a href="#heart">Heart</a></li>
+                        <li><a href="#isobox">Isobox</a></li>
                         <li><a href="#line">Line</a></li>
                         <li><a href="#oval">Oval</a></li>
                         <li><a href="#path">Path</a></li>
@@ -330,6 +331,48 @@ <h3><a name="heart"></a>Heart</a></h3>
     </div>
 
 
+    <!-- ================================================================================== -->
+        <h3><a name="isobox"></a>Isobox</a></h3>
+    <!-- ================================================================================== -->
+    <div class="subsection">
+
+    <p>An isometric box object is created with:</p>
+
+    <div class="code"><pre><code>
+glc.renderList.addIsobox(properties);
+    </code></pre></div>
+
+    <p>This draws an isometric box.</p>
+
+    <img src="images/2.23.gif">
+
+    <p>In addition to the standard style properties described in the next section, this method can accept the following properties. Defaults are listed in parentheses. All of these properties are animatable.</p>
+
+    <div class="code"><pre><code>
+x (100)                 The x position of the isobox.
+y (100)                 The y position of the isobox.
+size (60)               The size of the isobox.
+h (40)                  The height of the isobox.
+colorTop (#eeeeee)      The color of the top of the isobox.
+colorLeft (#999999)     The color of the left side of the isobox.
+colorRight (#cccccc)    The color of the right side of the isobox.
+stroke (false)          Whether the object will be stroked.
+fill (true)             Whether the object will be filled.
+    </code></pre></div>
+
+    <p>Note: a good way to assign colors to the faces is to use <code>color.hsv()</code> with the same hue but differing values. For example:</p>
+
+    <div class="code"><pre><code>
+list.addIsobox({
+    colorTop: color.hsv(40, 1, 1),       // bright 
+    colorRight: color.hsv(40, 1, 0.75),  // darker
+    colorLeft: color.hsv(40, 1, 0.5)     // darkest
+});
+    </code></pre></div>
+
+    </div>
+
+
 
     <!-- ================================================================================== -->
         <h3><a name="line"></a>Line</a></h3>

diff --git a/examples/isometricgrid.js b/examples/isometricgrid.js
@@ -0,0 +1,45 @@
+function onGLC(glc) {
+    glc.loop();
+    glc.size(360, 275);
+//     glc.setDuration(5);
+//     glc.setFPS(20);
+//     glc.setMode('single');
+//     glc.setEasing(false);
+    var list = glc.renderList,
+        width = glc.w,
+        height = glc.h,
+        color = glc.color;
+
+    list.addIsobox({
+        x: width / 2,
+        y: 290,
+        size: 340,
+        h: 100,
+        colorTop: color.hsv(45, 1, 1),
+        colorRight: color.hsv(45, 1, 0.8),
+        colorLeft: color.hsv(45, 1, 0.5)
+    });
+
+    var tileWidth = 60,
+        tileHeight = tileWidth / 2;
+
+    for(var y = 0; y < 5; y++) {
+        for(var x = 0; x < 5; x++) {
+            var xpos = width / 2 + (x - y) * tileWidth / 2,
+                ypos = 130 + (x + y) * tileHeight / 2,
+                hue = 30 + Math.random() * 30;
+            list.addIsobox({
+                x: xpos,
+                y: ypos,
+                size: tileWidth,
+                h: [0, 100],
+                phase: (x - y) / 20,
+                colorTop: color.hsv(hue, 1, 1),        
+                colorLeft: color.hsv(hue, 1, 0.5),
+                colorRight: color.hsv(hue, 1, 0.75),
+            });
+        }
+    }
+
+
+}
diff --git a/src/app/controller.js b/src/app/controller.js
@@ -236,4 +236,4 @@ define(function() {
         openFile: openFile,
         size: size
     };
-});
+});
diff --git a/src/app/renderlist.js b/src/app/renderlist.js
@@ -12,6 +12,7 @@ define([
 	"app/shapes/gear",
 	"app/shapes/grid",
 	"app/shapes/heart",
+	"app/shapes/isobox",
 	"app/shapes/line",
 	"app/shapes/oval",
 	"app/shapes/path",
@@ -38,6 +39,7 @@ define([
 		Gear,
 		Grid,
 		Heart,
+		Isobox,
 		Line,
 		Oval,
 		Path,
@@ -140,6 +142,10 @@ define([
 		return add(Shape.create(Heart, props));
 	}
 
+	function addIsobox(props) {
+		return add(Shape.create(Isobox, props));
+	}
+
 	function addLine(props) {
 		return add(Shape.create(Line, props));
 	}
@@ -235,6 +241,7 @@ define([
 		addGear: addGear,
 		addGrid: addGrid,
 		addHeart: addHeart,
+		addIsobox: addIsobox,
 		addLine: addLine,
 		addOval: addOval,
 		addPath: addPath,

diff --git a/src/app/shapes/isobox.js b/src/app/shapes/isobox.js
@@ -0,0 +1,85 @@
+define(function() {
+
+	return {
+		draw: function(context, t) {
+			var x = this.getNumber("x", t, 100),
+				y = this.getNumber("y", t, 100),
+				size = this.getNumber("size", t, 60),
+				h = this.getNumber("h", t, 40),
+				colorLeft = this.getColor("colorLeft", t, "#999999"),
+				colorRight = this.getColor("colorRight", t, "#cccccc"),
+				colorTop = this.getColor("colorTop", t, "#eeeeee");
+
+			context.translate(x, y);
+
+			if(h >= 0) {
+				context.fillStyle = colorLeft;
+				context.beginPath();
+				context.moveTo(-size / 2, 0);
+				context.lineTo(0, size / 4);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(-size / 2, -h);
+				context.lineTo(-size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorRight;
+				context.beginPath();
+				context.moveTo(size / 2, 0);
+				context.lineTo(0, size / 4);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorTop;
+				context.beginPath();
+				context.moveTo(-size / 2, -h + 0.25);
+				context.lineTo(0, -size / 4 - h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(-size / 2, -h);
+				this.drawFillAndStroke(context, t, true, false);
+			}
+			else {
+				// clip path
+				context.beginPath();
+				context.moveTo(-size / 2, 0);
+				context.lineTo(0, -size / 4);
+				context.lineTo(size / 2, 0);
+				context.lineTo(0, size / 4);
+				context.lineTo(-size / 2, 0);
+				context.clip();
+
+
+				context.fillStyle = colorRight;
+				context.beginPath();
+				context.moveTo(-size / 2, 0);
+				context.lineTo(0, -size / 4);
+				context.lineTo(0, -size / 4 -h);
+				context.lineTo(-size / 2, -h);
+				context.lineTo(-size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorLeft;
+				context.beginPath();
+				context.moveTo(size / 2, 0);
+				context.lineTo(0, -size / 4);
+				context.lineTo(0, -size / 4 -h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(size / 2, 0);
+				this.drawFillAndStroke(context, t, true, false);
+
+				context.fillStyle = colorTop;
+				context.beginPath();
+				context.moveTo(-size / 2, -h);
+				context.lineTo(0, -size / 4 - h);
+				context.lineTo(size / 2, -h);
+				context.lineTo(0, size / 4 - h);
+				context.lineTo(-size / 2, -h);
+				this.drawFillAndStroke(context, t, true, false);
+			}
+
+
+		}
+	}
+});
diff --git a/src/app/ui/toolbar.js b/src/app/ui/toolbar.js
@@ -39,6 +39,9 @@ define(function() {
         fileInput = document.createElement("input");
         fileInput.type = "file";
         fileInput.addEventListener("change", controller.chooseFile);
+        fileInput.addEventListener("click", function() {
+            this.value = null;
+        })
     }
 
     function addListeners() {