2010-12-13 10:15:53 +00:00
|
|
|
<?xml version="1.0" standalone="no"?>
|
|
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
|
|
|
|
|
|
<!--
|
|
|
|
Copyright (C) 2010 University of Szeged
|
|
|
|
Copyright (C) 2010 Zoltan Herczeg
|
|
|
|
Copyright (C) 2010 Gabor Loki
|
|
|
|
All rights reserved.
|
|
|
|
|
|
|
|
Redistribution and use in source and binary forms, with or without
|
|
|
|
modification, are permitted provided that the following conditions
|
|
|
|
are met:
|
|
|
|
1. Redistributions of source code must retain the above copyright
|
|
|
|
notice, this list of conditions and the following disclaimer.
|
|
|
|
2. Redistributions in binary form must reproduce the above copyright
|
|
|
|
notice, this list of conditions and the following disclaimer in the
|
|
|
|
documentation and/or other materials provided with the distribution.
|
|
|
|
|
|
|
|
THIS SOFTWARE IS PROVIDED BY UNIVERSITY OF SZEGED ``AS IS'' AND ANY
|
|
|
|
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
|
|
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
|
|
|
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL UNIVERSITY OF SZEGED OR
|
|
|
|
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
|
|
|
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
|
|
|
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
|
|
|
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
|
|
|
|
OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
|
|
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
|
|
|
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
-->
|
|
|
|
|
|
|
|
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<rect x="0%" y="0%" width="100%" height="100%" fill="black" />
|
|
|
|
|
|
|
|
<defs>
|
|
|
|
<filter id="filt" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
|
2011-02-01 10:48:02 +00:00
|
|
|
<feTurbulence baseFrequency="0.03" numOctaves="4" seed="67" result="turb"/>
|
|
|
|
<feGaussianBlur in="SourceGraphic" primitiveUnits="objectBoundingBox" stdDeviation="1" result="blur"/>
|
2010-12-13 10:15:53 +00:00
|
|
|
<feComposite in="turb" in2="blur" operator="arithmetic" k2="0.3" k3="1" result="comp"/>
|
2011-02-01 10:48:02 +00:00
|
|
|
<feDiffuseLighting in="comp" primitiveUnits="objectBoundingBox" diffuseConstant="1" lighting-color="white" surfaceScale="10" result="light" >
|
2010-12-13 10:15:53 +00:00
|
|
|
<feSpotLight id="light" x="0" y="300" z="200" pointsAtX="-200" pointsAtY="100" pointsAtZ="0" limitingConeAngle="90" specularExponent="20" />
|
|
|
|
</feDiffuseLighting>
|
2011-02-01 10:48:02 +00:00
|
|
|
<feSpecularLighting in="comp" primitiveUnits="objectBoundingBox" diffuseConstant="1" lighting-color="#A66102" surfaceScale="10" result="ambient" >
|
|
|
|
<feDistantLight azimuth="0" elevation="90" />
|
2010-12-13 10:15:53 +00:00
|
|
|
</feSpecularLighting>
|
2011-02-01 10:48:02 +00:00
|
|
|
<feComposite in="light" in2="ambient" operator="arithmetic" k2="1.2" k3=".8"/>
|
2010-12-13 10:15:53 +00:00
|
|
|
</filter>
|
|
|
|
</defs>
|
|
|
|
|
|
|
|
<g filter="url(#filt)" fill="white" stroke="black" onclick="start()">
|
|
|
|
<rect x="0" y="0" width="400" height="5" />
|
|
|
|
<rect x="0" y="0" width="5" height="200" />
|
|
|
|
<rect x="0" y="195" width="400" height="5" />
|
|
|
|
<rect x="395" y="0" width="5" height="200" />
|
|
|
|
<text font-size="150" font-weight="bold" x="40" y="150">SVG</text>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<text id="fps" x="150" y="240" font-size="20" fill="white" stroke="white">afps:</text>
|
|
|
|
<text x="30" y="265" font-size="20" font-weight="bold" fill="white" stroke="white">click on the image to start the animation</text>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<![CDATA[
|
|
|
|
var light_x = document.getElementById('light').x;
|
|
|
|
var light_y = document.getElementById('light').y;
|
|
|
|
var light_pointsAtX = document.getElementById('light').pointsAtX;
|
|
|
|
var light_pointsAtY = document.getElementById('light').pointsAtY;
|
|
|
|
var fps = document.getElementById('fps');
|
|
|
|
|
|
|
|
var round = Math.round
|
|
|
|
|
|
|
|
var startDate = 0;
|
|
|
|
var frameCounter = 0;
|
|
|
|
var phase = 0;
|
|
|
|
function anim() {
|
|
|
|
switch(phase) {
|
|
|
|
case 0:
|
|
|
|
light_pointsAtX.baseVal += 10;
|
|
|
|
if (light_pointsAtX.baseVal >= 380)
|
|
|
|
++phase;
|
|
|
|
break;
|
|
|
|
case 1:
|
|
|
|
light_x.baseVal += 10;
|
|
|
|
light_pointsAtX.baseVal -= 10;
|
|
|
|
if (light_x.baseVal >= 450) {
|
|
|
|
++phase;
|
|
|
|
waitCounter = 0;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
light_y.baseVal -= 5;
|
|
|
|
if (light_y.baseVal <= -100)
|
|
|
|
++phase;
|
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
light_pointsAtX.baseVal += 10;
|
|
|
|
if (light_pointsAtX.baseVal >= 450) {
|
|
|
|
light_x.baseVal = 0;
|
|
|
|
light_pointsAtX.baseVal = -200;
|
|
|
|
light_y.baseVal = 300;
|
|
|
|
light_pointsAtY.baseVal = 100;
|
|
|
|
phase = 0;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
frameCounter++;
|
|
|
|
fps.textContent = "afps: " +(round(frameCounter * 100000 / (new Date() - startDate)) / 100);
|
|
|
|
}
|
|
|
|
|
|
|
|
function start() {
|
|
|
|
if (!startDate) {
|
|
|
|
startDate = new Date();
|
|
|
|
setInterval(anim,1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//]]>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</svg>
|