Canvas favicon example

paulkaplan · Dec 9, 2012 · 0be7951 · 0be7951
1 parent 06e295d
commit 0be7951
Show file tree

Hide file tree

Showing 10 changed files with 37,290 additions and 721 deletions.
diff --git a/Canvas/favicon.html b/Canvas/favicon.html
@@ -0,0 +1,80 @@
+<html>
+<head>
+  <link id="favicon" rel="shortcut icon" src="">
+  <title id="title">Hey look over here!</title>
+  <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600|Merriweather:400" rel="stylesheet" type="text/css">
+  <style>
+    body { font-family : 'Open Sans' }
+    div { margin: 0 auto 0 auto; padding:5em; width:50%; }
+    a { color: #000; text-decoration:none;}
+  </style>
+</head>
+<body>
+  <script>
+  startCamera();
+
+  var canvas;
+  var favicon = document.getElementById("favicon");
+  function startCamera()
+  {
+  	if (!navigator.getUserMedia)
+  	{
+  		navigator.getUserMedia = (function() {
+  			return 	navigator.webkitGetUserMedia ||
+  					navigator.mozGetUserMedia ||
+  					navigator.msGetUserMedia ||
+  					false;
+  		})();
+  	}
+  	navigator.getUserMedia({ video: true, audio: false }, cameraGranted, cameraDenied);
+  }
+
+  function cameraGranted(stream) {
+  	//video.autoplay = true;
+  	//video.src = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : stream;
+  	container = document.getElementById('container');
+     canvas = document.createElement('canvas')
+        canvas.width = 32;
+        canvas.height = 32;
+    ctx = canvas.getContext('2d');
+  	Video = document.createElement('video');
+  	Video.autoplay = true;
+
+  	Video.src = (window.webkitURL) ? window.webkitURL.createObjectURL(stream) : stream;
+  	var success = document.createElement('div');
+        success.innerHTML = "<h1>Far be it from me to ever let my common sense get in the way of my stupidity.</h1><h2>I say we press on.</h2><p>Yet another exercise in triviality, by <a href='http://paulkaplan.me'>Paul Kaplan</a></p>";
+    document.body.appendChild(success)
+    animate();
+  }
+  function cameraDenied(error)
+  {
+    var err = document.createElement('div');
+        err.innerHTML = "<h1>This is why we can't have nice things.</h1><p> Camera isn't working. Go to <a href='chrome://flags'>chrome://flags</a> and enable getUserMedia. Or Firefox equivalent.</p>";
+    document.body.appendChild(err)
+  }
+
+  function changeFavicon(){
+    ctx.drawImage(Video,0,0,canvas.width,canvas.height);
+    favicon.href = canvas.toDataURL();
+  }
+
+  function animate(){
+    requestAnimFrame(animate);
+    changeFavicon();
+  }
+
+  window.requestAnimFrame = (function(){
+    return  window.requestAnimationFrame       || 
+            window.webkitRequestAnimationFrame || 
+            window.mozRequestAnimationFrame    || 
+            window.oRequestAnimationFrame      || 
+            window.msRequestAnimationFrame     || 
+            function( callback ){
+              window.setTimeout(callback, 1000 / 60);
+            };
+  })();
+
+
+  </script>
+
+</body>
diff --git a/Engine/index.html b/Engine/index.html
@@ -0,0 +1,69 @@
+<DOCTYPE html>
+<html>
+  <head>
+    <title>Block Editor</title>
+    <meta charset="utf-8">
+    <style>* {margin:0;padding:0}</style>
+  </head>
+  <body>
+    <script src="../lib/js/underscore.js"></script>
+    <script src="../lib/js/cannon.js"></script>
+    <script src="../lib/js/dat.gui.js"></script>
+    <script src="../lib/js/three.js"></script>
+    <script src="../lib/js/detector.js"></script>
+    <script src="../lib/js/stats.js"></script>
+    <script src="https://raw.github.com/paulkaplan/Engine.js/master/build/engine.js"></script>
+  </body>
+  <script>
+
+    var world, mass, body, shape, timeStep=1/60,
+       camera, scene, renderer, engine;
+
+       var Ball = function(params){
+           this.radius = params['radius'];
+           this.mass   = params['mass'];
+           this.phys     = new CANNON.RigidBody( this.mass, new CANNON.Sphere(this.radius) )
+       }
+       __extends(Ball, Engine.Body)
+
+    initThree();
+    initCannon();
+    animate();
+
+    function initCannon() {
+        engine = new Engine( scene );
+        engine.addGround();
+        engine.addControls(camera, renderer.domElement);
+
+        var ball = new Ball({ mass:5, radius:3});
+        ball.setPosition(0,5,0);
+        engine.addBody( ball );
+
+    }
+
+    function initThree() {
+
+        scene = new THREE.Scene();
+        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+        camera.position.set(10,10,10)
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize( window.innerWidth, window.innerHeight );
+
+        document.body.appendChild( renderer.domElement );
+
+    }
+
+    function animate() {
+
+        requestAnimationFrame( animate );
+        engine.update();
+        render();
+    }
+
+    function render() {
+
+        renderer.render( scene, camera );
+
+    }
+  </script>
+</html>