import { RequestAnimationFrame , ColorTransform , PerspectiveProjection , CoordinateSystem , Box , Vector3D } from "@awayjs/core" ; import { DefaultRenderer } from "@awayjs/renderer" ; import { CapsStyle , JointStyle , Graphics , TextureAtlas , GradientFillStyle } from "@awayjs/graphics" ; import { Sprite , Camera , Scene , AlignmentMode , SceneGraphPartition , DisplayObjectContainer } from "@awayjs/scene" ; import { View , PickGroup } from "@awayjs/view" ; import { MethodMaterial } from "@awayjs/materials" ; class Graphics_Drawing { private _scene : Scene ; private _view : View ; private _root : DisplayObjectContainer ; private _timer : RequestAnimationFrame ; private _projection : PerspectiveProjection ; private _camera_perspective : Camera ; private batmanLogo : Sprite ; private circle : Sprite ; private _animSprites : Sprite [ ] = [ ] ; private _animSpeeds : number [ ] = [ ] ; private static _colorMaterials : Object = { } ; private static _textureMaterials : Object = { } ; /**
     * Constructor
     */ constructor ( ) { this . init ( ) ; } /**
     * Global initialise function
     */ private init ( ) { this . initEngine ( ) ; this . initMaterials ( ) ; this . initObjects ( ) ; this . initListeners ( ) ; } /**
     * Initialise the engine
     */ private initEngine ( ) { this . _root = new DisplayObjectContainer ( ) ; this . _scene = new Scene ( new SceneGraphPartition ( this . _root ) ) ; this . _scene . renderer . renderableSorter = null ; this . _view = this . _scene . view ; this . _view . backgroundColor = 0x777777 ; this . _projection = new PerspectiveProjection ( ) ; this . _projection . coordinateSystem = CoordinateSystem . RIGHT_HANDED ; this . _projection . fieldOfView = 30 ; this . _projection . originX = - 1 ; this . _projection . originY = 1 ; this . _camera_perspective = new Camera ( ) ; this . _camera_perspective . projection = this . _projection ; this . _scene . camera = this . _camera_perspective ; } /**
 * Initialise the engine
 */ private initMaterials ( ) { Graphics . get_material_for_color = function ( color , alpha = 1 ) : any { if ( color == 0 ) { color = 0x000001 ; } var texObj = TextureAtlas . getTextureForColor ( color , alpha ) ; if ( Graphics_Drawing . _colorMaterials [ texObj . bitmap . id ] ) { texObj . material = Graphics_Drawing . _colorMaterials [ texObj . bitmap . id ] ; return texObj ; } var newmat = new MethodMaterial ( texObj . bitmap ) ; newmat . alphaBlending = true ; newmat . useColorTransform = true ; newmat . bothSides = true ; Graphics_Drawing . _colorMaterials [ texObj . bitmap . id ] = newmat ; texObj . material = newmat ; return texObj ; } ; Graphics . get_material_for_gradient = function ( gradient ) : any { var texObj = TextureAtlas . getTextureForGradient ( gradient ) ; var lookupId = texObj . bitmap . id + gradient . type ; if ( Graphics_Drawing . _textureMaterials [ lookupId ] ) { texObj . material = Graphics_Drawing . _textureMaterials [ lookupId ] ; return texObj ; } var newmat = new MethodMaterial ( texObj . bitmap ) ; newmat . useColorTransform = true ; newmat . alphaBlending = true ; newmat . bothSides = true ; Graphics_Drawing . _textureMaterials [ lookupId ] = newmat ; texObj . material = newmat ; return texObj ; } ; } /**
     * Initialise the scene objects
     */ private initObjects ( ) { this . batmanLogo = new Sprite ( null ) ; this . batmanLogo . graphics . beginFill ( 0xFFFFFF , 1 ) ; this . batmanLogo . graphics . lineStyle ( 5 , 0xFF0000 , 1 , false , null , CapsStyle . ROUND , JointStyle . MITER , 1.8 ) ; this . batmanLogo . graphics . moveTo ( 50 , 50 ) ; this . batmanLogo . graphics . lineTo ( 50 , 50 ) ; this . batmanLogo . graphics . lineTo ( 50 , 50 ) ; this . batmanLogo . graphics . lineTo ( 290 , 50 ) ; this . batmanLogo . graphics . curveTo ( 290 , 150 , 450 , 150 ) ; this . batmanLogo . graphics . lineTo ( 460 , 60 ) ; this . batmanLogo . graphics . lineTo ( 470 , 100 ) ; this . batmanLogo . graphics . lineTo ( 530 , 100 ) ; this . batmanLogo . graphics . lineTo ( 540 , 60 ) ; this . batmanLogo . graphics . lineTo ( 550 , 150 ) ; this . batmanLogo . graphics . curveTo ( 710 , 150 , 710 , 50 ) ; this . batmanLogo . graphics . lineTo ( 950 , 50 ) ; this . batmanLogo . graphics . curveTo ( 800 , 120 , 825 , 250 ) ; this . batmanLogo . graphics . curveTo ( 630 , 280 , 500 , 450 ) ; this . batmanLogo . graphics . curveTo ( 370 , 280 , 175 , 250 ) ; this . batmanLogo . graphics . endFill ( ) ; var boxBounds = PickGroup . getInstance ( this . _view ) . getAbstraction ( this . batmanLogo ) . getBoxBounds ( null , false , true ) ; this . batmanLogo . registrationPoint = new Vector3D ( boxBounds . width / 2 , boxBounds . height / 2 ) ; this . circle = new Sprite ( null ) ; this . circle . graphics . beginFill ( 0x000000 , 1 ) ; this . circle . graphics . drawCircle ( 0 , 0 , 100 ) ; this . circle . graphics . endFill ( ) ; var numSpritesV = 5 ; var numSpritesH = 5 ; for ( var i = 0 ; i < numSpritesV ; i ++ ) { for ( var j = 0 ; j < numSpritesH ; j ++ ) { var container = new Sprite ( null ) ; var mask = this . circle . clone ( ) ; var sprite = this . batmanLogo . clone ( ) ; container . transform . moveTo ( i * 50 , j * 25 , 0 ) ; container . transform . scaleTo ( 0.1 , 0.1 , 0.1 ) ; sprite . transform . colorTransform = new ColorTransform ( i / numSpritesV , 1 - i / numSpritesV , 1 - j / numSpritesV , 1 ) ; this . _animSprites . push ( sprite ) ; this . _animSpeeds . push ( 0 ) ; sprite . masks = [ mask ] ; container . addChild ( sprite ) ; container . addChild ( mask ) ; this . _root . addChild ( container ) ; } } } /**
     * Initialise the listeners
     */ private initListeners ( ) { window . onresize = ( event ) => this . onResize ( event ) ; this . onResize ( ) ; this . _timer = new RequestAnimationFrame ( this . onEnterFrame , this ) ; this . _timer . start ( ) ; } /**
     * Render loop
     */ private onEnterFrame ( dt ) { var len = this . _animSprites . length ; for ( var i = 0 ; i < len ; i ++ ) { var sprite = this . _animSprites [ i ] ; sprite . rotationZ += this . _animSpeeds [ i ] ; this . _animSpeeds [ i ] += ( 1 - 2 * Math . random ( ) ) ; this . _animSpeeds [ i ] *= 0.98 ; } this . _scene . render ( ) ; } private onResize ( event = null ) { this . _view . y = 0 ; this . _view . x = 0 ; this . _view . width = window . innerWidth ; this . _view . height = window . innerHeight ; } } window . onload = function ( ) { new Graphics_Drawing ( ) ; } ;