|
|
| (105 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{Vilnius-Lithuania/TopBar}}
| |
| − | {{Vilnius-Lithuania/index.css}}
| |
| − | {{Vilnius-Lithuania/fonts.css}}
| |
| − | {{Vilnius-Lithuania/menuOverlay}}
| |
| − | <html>
| |
| | | | |
| − | <head>
| |
| − | <meta charset="utf-8">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| − | <style>
| |
| − | #wave-wrapper{
| |
| − | height:70%;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <section class="container" id="intro-page">
| |
| − | <div id="intro-header">
| |
| − | <div id="wave-wrapper">
| |
| − | <svg width="100%" height="100%"version="1.1" xmlns="http://www.w3.org/2000/svg" id="intro">
| |
| − | <path id="wave1" d="" fill="#679BF4" waveHeight="100" waveDelta="16" speed="0.21" wavePoints="6"/>
| |
| − | <path id="wave2" d="" fill="#4080ED" waveHeight="110" waveDelta="20" speed="0.18" wavePoints="8"/>
| |
| − | <path id="wave3" d="" fill="#2E64EC" waveHeight="120" waveDelta="18" speed="0.16" wavePoints="7"/>
| |
| − | <path id="wave4" d="" fill="#2454CD" waveHeight="130" waveDelta="15" speed="0.13" wavePoints="5"/>
| |
| − | <path id="wave5" d="" fill="#1A44AE" waveHeight="140" waveDelta="18" speed="0.08" wavePoints="9"/>
| |
| − | <path id="wave6" d="" fill="#11348F" waveHeight="150" waveDelta="20" speed="0.13" wavePoints="6"/>
| |
| − | <path id="wave7" d="" fill="#142E71" waveHeight="160" waveDelta="21" speed="0.15" wavePoints="5"/>
| |
| − | <path id="wave8" d="" fill="#142455" waveHeight="170" waveDelta="23" speed="0.18" wavePoints="4"/>
| |
| − | <path id="wave9" d="" fill="#131F43" waveHeight="180" waveDelta="18" speed="0.21" wavePoints="7"/>
| |
| − | <path id="wave10" d="" fill="#0F162C" waveHeight="190" waveDelta="15" speed="0.18" wavePoints="10"/>
| |
| − | <path id="wave11" d="" fill="#101422" waveHeight="200" waveDelta="28" speed="0.13" wavePoints="5"/>
| |
| − | <path id="wave12" d="" fill="#121212" waveHeight="210" waveDelta="18" speed="0.08" wavePoints="7"/>
| |
| − | </svg>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="intro">
| |
| − | <div id="title-wrapper">
| |
| − | <h1>project<br>x</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − | <section class="container" id="problem-page">
| |
| − | <div id="problem-header">
| |
| − | <h1>problem</h1>
| |
| − | </div>
| |
| − | </section>
| |
| − | <script>
| |
| − | var container = document.body;
| |
| − | var width = container.offsetWidth;
| |
| − | var height = container.offsetHeight;
| |
| − |
| |
| − | var waveWidth = container.offsetWidth;
| |
| − |
| |
| − | var points = [];
| |
| − |
| |
| − | function calculateWavePoints(factor, wave) {
| |
| − | var points = [];
| |
| − | var wavePoints = parseInt(wave.getAttribute("wavepoints"));
| |
| − | var speed = parseFloat(wave.getAttribute("speed"))
| |
| − | var waveDelta = parseInt(wave.getAttribute("wavedelta"));
| |
| − | var waveHeight = parseInt(wave.getAttribute("waveheight"))
| |
| − | console.log(waveWidth, waveHeight, waveDelta, speed, wavePoints)
| |
| − | for (var i = 0; i <= wavePoints; i++) {
| |
| − | var x = i/wavePoints * waveWidth;
| |
| − | var sinSeed = (factor + (i + i % wavePoints)) * speed * 100;
| |
| − | var sinHeight = Math.sin(sinSeed / 100) * waveDelta;
| |
| − | var yPos = Math.sin(sinSeed / 100) * sinHeight + waveHeight;
| |
| − | points.push({x: x, y: yPos});
| |
| − | }
| |
| − | return points;
| |
| − | }
| |
| − |
| |
| − | function buildPath(points) {
| |
| − | var SVGString = 'M ' + points[0].x + ' ' + points[0].y;
| |
| − |
| |
| − | var cp0 = {
| |
| − | x: (points[1].x - points[0].x) / 2,
| |
| − | y: (points[1].y - points[0].y) + points[0].y + (points[1].y - points[0].y)
| |
| − | };
| |
| − |
| |
| − | SVGString += ' C ' + cp0.x + ' ' + cp0.y + ' ' + cp0.x + ' ' + cp0.y + ' ' + points[1].x + ' ' + points[1].y;
| |
| − |
| |
| − | var prevCp = cp0;
| |
| − | var inverted = -1;
| |
| − |
| |
| − | for (var i = 1; i < points.length-1; i++) {
| |
| − | var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
| |
| − | var cp1 = {
| |
| − | x: (points[i].x - prevCp.x) + points[i].x,
| |
| − | y: (points[i].y - prevCp.y) + points[i].y
| |
| − | };
| |
| − |
| |
| − | SVGString += ' C ' + cp1.x + ' ' + cp1.y + ' ' + cp1.x + ' ' + cp1.y + ' ' + points[i+1].x + ' ' + points[i+1].y;
| |
| − | prevCp = cp1;
| |
| − | inverted = -inverted;
| |
| − | };
| |
| − |
| |
| − | SVGString += ' L ' + width + ' ' + height;
| |
| − | SVGString += ' L 0 ' + height + ' Z';
| |
| − | return SVGString;
| |
| − | }
| |
| − |
| |
| − | var lastUpdate;
| |
| − | var totalTime = 0;
| |
| − |
| |
| − | function tick() {
| |
| − | var now = window.Date.now();
| |
| − |
| |
| − | if (lastUpdate) {
| |
| − | var elapsed = (now-lastUpdate) / 1000;
| |
| − | lastUpdate = now;
| |
| − |
| |
| − | totalTime += elapsed;
| |
| − |
| |
| − | var factor = totalTime*Math.PI;
| |
| − | var waves = document.querySelectorAll("path");
| |
| − | for(let wave of waves){
| |
| − | wave.setAttribute('d', buildPath(calculateWavePoints(factor, wave)));
| |
| − | }
| |
| − | } else {
| |
| − | lastUpdate = now;
| |
| − | }
| |
| − |
| |
| − | window.requestAnimationFrame(tick);
| |
| − | };
| |
| − | tick();
| |
| − |
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
