import { RequestAnimationFrame , PerspectiveProjection , CoordinateSystem , ColorUtils } from "@awayjs/core" ; import { DefaultRenderer } from "@awayjs/renderer" ; import { CapsStyle , JointStyle , Graphics , TextureAtlas , GradientFillStyle } from "@awayjs/graphics" ; import { MouseEvent , Sprite , Camera , Scene , MouseManager , SceneGraphPartition , DisplayObjectContainer } from "@awayjs/scene" ; import { View , PickGroup } from "@awayjs/view" ; import { MethodMaterial } from "@awayjs/materials" ; class Graphics_Drawing_Stars { private _scene : Scene ; private _view : View ; private _root : DisplayObjectContainer ; private _timer : RequestAnimationFrame ; private _projection : PerspectiveProjection ; private _camera_perspective : Camera ; 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 = 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_Stars . _colorMaterials [ texObj . bitmap . id ] ) { texObj . material = Graphics_Drawing_Stars . _colorMaterials [ texObj . bitmap . id ] ; return texObj ; } var newmat = new MethodMaterial ( texObj . bitmap ) ; newmat . alphaBlending = true ; newmat . useColorTransform = true ; newmat . bothSides = true ; Graphics_Drawing_Stars . _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_Stars . _textureMaterials [ lookupId ] ) { texObj . material = Graphics_Drawing_Stars . _textureMaterials [ lookupId ] ; return texObj ; } var newmat = new MethodMaterial ( texObj . bitmap ) ; newmat . useColorTransform = true ; newmat . alphaBlending = true ; newmat . bothSides = true ; Graphics_Drawing_Stars . _textureMaterials [ lookupId ] = newmat ; texObj . material = newmat ; return texObj ; } ; } /**
     * Initialise the scene objects
     */ private initObjects ( ) { var bgSprite = new Sprite ( null ) ; bgSprite . graphics . beginFill ( 0xdddddd , 1 ) ; bgSprite . graphics . drawRect ( 0 , 0 , window . innerWidth , window . innerHeight ) ; bgSprite . graphics . endFill ( ) ; this . _root . addChild ( bgSprite ) ; } private _star : Sprite ; private onMouseDown ( event ) { this . _star = new Sprite ( null ) ; this . _star . x = event . scenePosition . x ; this . _star . y = event . scenePosition . y ; this . draw_star ( this . _star , 10 ) ; this . _root . addChild ( this . _star ) ; } private onMouseUp ( event ) { this . _star = null ; } private onMouseMove ( event ) { if ( this . _star ) { var deltaX = event . scenePosition . x - this . _star . x ; var deltaY = event . scenePosition . y - this . _star . y ; var distance = Math . sqrt ( deltaX * deltaX + deltaY * deltaY ) ; if ( distance < 10 ) distance = 10 ; this . draw_star ( this . _star , distance ) ; } } private draw_star ( star , radiusOutter ) { var radiusInner = radiusOutter / 2 + Math . random ( ) * radiusOutter / 2 ; var spikes = 2 + Math . random ( ) * 100 ; var r = Math . random ( ) * 255 ; var g = Math . random ( ) * 255 ; var b = Math . random ( ) * 255 ; var fillColor = ColorUtils . ARGBtoFloat32 ( 255 , r , g , b ) ; var strokeColor = ColorUtils . ARGBtoFloat32 ( 255 , 255 - r , 255 - g , 255 - b ) ; var spikes = Math . round ( 2 + Math . random ( ) * 100 ) ; var thickness = 1 + Math . random ( ) * 3 ; var alpha = 0.5 + Math . random ( ) * 0.5 ; star . graphics . clear ( ) ; star . graphics . beginFill ( fillColor , alpha ) ; star . graphics . lineStyle ( thickness , strokeColor , alpha , false , null , CapsStyle . ROUND , JointStyle . MITER , 1.8 ) ; star . graphics . moveTo ( radiusOutter * Math . cos ( 0 ) , radiusOutter * Math . sin ( 0 ) ) ; var i = 0 ; var a = 0 ; var aDelta = ( 360 / spikes ) * 0.5 ; for ( i = 0 ; i < spikes ; i ++ ) { a += aDelta ; star . graphics . lineTo ( radiusInner * Math . cos ( a * ( Math . PI / 180 ) ) , radiusInner * Math . sin ( a * ( Math . PI / 180 ) ) ) ; a += aDelta ; star . graphics . lineTo ( radiusOutter * Math . cos ( a * ( Math . PI / 180 ) ) , radiusOutter * Math . sin ( a * ( Math . PI / 180 ) ) ) ; } star . graphics . endFill ( ) ; return star ; } private onKeyDown ( event ) { if ( event . key == "c" ) { this . _root . removeChildren ( 0 , this . _root . numChildren ) ; var bgSprite = new Sprite ( null ) ; bgSprite . graphics . beginFill ( 0xdddddd , 1 ) ; bgSprite . graphics . drawRect ( 0 , 0 , window . innerWidth , window . innerHeight ) ; bgSprite . graphics . endFill ( ) ; this . _root . addChild ( bgSprite ) ; } } /**
     * Initialise the listeners
     */ private initListeners ( ) { this . _root . addEventListener ( MouseEvent . MOUSE_DOWN , ( event ) => this . onMouseDown ( event ) ) ; this . _root . addEventListener ( MouseEvent . MOUSE_MOVE , ( event ) => this . onMouseMove ( event ) ) ; this . _root . addEventListener ( MouseEvent . MOUSE_UP , ( event ) => this . onMouseUp ( event ) ) ; this . _root . addEventListener ( MouseEvent . MOUSE_UP_OUTSIDE , ( event ) => this . onMouseUp ( event ) ) ; window . onresize = ( event ) => this . onResize ( event ) ; window . addEventListener ( "keydown" , ( event ) => this . onKeyDown ( event ) ) ; this . onResize ( ) ; this . _timer = new RequestAnimationFrame ( this . onEnterFrame , this ) ; this . _timer . start ( ) ; } /**
     * Render loop
     */ private onEnterFrame ( dt ) { 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_Stars ( ) ; } ;