| 16 | 16 |
</div>
|
| 17 | 17 |
|
| 18 | 18 |
<!-- to run this offline, download this file and change this URL to point to your local copy of pixi.min.js -->
|
| 19 | |
<!-- <script src="https://catseye.tc/contrib/pixi.js-v4.8.5/pixi.min.js"></script> -->
|
| 20 | |
<script src="pixi.min.js"></script>
|
|
19 |
<script src="https://catseye.tc/contrib/pixi.js-v4.8.5/pixi.min.js"></script>
|
| 21 | 20 |
<script src="../src/chzrxl.js"></script>
|
| 22 | 21 |
<script>
|
|
22 |
|
|
23 |
// hslToRgb function adapted from https://gist.github.com/vahidk/05184faf3d92a0aa1b46aeaa93b07786
|
|
24 |
function hslToRgb(h, s, l) {
|
|
25 |
let c = (1 - Math.abs(2 * l - 1)) * s;
|
|
26 |
let hp = h / 60.0;
|
|
27 |
let x = c * (1 - Math.abs((hp % 2) - 1));
|
|
28 |
let rgb1;
|
|
29 |
if (isNaN(h)) rgb1 = [0, 0, 0];
|
|
30 |
else if (hp <= 1) rgb1 = [c, x, 0];
|
|
31 |
else if (hp <= 2) rgb1 = [x, c, 0];
|
|
32 |
else if (hp <= 3) rgb1 = [0, c, x];
|
|
33 |
else if (hp <= 4) rgb1 = [0, x, c];
|
|
34 |
else if (hp <= 5) rgb1 = [x, 0, c];
|
|
35 |
else if (hp <= 6) rgb1 = [c, 0, x];
|
|
36 |
let m = l - c * 0.5;
|
|
37 |
return (
|
|
38 |
(Math.round(255 * (rgb1[0] + m)) << 16) |
|
|
39 |
(Math.round(255 * (rgb1[1] + m)) << 8) |
|
|
40 |
(Math.round(255 * (rgb1[2] + m)))
|
|
41 |
);
|
|
42 |
}
|
|
43 |
|
| 23 | 44 |
function launch(config) {
|
| 24 | 45 |
var app = new PIXI.Application({
|
| 25 | 46 |
width: config.width,
|
|
| 33 | 54 |
width: config.width,
|
| 34 | 55 |
height: config.height,
|
| 35 | 56 |
onInitBlob: function(blob) {
|
|
57 |
var colour = hslToRgb(Math.floor(Math.random() * 360), 0.1, 0.5);
|
|
58 |
// or, for a red-purplish gradient: var colour = 0xff0000 + blob.index;
|
|
59 |
var radius = Math.floor(Math.random() * 10) + 5;
|
|
60 |
|
| 36 | 61 |
var graphics = new PIXI.Graphics();
|
| 37 | 62 |
graphics.lineStyle(0);
|
| 38 | |
//var style = "hsl(" + Math.floor(Math.random() * 256) + ",10%,50%)";
|
| 39 | |
graphics.beginFill(0xff0000 + blob.index);
|
| 40 | |
graphics.drawCircle(0, 0, blob.radius);
|
|
63 |
graphics.beginFill(colour);
|
|
64 |
graphics.drawCircle(0, 0, radius);
|
| 41 | 65 |
graphics.endFill();
|
| 42 | 66 |
app.stage.addChild(graphics);
|
| 43 | 67 |
blob.graphics = graphics;
|
|
| 53 | 77 |
}
|
| 54 | 78 |
|
| 55 | 79 |
launch({
|
| 56 | |
width: 800,
|
| 57 | |
height: 600,
|
|
80 |
width: 500,
|
|
81 |
height: 500,
|
| 58 | 82 |
container: document.getElementById('container')
|
| 59 | 83 |
});
|
| 60 | 84 |
</script>
|