Source

html5xgdd / index.htm

<!doctype html>
<html>
  <head>
    <title>HTML5xGDD</title>
    <script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
    <script src="http://mrdoob.github.com/three.js/examples/js/RequestAnimationFrame.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: sans-serif;
        background-image: -webkit-gradient(
          linear, 0 100%, 2% 0,
          color-stop(0, #121212),
          color-stop(0.3, #302b2c),
          color-stop(0.7, #222),
          color-stop(1, #121212)
        );
        background-image: -moz-linear-gradient(
          top,
          #121212 0%,
          #302b2c 30%,
          #222 70%,
          #121212 100%
        );
      }
      .floater {
        position: absolute;
        width: 200px;
        height: 200px;
        background-repeat: no-repeat;
      }
      #devday {
        background-image: url(dev-day.png);
      }
      #operahouse {
        background-image: url(opera-house.png);
        opacity: 0;
      }
      footer {
        z-index: 1;
        background: #FFF;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 3em;
        line-height: 3em;
        vertical-align: middle;
      }
      .cc-text a {
        color: #77A2D9;
      }
      .cc-text {
        float: right;
        padding-right: 1em;
      }
      .cc-logo {
        float: left;
        padding-left: 1em;
      }
      .cc-logo img {
        border-width: 0;
        vertical-align: middle;
      }
      #webgl-disabled {
        padding: 1em;
        background: #FFF;
        font-size: 2em;
        color: #F00;
        position: absolute;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <footer>
      <div class="cc-logo"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a></div>
      <div class="cc-text">This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</div>
    </footer>
    <div id="content"></div>
    <div class="floater" id="devday"></div>
    <div class="floater" id="operahouse"></div>
    <div id="webgl-disabled">You need to have WebGL enabled to view this HTML5 x GDD entry!</div>
    <script>
      (function() {
        // Detect WebGL
        if(!window.WebGLRenderingContext) {
          return;
        }
        try {
          document.createElement('canvas').getContext('experimental-webgl');
        } catch(e) {
          return;
        }
        document.body.removeChild(document.getElementById('webgl-disabled'));

        // Create the scene
        var camera = new THREE.Camera(50, window.innerWidth / window.innerHeight, 1, 10000);
        var distance = 27;

        var rezoom = function() {
          camera.position.z = distance / (window.innerWidth / window.innerHeight);
        };
        rezoom();

        var scene = new THREE.Scene();

        var light = new THREE.DirectionalLight(0xFFFFFF);
        light.position.set(0, 0.1, 1);
        light.position.normalize();
        scene.addLight(light);

        var sprite, geometry;

        // Southern Cross
        sprite = THREE.ImageUtils.loadTexture("star-bright.png");
        geometry = new THREE.Geometry();
        geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 20, -20)));
        geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(-4, 16, -20)));
        geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(3, 17, -20)));
        geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(1.5, 14, -20)));
        geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(0, 10, -20)));

        scene.addObject(new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({
          size: 1.4,
          map: sprite,
          blending: THREE.AdditiveBlending,
          depthTest: false,
          transparent : true
        })));

        // Other stars
        sprite = THREE.ImageUtils.loadTexture("star.png");
        geometry = new THREE.Geometry();
        var i, z;
        for(i = 0; i < 100; i++) {
          geometry.vertices.push(new THREE.Vertex(new THREE.Vector3(40 * Math.random() - 20, 40 * Math.random() - 20, 40 * Math.random() - 20)));
        }

        var system = new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({
          size: 0.7,
          map: sprite,
          blending: THREE.AdditiveBlending,
          depthTest: false,
          transparent : true
        }));
        scene.addObject(system);

        // Morphing mesh
        var loader = new THREE.JSONLoader(true);
        var mesh;
        loader.load({
          model: "OpenCallVisualSimplifyReshape.js",
          callback: function(geometry) {
            var material = new THREE.MeshLambertMaterial({
              color: 0x77A2D9,
              shading: THREE.FlatShading,
              opacity: 0.9,
              morphTargets: true
            });

            mesh = new THREE.Mesh(geometry, material);
            mesh.position.x = -1;
            mesh.position.y = -1;
            scene.addObject(mesh);
          }
        });

        // Renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        window.addEventListener('resize', function() {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(window.innerWidth, window.innerHeight);
          rezoom();
        }, false);
        document.getElementById('content').appendChild(renderer.domElement);

        var ratioX = 0;
        var ratioY = 0;
        document.addEventListener('mousemove', function(event) {
          ratioX = event.clientX / window.innerWidth - 0.5;
          ratioY = event.clientY / window.innerHeight - 0.5;
          camera.position.x = ratioX * 5;
          camera.position.y = ratioY * 20;
        }, false);

        var floaters = document.getElementsByClassName('floater');

        // Render function
        var render = function() {
          requestAnimationFrame(render);

          if(mesh) {
            var i;

            for(i = 0; i < mesh.morphTargetInfluences.length; i++) {
	      mesh.morphTargetInfluences[i] = 0;
            }
            var clampedRatio = Math.min(Math.max(ratioX + 0.3, 0), 0.6) / 0.6;

            for(i = 0; i < floaters.length; i++) {
              floaters[i].style.top = 50 + (Math.sin(new Date().getTime() / 1000) * 25) + 'px';
              floaters[i].style.left = ((((new Date().getTime() + 2000 * i) % 10000) / 10000) * (window.innerWidth + 200)) - 200 + 'px';
            }

            document.getElementById('devday').style.opacity = 1 - clampedRatio;
            document.getElementById('operahouse').style.opacity = clampedRatio;

            system.rotation.x -= 0.001;
            system.rotation.y += 0.001;

            var transitionAmount = clampedRatio * 10;
            mesh.morphTargetInfluences[Math.floor(transitionAmount)] = 1 - (transitionAmount % 1);
            mesh.morphTargetInfluences[Math.floor(transitionAmount) + 1] = transitionAmount % 1;
          }
      
          renderer.render(scene, camera);
        };
        render();
      })();
    </script>
  </body>
</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.