Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
Merge branch 'master' of github.com:metafizzy/zdog
+48
-25
+13
js/cone.js
+13
js/cone.js
···
44
44
];
45
45
};
46
46
47
+
Cone.prototype.updateSortValue = function() {
48
+
// call super
49
+
Ellipse.prototype.updateSortValue.apply( this, arguments );
50
+
var apexNormal = new Vector();
51
+
apexNormal.set( this.renderOrigin )
52
+
.subtract( this.apex.renderOrigin );
53
+
var apexAngleZ = Math.atan2( apexNormal.z, apexNormal.y );
54
+
apexAngleZ = utils.modulo( apexAngleZ, TAU );
55
+
//center of cone is one third of its length.
56
+
var apexZ = this.length/3 * Math.sin(apexAngleZ);
57
+
this.sortValue -= apexZ;
58
+
};
59
+
47
60
Cone.prototype.render = function( ctx, renderer ) {
48
61
this.renderConeSurface( ctx, renderer );
49
62
Ellipse.prototype.render.apply( this, arguments );
-11
js/ellipse.js
-11
js/ellipse.js
···
58
58
}
59
59
};
60
60
61
-
Ellipse.prototype.updateSortValue = function() {
62
-
Shape.prototype.updateSortValue.apply( this, arguments );
63
-
if ( this.quarters != 4 ) {
64
-
return;
65
-
}
66
-
// ellipse is self closing, do not count last point twice
67
-
var length = this.pathCommands.length;
68
-
var lastPoint = this.pathCommands[ length - 1 ].endRenderPoint;
69
-
this.sortValue -= lastPoint.z / length;
70
-
};
71
-
72
61
return Ellipse;
73
62
74
63
}));
+10
js/hemisphere.js
+10
js/hemisphere.js
···
20
20
21
21
var TAU = utils.TAU;
22
22
23
+
Hemisphere.prototype.updateSortValue = function() {
24
+
// call super
25
+
Ellipse.prototype.updateSortValue.apply( this, arguments );
26
+
var contourAngleZ = Math.atan2( this.renderNormal.z, this.renderNormal.y );
27
+
contourAngleZ = utils.modulo( contourAngleZ, TAU );
28
+
//center of dome is half the radius.
29
+
var domeZ = this.diameter/2/2 * Math.sin(contourAngleZ);
30
+
this.sortValue -= domeZ;
31
+
};
32
+
23
33
Hemisphere.prototype.render = function( ctx, renderer ) {
24
34
this.renderDome( ctx, renderer );
25
35
// call super
-8
js/rounded-rect.js
-8
js/rounded-rect.js
···
72
72
this.path = path;
73
73
};
74
74
75
-
RoundedRect.prototype.updateSortValue = function() {
76
-
Shape.prototype.updateSortValue.apply( this, arguments );
77
-
// ellipse is self closing, do not count last point twice
78
-
var length = this.pathCommands.length;
79
-
var lastPoint = this.pathCommands[ length - 1 ].endRenderPoint;
80
-
this.sortValue -= lastPoint.z / length;
81
-
};
82
-
83
75
return RoundedRect;
84
76
85
77
}));
+16
-6
js/shape.js
+16
-6
js/shape.js
···
110
110
111
111
112
112
Shape.prototype.updateSortValue = function() {
113
+
// average sort all z points.
114
+
// ignore the final point if it is a closed shape.
115
+
var howManyPoints = this.pathCommands.length;
113
116
var sortValueTotal = 0;
114
-
this.pathCommands.forEach( function( command ) {
115
-
sortValueTotal += command.endRenderPoint.z;
116
-
});
117
-
// average sort value of all points
118
-
// def not geometrically correct, but works for me
119
-
this.sortValue = sortValueTotal / this.pathCommands.length;
117
+
var firstPoint = this.pathCommands[0].endRenderPoint;
118
+
var lastPoint = this.pathCommands[this.pathCommands.length-1].endRenderPoint;
119
+
if (howManyPoints > 2 &&
120
+
firstPoint.isSame(lastPoint)) {
121
+
howManyPoints -= 1; // closed shape; ignore final point.
122
+
}
123
+
124
+
for (var i = 0; i < howManyPoints; i++) {
125
+
sortValueTotal += this.pathCommands[i].endRenderPoint.z;
126
+
}
127
+
// average sort value of all points
128
+
// def not geometrically correct, but works for me
129
+
this.sortValue = sortValueTotal / howManyPoints;
120
130
};
121
131
122
132
// ----- render ----- //
+9
js/vector.js
+9
js/vector.js
···
75
75
vec[ propB ] = b*cos + a*sin;
76
76
}
77
77
78
+
Vector.prototype.isSame = function( pos ) {
79
+
if ( !pos ) {
80
+
return false;
81
+
}
82
+
return (this.x === pos.x &&
83
+
this.y === pos.y &&
84
+
this.z === pos.z);
85
+
};
86
+
78
87
Vector.prototype.add = function( pos ) {
79
88
if ( !pos ) {
80
89
return this;