diff options
author | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
---|---|---|
committer | Richard <q@1bpm.net> | 2025-04-13 18:48:02 +0100 |
commit | 9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22 (patch) | |
tree | 291bd79ce340e67affa755a8a6b4f6a83cce93ea /site/app/clipart/svgmess.js | |
download | apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.gz apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.tar.bz2 apps.csound.1bpm.net-9fbf91db06a6d4f4b5cd8bb45389a731bb86bf22.zip |
initial
Diffstat (limited to 'site/app/clipart/svgmess.js')
-rw-r--r-- | site/app/clipart/svgmess.js | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/site/app/clipart/svgmess.js b/site/app/clipart/svgmess.js new file mode 100644 index 0000000..261a21d --- /dev/null +++ b/site/app/clipart/svgmess.js @@ -0,0 +1,99 @@ +function randInt(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+
+var SVGMess = function(target) {
+ var self = this;
+ var url = "https://data.1bpm.net/clipart/"
+ var animateTimeout;
+ var items;
+ var maxPointVariation = 0;
+ var maxWidth = 0;
+ var maxHeight = 0;
+ window.image = SVG().addTo("#" + target);
+
+ function stdcolour(str) {
+ var c = $("<canvas />");
+ var ctx = c[0].getContext("2d");
+ ctx.fillStyle = str;
+ var fill = ctx.fillStyle;
+ c.remove();
+ return fill;
+ }
+
+
+ function getMaxVar(item) {
+ var itemArray = item.array();
+ var maxVar = 0;
+ var vari;
+ for (let a of itemArray) {
+ vari = Math.abs(a[1] - a[0]);
+ if (vari > maxVar) maxVar = vari;
+ }
+ return maxVar;
+ }
+
+ async function load() {
+ var item;
+ var pathPart = window.location.href.substr(window.location.href.lastIndexOf("/"));
+ if (pathPart.indexOf("?") != -1) {
+ item = pathPart.substr(pathPart.indexOf("?") + 1);
+ } else {
+ var req = await fetch(url + "collection1/list.json");
+ var list = await req.json();
+ item = list.files[Math.floor(Math.random() * (list.files.length - 1)) - 1];
+ window.history.pushState("Image", "Image", window.location.href + "?" + item);
+ }
+ var data = await fetch(url + "collection1/" + item);
+ var src = await data.text();
+ image.svg(src);
+ image.size(3000, 4000);
+ items = image.find("polygon");
+
+ var vari, bbox;
+ for (let i of items) {
+ vari = getMaxVar(i);
+ bbox = i.bbox();
+ if (vari > maxPointVariation) maxPointVariation = vari;
+ if (bbox.w > maxWidth) maxWidth = bbox.w;
+ if (bbox.h > maxHeight) maxHeight = bbox.h;
+ }
+
+ self.items = items;
+ }
+
+ function animate() {
+ var posXmax = 300;
+ var posYmax = 300;
+ var item = items[Math.floor(Math.random() * (items.length - 1))];
+ var variation = getMaxVar(item) / maxPointVariation;
+ var fill = stdcolour(item.css().fill);
+ var bbox = item.bbox();
+ var colourRatio = Number("0x" + fill.substr(1)) / 16777215;
+ var duration = randInt(20, 500);
+ var posX = randInt(0, posXmax);
+ var posY = randInt(0, posYmax);
+ item.animate(duration, 0, "now")
+ .move(posX, posY)
+ //.rotate(randInt(1, 360)); //scale(2);
+ var timeout = randInt(20, 500);
+ animateTimeout = setTimeout(animate, timeout);
+ var args = [
+ 0, duration / 1000,
+ bbox.x / posXmax, bbox.y / posYmax,
+ posX / posXmax, posY / posYmax,
+ colourRatio, variation,
+ bbox.w / maxWidth, bbox.h / maxHeight
+ ];
+ app.insertScore("playback", args);
+ }
+
+ this.run = function() {
+ animate();
+ };
+
+ load();
+};
|