Mercurial > code > home > repos > light9

comparison web/timeline2/index.html @ 2376:4556eebe5d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
author drewp@bigasterisk.com
date Sun, 12 May 2024 19:02:10 -0700
parents light9/web/timeline2/index.html@7fe81130b735
children
comparison
equal deleted inserted replaced
2375:623836db99af 2376:4556eebe5d73
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>
27 const log = debug('timeline');
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) => {
55 log('hit', ev);
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>