

    <!--                                             
88        88  88888888ba   88    ,ad8888ba,       
88        88  88      "8b  88   d8"'    `"8b      
88        88  88      ,8P  88  d8'        `8b     
88        88  88aaaaaa8P'  88  88          88     
88        88  88""""""8b,  88  88          88     
88        88  88      `8b  88  Y8,    "88,,8P     
Y8a.    .a8P  88      a8P  88   Y8a.    Y88P      
 `"Y8888Y"'   88888888P"   88    `"Y8888Y"Y8a     
                                                  
                                                  
Web development by
UBIQ AG, Bahnhofplatz 1, 6460 Altdorf, Switzerland
https://www.ubiq.swiss, info@ubiq.swiss
Copyright (c) 2022 UBIQ AG. All rights reserved.
-->


<!DOCTYPE html>
<html lang="de-CH">
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="referrer" content="origin-when-cross-origin" />

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">


    <title>Level 2 | Uri auf Weltreise</title>
    <meta name="description" content=""/>
    <meta property="og:title" content="Level 2 | Uri auf Weltreise"/>
    <meta property="og:description" content="">
    <meta property="og:url" content="https://uriaufweltreise.ch/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://uriaufweltreise.ch/uploads/startseite/slide_2_1.jpg" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="/static/css/styles3.css">
    <link rel="stylesheet" href="/static/css/general2.css">
    <link rel="stylesheet" href="/static/css/grid.css">
    <link rel="stylesheet" href="/static/css/level2.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="/static/js/level1.js"></script>
    <script src="/static/js/end.js"></script>

    <!-- Matomo -->
    <script>
    var _paq = window._paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
        var u="//stats.ubiq.swiss/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '124']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
    </script>
    <!-- End Matomo Code -->
</head>

<body class="smooth-scroll ">

    <div id="rotate-device"></div>

    
<script src="/static/js/three.min.js"></script>
<script src="/static/js/extras.js"></script>

<div id='container' class="level-2"></div>

<div class="level-details">
    <h1>Level 2</h1>
    <h3>7’780 Kilometer</h3>
</div>

<div class="level-text">
    <h3>… das entspricht mehr als der Distanz von Altdorf bis Chicago!</h3>
</div>
<div class="liveticker">
    <div class="liveticker-gradient"></div>
    <img src="/static/images/close.svg" class="close">
    <div class="liveticker-scroll">
        <div class="liveticker-content">
                                </div>
    </div>
</div>
<div class="liveticker-overlay"></div>
    <a href="/" class="home-button bright"><img src="/static/images/home.svg"></a>

<script>
    'use strict';

    var Earth = function (el, data) {
    let camera, scene, renderer, composer, w, h;

    let lines = [],
    mouse = {
        x: 0,
        y: 0 },

    mouseOnDown = {
        x: 0,
        y: 0 },

    points = [],
    rotation = {
        x: Math.PI * 1.9,
        y: Math.PI / 6 },

    target = {
        x: Math.PI * 1.9,
        y: Math.PI / 6 },

    targetOnDown = {
        x: 0,
        y: 0 };


    const center = new THREE.Vector3(0, 0, 0),
    clock = new THREE.Clock(),
    distance = 400,
    PI_HALF = Math.PI / 2,
    pointRadius = 152,
    radius = 150;

    // Shaders
    // https://github.com/dataarts/webgl-globe

    const shaders = {
        'atmosphere': {
        uniforms: {},
        vertexShader: [
        'varying vec3 vNormal;',
        'void main() {',
        'vNormal = normalize( normalMatrix * normal );',
        'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
        '}'].
        join('\n'),
        fragmentShader: [
        'varying vec3 vNormal;',
        'void main() {',
        'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 3.0 );',
        'gl_FragColor = vec4( 0.3, 0.4, 0.6, 0.05 ) * intensity;',
        '}'].
        join('\n') } };


    // -------------------------------------
    //   Init
    // -------------------------------------

    function init() {
        w = window.innerWidth;
        h = window.innerHeight;

        camera = new THREE.PerspectiveCamera(distance / 5, w / h, 1, distance * 2);
        scene = new THREE.Scene();
        scene.add(camera);

        // Stars
        // http://gielberkers.com/evenly-distribute-particles-shape-sphere-threejs/

        let starGeometry = new THREE.Geometry();

        for (let i = 0; i < 1000; i++) {
        let x = -1 + Math.random() * 2;
        let y = -1 + Math.random() * 2;
        let z = -1 + Math.random() * 2;
        const d = 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
        x *= d;
        y *= d;
        z *= d;

        const vertex = new THREE.Vector3(
        x * distance,
        y * distance,
        z * distance);

        starGeometry.vertices.push(vertex);
        }

        const stars = new THREE.Points(starGeometry, new THREE.PointsMaterial({
        color: '#555555',
        size: 3 }));

        scene.add(stars);

        // Light

        let light = new THREE.PointLight('#ffffff', 0.5);
        camera.add(light);
        light.position.set(distance / 2, distance / 2, 0);
        light.target = camera;

        // Earth

        THREE.ImageUtils.crossOrigin = '';
        var earthLights = THREE.ImageUtils.loadTexture('//s3-us-west-2.amazonaws.com/s.cdpn.io/68727/earth-lights.jpg');
        var earthBump = THREE.ImageUtils.loadTexture('//s3-us-west-2.amazonaws.com/s.cdpn.io/68727/earth-bump.jpg');
        earthLights.minFilter = THREE.LinearFilter;
        earthBump.minFilter = THREE.LinearFilter;

        var earthGeometry = new THREE.SphereGeometry(radius, 50, 30);
        var earthMaterial = new THREE.MeshPhongMaterial({
        bumpMap: earthBump,
        bumpScale: 4,
        emissiveMap: earthLights,
        emissive: '#333333',
        map: earthLights,
        specular: '#010101' });


        const earth = new THREE.Mesh(earthGeometry, earthMaterial);
        scene.add(earth);

        // Atmosphere

        const atmosphereMaterial = new THREE.ShaderMaterial({
        vertexShader: shaders['atmosphere'].vertexShader,
        fragmentShader: shaders['atmosphere'].fragmentShader,
        side: THREE.BackSide,
        blending: THREE.AdditiveBlending,
        transparent: true });


        const atmosphere = new THREE.Mesh(earthGeometry, atmosphereMaterial);
        atmosphere.scale.set(1.3, 1.3, 1.3);
        scene.add(atmosphere);

        // Points

        for (let i = 0; i < data.length; i++) {
        points.push(new point(data[i].lat, data[i].long, data[i].r, i));

        let newLine = drawCurve(points[0].position, points[i].position);

        new TWEEN.Tween(newLine).
        to({
            currentPoint: 200 },
        2000).
        delay(i * 350 + 1500).
        easing(TWEEN.Easing.Cubic.Out).
        onUpdate(function () {
            newLine.geometry.setDrawRange(0, newLine.currentPoint);
        }).
        start();
        }

        // Renderer

        renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true });

        renderer.autoClear = false;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(w, h);

        // Composer

        composer = new THREE.EffectComposer(renderer);
        composer.addPass(new THREE.RenderPass(scene, camera));

        const effectBloom = new THREE.BloomPass(1.75);
        const effectFilm = new THREE.FilmPass(0.25, 0.5, 2048, 0);
        const effectShift = new THREE.ShaderPass(THREE.RGBShiftShader);

        effectShift.uniforms['amount'].value = 0.001;
        effectShift.renderToScreen = true;

        composer.addPass(effectBloom);
        composer.addPass(effectFilm);
        composer.addPass(effectShift);

        // Events

        el.addEventListener('pointerdown', onPointerDown, false);
        window.addEventListener('resize', onWindowResize, false);

        // DOM

        el.appendChild(renderer.domElement);
    }

    // -------------------------------------
    //   Lat + Long to Vector
    // -------------------------------------

    function latLongToVector3(lat, lon, r) {
        // http://www.smartjava.org/content/render-open-data-3d-world-globe-threejs

        const phi = lat * Math.PI / 180;
        const theta = (lon - 180) * Math.PI / 180;

        const x = -r * Math.cos(phi) * Math.cos(theta);
        const y = r * Math.sin(phi);
        const z = r * Math.cos(phi) * Math.sin(theta);

        return new THREE.Vector3(x, y, z);
    }

    // -------------------------------------
    //   Interactivity
    // -------------------------------------

    function onPointerDown(event) {
        event.preventDefault();

        el.addEventListener('pointerup', onPointerUp, false);
        el.addEventListener('pointermove', onPointerMove, false);
        el.addEventListener('pointerout', onPointerOut, false);

        mouseOnDown.x = -event.clientX;
        mouseOnDown.y = event.clientY;

        targetOnDown.x = target.x;
        targetOnDown.y = target.y;

        el.style.cursor = 'move';
    }

    function onPointerMove(event) {
        mouse.x = -event.clientX;
        mouse.y = event.clientY;

        target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005;
        target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005;

        target.y = target.y > PI_HALF ? PI_HALF : target.y;
        target.y = target.y < -PI_HALF ? -PI_HALF : target.y;
    }

    function onPointerUp(event) {
        el.removeEventListener('pointermove', onPointerMove, false);
        el.removeEventListener('pointerup', onPointerUp, false);
        el.removeEventListener('pointerout', onPointerOut, false);
        el.style.cursor = 'auto';
    }

    function onPointerOut(event) {
        el.removeEventListener('pointerup', onPointerUp, false);
        el.removeEventListener('pointerout', onPointerOut, false);
    }

    function onWindowResize(event) {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // -------------------------------------
    //   Animate
    // -------------------------------------

    function animate(time) {
        render();
        TWEEN.update(time);
        requestAnimationFrame(animate);
    }

    // -------------------------------------
    //   Render
    // -------------------------------------

    function render() {
        if (el.style.cursor != 'move') target.x += 0.00075;

        rotation.x += (target.x - rotation.x) * 0.1;
        rotation.y += (target.y - rotation.y) * 0.1;

        camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
        camera.position.y = distance * Math.sin(rotation.y);
        camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

        camera.lookAt(center);
        renderer.render(scene, camera);
        composer.render();
    }

    // -------------------------------------
    //   Point
    // -------------------------------------

    function point(lat, lng, r, i) {
        const position = latLongToVector3(lat, lng, radius);

        const pointGeometry = new THREE.SphereGeometry(r, 32, 32);
        const pointMaterial = new THREE.MeshBasicMaterial({
        color: '#55b776',
        opacity: 0.6,
        side: THREE.DoubleSide,
        transparent: true });


        let point = new THREE.Mesh(pointGeometry, pointMaterial);
        point.position.set(position.x, position.y, position.z);
        point.scale.set(0.01, 0.01, 0.01);
        point.lookAt(center);
        scene.add(point);

        new TWEEN.Tween(point.scale).
        to({
        x: 1,
        y: 1,
        z: 1 },
        1000).
        delay(i * 350 + 1500).
        easing(TWEEN.Easing.Cubic.Out).
        start();

        const pointRingGeometry = new THREE.RingGeometry(r + 0.5, r + 1.5, 32);
        const pointRingMaterial = new THREE.MeshBasicMaterial({
        color: '#55b776',
        opacity: 0.2,
        side: THREE.DoubleSide,
        transparent: true });


        let pointRing = new THREE.Mesh(pointRingGeometry, pointRingMaterial);
        pointRing.position.set(position.x, position.y, position.z);
        pointRing.scale.set(0.01, 0.01, 0.01);
        pointRing.lookAt(center);
        scene.add(pointRing);

        new TWEEN.Tween(pointRing.scale).
        to({
        x: 1,
        y: 1,
        z: 1 },
        1500).
        delay(i * 350 + 1500).
        easing(TWEEN.Easing.Cubic.Out).
        start();

        return point;
    }

    // http://armsglobe.chromeexperiments.com/js/visualize_lines.js

    function drawCurve(a, b, i) {
        const distance = a.clone().sub(b).length();

        let mid = a.clone().lerp(b, 0.5);
        const midLength = mid.length();
        mid.normalize();
        mid.multiplyScalar(midLength + distance * 0.25);

        let normal = new THREE.Vector3().subVectors(a, b);
        normal.normalize();

        const midStart = mid.clone().add(normal.clone().multiplyScalar(distance * 0.25));
        const midEnd = mid.clone().add(normal.clone().multiplyScalar(distance * -0.25));

        let splineCurveA = new THREE.CubicBezierCurve3(a, a, midStart, mid);
        let splineCurveB = new THREE.CubicBezierCurve3(mid, midEnd, b, b);

        let points = splineCurveA.getPoints(100);
        points = points.splice(0, points.length - 1);
        points = points.concat(splineCurveB.getPoints(100));
        points.push(center);

        let lineGeometry = new THREE.BufferGeometry();
        let positions = new Float32Array(points.length * 3);
        for (let ii = 0; ii < points.length; ii++) {
        positions[ii * 3 + 0] = points[ii].x;
        positions[ii * 3 + 1] = points[ii].y;
        positions[ii * 3 + 2] = points[ii].z;
        }
        lineGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
        lineGeometry.setDrawRange(0, 0);

        var lineMaterial = new THREE.LineBasicMaterial({
        color: new THREE.Color(0xffffff),
        linewidth: 3,
        opacity: 0.25,
        transparent: true });


        let line = new THREE.Line(lineGeometry, lineMaterial);
        line.currentPoint = 0;

        scene.add(line);
        return line;
    }

    // -------------------------------------
    //   Start
    // -------------------------------------

    init();
    animate();

    this.animate = animate;
    return this;
    };

    var data = [{
    long: 8.6407888,
    lat: 46.8829116,
    r: 4 },

    {},

    {
    long: -807.6392859,
    lat: 41.8596522,
    r: 2 }];


    var container = document.getElementById('container');
    var planet = new Earth(container, data);
</script>

<div class="box desktop">
    <div class="kilometer">
        7’780 km absolviert<br>
        19 % der Weltumrundung
    </div>
    <ul class="progressbar">
        <li class="active">Level 1</li>
        <li class="active">Level 2</li>
        <li >Level 3</li>
        <li >Geschafft</li>
    </ul>
    <div class="stats">
        <div class="klassen">
            20 Klassen<br>
            530 Schüler:innen
        </div>
        <!--<img src="/static/images/ticker.svg" class="ticker-button">-->
    </div>
</div> 

<div class="box mobile">
    <div class="kilometer">
        7’780 km absolviert<br>
        19 % der Weltumrundung
    </div>
    <div class="stats">
        <div class="klassen">
            20 Klassen<br>
            530 Schüler:innen
        </div>
        <img src="/static/images/ticker.svg" class="ticker-button">
    </div>
    <ul class="progressbar">
        <li class="active">Level 1</li>
        <li class="active">Level 2</li>
        <li >Level 3</li>
        <li >Geschafft</li>
    </ul>
</div> 

</body>

    <script src="/static/js/plugins.js"></script>
    <script src="/static/js/scripts.js"></script>
</html>