import { RequestAnimationFrame , PerspectiveProjection , CoordinateSystem , Vector3D } from "@awayjs/core" ; import { DefaultRenderer } from "@awayjs/renderer" ; import { CapsStyle , JointStyle , Graphics , TextureAtlas , GradientFillStyle } from "@awayjs/graphics" ; import { Sprite , Camera , Scene , MouseManager , SceneGraphPartition , DisplayObjectContainer } from "@awayjs/scene" ; import { View , PickGroup } from "@awayjs/view" ; import { MethodMaterial } from "@awayjs/materials" ; class Graphics_Drawing_Tracer { private _scene : Scene ; private _view : View ; private _root : DisplayObjectContainer ; private _timer : RequestAnimationFrame ; private _projection : PerspectiveProjection ; private _camera_perspective : Camera ; private _shape : Sprite ; private _drawing_path : any [ ] [ ] ; 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 . _scene . mouseManager . eventBubbling = true ; this . _projection = new PerspectiveProjection ( ) ; this . _projection . coordinateSystem = CoordinateSystem . RIGHT_HANDED ; this . _projection . fieldOfView = Math . atan ( window . innerHeight / 1000 / 2 ) * 360 / Math . PI ; 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_Tracer . _colorMaterials [ texObj . bitmap . id ] ) { texObj . material = Graphics_Drawing_Tracer . _colorMaterials [ texObj . bitmap . id ] ; return texObj ; } var newmat = new MethodMaterial ( texObj . bitmap ) ; newmat . alphaBlending = true ; newmat . useColorTransform = true ; newmat . bothSides = true ; Graphics_Drawing_Tracer . _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_Tracer . _textureMaterials [ lookupId ] ) { texObj . material = Graphics_Drawing_Tracer . _textureMaterials [ lookupId ] ; return texObj ; } var newmat = new MethodMaterial ( texObj . bitmap ) ; newmat . useColorTransform = true ; newmat . alphaBlending = true ; newmat . bothSides = true ; Graphics_Drawing_Tracer . _textureMaterials [ lookupId ] = newmat ; texObj . material = newmat ; return texObj ; } ; } private _movingRect : Sprite ; /**
     * Initialise the scene objects
     */ private initObjects ( ) { this . _drawing_path = [ [ ] , [ ] , [ ] , [ ] ] ; this . _shape = new Sprite ( null ) ; this . _movingRect = new Sprite ( null ) ; this . _movingRect . x = window . innerWidth / 2 ; this . _movingRect . y = window . innerHeight / 2 ; var circle1 = new Sprite ( null ) ; circle1 . graphics . beginFill ( 0xdddddd , 1 ) ; circle1 . graphics . drawCircle ( 0 , 0 , 5 ) ; circle1 . graphics . endFill ( ) ; circle1 . x = - 50 ; circle1 . y = - 50 ; var circle2 = new Sprite ( null ) ; circle2 . graphics . beginFill ( 0xdddddd , 1 ) ; circle2 . graphics . drawCircle ( 0 , 0 , 5 ) ; circle2 . graphics . endFill ( ) ; circle2 . x = 50 ; circle2 . y = - 50 ; var circle3 = new Sprite ( null ) ; circle3 . graphics . beginFill ( 0xdddddd , 1 ) ; circle3 . graphics . drawCircle ( 0 , 0 , 5 ) ; circle3 . graphics . endFill ( ) ; circle3 . x = - 50 ; circle3 . y = 50 ; var circle4 = new Sprite ( null ) ; circle4 . graphics . beginFill ( 0xdddddd , 1 ) ; circle4 . graphics . drawCircle ( 0 , 0 , 5 ) ; circle4 . graphics . endFill ( ) ; circle4 . x = 50 ; circle4 . y = 50 ; this . _movingRect . addChild ( circle1 ) ; this . _movingRect . addChild ( circle2 ) ; this . _movingRect . addChild ( circle3 ) ; this . _movingRect . addChild ( circle4 ) ; this . _root . addChild ( this . _shape ) ; this . _root . addChild ( this . _movingRect ) ; } private draw_shape ( ) { var i = 1 ; var p = 1 ; for ( i = 0 ; i < 4 ; i ++ ) { var globalPos = this . _movingRect . getChildAt ( i ) . scenePosition ; this . _drawing_path [ i ] . push ( { x : globalPos . x , y : globalPos . y } ) ; if ( this . _drawing_path [ i ] . length > 500 ) { this . _drawing_path [ i ] . shift ( ) ; } } this . _shape . graphics . clear ( ) ; this . _shape . graphics . lineStyle ( 2 , 0x000000 , 1 , false , null , CapsStyle . ROUND , JointStyle . MITER , 1.8 ) ; if ( this . _drawing_path . length == 0 ) return ; var color = 0x000000 ; for ( p = 0 ; p < 4 ; p ++ ) { if ( this . _drawing_path [ p ] . length == 0 ) continue ; color = 0x000000 ; this . _shape . graphics . lineStyle ( 1 , color , 1 , false , null , CapsStyle . ROUND , JointStyle . MITER , 1.8 ) ; this . _shape . graphics . moveTo ( this . _drawing_path [ p ] [ 0 ] . x , this . _drawing_path [ p ] [ 0 ] . y ) ; for ( i = 1 ; i < this . _drawing_path [ p ] . length ; i ++ ) { if ( i > this . _drawing_path [ p ] . length * 0.9 ) { if ( color != 0xFFFFFF ) { color = 0xFFFFFF ; this . _shape . graphics . lineStyle ( 5 , color , 1 , false , null , CapsStyle . ROUND , JointStyle . MITER , 1.8 ) ; } } else if ( i > this . _drawing_path [ p ] . length * 0.5 ) { if ( color != 0xcccccc ) { color = 0xcccccc ; this . _shape . graphics . lineStyle ( 3 , color , 1 , false , null , CapsStyle . ROUND , JointStyle . MITER , 1.8 ) ; } } this . _shape . graphics . lineTo ( this . _drawing_path [ p ] [ i ] . x , this . _drawing_path [ p ] [ i ] . y ) ; } } this . _shape . graphics . endFill ( ) ; } /**
     * Initialise the listeners
     */ private initListeners ( ) { window . onresize = ( event ) => this . onResize ( event ) ; this . onResize ( ) ; this . _timer = new RequestAnimationFrame ( this . onEnterFrame , this ) ; this . _timer . start ( ) ; } private _dirVec : Vector3D = new Vector3D ( 0 , 0 , 0 ) ; private _rotation : number = 3 ; private _scale : number = 0 ; /**
     * Render loop
     */ private onEnterFrame ( dt ) { this . _rotation += 0.1 - Math . random ( ) * 0.2 ; this . _scale = 0.005 - Math . random ( ) * 0.01 ; this . _dirVec . x += 0.1 - Math . random ( ) * 0.2 ; this . _dirVec . y += 0.1 - Math . random ( ) * 0.2 ; if ( this . _movingRect . x <= ( - 71 * this . _movingRect . scaleX ) || this . _movingRect . x >= ( window . innerWidth + ( 71 * this . _movingRect . scaleX ) ) ) { this . _dirVec . x *= - 1 ; } if ( this . _movingRect . y <= ( - 71 * this . _movingRect . scaleX ) || this . _movingRect . y >= ( window . innerHeight + ( 71 * this . _movingRect . scaleX ) ) ) { this . _dirVec . y *= - 1 ; } this . _movingRect . x += this . _dirVec . x ; this . _movingRect . y += this . _dirVec . y ; this . _movingRect . rotationZ += this . _rotation ; this . _movingRect . scaleX += this . _scale ; this . _movingRect . scaleY += this . _scale ; this . draw_shape ( ) ; 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 ; this . _projection . fieldOfView = Math . atan ( window . innerHeight / 1000 / 2 ) * 360 / Math . PI ; } } window . onload = function ( ) { new Graphics_Drawing_Tracer ( ) ; } ;