From 1016c8a9e0cb0ead6debf1436a2d479afd3fb073 Mon Sep 17 00:00:00 2001
From: Zaphyk <zaphyk@live.com>
Date: Mon, 25 Sep 2017 09:15:37 -0300
Subject: [PATCH] added responsiveness

---
 perlin.css  | 42 ++++++++++++++++++++++++++++++++++++++++++
 perlin.html |  2 +-
 perlin.js   | 26 ++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/perlin.css b/perlin.css
index e2451b5..448be1e 100644
--- a/perlin.css
+++ b/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%;
diff --git a/perlin.html b/perlin.html
index 33edeea..acc78b0 100644
--- a/perlin.html
+++ b/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>
 
diff --git a/perlin.js b/perlin.js
index c878fb5..74c566c 100644
--- a/perlin.js
+++ b/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.
 //