ÿþ<!DOCTYPE HTML> <html> <head> <title>SVG Chamber</title> <script> var svgns = 'http://www.w3.org/2000/svg'; var xlinkns = 'http://www.w3.org/1999/xlink'; var SD; var Root; var workH = 0 var D0 Pix = new Array(2, 4, 5, 9, 11, 17, 18, 24, 28, 29, 31, 33, 34, 35, 38, 41, 44, 45, 47, 52, 55, 56, 59, 61, 62, 71, 72, 73, 74, 75, 76, 77) Graphic_Elements = new Array('path', 'text', 'rect', 'circle', 'ellipse', 'line', 'image', 'use', 'polygon', 'polyline') filter = "none" function ready() { for (var i = 0; i < Graphic_Elements.length; i++) { document.f.G.options[i + 1] = new Option(Graphic_Elements[i], Graphic_Elements[i]); } for (var i = 0; i < filterPrimitives.length; i++) { document.f.FR.options[i + 1] = new Option(filterPrimitives[i][0], filterPrimitives[i][0]); } var offset = measure(document.getElementById("Table")) var S = document.getElementById("E") S.height = workH = height - offset S.width = rightedge S.top = 0 SD = S.getSVGDocument() Root = SD.documentElement makeCP() } function measure(O) { try { rightedge = document.body.clientWidth; height = document.body.clientHeight; Oheight = O.clientHeight } catch (e) { rightedge = window.innerWidth; height = window.innerHeight; Oheight = O.innerHeight } return Oheight } function change(evt) { var O = evt.target nodeN = O.nodeName var C = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"; if (nodeN == "text") { O.firstChild.nodeValue = C O.setAttributeNS(null, "stroke", C) } else if (nodeN == "image") { var r = Math.floor(Math.random() * Pix.length) var f = "../p" + Pix[r] + ".jpg" O.setAttributeNS(xlinkns, "xlink:href", f) } else O.setAttributeNS(null, "fill", C) } opa = 1 clip = false tran = false var Colors = new Array("red", "yellow", "orange", "green", "purple") var CPP = null function makeCP() { var CP = "M 170 140 A -35 30 0 1 1 170 141 M 208 128 A -75 7 0 1 1 208 129" var CP = "M 170 140 A -35 30 0 1 1 170 141 M 208 128 A -75 7 0 1 1 208 129 L300 300 400 400 100 400 100 395 395 300 z" var CP = "M 100 100 0 10 101 105 40 10 105 110 50 50 110 115 60 100 115 120 150 150 120 120 200 150 120 125 220 200 115 130 180 200 110 130 120 180 z" var CP = "M 100 100 0 10 101 105 40 10 105 110 50 50 110 115 60 100 115 120 150 150 120 120 200 150 120 125 220 200 115 130 180 200 110 130 120 180 400 200 300 100 405 200 330 110 410 205 380 110 420 210 440 120 420 215 500 215 420 220 500 230 420 230 500 300 420 235 440 500 415 235 380 450 410 225 z" var CPO = SD.createElementNS(svgns, "clipPath") CPO.setAttributeNS(null, "id", "CP") CPP = SD.createElementNS(svgns, "path") CPP.setAttributeNS(null, "id", "CPP") CPP.setAttributeNS(null, "d", CP) //CPP.setAttributeNS(null,"clip-rule","evenodd") //not sure this makes any difference CPO.appendChild(CPP) Root.appendChild(CPO) //Root.appendChild(CPP) //in case we want to see the path of our clip-path } filterPrimitives = new Array() filterPrimitives[0] = new Array("feGaussianBlur", "stdDeviation", 40) filterPrimitives[1] = new Array("feColorMatrix", "type", "matrix", "values", "-1 0 0 0 0 0 -1 0 0 0 0 0 -1 0 0 1 1 1 0 0") filterPrimitives[2] = new Array("feGaussianBlur", "stdDeviation", 5) filterPrimitives[3] = new Array("feTurbulence", "baseFrequency", .01, "numOctaves", 2, "type", "turbulence") filterPrimitives[4] = new Array("feDisplacementMap", "in", "SourceGraphic", "in2", "BackgroundImage", "scale", "16", "xChannelSelector", "R", "yChannelSelector", "B") filterPrimitives[5] = new Array("feImage") filterPrimitives[6] = new Array("none") var FPRIM = null function makeFilter(n) { TY = filterPrimitives[n] filter = TY[0] //alert(filter) var FIL = SD.createElementNS(svgns, "filter") FIL.setAttributeNS(null, "id", "tooi") FIL.setAttributeNS(null, "x", "0%") FIL.setAttributeNS(null, "y", "0%") FIL.setAttributeNS(null, "width", "180%") FIL.setAttributeNS(null, "height", "110%") FPRIM = SD.createElementNS(svgns, filter) for (i = 1; i < TY.length; i += 2) { FPRIM.setAttributeNS(null, TY[i], TY[i + 1]) } FIL.appendChild(FPRIM) if (filter == "feImage") { var r = Math.floor(Math.random() * Pix.length) var f = "../p" + Pix[r] + ".jpg" FPRIM.setAttributeNS(xlinkns, "xlink:href", f) F2 = SD.createElementNS(svgns, "feComposite") F2.setAttributeNS(null, "operator", "in") F2.setAttributeNS(null, "in2", "SourceGraphic") /* --- if we wish clips to be from different parts of a large image FPRIM.setAttributeNS(null,"width",rightedge) FPRIM.setAttributeNS(null,"height",workH) FPRIM.setAttributeNS(null,"x",0) FPRIM.setAttributeNS(null,"y",0) */ FIL.appendChild(F2) } Root.appendChild(FIL) var k = Root.getElementsByTagName("filter") } function erase() { //alert(Root.getChildNodes.length) try { suspendHandle = Root.suspendRedraw(1000000000000); } catch (e) { } for (i = Root.childNodes.length; i > 0; i--) { Root.removeChild(Root.childNodes.item(i - 1)) } try { Root.unsuspendRedraw(suspendHandle); } catch (e) { } makeCP() if (filter != "none") makeFilter(document.f.FR.selectedIndex - 1) } iterate = false countit = 0 D0 = 0 function build(nodeN, n) { try { suspendHandle = Root.suspendRedraw(1000000000000); } catch (e) { } timing = document.f.loop.value iters = parseInt(document.f.iters.value) countit = 1 if (iters > 1) iterate = true D0 = (new Date()).valueOf() dostuff(nodeN, n) try { Root.unsuspendRedraw(suspendHandle); } catch (e) { } } stopping = false function dostuff(nodeN, n) { stopping = false for (i = 0; i < n; i++) addNode(nodeN) if ((iterate) && (iters > countit++)) window.setTimeout("dostuff('" + nodeN + "'," + n + ")", timing) else stop(nodeN) } function stop(nodeN) { //addNode(nodeN) if (!stopping) { //one last iteration with no new drawing simply to make sure the rendering is complete stopping = true window.setTimeout("stop()", 10) } else { D1 = new Date().valueOf() dif = ((D1 - D0) / 1000).toString().substring(0, 6) document.getElementById("time").value = dif } } function addNode(nodeN) { var I = SD.createElementNS(svgns, nodeN) I.setAttributeNS(null, "stroke-width", 2) var r = Math.floor(Math.random() * Pix.length) var f = "../p" + Pix[r] + ".jpg" x1 = Math.ceil(Math.random() * (rightedge)) x2 = Math.ceil(Math.random() * (rightedge)) y1 = Math.ceil(Math.random() * (workH)) y2 = Math.ceil(Math.random() * (workH)) I.setAttributeNS(null, "id", "TU") I.setAttributeNS(null, "x", x1) I.setAttributeNS(null, "y", y1) I.setAttributeNS(null, "stroke-width", 2) r = Math.floor(Math.random() * Colors.length) var S = Colors[r] I.setAttributeNS(null, "stroke", S) I.setAttributeNS(null, "opacity", opa) var C = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ")"; I.setAttributeNS(null, "fill", C) I.setAttributeNS(null, "onclick", "top.change(evt)") if (nodeN == "text") { I.appendChild(SD.createTextNode(C)) I.setAttributeNS(null, "font-size", 32) } else if (nodeN == "line") { I.setAttributeNS(null, "x1", x1) I.setAttributeNS(null, "x2", x2) I.setAttributeNS(null, "y1", y1) I.setAttributeNS(null, "y2", y2) } else if (nodeN == "path") { I.setAttributeNS(null, "d", "M " + x1 + " " + y1 + " L " + x2 + " " + y1 + " " + x2 + " " + y2 + " z") } else if ((nodeN == "polygon") || (nodeN == "polyline")) { var route = "100 100 0 10 101 105 40 10 105 110 50 50 110 115 60 100 115 120 150 150 120 120 200 150 120 125 220 200 115 130 180 200 110 130 120 180 400 200 300 100 405 200 330 110 410 205 380 110 420 210 440 120 420 215 500 215 420 220 500 230 420 230 500 300 420 235 440 500 415 235 380 450 410 225" I.setAttributeNS(null, "points", route) } else if ((nodeN == "circle") || (nodeN == "ellipse")) { I.setAttributeNS(null, "cx", x2) I.setAttributeNS(null, "cy", y1) I.setAttributeNS(null, "r", 40) I.setAttributeNS(null, "rx", 20) I.setAttributeNS(null, "ry", 40) } else if (nodeN == "use") { I.setAttributeNS(xlinkns, "xlink:href", "#CPP") I.setAttributeNS(null, "fill", C) Root.appendChild(I) } else if ((nodeN == "rect") || (nodeN == "image")) { I.setAttributeNS(null, "height", 100) I.setAttributeNS(null, "width", 100) y1 = Math.ceil(Math.random() * (workH - 100)) I.setAttributeNS(null, "y", y1) x1 = Math.ceil(Math.random() * (rightedge - 100)) I.setAttributeNS(null, "x", x1) } if (nodeN == "image") I.setAttributeNS(xlinkns, "xlink:href", f) if (tran) { x3 = Math.ceil(Math.random() * (rightedge / 2 - 300)) y3 = Math.ceil(Math.random() * (workH / 2 - 250)) I.setAttributeNS(null, "transform", "translate(" + x3 + "," + y3 + ")") } if (clip) { I.setAttributeNS(null, "clip-path", "url(#CP)") } if (filter != "none") { var k = Root.getElementsByTagName("filter") I.setAttributeNS(null, "filter", "url(#tooi)") } Root.appendChild(I) } time = 100 </script> <style type="text/css"> body { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } </style> </head> <body onload="ready()"> <!-- <div id="status" style="position: relative">--> <form name="f"> <table id="Table" cellspacing="2" cellpadding="2" border="1"> <tr> <td> time<input id="time" size="9" value="0"><br> loop<input name="loop" size="5" value="10"> </td> <td align="right"> opaque<input type="radio" onclick="opa=1.0" checked name="r"><br> clear<input type="radio" onclick="opa=0.75" name="r"><br> </td> <td align="right"> clip<input type="radio" onclick="clip=true" name="clp"><br> noclip<input type="radio" onclick="clip=false" checked name="clp"><br> </td> <td align="right"> translate<input type="radio" onclick="tran=true" name="trn"><br> notran<input type="radio" onclick="tran=false" checked name="trn"><br> </td> <td colspan="2" align="center"> <select id="G" name="G" onchange="build(G.value,s.value)"> <option>--node type--</option> </select><br> <select id="FR" name="FR" onchange="makeFilter(this.selectedIndex-1)"> <option>--filter--</option> </select> </td> <td align="center"> #objects<hr> <select name="s" onchange="build(G.value,s.value)"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> <option value="25">25</option> <option value="40">40</option> <option value="50">50</option> <option value="75">75</option> <option value="100">100</option> <option value="110">110</option> <option value="200">200</option> <option value="200">250</option> <option value="210">210</option> <option value="310">310</option> <option value="410">410</option> <option value="500">500</option> <option value="510">510</option> <option value="1000">1000</option> <option value="10000">10000</option> </select> </td> <td align="center"> iters<hr> <select name="iters" onchange="build(G.value,s.value)"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> <option value="25">25</option> <option value="40">40</option> <option value="50">50</option> <option value="75">75</option> <option value="100">100</option> <option value="110">110</option> <option value="200">200</option> <option value="200">250</option> <option value="210">210</option> <option value="310">310</option> <option value="410">410</option> <option value="500">500</option> <option value="510">510</option> <option value="1000">1000</option> <option value="10000">10000</option> </select> </td> <td align="center"> <input type="button" onclick="erase();build(G.value,s.value)" value="redo"> <br> <input type="button" id="clear" value="clear" onclick="erase()"> </td> </tr> </table> <embed id="E" src="empty.svg" width="800px" height="600px"></form> <!-- </div> --></body> </html>