<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < linkrel = " stylesheet" href = " css/style.css" > </ head> < body> < imgsrc = " img/unicorn.png" alt = " unicorn" id = " unicorn" hidden > < scriptsrc = " js/index.js" > </ script> </ body> </ html> var __extends = ( this && this . __extends) || ( function ( ) { var extendStatics = Object. setPrototypeOf || ( { __proto__ : [ ] } instanceof Array && function ( d, b ) { d. __proto__ = b; } ) || function ( d, b ) { for ( var p in b) if ( b. hasOwnProperty ( p) ) d[ p] = b[ p] ; } ; return function ( d, b ) { extendStatics ( d, b) ; function __ ( ) { this . constructor = d; } d. prototype = b === null ? Object. create ( b) : ( __ . prototype = b. prototype, new __ ( ) ) ; } ;
} ) ( ) ;
window. addEventListener ( 'DOMContentLoaded' , init) ;
var Vector = ( function ( ) { function Vector ( ) { this . x = 0 ; this . y = 0 ; this . vx = 0 ; this . vy = 0 ; this . angle = 0 ; this . va = 0.05 ; } return Vector;
} ( ) ) ;
var Particle = ( function ( _super ) { __extends ( Particle, _super) ; function Particle ( ) { var _this = _super !== null && _super . apply ( this , arguments) || this ; _this. id = Math. random ( ) . toString ( ) ; _this. color = randomColor ( ) ; _this. radius = 8 ; _this. opacity = 1 ; return _this; } return Particle;
} ( Vector) ) ;
var Unicorn = ( function ( _super ) { __extends ( Unicorn, _super) ; function Unicorn ( image ) { var _this = _super . call ( this ) || this ; _this. image = image; return _this; } return Unicorn;
} ( Vector) ) ;
var Tile = ( function ( _super ) { __extends ( Tile, _super) ; function Tile ( ) { var _this = _super !== null && _super . apply ( this , arguments) || this ; _this. color = randomColor ( ) ; _this. width = 30 ; _this. height = 10 ; _this. opacity = 1 ; return _this; } return Tile;
} ( Vector) ) ;
var ParticleFactory = ( function ( ) { function ParticleFactory ( ) { } ParticleFactory. archive = function ( p ) { ParticleFactory. particleArchive[ p. id] = Object. assign ( { } , p) ; } ; ParticleFactory. retrieve = function ( p ) { if ( p. id in ParticleFactory. particleArchive) { return ParticleFactory. particleArchive[ p. id] ; } return null ; } ; ParticleFactory. create = function ( options ) { var p = new Particle ( ) ; Object. assign ( p, options) ; ParticleFactory. archive ( p) ; return p; } ; ParticleFactory. reset = function ( p ) { var archivedVersion = ParticleFactory. retrieve ( p) ; if ( archivedVersion) { ; Object. assign ( p, archivedVersion) ; } } ; ParticleFactory. particleArchive = { } ; return ParticleFactory;
} ( ) ) ;
var Renderer = ( function ( ) { function Renderer ( $ ) { var _this = this ; this . $ = $; this . renderParticle = function ( p ) { var $ = _this. $; var x = p. x, y = p. y, radius = p. radius, color = p. color, opacity = p. opacity; $. save ( ) ; $. globalAlpha = opacity; $. fillStyle = color; $. translate ( x, y) ; $. beginPath ( ) ; $. arc ( 0 , 0 , radius, 0 , PI2 ) ; $. fill ( ) ; $. stroke ( ) ; $. restore ( ) ; } ; this . renderStar = function ( p ) { var $ = _this. $; var radius = p. radius, color = p. color, x = p. x, y = p. y, opacity = p. opacity; $. save ( ) ; $. translate ( x, y) ; $. fillStyle = color; $. globalAlpha = opacity; $. beginPath ( ) ; for ( var i = 5 ; i-- ; ) { $. lineTo ( 0 , radius) ; $. translate ( 0 , radius) ; $. rotate ( PI2 / 10 ) ; $. lineTo ( 0 , - radius) ; $. translate ( 0 , - radius) ; $. rotate ( - ( ( Math. PI * 6 ) / 10 ) ) ; } $. lineTo ( 0 , radius) ; $. fill ( ) ; $. stroke ( ) ; $. restore ( ) ; } ; this . renderTile = function ( t ) { var $ = _this. $; var x = t. x, y = t. y, width = t. width, height = t. height, color = t. color, opacity = t. opacity; $. save ( ) ; $. globalAlpha = opacity; $. fillStyle = color; $. translate ( x, y) ; $. beginPath ( ) ; $. rect ( 0 , 0 , width, height) ; $. fill ( ) ; $. stroke ( ) ; $. restore ( ) ; } ; } Renderer . prototype. clearScreen = function ( ) { var $ = this . $; $. clearRect ( 0 , 0 , $. canvas. width, $. canvas. height) ; } ; Renderer . prototype. renderImage = function ( img, x, y ) { var $ = this . $; $. save ( ) ; $. drawImage ( img, x, y) ; $. restore ( ) ; } ; Renderer . prototype. renderUnicorn = function ( u ) { this . renderImage ( u. image, u. x, u. y) ; } ; return Renderer;
} ( ) ) ;
var CANVAS = document. createElement ( 'canvas' ) ;
var CTX = CANVAS . getContext ( '2d' ) ;
var WIDTH = ( CANVAS . width = window. innerWidth) ;
var HEIGHT = ( CANVAS . height = window. innerHeight) ;
var PI2 = 2 * Math. PI ;
var GRAVITY = 0.125 ;
var COLOR_FADE = 0.01 ;
var COLORS = [ '#9400D3' , '#4B0082' , '#0000FF' , '#00FF00' , '#FFFF00' , '#FF7F00' , '#FF0000'
] ;
var RENDERER = new Renderer ( CTX ) ;
var TILES = [ ] ;
var PARTICLES = [ ] ;
var PARTICLE_COUNT = 40 ;
var UNICORN_IMAGE = document. getElementById ( 'unicorn' ) ;
var UNICORN = new Unicorn ( UNICORN_IMAGE ) ;
function randomColor ( ) { return sample ( COLORS ) ;
}
function randomNumber ( min, max ) { return Math. random ( ) * ( max - min) + min;
}
function randomBoolean ( ) { return Math. random ( ) > 0.5 ;
}
function sample ( a ) { return a[ Math. floor ( Math. random ( ) * a. length) ] ;
}
function outsideScreen ( p ) { var diameter = p. radius * 2 ; var yExceeded = p. y - diameter > HEIGHT || p. y + diameter < 0 ; var xExceeded = p. x - diameter > WIDTH || p. x + diameter < 0 ; return yExceeded || xExceeded;
}
function updateParticle ( p ) { p. vy += GRAVITY ; p. y += p. vy; p. x += p. vx; if ( p. opacity > COLOR_FADE ) { p. opacity -= COLOR_FADE ; } if ( outsideScreen ( p) ) { ParticleFactory. reset ( p) ; }
}
function updateUnicorn ( unicorn ) { var image = unicorn. image; var centerX = WIDTH / 2 - image. width / 2 ; var centerY = HEIGHT / 2 - image. height / 2 - 50 ; var radiusX = 20 ; var radiusY = 8 ; unicorn. x = centerX + Math. cos ( unicorn. angle) * radiusX; unicorn. y = centerY + Math. sin ( unicorn. angle) * radiusY; unicorn. angle += unicorn. va;
}
function animation ( ) { requestAnimationFrame ( animation) ; RENDERER . clearScreen ( ) ; TILES . forEach ( updateTile) ; TILES . forEach ( RENDERER . renderTile) ; PARTICLES . forEach ( updateParticle) ; PARTICLES . forEach ( RENDERER . renderStar) ; if ( UNICORN_IMAGE . complete) { updateUnicorn ( UNICORN ) ; RENDERER . renderUnicorn ( UNICORN ) ; }
}
function createParticles ( ) { for ( var i = PARTICLE_COUNT ; i > 0 ; -- i) { var p = ParticleFactory. create ( { x : WIDTH / 2 , y : HEIGHT / 2 , vx : randomNumber ( - 14 , - 3 ) , vy : randomNumber ( - 8 , 2 ) } ) ; var i_1 = Math. floor ( randomNumber ( 0 , 60 ) ) + 1 ; while ( i_1-- ) { updateParticle ( p) ; } PARTICLES . push ( p) ; }
}
function updateTile ( t ) { t. vx -= GRAVITY ; t. x += t. vx; t. y += t. vy; if ( t. x + t. width < 0 ) { t. x = randomNumber ( 0 , WIDTH ) + WIDTH ; t. vx = 0 ; }
}
function createTiles ( ) { var tileCount = HEIGHT / 10 ; for ( var i = tileCount; i > 0 ; -- i) { var tileWidth = randomNumber ( 60 , 120 ) ; var t = new Tile ( ) ; t. opacity = randomNumber ( 0.1 , 0.6 ) ; t. width = tileWidth; t. x = tileWidth * ( i - 1 ) ; t. y = t. height * ( i - 1 ) ; var ii = Math. floor ( randomNumber ( 0 , 260 ) ) + 1 ; while ( ii-- ) { updateTile ( t) ; } TILES . push ( t) ; }
}
function setup ( ) { document. body. appendChild ( CANVAS ) ; var unicornX = WIDTH / 2 - UNICORN . image. width / 2 ; var unicornY = HEIGHT / 2 - UNICORN . image. height / 2 ; UNICORN . x = unicornX; UNICORN . y = unicornY; createTiles ( ) ; createParticles ( ) ;
}
function init ( ) { setup ( ) ; animation ( ) ;
}
body { background : linear-gradient ( 180deg, #FF7F0022, white, #9400D322) ; box-sizing : border-box; margin : 0; overflow : hidden; text-align : center;
} .made-by { position : absolute; bottom : 16px; right : 16px; padding : 8px 16px; background : white; color : hotpink; font-family : monospace; font-size : 12px;
}
