Begun creating a Shape class

This commit is contained in:
Amadeus Demarzi 2014-07-24 00:37:27 -07:00
parent bfa6288148
commit 27b3187ce9
6 changed files with 158 additions and 99 deletions

View File

@ -3,133 +3,133 @@ var Circle = {
"Points": [ "Points": [
{ {
"id": "point-0", "id": "point-0",
"x": 329.40000000000003, "x": 0.915,
"y": 282.96000000000004 "y": 0.786
}, },
{ {
"id": "point-1", "id": "point-1",
"x": 355.26, "x": 0.9868333333333333,
"y": 224.82 "y": 0.6244999999999999
}, },
{ {
"id": "point-2", "id": "point-2",
"x": 282.66, "x": 0.7851666666666667,
"y": 330.3 "y": 0.9175
}, },
{ {
"id": "point-5", "id": "point-5",
"x": 279.12, "x": 0.7753333333333333,
"y": 224.10000000000002 "y": 0.6225
}, },
{ {
"id": "point-8", "id": "point-8",
"x": 217.26000000000002, "x": 0.6035,
"y": 246.06 "y": 0.6835
}, },
{ {
"id": "point-11", "id": "point-11",
"x": 190.01999999999998, "x": 0.5278333333333333,
"y": 293.52 "y": 0.8153333333333334
}, },
{ {
"id": "point-14", "id": "point-14",
"x": 209.21999999999997, "x": 0.5811666666666666,
"y": 360.9 "y": 1.0025
}, },
{ {
"id": "point-17", "id": "point-17",
"x": 127.08000000000001, "x": 0.35300000000000004,
"y": 257.88 "y": 0.7163333333333334
}, },
{ {
"id": "point-20", "id": "point-20",
"x": 124.55999999999999, "x": 0.3459999999999999,
"y": 354.12 "y": 0.9836666666666667
}, },
{ {
"id": "point-26", "id": "point-26",
"x": 48.6, "x": 0.135,
"y": 303.06 "y": 0.8418333333333333
}, },
{ {
"id": "point-28", "id": "point-28",
"x": 353.1, "x": 0.9808333333333333,
"y": 128.46 "y": 0.3568333333333334
}, },
{ {
"id": "point-32", "id": "point-32",
"x": 237.48000000000002, "x": 0.6596666666666667,
"y": 188.51999999999998 "y": 0.5236666666666666
}, },
{ {
"id": "point-38", "id": "point-38",
"x": 172.68, "x": 0.4796666666666667,
"y": 183 "y": 0.5083333333333333
}, },
{ {
"id": "point-41", "id": "point-41",
"x": 130.68, "x": 0.36300000000000004,
"y": 189 "y": 0.525
}, },
{ {
"id": "point-47", "id": "point-47",
"x": 61.2, "x": 0.17,
"y": 198.96000000000004 "y": 0.5526666666666668
}, },
{ {
"id": "point-53", "id": "point-53",
"x": 8.34, "x": 0.02316666666666667,
"y": 240.48000000000002 "y": 0.6679999999999999
}, },
{ {
"id": "point-55", "id": "point-55",
"x": 236.88000000000002, "x": 0.6579999999999999,
"y": 107.28000000000002 "y": 0.29800000000000004
}, },
{ {
"id": "point-59", "id": "point-59",
"x": 165.23999999999998, "x": 0.45899999999999996,
"y": 97.8 "y": 0.27166666666666667
}, },
{ {
"id": "point-65", "id": "point-65",
"x": 79.91999999999999, "x": 0.22199999999999995,
"y": 121.14000000000001 "y": 0.3365000000000001
}, },
{ {
"id": "point-74", "id": "point-74",
"x": 0, "x": 0,
"y": 160.44 "y": 0.44566666666666666
}, },
{ {
"id": "point-78", "id": "point-78",
"x": 305.7, "x": 0.8491666666666666,
"y": 50.88 "y": 0.14133333333333334
}, },
{ {
"id": "point-79", "id": "point-79",
"x": 251.82, "x": 0.6995,
"y": 14.879999999999999 "y": 0.041333333333333326
}, },
{ {
"id": "point-83", "id": "point-83",
"x": 197.88, "x": 0.5496666666666666,
"y": -0.12000000000000001 "y": -0.0003333333333333334
}, },
{ {
"id": "point-89", "id": "point-89",
"x": 132.6, "x": 0.36833333333333335,
"y": 6.06 "y": 0.016833333333333332
}, },
{ {
"id": "point-95", "id": "point-95",
"x": 44.64000000000001, "x": 0.12400000000000003,
"y": 60.96 "y": 0.16933333333333334
}, },
{ {
"id": "point-98", "id": "point-98",
"x": 18.060000000000002, "x": 0.05016666666666667,
"y": 99.60000000000001 "y": 0.27666666666666667
} }
], ],
"Polygons": [ "Polygons": [

View File

@ -12,10 +12,10 @@ Engine.Point = function(id, x, y, width, height){
this.accel = Vector.coerce(this.accel); this.accel = Vector.coerce(this.accel);
this.vel = Vector.coerce(this.vel); this.vel = Vector.coerce(this.vel);
this.pos.add({ // this.pos.add({
x: (Engine.getRandomFloat(0, 6) - 3), // x: (Engine.getRandomFloat(0, 6) - 3),
y: (Engine.getRandomFloat(0, 6) - 3) // y: (Engine.getRandomFloat(0, 6) - 3)
}); // });
// Physics randomness // Physics randomness
// this.stiffness = Engine.getRandomFloat(2, 5); // this.stiffness = Engine.getRandomFloat(2, 5);

View File

@ -8,7 +8,7 @@ Engine.Polygon = function(a, b, c, color){
this.b = b; this.b = b;
this.c = c; this.c = c;
this.color = color; this.color = Engine.clone(color);
this.maxL = this.color.l; this.maxL = this.color.l;
this.strokeColor = { this.strokeColor = {
h: this.color.h, h: this.color.h,
@ -17,19 +17,10 @@ Engine.Polygon = function(a, b, c, color){
a: 1 a: 1
}; };
// this.color.s = 0;
this.color.l = 0; this.color.l = 0;
this.fillStyle = this.hslaTemplate.substitute(this.color); this.fillStyle = this.hslaTemplate.substitute(this.color);
this.strokeStyle = this.hslaTemplate.substitute({ this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
});
// this.up = !!Engine.getRandomInt(0,1);
// this.hueShiftSpeed = 15;
// this.toColor = {
// a: 1
// };
}; };
Engine.Polygon.prototype = { Engine.Polygon.prototype = {

View File

@ -0,0 +1,75 @@
(function(
Engine,
Point,
Polygon,
Vector
){
Engine.Shape = function(x, y, width, height, points, polygons){
var i, ref, point, poly;
this.pos = new Vector(x, y);
this.size = new Vector(width, height);
ref = {};
this.points = [];
this.polygons = [];
for (i = 0; i < points.length; i++) {
point = new Point(
points[i].id,
points[i].x * this.size.x,
points[i].y * this.size.y,
this.size.x,
this.size.y
);
ref[point.id] = point;
this.points.push(point);
}
for (i = 0; i < polygons.length; i++) {
poly = polygons[i];
this.polygons.push(new Polygon(
ref[poly.points[0]],
ref[poly.points[1]],
ref[poly.points[2]],
poly.color
));
}
};
Engine.Shape.prototype = {
update: function(engine){
var p;
for (p = 0; p < this.points.length; p++) {
this.points[p].update(engine);
// this.points[p].draw(this.context, scale);
}
for (p = 0; p < this.polygons.length; p++) {
this.polygons[p].update(engine);
// this.polygons[p].draw(this.context, scale);
}
},
draw: function(ctx, scale){
var p;
ctx.save();
ctx.translate(this.pos.x * scale, this.pos.y * scale);
for (p = 0; p < this.polygons.length; p++) {
this.polygons[p].draw(ctx, scale);
}
ctx.restore();
}
};
})(
window.Engine,
window.Engine.Point,
window.Engine.Polygon,
window.Vector
);

View File

@ -26,8 +26,9 @@ Engine = Base.extend({
particles : [], particles : [],
_deferred : [], _deferred : [],
points : [], // points : [],
polygons : [], // polygons : [],
shapes: [],
speed: 1, speed: 1,
accel: 0.08, accel: 0.08,
@ -89,30 +90,15 @@ Engine = Base.extend({
}, },
setupTessellation: function(canvas){ setupTessellation: function(canvas){
var row, col, rows, cols, rowMod, colMod, i, p, ref, point, poly; this.shapes = [];
this.logo = new Engine.Shape(
ref = {}; (this.width / 2 - 180),
for (i = 0; i < Circle.Points.length; i++) { (this.height / 2 - 180),
point = new Engine.Point( 360,
Circle.Points[i].id, 360,
Circle.Points[i].x + (this.width / 2 - 180), Circle.Points,
Circle.Points[i].y + (this.height / 2 - 180), Circle.Polygons
this.width, );
this.height
);
ref[point.id] = point;
this.points.push(point);
}
for (i = 0; i < Circle.Polygons.length; i++) {
poly = Circle.Polygons[i];
this.polygons.push(new Engine.Polygon(
ref[poly.points[0]],
ref[poly.points[1]],
ref[poly.points[2]],
poly.color
));
}
}, },
render: function(){ render: function(){
@ -155,15 +141,13 @@ Engine = Base.extend({
var scale = this.scale, var scale = this.scale,
p; p;
for (p = 0; p < this.points.length; p++) { for (p = 0; p < this.shapes.length; p++) {
this.points[p].update(this); this.shapes[p].update(this);
// this.points[p].draw(this.context, scale); this.shapes[p].draw(this.context, scale);
} }
for (p = 0; p < this.polygons.length; p++) { this.logo.update(this);
this.polygons[p].update(this); this.logo.draw(this.context, scale);
this.polygons[p].draw(this.context, scale);
}
}, },
generateParticles: function(num, fixed){ generateParticles: function(num, fixed){
@ -221,6 +205,14 @@ Engine.getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min); return Math.floor(Math.random() * (max - min + 1) + min);
}; };
Engine.clone = function(ref) {
var clone = {}, key;
for (key in ref) {
clone[key] = ref[key];
}
return clone;
};
window.Engine = Engine; window.Engine = Engine;
})(window.Base, window.Vector, window.Circle); })(window.Base, window.Vector, window.Circle);

View File

@ -31,6 +31,7 @@
<script type="text/javascript" src="/javascripts/app/Engine.Particle.Fixed.js"></script> <script type="text/javascript" src="/javascripts/app/Engine.Particle.Fixed.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Point.js"></script> <script type="text/javascript" src="/javascripts/app/Engine.Point.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Polygon.js"></script> <script type="text/javascript" src="/javascripts/app/Engine.Polygon.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.Shape.js"></script>
<script type="text/javascript" src="/javascripts/app/Init.js"></script> <script type="text/javascript" src="/javascripts/app/Init.js"></script>
</body> </body>