initial code addition

mdn · Jun 17, 2014 · 7d4acb3 · 7d4acb3
1 parent 8b018b7
commit 7d4acb3
Show file tree

Hide file tree

Showing 13 changed files with 700 additions and 0 deletions.
diff --git a/.htaccess b/.htaccess
@@ -0,0 +1,5 @@
+AddType application/x-web-app-manifest+json .webapp
+
+AddType video/ogg .ogv
+AddType video/mp4 .mp4
+AddType video/webm .webm
diff --git a/app-icons/icon-128.png b/app-icons/icon-128.png
diff --git a/app-icons/icon-16.png b/app-icons/icon-16.png
diff --git a/app-icons/icon-60.png b/app-icons/icon-60.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-us">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+	<title>Violent Theremin</title>
+
+	<!--[if le IE 9]>
+      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="scripts/respond.js"></script>
+    <![endif]-->
+
+
+	<link href="styles/normalize.css" rel="stylesheet" type="text/css">
+
+	<link href="styles/app.css" rel="stylesheet" type="text/css">
+
+</head>
+<body>
+  <h1>Violent Theremin</h1>
+
+    <button class="mute">Mute</button>
+    <button class="clear">Clear screen</button>
+
+    <canvas class="canvas">
+      Your browser does not support HTML5 canvas
+    </canvas>
+
+  <!-- The following element pulls in the script for the default template functionality -->
+
+    <script src="scripts/install.js"></script>  
+
+    <!-- Below is your custom application script -->
+
+    <script src="scripts/app.js"></script>
+
+</body>
+</html>
diff --git a/manifest.webapp b/manifest.webapp
@@ -0,0 +1,32 @@
+{
+  "version": "0.1",
+  "name": "Violent Theremin",
+  "description": "A sample MDN app that uses Web Audio API to generate an audio tone, the pitch and volume of which is varied by the movement of the mouse and control keys. It also uses HTML5 Canvas to generate some visualizations.",
+  "launch_path": "/index.html",
+  "icons": {
+    "60": "app-icons/icon-60.png",
+    "128": "app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Chris Mills",
+    "url": "https://developer.mozila.org"
+  },
+  "locales": {
+    "es": {
+      "description": "A sample MDN app that uses Web Audio API to generate an audio tone, the pitch and volume of which is varied by the movement of the mouse and control keys. It also uses HTML5 Canvas to generate some visualizations.",
+      "developer": {
+        "url": "https://developer.mozila.org"
+      }
+    },
+    "it": {
+      "description": "A sample MDN app that uses Web Audio API to generate an audio tone, the pitch and volume of which is varied by the movement of the mouse and control keys. It also uses HTML5 Canvas to generate some visualizations.",
+      "developer": {
+        "url": "https://developer.mozila.org"
+      }
+    }
+  },
+  "default_locale": "en",
+  "permissions": {
+  },
+  "orientation":"landscape"
+}
diff --git a/scripts/app.js b/scripts/app.js
@@ -0,0 +1,105 @@
+// create web audio api context
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// create Oscillator and gain node
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+// connect oscillator to gain node to speakers
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// create initial theremin frequency and volumn values
+
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var maxFreq = 6000;
+var maxVol = 1;
+
+var initialFreq = 3000;
+var initialVol = 0.5;
+
+// set options for the oscillator
+
+oscillator.type = 1; // square wave
+oscillator.frequency.value = initialFreq; // value in hertz
+oscillator.start();
+
+gainNode.gain.value = initialVol;
+
+// Mouse pointer coordinates
+
+var CurX;
+var CurY;
+
+// Get new mouse pointer coordinates when mouse is moved
+// then set new gain and putch values
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {   
+    CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillator.frequency.value = (CurX/WIDTH) * maxFreq;
+    gainNode.gain.value = (CurY/HEIGHT) * maxVol;
+
+    canvasDraw();
+}
+
+// mute button
+
+var mute = document.querySelector('.mute');
+
+mute.onclick = function() {
+  if(mute.id == "") {
+    gainNode.disconnect(audioCtx.destination);
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.connect(audioCtx.destination);
+    mute.id = "";    
+    mute.innerHTML = "Mute";
+  }
+}
+
+
+
+// canvas visualization
+
+function random(number1,number2) {
+  var randomNo = number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+  return randomNo;
+} 
+
+var canvas = document.querySelector('.canvas');
+canvas.width = WIDTH;
+canvas.height = HEIGHT; 
+
+var canvasCtx = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = CurX;
+  rY = CurY;
+  rC = Math.floor((gainNode.gain.value/maxVol)*30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i<=15;i=i+2) {
+    canvasCtx.beginPath();
+    canvasCtx.fillStyle = 'rgb(' + 100+(i*10) + ',' + Math.floor((gainNode.gain.value/maxVol)*255) + ',' + Math.floor((oscillator.frequency.value/maxFreq)*255) + ')';
+    canvasCtx.arc(rX+random(0,50),rY+random(0,50),rC/2+i,(Math.PI/180)*0,(Math.PI/180)*360,false);
+    canvasCtx.fill();
+    canvasCtx.closePath();     
+  }    
+}
+
+// clear screen
+
+var clear = document.querySelector('.clear');
+
+clear.onclick = function() {
+  canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+}
diff --git a/scripts/install.js b/scripts/install.js
@@ -0,0 +1,29 @@
+var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something 
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
diff --git a/scripts/respond.js b/scripts/respond.js
diff --git a/styles/app.css b/styles/app.css
@@ -0,0 +1,59 @@
+/* general styling */
+
+html {
+  font-size: 10px;
+}
+
+/* header styling */
+
+h1 {
+  position: absolute;
+  top: 0;
+  right: 15px;
+}
+
+/* button styling */
+
+button {
+    background-color: #0088cc;
+    background-image: linear-gradient(to bottom,  #0088cc 0%,#0055cc 100%); 
+    text-shadow: 1px 1px 1px black;  
+    text-align: center;
+    color: white;
+    border: none;
+    width: 150px;
+    font-size: 1.6rem; 
+    line-height: 2rem;
+    padding: .5rem; 
+    display: block;
+    opacity: 0.3;
+
+    transition: 1s all;
+    -webkit-transition: 1s all;
+
+    position: absolute;
+}
+
+button:hover, button:focus {
+  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.7);
+  opacity: 1;
+}
+
+button:active {
+  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.7);
+}
+
+#activated {
+  background-color: red;
+  color: white;
+}
+
+.mute {
+  top: 40px;
+  left: 5px;
+}
+
+.clear {
+  top: 5px;
+  left: 5px;
+}
diff --git a/styles/install-button.css b/styles/install-button.css
@@ -0,0 +1,20 @@
+#install-btn {
+    background: #0088cc; /* Old browsers */
+    background: -moz-linear-gradient(top,  #0088cc 0%, #0055cc 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #0088cc 0%,#0055cc 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #0088cc 0%,#0055cc 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */
+
+    text-align: center;
+    font-size: 200%;
+    margin: 1em auto;
+    display: block;
+    padding: .5em;
+    color: white;
+    width: 10em;
+    max-width: 80%;
+    line-height: 1.2em;
+}