We can draw a lot of graphics and even do many animation special effects through the HTML5 Canvas drawing board in the web page. You can find these animations in our HTML5 Canvas column. Today we bring you another aircraft flight route simulation animation based on HTML5 Canvas, which simulates the number of takeoffs and landings of many flights at different destinations.
Advertisement
$.util = {
rand: function( min, max ) {
return Math.random() * ( max - min ) + min;
},
randInt: function( min, max ) {
return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
},
norm: function( val, min, max ) {
return ( val - min ) / ( max - min );
},
lerp: function( norm, min, max ) {
return ( max - min ) * norm + min;
},
map: function( val, sMin, sMax, dMin, dMax ) {
return $.util.lerp( $.util.norm( val, sMin, sMax), dMin, dMax );
},
clamp: function( val, min, max ) {
return Math.min( Math.max( val, Math.min( min, max ) ), Math.max( min, max ) );
},
distance: function( p1, p2 ) {
var dx = p1.x - p2.x,
dy = p1.y - p2.y;
return Math.sqrt( dx * dx + dy * dy );
},
angle: function( p1, p2 ) {
return Math.atan2( p1.y - p2.y, p1.x - p2.x );
},
inRange: function( val, min, max ) {
return val >= Math.min( min, max ) && val <= Math.max( min, max );
},
pointInRect: function( x, y, rect ) {
return $.util.inRange( x, rect.x, rect.x + rect.width ) &&
$.util.inRange( y, rect.y, rect.y + rect.height );
},
pointInArc: function( p, a ) {
return distance( p, a ) <= a.radius;
},
setProps: function( obj, props ) {
for( var k in props ) {
obj[ k ] = props[ k ];
}
},
multicurve: function( points, ctx ) {
var p0, p1, midx, midy;
ctx.moveTo(points[0].x, points[0].y);
for(var i = 1; i < points.length - 2; i += 1) {
p0 = points[i];
p1 = points[i + 1];
midx = (p0.x + p1.x) / 2;
midy = (p0.y + p1.y) / 2;
ctx.quadraticCurveTo(p0.x, p0.y, midx, midy);
}
p0 = points[points.length - 2];
p1 = points[points.length - 1];
ctx.quadraticCurveTo(p0.x, p0.y, p1.x, p1.y);
}
};
*{margin:0;padding:0;}
canvas {
background:#111;
background-size:cover;
display:block;
}
body{overflow: hidden;}
Advertisement
