diff --git a/website/source/javascripts/app/Engine.Polygon.js b/website/source/javascripts/app/Engine.Polygon.js index 88b08a918..1f5e63e7a 100644 --- a/website/source/javascripts/app/Engine.Polygon.js +++ b/website/source/javascripts/app/Engine.Polygon.js @@ -3,21 +3,26 @@ Vector ){ -Engine.Polygon = function(a, b, c, color){ +Engine.Polygon = function(a, b, c, color, simple){ this.a = a; this.b = b; this.c = c; this.color = Engine.clone(color); - this.maxL = this.color.l; - this.strokeColor = { - h: this.color.h, - s: 0, - l: 100, - a: 1 - }; + this.simple = simple; - this.color.l = 0; + if (this.simple) { + this.strokeColor = this.color; + } else { + this.maxL = this.color.l; + this.strokeColor = { + h: this.color.h, + s: 0, + l: 100, + a: 1 + }; + this.color.l = 0; + } this.fillStyle = this.hslaTemplate.substitute(this.color); this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor); @@ -37,6 +42,10 @@ Engine.Polygon.prototype = { update: function(engine){ var delta; + if (this.simple) { + return; + } + this.start += engine.tick; delta = this.start; @@ -76,10 +85,12 @@ Engine.Polygon.prototype = { ); ctx.closePath(); ctx.fillStyle = this.fillStyle; - ctx.lineWidth = 0.25 * scale; - ctx.strokeStyle = this.strokeStyle; ctx.fill(); - ctx.stroke(); + if (!this.simple) { + ctx.lineWidth = 0.25 * scale; + ctx.strokeStyle = this.strokeStyle; + ctx.stroke(); + } } }; diff --git a/website/source/javascripts/app/Engine.Shape.js b/website/source/javascripts/app/Engine.Shape.js index d7c632cc2..87126d69c 100644 --- a/website/source/javascripts/app/Engine.Shape.js +++ b/website/source/javascripts/app/Engine.Shape.js @@ -5,7 +5,7 @@ Vector ){ -Engine.Shape = function(x, y, width, height, points, polygons){ +Engine.Shape = function(x, y, width, height, points, polygons, simple){ var i, ref, point, poly; this.pos = new Vector(x, y); @@ -33,7 +33,8 @@ Engine.Shape = function(x, y, width, height, points, polygons){ ref[poly.points[0]], ref[poly.points[1]], ref[poly.points[2]], - poly.color + poly.color, + simple )); } }; @@ -49,16 +50,19 @@ Engine.Shape.prototype = { update: function(engine){ var p; - // if (this.destruct) { - // this.elapsed += engine.tick; - // } + if (this.destruct) { + this.elapsed += engine.tick; + if (this.elapsed > this.destruct) { + engine._deferredShapes.push(this); + } + } for (p = 0; p < this.points.length; p++) { this.points[p].update(engine); } for (p = 0; p < this.polygons.length; p++) { - this.polygons[p].update(engine); + this.polygons[p].update(engine, this.noHueShift); } return this; @@ -73,7 +77,7 @@ Engine.Shape.prototype = { this.pos.y * scale >> 0 ); for (p = 0; p < this.polygons.length; p++) { - this.polygons[p].draw(ctx, scale); + this.polygons[p].draw(ctx, scale, this.noStroke); } ctx.restore(); return this; diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js index 8090f2f45..c5cb4e562 100644 --- a/website/source/javascripts/app/Engine.js +++ b/website/source/javascripts/app/Engine.js @@ -4,6 +4,7 @@ Base, Vector, Logo, + Shapes, Chainable ){ @@ -147,7 +148,7 @@ Engine = Base.extend({ renderTessellation: function(){ var scale = this.scale, - p, index; + p, index, rando, halfWidth, halfHeight, shape, shapeTemplate; for (p = 0; p < this.shapes.length; p++) { this.shapes[p].update(this); @@ -164,6 +165,26 @@ Engine = Base.extend({ this.shapes.splice(index, 1); } } + + // 1 Per second? Maybe? + if (Engine.getRandomFloat(0,100) < 1.6666) { + halfWidth = this.width / 2; + halfHeight = this.height / 2; + shapeTemplate = Shapes[Engine.getRandomInt(0, Shapes.length - 1)]; + shape = new Engine.Shape( + Engine.getRandomInt(-halfWidth, halfWidth), + Engine.getRandomInt(-halfHeight, halfHeight), + 50, + 50, + shapeTemplate.points, + shapeTemplate.polygons, + true + ); + shape.selfDestruct(10); + // shape.noStroke = true; + // shape.noHueShift = true; + this.shapes.push(shape); + } }, generateParticles: function(num, fixed){ @@ -242,5 +263,6 @@ window.Engine = Engine; window.Base, window.Vector, window.Logo, + window.Shapes, window.Chainable ); diff --git a/website/source/javascripts/app/Shapes.js b/website/source/javascripts/app/Shapes.js index 84c39bd54..5f30280c3 100644 --- a/website/source/javascripts/app/Shapes.js +++ b/website/source/javascripts/app/Shapes.js @@ -1,41 +1,46 @@ // jshint unused:false var Shapes = [ { - "Points": [ + "data": { + "width": 100, + "height": 100, + "ar": 1 + }, + "points": [ { - "id": "mpoint-0", + "id": "point-0", "x": 0.848, "y": -0.002 }, { - "id": "mpoint-1", + "id": "point-1", "x": 0.11800000000000001, "y": 0.015 }, { - "id": "mpoint-2", + "id": "point-2", "x": 0.46, "y": 0.602 }, { - "id": "mpoint-5", + "id": "point-6", "x": 0.9, "y": 0.685 }, { - "id": "mpoint-6", + "id": "point-8", "x": 0.359, "y": 0.7979999999999999 }, { - "id": "mpoint-10", + "id": "point-13", "x": 0, "y": 0.48200000000000004 } ], - "Polygons": [ + "polygons": [ { - "id": "mpoly-0", + "id": "poly-0", "color": { "h": 242.6086956521739, "s": 47.58620689655173, @@ -43,13 +48,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-0", - "mpoint-1", - "mpoint-2" + "point-0", + "point-1", + "point-2" ] }, { - "id": "mpoly-1", + "id": "poly-1", "color": { "h": 253.33333333333334, "s": 30.508474576271187, @@ -57,13 +62,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-0", - "mpoint-2", - "mpoint-5" + "point-0", + "point-2", + "point-6" ] }, { - "id": "mpoly-2", + "id": "poly-2", "color": { "h": 246.31578947368416, "s": 28.934010152284262, @@ -71,13 +76,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-6", - "mpoint-5", - "mpoint-2" + "point-8", + "point-6", + "point-2" ] }, { - "id": "mpoly-3", + "id": "poly-3", "color": { "h": 244.99999999999997, "s": 51.724137931034484, @@ -85,13 +90,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-1", - "mpoint-10", - "mpoint-2" + "point-1", + "point-13", + "point-2" ] }, { - "id": "mpoly-4", + "id": "poly-4", "color": { "h": 240.84507042253526, "s": 48.29931972789116, @@ -99,54 +104,59 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-10", - "mpoint-6", - "mpoint-2" + "point-13", + "point-8", + "point-2" ] } ] }, { - "Points": [ + "data": { + "width": 100, + "height": 100, + "ar": 1 + }, + "points": [ { - "id": "mpoint-15", + "id": "point-20", "x": 0.6990000000000001, "y": 0 }, { - "id": "mpoint-16", + "id": "point-21", "x": 0.10800000000000001, "y": 0.095 }, { - "id": "mpoint-17", + "id": "point-22", "x": 0.515, "y": 0.46 }, { - "id": "mpoint-18", + "id": "point-24", "x": 0.915, "y": 0.245 }, { - "id": "mpoint-20", + "id": "point-26", "x": 0.89, "y": 0.765 }, { - "id": "mpoint-21", + "id": "point-28", "x": 0.349, "y": 0.878 }, { - "id": "mpoint-25", + "id": "point-33", "x": 0.002, "y": 0.475 } ], - "Polygons": [ + "polygons": [ { - "id": "mpoly-5", + "id": "poly-5", "color": { "h": 242.6086956521739, "s": 47.58620689655173, @@ -154,13 +164,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-15", - "mpoint-16", - "mpoint-17" + "point-20", + "point-21", + "point-22" ] }, { - "id": "mpoly-6", + "id": "poly-6", "color": { "h": 253.33333333333334, "s": 30.508474576271187, @@ -168,13 +178,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-18", - "mpoint-17", - "mpoint-20" + "point-24", + "point-22", + "point-26" ] }, { - "id": "mpoly-7", + "id": "poly-7", "color": { "h": 246.31578947368416, "s": 28.934010152284262, @@ -182,13 +192,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-21", - "mpoint-20", - "mpoint-17" + "point-28", + "point-26", + "point-22" ] }, { - "id": "mpoly-8", + "id": "poly-8", "color": { "h": 244.99999999999997, "s": 51.724137931034484, @@ -196,13 +206,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-16", - "mpoint-25", - "mpoint-17" + "point-21", + "point-33", + "point-22" ] }, { - "id": "mpoly-9", + "id": "poly-9", "color": { "h": 240.84507042253526, "s": 48.29931972789116, @@ -210,13 +220,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-25", - "mpoint-21", - "mpoint-17" + "point-33", + "point-28", + "point-22" ] }, { - "id": "mpoly-10", + "id": "poly-10", "color": { "h": 256.74418604651163, "s": 37.719298245614034, @@ -224,54 +234,59 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-15", - "mpoint-18", - "mpoint-17" + "point-20", + "point-24", + "point-22" ] } ] }, { - "Points": [ + "data": { + "width": 100, + "height": 100, + "ar": 1 + }, + "points": [ { - "id": "mpoint-33", + "id": "point-44", "x": 0.675, "y": 0.003 }, { - "id": "mpoint-34", + "id": "point-45", "x": 0.162, "y": 0.18 }, { - "id": "mpoint-35", + "id": "point-46", "x": 0.56, "y": 0.325 }, { - "id": "mpoint-36", + "id": "point-48", "x": 0.895, "y": 0.215 }, { - "id": "mpoint-38", + "id": "point-50", "x": 0.79, "y": 0.748 }, { - "id": "mpoint-39", + "id": "point-52", "x": 0.244, "y": 0.82 }, { - "id": "mpoint-43", + "id": "point-57", "x": 0.002, "y": 0.682 } ], - "Polygons": [ + "polygons": [ { - "id": "mpoly-11", + "id": "poly-11", "color": { "h": 242.6086956521739, "s": 47.58620689655173, @@ -279,13 +294,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-33", - "mpoint-34", - "mpoint-35" + "point-44", + "point-45", + "point-46" ] }, { - "id": "mpoly-12", + "id": "poly-12", "color": { "h": 253.33333333333334, "s": 30.508474576271187, @@ -293,13 +308,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-36", - "mpoint-35", - "mpoint-38" + "point-48", + "point-46", + "point-50" ] }, { - "id": "mpoly-13", + "id": "poly-13", "color": { "h": 246.31578947368416, "s": 28.934010152284262, @@ -307,13 +322,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-39", - "mpoint-38", - "mpoint-35" + "point-52", + "point-50", + "point-46" ] }, { - "id": "mpoly-14", + "id": "poly-14", "color": { "h": 244.99999999999997, "s": 51.724137931034484, @@ -321,13 +336,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-34", - "mpoint-43", - "mpoint-35" + "point-45", + "point-57", + "point-46" ] }, { - "id": "mpoly-15", + "id": "poly-15", "color": { "h": 240.84507042253526, "s": 48.29931972789116, @@ -335,13 +350,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-43", - "mpoint-39", - "mpoint-35" + "point-57", + "point-52", + "point-46" ] }, { - "id": "mpoly-16", + "id": "poly-16", "color": { "h": 256.74418604651163, "s": 37.719298245614034, @@ -349,69 +364,74 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-33", - "mpoint-36", - "mpoint-35" + "point-44", + "point-48", + "point-46" ] } ] }, { - "Points": [ + "data": { + "width": 100, + "height": 100, + "ar": 1 + }, + "points": [ { - "id": "mpoint-51", + "id": "point-68", "x": 0.379, "y": 0.08800000000000001 }, { - "id": "mpoint-52", + "id": "point-69", "x": 0, "y": 0.345 }, { - "id": "mpoint-53", + "id": "point-70", "x": 0.568, "y": 0.56 }, { - "id": "mpoint-56", + "id": "point-74", "x": 0.715, "y": 0.003 }, { - "id": "mpoint-57", + "id": "point-76", "x": 0.935, "y": 0.215 }, { - "id": "mpoint-59", + "id": "point-78", "x": 0.95, "y": 0.525 }, { - "id": "mpoint-60", + "id": "point-80", "x": 0.87, "y": 0.785 }, { - "id": "mpoint-63", + "id": "point-84", "x": 0.499, "y": 0.883 }, { - "id": "mpoint-66", + "id": "point-88", "x": 0.284, "y": 0.82 }, { - "id": "mpoint-70", + "id": "point-93", "x": 0.042, "y": 0.682 } ], - "Polygons": [ + "polygons": [ { - "id": "mpoly-17", + "id": "poly-17", "color": { "h": 242.6086956521739, "s": 47.58620689655173, @@ -419,13 +439,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-51", - "mpoint-52", - "mpoint-53" + "point-68", + "point-69", + "point-70" ] }, { - "id": "mpoly-18", + "id": "poly-18", "color": { "h": 239.17808219178082, "s": 44.78527607361962, @@ -433,13 +453,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-51", - "mpoint-53", - "mpoint-56" + "point-68", + "point-70", + "point-74" ] }, { - "id": "mpoly-19", + "id": "poly-19", "color": { "h": 253.33333333333334, "s": 30.508474576271187, @@ -447,13 +467,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-57", - "mpoint-53", - "mpoint-59" + "point-76", + "point-70", + "point-78" ] }, { - "id": "mpoly-20", + "id": "poly-20", "color": { "h": 252.8571428571429, "s": 30.701754385964914, @@ -461,13 +481,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-60", - "mpoint-59", - "mpoint-53" + "point-80", + "point-78", + "point-70" ] }, { - "id": "mpoly-21", + "id": "poly-21", "color": { "h": 255.1898734177215, "s": 31.726907630522096, @@ -475,13 +495,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-63", - "mpoint-60", - "mpoint-53" + "point-84", + "point-80", + "point-70" ] }, { - "id": "mpoly-22", + "id": "poly-22", "color": { "h": 246.31578947368416, "s": 28.934010152284262, @@ -489,13 +509,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-66", - "mpoint-63", - "mpoint-53" + "point-88", + "point-84", + "point-70" ] }, { - "id": "mpoly-23", + "id": "poly-23", "color": { "h": 244.99999999999997, "s": 51.724137931034484, @@ -503,13 +523,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-52", - "mpoint-70", - "mpoint-53" + "point-69", + "point-93", + "point-70" ] }, { - "id": "mpoly-24", + "id": "poly-24", "color": { "h": 240.84507042253526, "s": 48.29931972789116, @@ -517,13 +537,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-70", - "mpoint-66", - "mpoint-53" + "point-93", + "point-88", + "point-70" ] }, { - "id": "mpoly-25", + "id": "poly-25", "color": { "h": 256.74418604651163, "s": 37.719298245614034, @@ -531,69 +551,74 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-56", - "mpoint-57", - "mpoint-53" + "point-74", + "point-76", + "point-70" ] } ] }, { - "Points": [ + "data": { + "width": 100, + "height": 100, + "ar": 1 + }, + "points": [ { - "id": "mpoint-78", + "id": "point-104", "x": 0.33899999999999997, "y": -0.004 }, { - "id": "mpoint-79", + "id": "point-105", "x": 0.042, "y": 0.209 }, { - "id": "mpoint-80", + "id": "point-106", "x": 0.46799999999999997, "y": 0.361 }, { - "id": "mpoint-83", + "id": "point-110", "x": 0.675, "y": 0.063 }, { - "id": "mpoint-84", + "id": "point-112", "x": 0.83, "y": 0.212 }, { - "id": "mpoint-86", + "id": "point-114", "x": 0.91, "y": 0.444 }, { - "id": "mpoint-87", + "id": "point-116", "x": 0.78, "y": 0.778 }, { - "id": "mpoint-90", + "id": "point-120", "x": 0.45899999999999996, "y": 0.943 }, { - "id": "mpoint-93", + "id": "point-124", "x": 0.08900000000000001, "y": 0.787 }, { - "id": "mpoint-97", + "id": "point-129", "x": 0.002, "y": 0.62 } ], - "Polygons": [ + "polygons": [ { - "id": "mpoly-26", + "id": "poly-26", "color": { "h": 242.6086956521739, "s": 47.58620689655173, @@ -601,13 +626,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-78", - "mpoint-79", - "mpoint-80" + "point-104", + "point-105", + "point-106" ] }, { - "id": "mpoly-27", + "id": "poly-27", "color": { "h": 239.17808219178082, "s": 44.78527607361962, @@ -615,13 +640,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-78", - "mpoint-80", - "mpoint-83" + "point-104", + "point-106", + "point-110" ] }, { - "id": "mpoly-28", + "id": "poly-28", "color": { "h": 253.33333333333334, "s": 30.508474576271187, @@ -629,13 +654,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-84", - "mpoint-80", - "mpoint-86" + "point-112", + "point-106", + "point-114" ] }, { - "id": "mpoly-29", + "id": "poly-29", "color": { "h": 252.8571428571429, "s": 30.701754385964914, @@ -643,13 +668,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-87", - "mpoint-86", - "mpoint-80" + "point-116", + "point-114", + "point-106" ] }, { - "id": "mpoly-30", + "id": "poly-30", "color": { "h": 255.1898734177215, "s": 31.726907630522096, @@ -657,13 +682,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-90", - "mpoint-87", - "mpoint-80" + "point-120", + "point-116", + "point-106" ] }, { - "id": "mpoly-31", + "id": "poly-31", "color": { "h": 246.31578947368416, "s": 28.934010152284262, @@ -671,13 +696,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-93", - "mpoint-90", - "mpoint-80" + "point-124", + "point-120", + "point-106" ] }, { - "id": "mpoly-32", + "id": "poly-32", "color": { "h": 244.99999999999997, "s": 51.724137931034484, @@ -685,13 +710,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-79", - "mpoint-97", - "mpoint-80" + "point-105", + "point-129", + "point-106" ] }, { - "id": "mpoly-33", + "id": "poly-33", "color": { "h": 240.84507042253526, "s": 48.29931972789116, @@ -699,13 +724,13 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-97", - "mpoint-93", - "mpoint-80" + "point-129", + "point-124", + "point-106" ] }, { - "id": "mpoly-34", + "id": "poly-34", "color": { "h": 256.74418604651163, "s": 37.719298245614034, @@ -713,9 +738,9 @@ var Shapes = [ "a": 1 }, "points": [ - "mpoint-83", - "mpoint-84", - "mpoint-80" + "point-110", + "point-112", + "point-106" ] } ]