| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" |
| "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
| |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <!-- ========================================================================= --> |
| <!-- A star field --> |
| <!-- --> |
| <!-- @author shillion@ilog.fr --> |
| <!-- @version $Id$ --> |
| <!-- ========================================================================= --> |
| |
| <svg xmlns="http://www.w3.org/2000/svg" |
| xmlns:xlink="http://www.w3.org/1999/xlink" |
| width="450" height="500" viewBox="0 0 450 500"> |
| <title>Starfield</title> |
| |
| <defs> |
| |
| <!-- ######################################################################### --> |
| <style type="text/css"> |
| <![CDATA[ |
| .title { |
| font-size: 52; |
| font-style: italic; |
| font-weight: bolder |
| } |
| /* Colors */ |
| #background { |
| fill: #080014 |
| } |
| .fps-label, .fps-unit, .help, .title { |
| fill: #ddf |
| } |
| .button-back, .gauge-back { |
| fill: #edf |
| } |
| .button-fore, .gauge-fore { |
| fill: #769 |
| } |
| .panel-back { |
| fill: #347; |
| fill-opacity:0.3 |
| } |
| .star { |
| fill: white /*url(#star-fill)*/ |
| } |
| .stop-c1 { |
| stop-color: white |
| } |
| .stop-c2 { |
| stop-color: #ffc |
| } |
| .stop-c3 { |
| stop-color: #aa8 |
| } |
| /* <text/> default property values */ |
| text { |
| font-size: 9; |
| text-anchor: middle |
| } |
| /* The property values for a <text/> preceded by another <text/> */ |
| text + text { |
| text-anchor: start |
| } |
| ]]> |
| </style> |
| |
| <!-- ######################################################################### --> |
| <radialGradient id="star-fill" gradientUnits="userSpaceOnUse" |
| cx="0" cy="0" fx="-5" fy="-5" r="30"> |
| <stop class="stop-c1" offset="0%"/> |
| <stop class="stop-c2" offset="20%"/> |
| <stop class="stop-c3" offset="100%"/> |
| </radialGradient> |
| |
| <!-- ######################################################################### --> |
| <g id="plus-button"> |
| <circle class="button-back" cx="10" cy="10" r="10"/> |
| <rect class="button-fore" x="8" y="4" width="4" height="12"/> |
| <rect class="button-fore" x="4" y="8" width="12" height="4"/> |
| </g> |
| |
| <!-- ######################################################################### --> |
| <g id="minus-button"> |
| <circle class="button-back" cx="10" cy="10" r="10"/> |
| <rect class="button-fore" x="4" y="8" width="12" height="4"/> |
| </g> |
| |
| <!-- ######################################################################### --> |
| <g id="gauge"> |
| <rect class="gauge-back" x="0" y="0" width="150" height="20"/> |
| </g> |
| |
| |
| <!-- ######################################################################### --> |
| <script type="text/ecmascript"> |
| <![CDATA[ |
| // |
| // Global declarations |
| // |
| var starIncrement = 5 |
| var numberOfStars = starIncrement |
| var unitCount = 1 |
| var units = document.getElementById("units") |
| var stars = new Array() |
| var controlPanelMoving = false; |
| var showControlPanel = false |
| var helpText1 = "Click on the title to show the control panel" |
| var helpText2 = "Click on the title to hide the control panel" |
| var startDate; |
| var nframe; |
| |
| // |
| // Decreases the number of stars. If numberOfStars is at his min value, |
| // do nothing. |
| // |
| function decreaseNumberOfStars(evt) { |
| if (numberOfStars == 0) { |
| return |
| } |
| |
| for (var i = 0; i < starIncrement; i++) { |
| stars[--numberOfStars].freeze(); |
| } |
| updateText("number-label", numberOfStars) |
| |
| unitCount-- |
| units.setAttributeNS(null, "width", unitCount * 10) |
| } |
| |
| // |
| // Increases the number of stars. If numberOfStars is at his max value, |
| // do nothing. |
| // |
| function increaseNumberOfStars(evt) { |
| if (numberOfStars == starIncrement * 15) { |
| return |
| } |
| |
| for (var i = 0; i < starIncrement; i++) { |
| stars[numberOfStars++].activate(); |
| } |
| updateText("number-label", numberOfStars) |
| |
| unitCount++ |
| units.setAttributeNS(null, "width", unitCount * 10) |
| |
| } |
| |
| // |
| // Updates a text element content. |
| // |
| function updateText(id, lbl) { |
| var elt = document.getElementById(id) |
| var grp = elt.parentNode; |
| var newelt = elt.cloneNode(true) |
| |
| if (newelt.firstChild == null) { |
| newelt.appendChild(document.createTextNode(lbl)) |
| } else { |
| newelt.replaceChild(document.createTextNode(lbl), newelt.firstChild) |
| } |
| grp.replaceChild(newelt, elt) |
| } |
| |
| var itv; |
| |
| // |
| // Starts the animation loops. |
| // |
| function initAnimations(evt) { |
| for (var i = 0; i < starIncrement * 15; i++) { |
| stars[i] = new Star() |
| } |
| |
| for (var i = 0; i < starIncrement; i++) { |
| stars[i].activate() |
| } |
| updateText("help", helpText1) |
| |
| itv = setInterval("animateStars()", 10) |
| |
| startDate = new Date() |
| nframe = 0 |
| } |
| |
| // |
| // Animates the stars. |
| // |
| function animateStars() { |
| for (var i = 0; i < starIncrement * 10; i++) { |
| stars[i].update() |
| } |
| if (nframe < 10) { |
| nframe++ |
| } else { |
| var d = new Date() |
| var dt = d - startDate |
| var val = Math.round(10000 / dt) |
| |
| updateText("fps1", val); |
| updateText("fps2", val); |
| // System.err.println("FPS: " + val); |
| startDate = d |
| nframe = 0 |
| } |
| } |
| |
| var controlPanelDy; |
| var controlPanelSgn; |
| |
| // |
| // Shows/hides the control panel. |
| // |
| function animateControlPanel(evt) { |
| if (!controlPanelMoving) { |
| controlPanelMoving = true; |
| showControlPanel = !showControlPanel |
| if (showControlPanel) { |
| updateText("help", helpText2) |
| controlPanelDy = 20 |
| controlPanelSgn = 1 |
| setTimeout("controlPanelAnimation()", 50) |
| } else { |
| updateText("help", helpText1) |
| controlPanelDy = 0 |
| controlPanelSgn = -1 |
| setTimeout("controlPanelAnimation()", 50) |
| } |
| } |
| } |
| |
| // |
| // Animates the control panel. |
| // |
| function controlPanelAnimation() { |
| var elt = document.getElementById("control-panel"); |
| |
| elt.setAttributeNS(null, "transform", "translate(0 " + ((controlPanelDy - 100) * controlPanelSgn) + ")"); |
| |
| if (controlPanelDy < 200) { |
| controlPanelDy += 20 |
| setTimeout("controlPanelAnimation()", 50) |
| } else { |
| controlPanelMoving = false; |
| } |
| } |
| |
| // |
| // The star object. |
| // |
| function Star() { |
| this.element = document.createElementNS("http://www.w3.org/2000/svg", |
| "circle") |
| // |
| // This method activates the star. |
| // |
| this.activate = function() { |
| this.isActive = true |
| this.dx = (Math.random() - 0.5) * 100 + 1 |
| this.dy = (Math.random() - 0.5) * 100 + 1 |
| this.dr = Math.random() / 5 |
| } |
| |
| // |
| // This method freezes the star. |
| // |
| this.freeze = function() { |
| this.x = 225 |
| this.y = 225 |
| this.r = 0.01 |
| |
| this.isActive = false |
| this.updateElement() |
| } |
| |
| // |
| // This method updates the star size and position, if |
| // the star has been activated. |
| // |
| this.update = function() { |
| if (this.isActive) { |
| this.x += this.dx |
| this.y += this.dy |
| this.r += this.dr |
| |
| this.dx += (this.dx > 0) ? 1 : -1 |
| this.dy += (this.dy > 0) ? 1 : -1 |
| this.dr += 0.04 |
| |
| if ((this.x < -20 || this.x > 470) || |
| (this.y < -20 || this.y > 470) || |
| this.r > 30) { |
| this.freeze() |
| this.activate() |
| return |
| } |
| |
| this.updateElement() |
| } |
| } |
| this.updateElement = function() { |
| this.element.setAttributeNS(null, "transform", |
| "translate("+this.x+" "+this.y+")") |
| this.element.setAttributeNS(null, "r", this.r) |
| } |
| |
| // Start as inactive... |
| this.element.setAttributeNS(null, "class", "star") |
| this.freeze() |
| var stars = document.getElementById("stars") |
| stars.insertBefore(this.element, stars.firstChild) |
| } |
| ]]> |
| </script> |
| |
| </defs> |
| |
| <!-- ######################################################################### --> |
| <!-- ######################################################################### --> |
| <g id="body" onload="initAnimations(evt)"> |
| <rect id="background" x="0" y="0" width="100%" height="100%"/> |
| |
| <g id="stars"><!-- Used to store the stars --></g> |
| |
| <!-- The control panel --> |
| <g id="control-panel" style="opacity: 0.7" transform="translate(0, -100)"> |
| |
| <text class="help" id="help" x="50%" y="170"/> <!-- set by script --> |
| |
| <rect class="panel-back" x="0" y="-190" width="100%" height="70%"/> |
| |
| <!-- The title --> |
| <text class="title" x="50%" y="150" onclick="animateControlPanel(evt)"> |
| Starfield |
| </text> |
| |
| <!-- The controls --> |
| <use xlink:href="#minus-button" transform="translate(90 20)" |
| onclick="decreaseNumberOfStars(evt)"/> |
| |
| <use xlink:href="#gauge" transform="translate(150 20)"/> |
| |
| <rect id="units" class="gauge-fore" x="150" y="20" width="10" height="20"/> |
| |
| <text id="number-label" x="195" y="33">5</text> |
| <text x="205" y="33">Stars at a time</text> |
| |
| <use xlink:href="#plus-button" transform="translate(340 20)" |
| onclick="increaseNumberOfStars(evt)"/> |
| |
| <!-- The frame rate labels --> |
| <text class="fps-label" id="fps1" x="20" y="-80"/> <!-- set by script --> |
| <text class="fps-unit" x="30" y="-80">Frames per second</text> |
| |
| <rect class="panel-back" x="0" y="560" width="100%" height="70%"/> |
| |
| <text class="fps-label" id="fps2" x="20" y="583">0</text> |
| <text class="fps-unit" x="30" y="583">Frames per second</text> |
| </g> |
| </g> |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="batikLogo.svg#Batik_Tag_Box" /> |
| </svg> |
