|
|
(103 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>
| |
− | #intro-header{
| |
− | height:100vh
| |
− | }
| |
− | #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="5" waveDelta="16" speed="0.21" wavePoints="6"/>
| |
− | <path id="wave2" d="" fill="#4080ED" waveHeight="15" waveDelta="20" speed="0.18" wavePoints="8"/>
| |
− | <path id="wave3" d="" fill="#2E64EC" waveHeight="25" waveDelta="18" speed="0.16" wavePoints="7"/>
| |
− | <path id="wave4" d="" fill="#2454CD" waveHeight="35" waveDelta="15" speed="0.13" wavePoints="5"/>
| |
− | <path id="wave5" d="" fill="#1A44AE" waveHeight="45" waveDelta="18" speed="0.08" wavePoints="9"/>
| |
− | <path id="wave6" d="" fill="#11348F" waveHeight="55" waveDelta="20" speed="0.13" wavePoints="6"/>
| |
− | <path id="wave7" d="" fill="#142E71" waveHeight="65" waveDelta="21" speed="0.15" wavePoints="5"/>
| |
− | <path id="wave8" d="" fill="#142455" waveHeight="75" waveDelta="23" speed="0.18" wavePoints="4"/>
| |
− | <path id="wave9" d="" fill="#131F43" waveHeight="85" waveDelta="18" speed="0.21" wavePoints="7"/>
| |
− | <path id="wave10" d="" fill="#0F162C" waveHeight="95" waveDelta="15" speed="0.18" wavePoints="10"/>
| |
− | <path id="wave11" d="" fill="#101422" waveHeight="115" waveDelta="28" speed="0.13" wavePoints="5"/>
| |
− | <path id="wave12" d="" fill="#121212" waveHeight="125" 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>
| |