Testing strokes

This commit is contained in:
Amadeus Demarzi 2014-07-27 17:19:01 -07:00
parent c25f011666
commit 89a786c5e1
4 changed files with 371 additions and 150 deletions

View File

@ -3,27 +3,29 @@
Vector
){
Engine.Polygon = function(a, b, c, color, simple){
Engine.Polygon = function(a, b, c, color, strokeColor){
this.a = a;
this.b = b;
this.c = c;
this.color = Engine.clone(color);
this.simple = simple;
this.strokeColor = strokeColor ? Engine.clone(strokeColor) : Engine.clone(color);
if (this.simple) {
this.strokeColor = this.color;
if (strokeColor) {
this.strokeColor = Engine.clone(strokeColor);
this.strokeWidth = 1.5;
} else {
this.maxL = this.color.l;
this.strokeColor = {
h: this.color.h,
s: 0,
l: 100,
a: 1
};
this.color.l = 0;
this.strokeColor = Engine.clone(color);
this.strokeWidth = 0.25;
}
this.maxStrokeL = this.strokeColor.l;
this.maxColorL = this.color.l;
this.strokeColor.s = 0;
this.strokeColor.l = 100;
this.color.l = 0;
this.fillStyle = this.hslaTemplate.substitute(this.color);
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
};
@ -53,15 +55,16 @@ Engine.Polygon.prototype = {
if (
delta > this.delay &&
delta < this.delay + this.duration + 1 &&
this.color.l < this.maxL
this.color.l < this.maxColorL
) {
this.color.l = this.maxL * (delta - this.delay) / this.duration;
this.color.l = this.maxColorL * (delta - this.delay) / this.duration;
this.strokeColor.s = this.color.s * (delta - this.delay) / this.duration;
this.strokeColor.l = (this.maxL - 100) * (delta - this.delay) / this.duration + 100;
this.strokeColor.l = (this.maxStrokeL - 100) * (delta - this.delay) / this.duration + 100;
if (this.color.l > this.maxL) {
this.color.l = this.maxL;
if (this.color.l > this.maxColorL) {
this.color.l = this.maxColorL;
this.strokeColor.l = this.maxStrokeL;
}
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);

View File

@ -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,
poly.stroke
));
}
};
@ -126,7 +127,7 @@ Engine.Shape.prototype = {
ctx.closePath();
ctx.fillStyle = poly.fillStyle;
ctx.fill();
ctx.lineWidth = 0.25 * scale;
ctx.lineWidth = poly.strokeWidth * scale;
ctx.strokeStyle = poly.strokeStyle;
ctx.stroke();
}

View File

@ -96,7 +96,7 @@ Engine = Base.extend({
.wait(1000)
.then(function(){
this.showGrid = true;
this.logo.startBreathing();
// this.logo.startBreathing();
}, this)
.wait(1000)
.then(function(){
@ -287,6 +287,7 @@ Engine = Base.extend({
this.width / 2 * scale >> 0,
this.height / 2 * scale >> 0
);
this.context.lineJoin = 'bevel';
if (this.grid) {
this.grid.resize(this.width, this.height);

View File

@ -1,239 +1,239 @@
// jshint unused:false
var Logo = {
"data": {
"width": 586,
"height": 586,
"width": 587,
"height": 587,
"ar": 1
},
"points": [
{
"id": "point-0",
"x": 0.5819112627986348,
"y": 0.7491467576791809
"x": 0.5809199318568995,
"y": 0.7478705281090289
},
{
"id": "point-1",
"x": 0.81740614334471,
"y": 0.6177474402730375
"x": 0.8160136286201022,
"y": 0.616695059625213
},
{
"id": "point-2",
"x": 0.6092150170648464,
"y": 0.8959044368600683
"x": 0.6081771720613288,
"y": 0.8943781942078366
},
{
"id": "point-4",
"x": 0.9778156996587031,
"y": 0.6561433447098977
"x": 0.9761499148211243,
"y": 0.6550255536626917
},
{
"id": "point-5",
"x": 0.8498293515358362,
"y": 0.8617747440273038
"x": 0.848381601362862,
"y": 0.8603066439522997
},
{
"id": "point-12",
"x": 0.636518771331058,
"y": 0.984641638225256
"x": 0.6354344122657581,
"y": 0.9829642248722317
},
{
"id": "point-16",
"x": 0.5546075085324232,
"y": 1
"x": 0.5536626916524702,
"y": 0.9982964224872233
},
{
"id": "point-20",
"x": 0.4552901023890785,
"y": 0.9479522184300341
"x": 0.45451448040885867,
"y": 0.9463373083475298
},
{
"id": "point-24",
"x": 0.48208191126279865,
"y": 1
"x": 0.48126064735945484,
"y": 0.9982964224872233
},
{
"id": "point-28",
"x": 0.4044368600682594,
"y": 0.9957337883959044
"x": 0.403747870528109,
"y": 0.994037478705281
},
{
"id": "point-32",
"x": 0.181740614334471,
"y": 0.8873720136518771
"x": 0.18143100511073254,
"y": 0.8858603066439524
},
{
"id": "point-36",
"x": 0.23037542662116042,
"y": 0.8071672354948806
"x": 0.22998296422487224,
"y": 0.8057921635434411
},
{
"id": "point-40",
"x": 0.33788395904436863,
"y": 0.7064846416382252
"x": 0.3373083475298126,
"y": 0.7052810902896082
},
{
"id": "point-44",
"x": 0.5151877133105802,
"y": 0.6945392491467577
"x": 0.5143100511073253,
"y": 0.6933560477001702
},
{
"id": "point-56",
"x": 0.8933447098976111,
"y": 0.4641638225255973
"x": 0.8918228279386712,
"y": 0.46337308347529815
},
{
"id": "point-60",
"x": 0.9991467576791809,
"y": 0.537542662116041
"x": 0.9974446337308348,
"y": 0.5366269165247018
},
{
"id": "point-64",
"x": 0.9590443686006825,
"y": 0.36945392491467577
"x": 0.9574105621805792,
"y": 0.368824531516184
},
{
"id": "point-68",
"x": 0.9778156996587031,
"y": 0.3626279863481228
"x": 0.9761499148211243,
"y": 0.36201022146507666
},
{
"id": "point-72",
"x": 0.6638225255972696,
"y": 0.43856655290102387
"x": 0.6626916524701874,
"y": 0.43781942078364566
},
{
"id": "point-84",
"x": 0.43430034129692835,
"y": 0.5708191126279863
"x": 0.4335604770017036,
"y": 0.5698466780238501
},
{
"id": "point-92",
"x": 0.11177474402730375,
"y": 0.8211604095563139
"x": 0.11158432708688246,
"y": 0.8197614991482112
},
{
"id": "point-96",
"x": 0.09556313993174062,
"y": 0.6680887372013652
"x": 0.09540034071550256,
"y": 0.6669505962521295
},
{
"id": "point-104",
"x": 0.05546075085324232,
"y": 0.726962457337884
"x": 0.05536626916524703,
"y": 0.7257240204429302
},
{
"id": "point-108",
"x": 0.03498293515358362,
"y": 0.6843003412969283
"x": 0.03492333901192504,
"y": 0.6831345826235093
},
{
"id": "point-112",
"x": 0.15443686006825938,
"y": 0.49010238907849835
"x": 0.15417376490630325,
"y": 0.4892674616695059
},
{
"id": "point-116",
"x": 0.22525597269624573,
"y": 0.46075085324232085
"x": 0.22487223168654175,
"y": 0.4599659284497445
},
{
"id": "point-124",
"x": 0.2790102389078498,
"y": 0.36006825938566556
"x": 0.2785349233390119,
"y": 0.35945485519591147
},
{
"id": "point-128",
"x": 0.4880546075085324,
"y": 0.36006825938566556
"x": 0.48722316865417375,
"y": 0.35945485519591147
},
{
"id": "point-136",
"x": 0.5819112627986348,
"y": 0.2930034129692833
"x": 0.5809199318568995,
"y": 0.2925042589437819
},
{
"id": "point-140",
"x": 0.8907849829351536,
"y": 0.276962457337884
"x": 0.889267461669506,
"y": 0.27649063032367976
},
{
"id": "point-152",
"x": 0.946245733788396,
"y": 0.2742320819112628
"x": 0.944633730834753,
"y": 0.2737649063032368
},
{
"id": "point-160",
"x": 0.881740614334471,
"y": 0.18208191126279863
"x": 0.8802385008517888,
"y": 0.18177172061328795
},
{
"id": "point-168",
"x": 0.5819112627986348,
"y": 0.19505119453924913
"x": 0.5809199318568995,
"y": 0.19471890971039182
},
{
"id": "point-176",
"x": 0.8003412969283277,
"y": 0.10409556313993173
"x": 0.7989778534923339,
"y": 0.10391822827938672
},
{
"id": "point-180",
"x": 0.6228668941979523,
"y": 0.01877133105802048
"x": 0.6218057921635435,
"y": 0.018739352640545145
},
{
"id": "point-184",
"x": 0.5261092150170649,
"y": 0.0005119453924914676
"x": 0.5252129471890972,
"y": 0.0005110732538330494
},
{
"id": "point-188",
"x": 0.38959044368600687,
"y": 0.09778156996587031
"x": 0.3889267461669506,
"y": 0.09761499148211243
},
{
"id": "point-192",
"x": 0.3819112627986348,
"y": 0.01877133105802048
"x": 0.38126064735945486,
"y": 0.018739352640545145
},
{
"id": "point-196",
"x": 0.30204778156996587,
"y": 0.04266211604095563
"x": 0.30153321976149916,
"y": 0.04258943781942079
},
{
"id": "point-200",
"x": 0.29744027303754267,
"y": 0.09778156996587031
"x": 0.2969335604770017,
"y": 0.09761499148211243
},
{
"id": "point-216",
"x": 0.04948805460750853,
"y": 0.30887372013651876
"x": 0.049403747870528106,
"y": 0.3083475298126065
},
{
"id": "point-228",
"x": 0.002218430034129693,
"y": 0.4723549488054608
"x": 0.002214650766609881,
"y": 0.47155025553662694
},
{
"id": "point-232",
"x": 0.0005119453924914676,
"y": 0.5298634812286689
"x": 0.0005110732538330494,
"y": 0.5289608177172062
},
{
"id": "point-244",
"x": 0.17354948805460751,
"y": 0.1220136518771331
"x": 0.17325383304940373,
"y": 0.12180579216354344
}
],
"polygons": [
{
"id": "poly-0",
"color": {
"h": 267.1641791044776,
"h": 264.688995215311,
"s": 100,
"l": 60.588235294117645,
"l": 59.01960784313726,
"a": 1
},
"points": [
@ -245,9 +245,9 @@ var Logo = {
{
"id": "poly-1",
"color": {
"h": 267.1641791044776,
"h": 268.3076923076923,
"s": 100,
"l": 60.588235294117645,
"l": 61.76470588235294,
"a": 1
},
"points": [
@ -618,7 +618,13 @@ var Logo = {
"point-108",
"point-104",
"point-96"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-28",
@ -632,7 +638,13 @@ var Logo = {
"point-112",
"point-40",
"point-96"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-29",
@ -646,7 +658,13 @@ var Logo = {
"point-116",
"point-112",
"point-40"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-30",
@ -660,7 +678,13 @@ var Logo = {
"point-84",
"point-40",
"point-116"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-31",
@ -674,7 +698,13 @@ var Logo = {
"point-124",
"point-84",
"point-116"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-32",
@ -688,7 +718,13 @@ var Logo = {
"point-128",
"point-84",
"point-124"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-33",
@ -702,7 +738,13 @@ var Logo = {
"point-72",
"point-128",
"point-84"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-34",
@ -716,7 +758,13 @@ var Logo = {
"point-136",
"point-128",
"point-72"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-35",
@ -730,7 +778,13 @@ var Logo = {
"point-140",
"point-136",
"point-72"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-36",
@ -744,7 +798,13 @@ var Logo = {
"point-140",
"point-56",
"point-72"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-37",
@ -758,7 +818,13 @@ var Logo = {
"point-64",
"point-56",
"point-140"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-38",
@ -772,7 +838,13 @@ var Logo = {
"point-152",
"point-140",
"point-64"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-39",
@ -786,7 +858,13 @@ var Logo = {
"point-68",
"point-64",
"point-152"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-40",
@ -800,7 +878,13 @@ var Logo = {
"point-160",
"point-140",
"point-152"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-41",
@ -814,7 +898,13 @@ var Logo = {
"point-136",
"point-160",
"point-140"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-42",
@ -828,7 +918,13 @@ var Logo = {
"point-168",
"point-128",
"point-136"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-43",
@ -842,7 +938,13 @@ var Logo = {
"point-160",
"point-168",
"point-136"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-44",
@ -856,7 +958,13 @@ var Logo = {
"point-176",
"point-160",
"point-168"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-45",
@ -870,7 +978,13 @@ var Logo = {
"point-180",
"point-168",
"point-176"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-46",
@ -884,7 +998,13 @@ var Logo = {
"point-184",
"point-168",
"point-180"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-47",
@ -898,7 +1018,13 @@ var Logo = {
"point-188",
"point-168",
"point-184"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-48",
@ -912,7 +1038,13 @@ var Logo = {
"point-192",
"point-188",
"point-184"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-49",
@ -926,7 +1058,13 @@ var Logo = {
"point-196",
"point-188",
"point-192"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-50",
@ -940,7 +1078,13 @@ var Logo = {
"point-200",
"point-196",
"point-188"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-51",
@ -954,7 +1098,13 @@ var Logo = {
"point-188",
"point-124",
"point-200"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-52",
@ -968,7 +1118,13 @@ var Logo = {
"point-188",
"point-124",
"point-128"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-53",
@ -982,7 +1138,13 @@ var Logo = {
"point-188",
"point-128",
"point-168"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-54",
@ -996,7 +1158,13 @@ var Logo = {
"point-216",
"point-200",
"point-124"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-55",
@ -1010,7 +1178,13 @@ var Logo = {
"point-216",
"point-116",
"point-124"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-56",
@ -1024,7 +1198,13 @@ var Logo = {
"point-112",
"point-216",
"point-116"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-57",
@ -1038,7 +1218,13 @@ var Logo = {
"point-228",
"point-216",
"point-112"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-58",
@ -1052,7 +1238,13 @@ var Logo = {
"point-232",
"point-112",
"point-96"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-59",
@ -1066,7 +1258,13 @@ var Logo = {
"point-108",
"point-96",
"point-232"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-60",
@ -1080,7 +1278,13 @@ var Logo = {
"point-228",
"point-112",
"point-232"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-61",
@ -1094,7 +1298,13 @@ var Logo = {
"point-244",
"point-216",
"point-200"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
},
{
"id": "poly-62",
@ -1108,7 +1318,13 @@ var Logo = {
"point-196",
"point-200",
"point-244"
]
],
"stroke": {
"h": 262.24719101123594,
"s": 60.544217687074834,
"l": 28.82352941176471,
"a": 1
}
}
]
};