Inserted Particleground.js, Changed Readme

barning · Sep 22, 2014 · 2649a85 · 2649a85
1 parent 4a41eca
commit 2649a85
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Please put on your headphones, or the audiosignal will be disturbed.
 
 **Start server locally:** `node index.js`
 
-It's build with [Node.js](http://nodejs.org/), [Socket.io](http://socket.io/) and [P5.js](http://p5js.org/).
+It's build with [Node.js](http://nodejs.org/), [Socket.io](http://socket.io/), [Particleground](http://jnicol.github.io/particleground/) and [P5.js](http://p5js.org/).
 
 ##Screenshot
 ![image](./img/screenshot.png)
diff --git a/css/style.css b/css/style.css
@@ -43,9 +43,23 @@ input, select, textarea {
 * {
   padding: 0;
   margin: 0;
-  background-color: #2c3e50;
   box-sizing: border-box; }
 
+#processing {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  z-index: 2; }
+
+#background {
+  background-color: #2c3e50;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  z-index: 1; }
+
 #about {
   position: absolute;
   background: rgba(0, 0, 0, 0.8);
@@ -77,13 +91,15 @@ input, select, textarea {
   position: absolute;
   bottom: 2%;
   left: 1%;
+  z-index: 3;
   background: transparent; }
   .info a {
     color: white; }
     .info a:hover {
       text-decoration: none; }
 
 .name {
+  z-index: 3;
   position: absolute;
   bottom: 2%;
   right: 0%;

diff --git a/img/screenshot.png b/img/screenshot.png
diff --git a/index.html b/index.html
@@ -11,11 +11,14 @@
 	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 	<script src="js/p5.js"></script>
 	<script src="js/sound.js"></script>
+	<script src="js/jquery.particleground.min.js"></script>
 
 </head>
 <body>
 	<div id="processing">
 	</div>
+<div id="background">
+</div>
 	<div id="about">
 		<section>
 			<article>
@@ -30,7 +33,7 @@ <h2>Hah, thought you woud never ask!</h2>
 	<section class="name">
 		<input type='text' class='loginname' placeholder='What is your Name?'>
 		<input type='submit' class='submit' value='Submit'>
-	</section>	
+	</section>
 	<p class="info">
 		Please put on your headphones!<br>
 		<a  class="what" href="#">What is this?</a><br>
@@ -46,20 +49,21 @@ <h2>Hah, thought you woud never ask!</h2>
 	}
 
 	$(document).ready( function() {
+
 		$(".submit").click( function() {
 			registerName();
 			$( ".name" ).fadeOut( "slow", function() {
 			// Animation complete.
 			});
-		});	
+		});
 		$(".what").click( function() {
 			$( "#about" ).fadeIn( "slow", function() {
 			});
 		});
 		$("#about").click( function() {
 			$( "#about" ).fadeOut( "slow", function() {
 			});
-		});	
+		});
 	});
 	</script>
 
@@ -83,11 +87,21 @@ <h2>Hah, thought you woud never ask!</h2>
 		var myCanvas = createCanvas(windowWidth, windowHeight);
 		myCanvas.parent('processing');
 		sizeforServer();
+		$('#background').particleground({
+		dotColor: '#374F66',
+		lineColor: '#374F66',
+		particleRadius: 25,
+		parallaxMultiplier: 30,
+		density: 35000,
+		curvedLines: true,
+		proximity: 150
+		});
 
 	}
 
 	function draw() {
-		background(44, 62, 80);
+		clear();
+		//background(44, 62, 80);
 		fill(100);
 		textAlign(CENTER);
 		fill(255);
@@ -133,7 +147,7 @@ <h2>Hah, thought you woud never ask!</h2>
 	ellipseMode(CENTER);
 	if (this.myname != undefined){
 		textSize(18);
-		text(this.myname , this.position.x+90, this.position.y+5); 
+		text(this.myname , this.position.x+90, this.position.y+5);
 	}
 	ellipse(this.position.x, this.position.y,this.r,this.r);
 
@@ -160,7 +174,7 @@ <h2>Hah, thought you woud never ask!</h2>
 		var y= random(50,windowHeight-130);
 		boids[i] = new Boid(x,y,i );
 		socket.emit ('who',{myX:x,myY: y});
-	} 
+	}
 });
 
 
@@ -180,7 +194,7 @@ <h2>Hah, thought you woud never ask!</h2>
 	var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
 	var _docWidth = (document.width !== undefined) ? document.width : document.body.offsetWidth;
 	socket.emit ('mySize',{mywidth: _docWidth, myheight: _docHeight});
-}  
+}
 
 socket.on ('newName', function (data) {
 	var tempName = data.name;
@@ -211,6 +225,6 @@ <h2>Hah, thought you woud never ask!</h2>
 	boid.color = color(r,g,b);
 	boid.myname = tempMyname;
 });
-</script>    
+</script>
 </body>
 </html>
diff --git a/js/jquery.particleground.min.js b/js/jquery.particleground.min.js
diff --git a/scss/style.scss b/scss/style.scss
@@ -8,14 +8,27 @@
 * {
 	padding: 0;
 	margin: 0;
-	background-color: #2c3e50;
-	box-sizing: border-box; 
+	box-sizing: border-box;
 }
 
 #processing {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	z-index: 2;
+}
 
+#background {
+	background-color: #2c3e50;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	z-index: 1;
 }
 
+
 #about {
 	position: absolute;
 	background: rgba(0, 0, 0, 0.8);
@@ -53,6 +66,7 @@
 	position: absolute;
 	bottom: 2%;
 	left: 1%;
+	z-index:3;
 	background: transparent;
 
 	a {
@@ -64,6 +78,7 @@
 }
 
 .name {
+	z-index:3;
 	position: absolute;
 	bottom: 2%;
 	right: 0%;
@@ -93,4 +108,4 @@
 			transform: scale(0.9);
 		}
 	}
-}
+}