Mercurial > code > home > repos > light9
annotate web/timeline2/index.html @ 2417:ae4b90efb55a
start calibration tool
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 20 May 2024 01:28:12 -0700 |
| parents | 4556eebe5d73 |
| children |
| rev | line source |
|---|---|
| 1701 | 1 <!DOCTYPE HTML> |
| 2 <html> | |
| 3 <head> | |
| 4 <title>pixi.js test</title> | |
| 5 <style> | |
| 6 body { | |
| 7 margin: 0; | |
| 8 padding: 0; | |
| 9 background-color: #000000; | |
| 10 } | |
| 11 | |
| 12 #help{ | |
| 13 position: absolute; | |
| 14 z-index: 20; | |
| 15 color: black; | |
| 16 top: 20px; | |
| 17 left: 120px; | |
| 18 } | |
| 19 </style> | |
| 20 | |
| 21 | |
| 22 | |
| 23 <script src="node_modules/pixi.js/dist/pixi.js"></script> | |
| 24 </head> | |
| 25 <body> | |
| 26 <script> | |
|
1901
7fe81130b735
move web logging to https://github.com/visionmedia/debug/ so it can have channels that can be turned off
Drew Perttula <drewp@bigasterisk.com>
parents:
1701
diff
changeset
|
27 const log = debug('timeline'); |
| 1701 | 28 var stage = new PIXI.Container(); |
| 29 | |
| 30 var renderer = PIXI.autoDetectRenderer(3000,2000, { | |
| 31 backgroundColor: 0x606060, | |
| 32 }); | |
| 33 | |
| 34 document.body.appendChild(renderer.view); | |
| 35 requestAnimFrame = window.requestAnimationFrame; | |
| 36 requestAnimFrame( animate ); | |
| 37 | |
| 38 if(1) { | |
| 39 var graphics = new PIXI.Graphics(); | |
| 40 | |
| 41 // set a fill and line style | |
| 42 graphics.beginFill(0xFF3300); | |
| 43 graphics.lineStyle(4, 0xffd900, 1); | |
| 44 graphics.blendMode = PIXI.BLEND_MODES.LUMINOSITY; | |
| 45 graphics.cursor = 'wait'; | |
| 46 | |
| 47 // draw a shape | |
| 48 graphics.moveTo(50,50); | |
| 49 graphics.lineTo(250, 50); | |
| 50 graphics.lineTo(100, 100); | |
| 51 graphics.lineTo(50, 50); | |
| 52 graphics.endFill(); | |
| 53 graphics.interactive = true; | |
| 54 graphics.on('click', (ev) => { | |
|
1901
7fe81130b735
move web logging to https://github.com/visionmedia/debug/ so it can have channels that can be turned off
Drew Perttula <drewp@bigasterisk.com>
parents:
1701
diff
changeset
|
55 log('hit', ev); |
| 1701 | 56 }); |
| 57 | |
| 58 stage.addChild(graphics); | |
| 59 } | |
| 60 | |
| 61 objs = []; | |
| 62 const mkdrag = (txt, pos) => { | |
| 63 var draggable = new PIXI.Container(); | |
| 64 | |
| 65 var graphics = new PIXI.Graphics(); | |
| 66 graphics.beginFill(0xeecc00, .6); | |
| 67 graphics.lineStyle(2, 0xffd900, 1); | |
| 68 graphics.drawRoundedRect(0,0,50,30,5); | |
| 69 graphics.endFill(); | |
| 70 | |
| 71 draggable.addChild(graphics); | |
| 72 | |
| 73 var style = new PIXI.TextStyle({ | |
| 74 fontFamily: 'Arial', | |
| 75 fontSize: 16, | |
| 76 fill: ['#000000'], | |
| 77 }); | |
| 78 var basicText = new PIXI.Text(txt, style); | |
| 79 basicText.x = 3; | |
| 80 basicText.y = 9; | |
| 81 basicText.scale = new PIXI.Point(.7,1); | |
| 82 draggable.addChild(basicText); | |
| 83 | |
| 84 draggable.interactive = true; | |
| 85 draggable.on('click', (ev) => { | |
| 86 console.log('d hit', ev); | |
| 87 }); | |
| 88 | |
| 89 draggable.position = pos; | |
| 90 | |
| 91 // console.log( draggable.toGlobal(new PIXI.Point(3, 3))); | |
| 92 return draggable; | |
| 93 }; | |
| 94 | |
| 95 for (let x=0; x<3000; x+=30) { | |
| 96 for(let i=0; i < 400; i+= 20) { | |
| 97 let d = mkdrag('o='+i, new PIXI.Point(i+x, i*2)) | |
| 98 stage.addChild(d); | |
| 99 objs.push(d); | |
| 100 } | |
| 101 } | |
| 102 | |
| 103 | |
| 104 var style = new PIXI.TextStyle({ | |
| 105 fontFamily: 'Arial', | |
| 106 fontSize: 36, | |
| 107 fill: ['#ffffff'], | |
| 108 stroke: '#4a1850', | |
| 109 strokeThickness: 2, | |
| 110 dropShadow: true, | |
| 111 dropShadowColor: '#000000', | |
| 112 dropShadowBlur: 1, | |
| 113 dropShadowAngle: Math.PI / 6, | |
| 114 dropShadowDistance: 6, | |
| 115 // wordWrap: true, | |
| 116 // wordWrapWidth: 440 | |
| 117 }); | |
| 118 var basicText = new PIXI.Text(`num objs = ${objs.length}`, style); | |
| 119 basicText.x = 30; | |
| 120 basicText.y = 90; | |
| 121 | |
| 122 stage.addChild(basicText); | |
| 123 | |
| 124 function animate() { | |
| 125 requestAnimFrame( animate ); | |
| 126 | |
| 127 for (let d of objs) { | |
| 128 d.rotation = Date.now() / 2000; | |
| 129 } | |
| 130 | |
| 131 renderer.render(stage); | |
| 132 } | |
| 133 renderer.render(stage); | |
| 134 | |
| 135 </script> | |
| 136 | |
| 137 </body> | |
| 138 </html> |