added responsiveness

perlin.css

@@ -31,6 +31,48 @@
 	box-shadow: 2px 4px 8px rgba(0, 0, 0, .5);
 }
 
+.render{
+	width:100%;
+	height:40%;	
+}
+
+@media only screen and (max-device-width: 768px) {
+
+	.title{
+		font-size: 60px;
+		left:2.5vh;	
+	}
+
+	.source{
+		font-size: 300px;
+		left:20vh;
+		top:75vh;
+		text-align: center;
+		padding-bottom: 5px; 
+		border-radius: 150px;
+		width: 295px;
+		height: 295px;
+	}
+
+	.march{
+		top:65vh;
+		height:40px;
+		left: 35vh;
+	}
+
+	.shape{
+		left: 12.5vh;
+		top:65vh;
+		font-size:40px;
+	}
+
+	.render{
+		position:absolute;
+		top: 12.5vh;	
+	}
+
+}
+
 .title{
 	text-align: center;
 	left:38%;

perlin.html

@@ -50,7 +50,7 @@ <h2 class = "ui title">Smooth Noise Algorithms</h2>
 	  	<i class="ui source fa fa-github" aria-hidden="true"></i>
   	</a>
 
-    <canvas id="glcanvas" style="width:100%;height:40%;" ></canvas>
+    <canvas id="glcanvas" class="render" ></canvas>
 
   </body>
 

perlin.js

@@ -369,6 +369,32 @@ function handleMouseMove(event) {
 	lastMouseY = newY;
 }
 
+init();
+
+function touchHandler(event) {
+    var touch = event.changedTouches[0];
+
+    var simulatedEvent = document.createEvent("MouseEvent");
+        simulatedEvent.initMouseEvent({
+        touchstart: "mousedown",
+        touchmove: "mousemove",
+        touchend: "mouseup"
+    }[event.type], true, true, window, 1,
+        touch.screenX, touch.screenY,
+        touch.clientX, touch.clientY, false,
+        false, false, false, 0, null);
+
+    touch.target.dispatchEvent(simulatedEvent);
+    event.preventDefault();
+}
+
+function init() {
+    document.addEventListener("touchstart", touchHandler, true);
+    document.addEventListener("touchmove", touchHandler, true);
+    document.addEventListener("touchend", touchHandler, true);
+    document.addEventListener("touchcancel", touchHandler, true);
+}
+
 //
 // Draw the scene.
 //