diff options
Diffstat (limited to 'site/app/clipart')
| -rw-r--r-- | site/app/clipart/clipart.csd | 63 | ||||
| -rw-r--r-- | site/app/clipart/index.html | 46 | ||||
| -rw-r--r-- | site/app/clipart/svgmess.js | 99 |
3 files changed, 208 insertions, 0 deletions
diff --git a/site/app/clipart/clipart.csd b/site/app/clipart/clipart.csd new file mode 100644 index 0000000..570329a --- /dev/null +++ b/site/app/clipart/clipart.csd @@ -0,0 +1,63 @@ +<CsoundSynthesizer>
+<CsOptions>
+-odac
+</CsOptions>
+<CsInstruments>
+ksmps = 64
+nchnls = 2
+0dbfs = 1
+seed 0
+
+#include "wavetables.udo"
+
+opcode oscbank, a, kkkkiiiiio
+ kfreq, kamp, kfreqstepmult, kampstepmult, ibands, iwidthamp, icentreamp, ihalfing, imaxrandrate, iband xin
+
+ aosc oscil kamp, min:k(kfreq, sr / 2)
+ aosc pdhalfy aosc, ihalfing
+ kwidth = abs:k(oscil:k(iwidthamp, random(0.1, imaxrandrate), gifnSine, random(0, 1)))
+ kcentre = abs:k(oscil:k(icentreamp, random(0.1, imaxrandrate), gifnSine, random(0, 1)))
+ aosc pdclip aosc, kwidth, kcentre
+
+ if (iband < ibands) then
+ arecurse oscbank kfreq * kfreqstepmult, kamp * kampstepmult, kfreqstepmult, kampstepmult, ibands, iwidthamp, icentreamp, ihalfing, imaxrandrate, iband + 1
+ aosc += arecurse
+ endif
+ xout aosc
+endop
+
+
+instr playback
+ ixstart = p4
+ iystart = p5
+ ixend = p6
+ iyend = p7
+ icolour = p8
+ ivariation = p9
+ iwidth = p10
+ iheight = p11
+
+ istartfreq = (ixstart * 100) + 20
+ iendfreq = (ixend * 100) + 20
+ kfreq linseg istartfreq, p3, iendfreq
+
+ istartfstep = iystart + 1.3
+ iendfstep = iyend + 1.3
+ kfreqstepmult linseg istartfstep, p3, iendfstep
+
+ aamp linseg 0, p3 * 0.05, 1, p3 * 0.9, 1, p3 * 0.05, 0
+ ioscillators = max(1, int(100 / active:i("playback")))
+
+ aout oscbank kfreq, 0.1, kfreqstepmult, random(0.9, 0.99), ioscillators, iwidth, iheight, icolour, ivariation * 2
+ aout *= aamp * 0.5
+ kpan linseg iystart, p3, iyend
+ aL, aR pan2 aout, kpan
+
+ outs aL, aR
+endin
+
+</CsInstruments>
+<CsScore>
+f0 36000
+</CsScore>
+</CsoundSynthesizer>
\ No newline at end of file diff --git a/site/app/clipart/index.html b/site/app/clipart/index.html new file mode 100644 index 0000000..95db367 --- /dev/null +++ b/site/app/clipart/index.html @@ -0,0 +1,46 @@ +<html> + <head> + <style type="text/css"> + #start { + position: absolute; + left: 0px; + top: 0px; + height: 100%; + width: 100%; + background-color: #ffffff; + text-align: center; + cursor: pointer; + } + </style> + <script type="text/javascript" src="/code/jquery.js"></script> + <script type="text/javascript" src="/app/base/base.js"></script> + <script type="text/javascript" src="/code/svg.js"></script> + <script type="text/javascript" src="svgmess.js"></script> + <script type="text/javascript"> + $(function() { + window.svgmess = new SVGMess("svgimage"); + + window.app = new CSApplication({ + csdUrl: "clipart.csd", + onPlay: function () { + $("#start").hide(); + svgmess.run(); + }, + }); + + $("#start").click(function() { + $("#status").text("Loading..."); + app.play(); + }); + + }); + </script> + </head> + + <body> + <div id="start"> + <h1 id="status">Press to begin</h1> + </div> + <div id="svgimage"></div> + </body> +</html> 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();
+};
|