Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

pimped out lounge with flames

  • Loading branch information...
commit 0938d0bdff39c30f267f99dd39ca5e7fb293a72e 1 parent de5759b
@olizilla olizilla authored
Showing with 197 additions and 2 deletions.
  1. +18 −0 client/css/lounge.css
  2. +179 −2 client/lounge.html
View
18 client/css/lounge.css
@@ -0,0 +1,18 @@
+/* ---- lounge.css ----------------------------------------------------------- */
+
+body {
+ background-color: black;
+ margin:0
+ padding:0;
+ text-align: center;
+}
+
+h1 {
+/* font-family: 'UnifrakturMaguntia', serif; */
+ font-family: 'Vollkorn', serif;
+ font-size: 5em;
+ top: 80%;
+ position: absolute;
+ color:black;
+ text-shadow: 3px 3px;
+}
View
181 client/lounge.html
@@ -3,11 +3,188 @@
<head>
<meta charset=utf-8>
<title>autobahn</title>
- <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
+<!-- <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script> -->
<script src="js/lounge.js"></script>
+<!-- <link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'> -->
+ <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/lounge.css" type="text/css" media="all" />
</head>
<body>
- <h1>AutoBahn</h1>
+
+
+ <div id="container">
+ <h1>AutoBahn</h1>
+ </div>
+
+ <script type="text/javascript">
+
+ var QUALITY = 10,
+ WIDTH = Math.floor(window.innerWidth / QUALITY), HEIGHT = Math.floor(window.innerHeight / QUALITY), SIZE = WIDTH * HEIGHT,
+
+ context, image, data,
+ buffer1, buffer2, turbulence,
+
+ isUserInteracting, pointers, count = 0;
+
+ init();
+ setInterval(loop, 1000 / 60);
+
+ function init() {
+
+ var container, canvas;
+
+ container = document.getElementById('container');
+
+ canvas = document.createElement("canvas");
+ canvas.width = WIDTH
+ canvas.height = HEIGHT;
+ canvas.style.width = window.innerWidth + "px";
+ canvas.style.height = window.innerHeight + "px";
+ container.appendChild(canvas);
+
+ context = canvas.getContext("2d");
+ context.fillStyle = "rgb(0, 0, 0)";
+ context.fillRect (0, 0, WIDTH, HEIGHT);
+ image = context.getImageData(0, 0, WIDTH, HEIGHT);
+ data = image.data;
+
+ buffer1 = [];
+ buffer2 = [];
+ turbulence = [];
+
+ for (var i = 0; i < SIZE + WIDTH; i ++) {
+
+ buffer1[i] = 0;
+ buffer2[i] = 0;
+ turbulence[i] = Math.random();
+ }
+
+ document.addEventListener('mousedown', onDocumentMouseDown, false);
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
+ document.addEventListener('mouseup', onDocumentMouseUp, false);
+ document.addEventListener('mouseout', onDocumentMouseOut, false);
+
+ document.addEventListener('touchstart', onDocumentTouchStart, false);
+ document.addEventListener('touchmove', onDocumentTouchMove, false);
+ document.addEventListener('touchend', onDocumentTouchEnd, false);
+ }
+
+ //
+
+ function onDocumentMouseDown(event) {
+
+ event.preventDefault();
+
+ isUserInteracting = true;
+
+ pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]];
+
+ }
+
+ function onDocumentMouseMove(event) {
+
+ pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]];
+
+ }
+
+ function onDocumentMouseUp(event) {
+
+ isUserInteracting = false;
+
+ }
+
+ function onDocumentMouseOut(event) {
+
+ isUserInteracting = false;
+
+ }
+
+ function onDocumentTouchStart(event) {
+
+ isUserInteracting = true;
+
+ event.preventDefault();
+
+ pointers = [];
+
+ for (var i = 0; i < event.touches.length; i++) {
+
+ pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]);
+
+ }
+
+ }
+
+ function onDocumentTouchMove(event) {
+
+ event.preventDefault();
+
+ pointers = [];
+
+ for (var i = 0; i < event.touches.length; i++) {
+
+ pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]);
+
+ }
+
+ }
+
+ function onDocumentTouchEnd(event) {
+
+ event.preventDefault();
+
+ isUserInteracting = false;
+
+ }
+
+ //
+
+ function emit(x, y) {
+
+ buffer1[ Math.floor(x) + (Math.floor(y) * WIDTH)] = 1000;
+
+ }
+
+ function loop() {
+
+ if (isUserInteracting) {
+
+ for (var i = 0; i < pointers.length; i++) {
+
+ emit(pointers[i][0], pointers[i][1]);
+
+ }
+ }
+
+ var iMax = WIDTH / 5;
+
+ for (var i = 0; i < iMax; i ++) {
+
+ emit(Math.random() * WIDTH, HEIGHT);
+
+ }
+
+ var i4, pixel;
+
+ for (var i = WIDTH; i < SIZE; i ++) {
+
+ i4 = i * 4;
+
+ pixel = buffer2[i] = ((buffer1[i - 1] + buffer1[i + 1]) * .235) + (buffer1[i + WIDTH] * turbulence[(i + count) % SIZE]);
+
+ data[ i4 ] = Math.min( 255, pixel << 3 );
+ data[ i4 + 1 ] = Math.min( 255, pixel );
+ data[ i4 + 2 ] = Math.min( 255, pixel >> 1 );
+ }
+
+ buffer1 = buffer2.slice(0);
+
+ context.putImageData(image, 0, 0);
+
+ count += Math.floor(Math.random() * SIZE);
+ }
+
+ </script>
+
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.