Created
February 27, 2019 18:49
-
-
Save acidsound/983af35272e75a6cb1602226bfa5bfc7 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/momiwa
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.min.js"></script> | |
| <style id="jsbin-css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| var animate, count, evt, graphics, onClick, renderer, stage, _i, _len, _ref; | |
| onClick = function(e) { | |
| return console.log(e); | |
| }; | |
| animate = function() { | |
| thing.clear(); | |
| count += 0.1; | |
| thing.lineStyle(10, 0xff0000, 1); | |
| thing.beginFill(0xffFF00, 0.5); | |
| thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); | |
| thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20); | |
| thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20); | |
| thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20); | |
| thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); | |
| thing.rotation = count * 0.1; | |
| renderer.render(stage); | |
| return requestAnimationFrame(animate); | |
| }; | |
| window.onresize = function(event) { | |
| var h, w; | |
| w = window.innerWidth; | |
| h = window.innerHeight; | |
| renderer.view.style.width = w + 'px'; | |
| renderer.view.style.height = h + 'px'; | |
| return renderer.resize(w, h); | |
| }; | |
| renderer = PIXI.autoDetectRenderer(800, 600, { | |
| antialias: false | |
| }); | |
| document.body.appendChild(renderer.view); | |
| window.onresize(this); | |
| stage = new PIXI.Container; | |
| stage.interactive = true; | |
| graphics = new PIXI.Graphics; | |
| graphics.beginFill(0xFF3300); | |
| graphics.lineStyle(10, 0xffd900, 1); | |
| graphics.moveTo(100, 100); | |
| graphics.lineTo(100, 200); | |
| graphics.lineTo(600, 200); | |
| stage.addChild(graphics); | |
| this.thing = new PIXI.Graphics; | |
| stage.addChild(thing); | |
| thing.position.x = 620 / 2; | |
| thing.position.y = 380 / 2; | |
| count = 0; | |
| _ref = ['click', 'tap']; | |
| for (_i = 0, _len = _ref.length; _i < _len; _i++) { | |
| evt = _ref[_i]; | |
| stage.on(evt, onClick); | |
| } | |
| animate(); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body { | |
| margin: 0; | |
| padding: 0; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">onClick= (e)-> | |
| console.log e | |
| # loop for the animation | |
| animate = -> | |
| thing.clear() | |
| count += 0.1 | |
| thing.lineStyle 10, 0xff0000, 1 | |
| thing.beginFill 0xffFF00, 0.5 | |
| thing.moveTo -120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20 | |
| thing.lineTo 120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20 | |
| thing.lineTo 120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20 | |
| thing.lineTo -120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20 | |
| thing.lineTo -120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20 | |
| thing.rotation = count * 0.1 | |
| renderer.render stage | |
| requestAnimationFrame animate | |
| window.onresize = (event) -> | |
| w = window.innerWidth | |
| h = window.innerHeight | |
| #this part resizes the canvas but keeps ratio the same | |
| renderer.view.style.width = w + 'px' | |
| renderer.view.style.height = h + 'px' | |
| #this part adjusts the ratio: | |
| renderer.resize w, h | |
| renderer = PIXI.autoDetectRenderer 800, 600, antialias: false | |
| document.body.appendChild renderer.view | |
| window.onresize @ | |
| # create the root of the scene graph | |
| stage = new (PIXI.Container) | |
| stage.interactive = true | |
| graphics = new (PIXI.Graphics) | |
| # set a fill and line style | |
| graphics.beginFill 0xFF3300 | |
| graphics.lineStyle 10, 0xffd900, 1 | |
| graphics.moveTo 100,100 | |
| graphics.lineTo 100,200 | |
| graphics.lineTo 600,200 | |
| stage.addChild graphics | |
| # let's create a moving shape | |
| @thing = new (PIXI.Graphics) | |
| stage.addChild thing | |
| thing.position.x = 620 / 2 | |
| thing.position.y = 380 / 2 | |
| count = 0 | |
| stage.on evt, onClick for evt in ['click', 'tap'] | |
| # run the render loop | |
| animate()</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0; | |
| padding: 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var animate, count, evt, graphics, onClick, renderer, stage, _i, _len, _ref; | |
| onClick = function(e) { | |
| return console.log(e); | |
| }; | |
| animate = function() { | |
| thing.clear(); | |
| count += 0.1; | |
| thing.lineStyle(10, 0xff0000, 1); | |
| thing.beginFill(0xffFF00, 0.5); | |
| thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); | |
| thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20); | |
| thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20); | |
| thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20); | |
| thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20); | |
| thing.rotation = count * 0.1; | |
| renderer.render(stage); | |
| return requestAnimationFrame(animate); | |
| }; | |
| window.onresize = function(event) { | |
| var h, w; | |
| w = window.innerWidth; | |
| h = window.innerHeight; | |
| renderer.view.style.width = w + 'px'; | |
| renderer.view.style.height = h + 'px'; | |
| return renderer.resize(w, h); | |
| }; | |
| renderer = PIXI.autoDetectRenderer(800, 600, { | |
| antialias: false | |
| }); | |
| document.body.appendChild(renderer.view); | |
| window.onresize(this); | |
| stage = new PIXI.Container; | |
| stage.interactive = true; | |
| graphics = new PIXI.Graphics; | |
| graphics.beginFill(0xFF3300); | |
| graphics.lineStyle(10, 0xffd900, 1); | |
| graphics.moveTo(100, 100); | |
| graphics.lineTo(100, 200); | |
| graphics.lineTo(600, 200); | |
| stage.addChild(graphics); | |
| this.thing = new PIXI.Graphics; | |
| stage.addChild(thing); | |
| thing.position.x = 620 / 2; | |
| thing.position.y = 380 / 2; | |
| count = 0; | |
| _ref = ['click', 'tap']; | |
| for (_i = 0, _len = _ref.length; _i < _len; _i++) { | |
| evt = _ref[_i]; | |
| stage.on(evt, onClick); | |
| } | |
| animate(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment