From 3294d11a12740ce1a780120c6ac10a6810bddee5 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 30 Sep 2017 17:14:15 -0400 Subject: [PATCH 01/16] initial comit --- gyrio/index.css | 11 +++++++++++ gyrio/index.html | 15 +++++++++++++++ gyrio/index.js | 0 3 files changed, 26 insertions(+) create mode 100644 gyrio/index.css create mode 100644 gyrio/index.html create mode 100644 gyrio/index.js diff --git a/gyrio/index.css b/gyrio/index.css new file mode 100644 index 0000000..99c1fb4 --- /dev/null +++ b/gyrio/index.css @@ -0,0 +1,11 @@ +@import url('https://fonts.googleapis.com/css?family=Raleway'); +@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); + +html { + font-family: 'Raleway'; + /*background-color: #15171B;*/ +} + +body { + margin: 0; +} \ No newline at end of file diff --git a/gyrio/index.html b/gyrio/index.html new file mode 100644 index 0000000..d6939eb --- /dev/null +++ b/gyrio/index.html @@ -0,0 +1,15 @@ + + + + + Foxnet + + + + + + + + + + \ No newline at end of file diff --git a/gyrio/index.js b/gyrio/index.js new file mode 100644 index 0000000..e69de29 From 47c2c171890dffc668c27a663b680650a468ce55 Mon Sep 17 00:00:00 2001 From: yamanq Date: Sat, 30 Sep 2017 18:30:11 -0400 Subject: [PATCH 02/16] add function to get website --- gyrio/index.html | 31 +++++++++++++++++-------------- gyrio/index.js | 6 ++++++ 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/gyrio/index.html b/gyrio/index.html index d6939eb..4d18dfb 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -1,15 +1,18 @@ - - - - Foxnet - - - - - - - - - - \ No newline at end of file + + + + + Foxnet + + + + + + + + + + + + diff --git a/gyrio/index.js b/gyrio/index.js index e69de29..773110c 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -0,0 +1,6 @@ +function getWebsite(geturl) { + xmlhttp=new XMLHttpRequest(); + xmlhttp.open("GET", geturl, false); + xmlhttp.send(); + var data = xmlhttp.responseText; +} From 7a22c1be81dae4923722d2aa6ced23dbfe90147d Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 30 Sep 2017 18:32:26 -0400 Subject: [PATCH 03/16] drawing begin --- gyrio/index.html | 2 +- gyrio/index.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/gyrio/index.html b/gyrio/index.html index d6939eb..32acc98 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -9,7 +9,7 @@ - + \ No newline at end of file diff --git a/gyrio/index.js b/gyrio/index.js index e69de29..d0fdbee 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -0,0 +1,23 @@ +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +canvas.width = screen.width; +canvas.height = screen.height; + +function randInt(min,max) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + + +function generateString() { + var final = ""; + var length = randInt(50,100); + for(var i = 0; i < length; i++) { + final += randInt(0,1); + } + return final; +} + +console.log(generateString()); + +ctx.fillStyle = "#000"; +ctx.fillRect(0,0, canvas.width, canvas.height); \ No newline at end of file From fe9b75bdad0a58345e797e4e0cad16b6da0f20fc Mon Sep 17 00:00:00 2001 From: Arav-Agarwal Date: Sat, 30 Sep 2017 18:43:11 -0400 Subject: [PATCH 04/16] Added string to binary function --- gyrio/index.html | 1 + gyrio/index.js | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/gyrio/index.html b/gyrio/index.html index d6939eb..00f13b4 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -7,6 +7,7 @@ + diff --git a/gyrio/index.js b/gyrio/index.js index e69de29..c6e275e 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -0,0 +1,9 @@ +function toBinary(text){ + var output = ""; + for (var i = 0; i < text.length; i++) + { + var letter = text[i].charCodeAt(0).toString(2); + output += "0".repeat(8-letter.length) + letter; + } + return output; +} \ No newline at end of file From 408e7e0196daa17bf57364fad9bb119fbb9f0a90 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 30 Sep 2017 18:46:31 -0400 Subject: [PATCH 05/16] begin frame drawing --- gyrio/index.html | 24 ++---------------------- gyrio/index.js | 36 +++++++++++++++++++++++++++++------- 2 files changed, 31 insertions(+), 29 deletions(-) diff --git a/gyrio/index.html b/gyrio/index.html index 46f844c..9999254 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -1,9 +1,8 @@ -<<<<<<< HEAD - Foxnet + Gyrio @@ -13,23 +12,4 @@ - -======= - - - - - Foxnet - - - - - - - - - - - - ->>>>>>> 3bcdb922df05952a164b59bdb8ad9d2aa2785b4d + \ No newline at end of file diff --git a/gyrio/index.js b/gyrio/index.js index a608e99..3a3d28f 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -1,14 +1,16 @@ - var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); -canvas.width = screen.width; -canvas.height = screen.height; +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +var frames = [ + "0" +]; function randInt(min,max) { return Math.floor(Math.random() * (max - min + 1)) + min; } - function generateString() { var final = ""; var length = randInt(50,100); @@ -18,10 +20,25 @@ function generateString() { return final; } -console.log(generateString()); +function generateFrames(string, speed) { + // Speed is in bits per second -ctx.fillStyle = "#000"; -ctx.fillRect(0,0, canvas.width, canvas.height); +} + +function drawFrame(frame) { + ctx.beginPath(); + var frame = frames[frame]; + for(var i = 0; i < frame.length; i++) { + if(frame[i] === "0") { + console.log("asdf"); + ctx.beginPath(); + ctx.moveTo(0,canvas.height/2); + ctx.lineTo(canvas.width,canvas.height/2); + ctx.strokeStyle="#4CAF50"; + ctx.stroke(); + } + } +} function getWebsite(geturl) { xmlhttp=new XMLHttpRequest(); @@ -29,3 +46,8 @@ function getWebsite(geturl) { xmlhttp.send(); var data = xmlhttp.responseText; } + +ctx.fillStyle = "#000"; +ctx.fillRect(0,0, canvas.width, canvas.height); +generateFrames(generateString()); +drawFrame(0); From 58a74a95d45634cabc49cfd5c01f0975c8dfa28f Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 30 Sep 2017 21:43:39 -0400 Subject: [PATCH 06/16] optimize rendering --- gyrio/index.js | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/gyrio/index.js b/gyrio/index.js index 3b02d78..8f6d3bb 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -31,23 +31,26 @@ function generateString() { function generateFrames(frame, string, width, height, rate) { // Rate is in bits per second // 30 frames per second + var bitsPerSection = Math.ceil(canvas.width/width); var shift = canvas.width-rate*width*frame/30; var bitsToCalc = Math.ceil(rate*width*frame/(width*30)); var output = []; console.log(shift); console.log(bitsToCalc); - for(var i = 0; i < bitsToCalc; i++) { - var x = i*width; - if(parseInt(string[i])) { - output.push([x+shift, -height+canvas.height/2]); - output.push([x+width+shift, -height+canvas.height/2]); - if(string[i-1] === 0) { - output.push([x+width+shift, canvas.height/2]); + for(var i = bitsToCalc-bitsPerSection; i < bitsToCalc; i++) { + try { + var x = i*width; + if(parseInt(string[i])) { + output.push([x+shift, -height+canvas.height/2]); + output.push([x+width+shift, -height+canvas.height/2]); + if(string[i-1] === 0) { + output.push([x+width+shift, canvas.height/2]); + } + } else { + output.push([x+shift, canvas.height/2]); + output.push([x+width+shift,canvas.height/2]); } - } else { - output.push([x+shift, canvas.height/2]); - output.push([x+width+shift,canvas.height/2]); - } + } catch(err) {} } return output; @@ -74,7 +77,7 @@ function generateFrames(frame, string, width, height, rate) { } return uniq(frame);*/ } -var string = toBinary(getWebsite("https://www.google.com/")); +var string = toBinary(getWebsite("https://www.google.com")); function drawFrame(frame) { ctx.fillRect(0,0, canvas.width, canvas.height); @@ -100,8 +103,11 @@ ctx.fillStyle = "#000"; ctx.fillRect(0,0, canvas.width, canvas.height); function animate(n) { + if(!animate) return; drawFrame(n); setTimeout(function() { animate(n+1) }, 100/3); } animate(0); + +var animate = false; From 25f6826113c45d002b9882659e587f1b4fa0276b Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 30 Sep 2017 22:06:56 -0400 Subject: [PATCH 07/16] Added proxy to xml request --- gyrio/index.js | 51 ++++++++++++++++---------------------------------- 1 file changed, 16 insertions(+), 35 deletions(-) diff --git a/gyrio/index.js b/gyrio/index.js index 8f6d3bb..481ddd6 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -53,36 +53,14 @@ function generateFrames(frame, string, width, height, rate) { } catch(err) {} } return output; - - /*var currentBit = ((frame/30)*scrollRate)/width; - var shift = currentBit - Math.floor(currentBit); - for(var i = Math.floor(currentBit); i++; i<(bitsPerSection+(Math.floor(currentBit)+1))){ - var xVal = ((i-Math.Math.floor(currentBit))-shift)*width; - var yVal = canvas.height/2 - if(string[i-1]=== 1 && string[i]=== 1){ - frame.push([xVal,yVal+100]);//Assuming height is 100px - frame.push([xVal+width,yVal+100]); - frame.push([xVal+width,yVal]); - } - else if(string[i]===1){ - frame.push([xVal,yVal]); - frame.push([xVal,yVal+100]); - frame.push([xVal+width,yVal+100]); - frame.push([xVal+width,yVal]); - } - else { - frame.push([xVal,yVal]); - frame.push([xVal.width,yVal]); - } - } - return uniq(frame);*/ } + var string = toBinary(getWebsite("https://www.google.com")); function drawFrame(frame) { ctx.fillRect(0,0, canvas.width, canvas.height); ctx.beginPath(); - var frame = generateFrames(frame, string, 100, 100, 10); + var frame = generateFrames(frame, string, 100, 100, 10000000000000); console.log(frame); ctx.moveTo(0, canvas.height/2); for(var i = 0; i < frame.length; i++) { @@ -92,22 +70,25 @@ function drawFrame(frame) { ctx.stroke(); } -function getWebsite(geturl) { - xmlhttp=new XMLHttpRequest(); - xmlhttp.open("GET", geturl, false); - xmlhttp.send(); - var data = xmlhttp.responseText; +function getWebsite(url) { + var proxy = "https://cors-anywhere.herokuapp.com/"; + var xhr = new XMLHttpRequest(); + xhr.open("GET", proxy+url, false); + xhr.send(); + return xhr.responseText; +} + +function animate(n) { + if(!doAnimate) return; + drawFrame(n); + setTimeout(function() { animate(n+1) }, 100/3); } ctx.fillStyle = "#000"; ctx.fillRect(0,0, canvas.width, canvas.height); -function animate(n) { - if(!animate) return; - drawFrame(n); - setTimeout(function() { animate(n+1) }, 100/3); -} +var doAnimate = true; animate(0); -var animate = false; + From b5d1d73b0cf917e7e23f1ca0641edece1d977c0c Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 30 Sep 2017 22:41:04 -0400 Subject: [PATCH 08/16] added sound rendering --- gyrio/index.js | 68 +++++++++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/gyrio/index.js b/gyrio/index.js index 481ddd6..7b3730b 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -1,20 +1,13 @@ -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; - -var frames = []; - function randInt(min,max) { return Math.floor(Math.random() * (max - min + 1)) + min; } -function toBinary(text){ +function convertData(text, base){ var output = ""; for (var i = 0; i < text.length; i++) { - var letter = text[i].charCodeAt(0).toString(2); - output += "0".repeat(8-letter.length) + letter; + var letter = text[i].charCodeAt(0).toString(base); + output += letter; } return output; } @@ -35,8 +28,6 @@ function generateFrames(frame, string, width, height, rate) { var shift = canvas.width-rate*width*frame/30; var bitsToCalc = Math.ceil(rate*width*frame/(width*30)); var output = []; - console.log(shift); - console.log(bitsToCalc); for(var i = bitsToCalc-bitsPerSection; i < bitsToCalc; i++) { try { var x = i*width; @@ -55,19 +46,16 @@ function generateFrames(frame, string, width, height, rate) { return output; } -var string = toBinary(getWebsite("https://www.google.com")); - -function drawFrame(frame) { - ctx.fillRect(0,0, canvas.width, canvas.height); - ctx.beginPath(); - var frame = generateFrames(frame, string, 100, 100, 10000000000000); - console.log(frame); - ctx.moveTo(0, canvas.height/2); +function drawFrame(frame ,input) { + visualCtx.fillRect(0,0, canvas.width, canvas.height); + visualCtx.beginPath(); + var frame = generateFrames(frame, input, 100, 100, 100); + visualCtx.moveTo(0, canvas.height/2); for(var i = 0; i < frame.length; i++) { - ctx.lineTo(frame[i][0], frame[i][1]); + visualCtx.lineTo(frame[i][0], frame[i][1]); } - ctx.strokeStyle="#4CAF50"; - ctx.stroke(); + visualCtx.strokeStyle="#4CAF50"; + visualCtx.stroke(); } function getWebsite(url) { @@ -78,17 +66,39 @@ function getWebsite(url) { return xhr.responseText; } -function animate(n) { +function animate(n , input) { if(!doAnimate) return; - drawFrame(n); - setTimeout(function() { animate(n+1) }, 100/3); + drawFrame(n, input); + setTimeout(function() { animate(n+1, input) }, 100/3); } -ctx.fillStyle = "#000"; -ctx.fillRect(0,0, canvas.width, canvas.height); +function sound(n, input) { + if(n === 0) { + osc.connect(audioCtx.destination); + osc2.connect(audioCtx.destination); + osc3.connect(audioCtx.destination); + osc.start(0); + } + osc.frequency.value = freq[input[n]]; + setTimeout(function() { sound(n+1, input); }, 500); +} +var canvas = document.getElementById("canvas"); +var visualCtx = canvas.getContext("2d"); +var audioCtx = new window.AudioContext(); +var osc = audioCtx.createOscillator(); var doAnimate = true; +var freq = [440, 494, 523, 587, 660, 698, 784, 880]; + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +visualCtx.fillStyle = "#000"; +visualCtx.fillRect(0,0, canvas.width, canvas.height); + + +animate(0, convertData(getWebsite("https://www.google.com"), 2)); +sound(0, convertData(getWebsite("https://www.google.com"), 8)); -animate(0); From 872330dd6ab4da39eff98d59488b2486a4ffb4a5 Mon Sep 17 00:00:00 2001 From: Arav-Agarwal Date: Sun, 1 Oct 2017 00:34:43 -0400 Subject: [PATCH 09/16] Added rotation and multiple color options --- gyrio/index.js | 64 ++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 47 insertions(+), 17 deletions(-) diff --git a/gyrio/index.js b/gyrio/index.js index 7b3730b..6367a22 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -24,7 +24,7 @@ function generateString() { function generateFrames(frame, string, width, height, rate) { // Rate is in bits per second // 30 frames per second - var bitsPerSection = Math.ceil(canvas.width/width); + var bitsPerSection = Math.ceil(canvas.width/width)+1; var shift = canvas.width-rate*width*frame/30; var bitsToCalc = Math.ceil(rate*width*frame/(width*30)); var output = []; @@ -45,19 +45,49 @@ function generateFrames(frame, string, width, height, rate) { } return output; } - function drawFrame(frame ,input) { visualCtx.fillRect(0,0, canvas.width, canvas.height); - visualCtx.beginPath(); - var frame = generateFrames(frame, input, 100, 100, 100); - visualCtx.moveTo(0, canvas.height/2); - for(var i = 0; i < frame.length; i++) { - visualCtx.lineTo(frame[i][0], frame[i][1]); + visualCtx.beginPath(); + var frame1 = generateFrames(frame, input, 100, 100, 5); + console.log(frame1);; + visualCtx.moveTo(0,(canvas.height/2)-100); + for(var i = 1; i < frame1.length; i++) { + visualCtx.lineTo(frame1[i][0],frame1[i][1]); + } + visualCtx.strokeStyle="#006064"; + visualCtx.stroke(); } - visualCtx.strokeStyle="#4CAF50"; - visualCtx.stroke(); } +function drawFrame2(frame ,input) { + visualCtx.fillRect(0,0, canvas.width, canvas.height); + var ColorList = ["006064"/*,"00838F","0097A7","00ACC1","00B8D4","00E5FF","18FFFF","84FFFF"*/]; + for(var j=0;j Date: Sun, 1 Oct 2017 02:49:09 -0400 Subject: [PATCH 10/16] front-end --- gyrio/index.css | 120 ++++++++++++++++++++++++++++++++++++++++++++++- gyrio/index.html | 22 +++++++-- gyrio/index.js | 68 ++++++++++++++++++--------- 3 files changed, 183 insertions(+), 27 deletions(-) diff --git a/gyrio/index.css b/gyrio/index.css index 99c1fb4..34a9ed2 100644 --- a/gyrio/index.css +++ b/gyrio/index.css @@ -1,5 +1,4 @@ @import url('https://fonts.googleapis.com/css?family=Raleway'); -@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); html { font-family: 'Raleway'; @@ -8,4 +7,123 @@ html { body { margin: 0; +} + +header { + height: 7vh; + width: 100%; + position: absolute; + top: 0; + background-color: rgba(255,255,255,0.05); +} + +#title { + margin: 0; + padding-left: 2%; + padding-right: 2%; + font-family: "Raleway"; + line-height: 5vh; + color: white; + font-weight: 100; + display:inline-block; + position: relative; + top: 50%; + transform: translateY(-50%); + float: left; +} + +#urlInput { + padding: 2%; + height: 100%; + width: 30%; + background-color: rgba(255,255,255,0.05); + border: 0; + border-radius: 3px; + display: inline-block; + position: relative; + top: 50%; + font-family: "Raleway"; + transform: translateY(-50%); + outline: none; + color: white; + font-size: 110%; + float: left; +} + +.fa-search, .fa-cog { + color: white; + float: left; + font-size: 140%; + display: inline-block; + height: 7vh; + width: 7vh; + line-height: 7vh !important; + text-align: center; + cursor: pointer; + background-color: rgba(255,255,255,0); + transition: background-color 0.2s ease; +} + +.fa-search:hover, .fa-cog:hover { + background-color: rgba(255,255,255,0.1); +} + +#settings { + position: absolute; + background-color: rgba(255,255,255,0.5); +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown h1 { + width: 100%; + font-size: 80%; + text-align: center; + line-height: none; + padding: 0; + font-family: "Raleway"; + font-weight: 100; + font-size: 120%; + color: white; +} + +#speedContainer div { + width: 80%; + margin: auto; +} + +.dropdown input { + width: 100%; + cursor: pointer; + -webkit-appearance: none; + background-color: rgba(255,255,255, 0.1); + transition: background-color 0.2s ease; + outline: none; +} + +.dropdown input:hover { + background-color: rgba(255,255,255, 0.12); +} + +.dropdown input::-webkit-slider-thumb { + background: rgba(255,255,255,0.2); + -webkit-appearance: none; + height: 30%; + width: 10%; +} + +.dropdown-content { + display: none; + position: absolute; + top: 100%; + background-color: rgba(255,255,255,0.1); + width: 300%; + height: 150%; +} + +.show { + display: block; } \ No newline at end of file diff --git a/gyrio/index.html b/gyrio/index.html index 7573039..7c20cb5 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -3,14 +3,28 @@ Gyrio - - +
+

Gyrio

+ + +
+ +
+

Speed

+
+ +
+
+
+
+ +
- + - + diff --git a/gyrio/index.js b/gyrio/index.js index 6367a22..8d4cdf9 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -45,19 +45,19 @@ function generateFrames(frame, string, width, height, rate) { } return output; } + function drawFrame(frame ,input) { visualCtx.fillRect(0,0, canvas.width, canvas.height); - visualCtx.beginPath(); - var frame1 = generateFrames(frame, input, 100, 100, 5); - console.log(frame1);; - visualCtx.moveTo(0,(canvas.height/2)-100); - for(var i = 1; i < frame1.length; i++) { - visualCtx.lineTo(frame1[i][0],frame1[i][1]); - } - visualCtx.strokeStyle="#006064"; - visualCtx.stroke(); + visualCtx.beginPath(); + var frame1 = generateFrames(frame, input, 100, 100, 5); + visualCtx.moveTo(0,(canvas.height/2)-100); + for(var i = 1; i < frame1.length; i++) { + visualCtx.lineTo(frame1[i][0],frame1[i][1]); } + visualCtx.strokeStyle="#006064"; + visualCtx.stroke(); } + function drawFrame2(frame ,input) { visualCtx.fillRect(0,0, canvas.width, canvas.height); var ColorList = ["006064"/*,"00838F","0097A7","00ACC1","00B8D4","00E5FF","18FFFF","84FFFF"*/]; @@ -81,6 +81,7 @@ function drawFrame2(frame ,input) { function toRad(theta){ return theta*(Math.PI/180); } + function rotate(list,theta){ var output = []; for(var i=0;i < list.length;i++){ @@ -88,10 +89,21 @@ function rotate(list,theta){ } return output; } + function getWebsite(url) { var proxy = "https://cors-anywhere.herokuapp.com/"; var xhr = new XMLHttpRequest(); xhr.open("GET", proxy+url, false); + + xhr.onreadystatechange = function() { + if(xhr.readyState === 4) { + if(xhr.status === 200) { + } else { + document.getElementById("urlInput").value = ""; + alert("Invalid URL!"); + } + } + } xhr.send(); return xhr.responseText; } @@ -102,6 +114,31 @@ function animate(n , input) { setTimeout(function() { animate(n+1, input) }, 100/3); } +var doAnimate = true; +var visualCtx = canvas.getContext("2d"); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +visualCtx.fillStyle = "#1a1a1a"; +visualCtx.fillRect(0,0, canvas.width, canvas.height); + +document.getElementsByClassName("fa-search")[0].onclick = function() { + var input = document.getElementById("urlInput"); + var value = input.value; + if(value === "") return; + var data; + data = convertData(getWebsite(value),2); + doAnimate = false; + setTimeout(function() { + doAnimate = true; + animate(0, data); + }, 100/3); +} + +document.getElementsByClassName("fa-cog")[0].onclick = function() { + document.getElementById("speedContainer").classList.toggle("show"); +} + /*function sound(n, input) { if(n === 0) { osc.connect(audioCtx.destination); @@ -113,22 +150,9 @@ function animate(n , input) { setTimeout(function() { sound(n+1, input); }, 500); } */ -var doAnimate = true; -var visualCtx = canvas.getContext("2d"); /*var audioCtx = new window.AudioContext(); var osc = audioCtx.createOscillator(); var freq = [440, 494, 523, 587, 660, 698, 784, 880]; */ -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; - -visualCtx.fillStyle = "#000"; -visualCtx.fillRect(0,0, canvas.width, canvas.height); - - -animate(0, convertData(getWebsite("https://www.google.com"), 2)); //sound(0, convertData(getWebsite("https://www.google.com"), 8)); - - - From 1d8639e578e0244edce6d7fcad05cd1be3197ef8 Mon Sep 17 00:00:00 2001 From: yamanq Date: Sun, 1 Oct 2017 02:50:16 -0400 Subject: [PATCH 11/16] change sound, add image --- gyrio/index.css | 12 ++++++++- gyrio/index.js | 68 +++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 69 insertions(+), 11 deletions(-) diff --git a/gyrio/index.css b/gyrio/index.css index 99c1fb4..31ae89d 100644 --- a/gyrio/index.css +++ b/gyrio/index.css @@ -8,4 +8,14 @@ html { body { margin: 0; -} \ No newline at end of file +} +canvas, img { + image-rendering: optimizeSpeed; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: optimize-contrast; + image-rendering: pixelated; + -ms-interpolation-mode: nearest-neighbor; + width: 480px; + height: 480px; +} diff --git a/gyrio/index.js b/gyrio/index.js index 7b3730b..ba1992b 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -2,6 +2,14 @@ function randInt(min,max) { return Math.floor(Math.random() * (max - min + 1)) + min; } +function hexToRGB(hex) { + var r = parseInt(hex.slice(0, 2), 16), + g = parseInt(hex.slice(2, 4), 16), + b = parseInt(hex.slice(4, 6), 16); + + return [r,g,b]; +} + function convertData(text, base){ var output = ""; for (var i = 0; i < text.length; i++) @@ -69,26 +77,38 @@ function getWebsite(url) { function animate(n , input) { if(!doAnimate) return; drawFrame(n, input); - setTimeout(function() { animate(n+1, input) }, 100/3); + setTimeout(function() { animate(n+1, input); }, 100/3); } function sound(n, input) { if(n === 0) { osc.connect(audioCtx.destination); - osc2.connect(audioCtx.destination); - osc3.connect(audioCtx.destination); - osc.start(0); + osc.start(0); + osc.type = "sawtooth"; + // osc.frequency.value = 261.63; + temp = []; } - osc.frequency.value = freq[input[n]]; - setTimeout(function() { sound(n+1, input); }, 500); + // var max = 523.25; + // var min = 130.81; + osc.frequency.value = freq[input[n]]; + // osc.frequency.value = parseInt(input.substr(n, 10), 2); + // var rand = randInt(130, 523); + // var direction = 1; + // if (rand < osc.frequency.value) {direction = -1;} + // osc.frequency.value += direction * input[n] * 10; + setTimeout(function() { sound(n+1, input); }, 500); } + + var canvas = document.getElementById("canvas"); var visualCtx = canvas.getContext("2d"); + + var audioCtx = new window.AudioContext(); var osc = audioCtx.createOscillator(); var doAnimate = true; -var freq = [440, 494, 523, 587, 660, 698, 784, 880]; +var freq = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -96,9 +116,37 @@ canvas.height = window.innerHeight; visualCtx.fillStyle = "#000"; visualCtx.fillRect(0,0, canvas.width, canvas.height); +function image(input) { + n = 0; + imagecan = document.createElement('canvas'); + imagecan.width = Math.floor(Math.sqrt(input.length/6)); + imagecan.height = imagecan.width; + document.body.appendChild(imagecan); + ctx = imagecan.getContext("2d"); -animate(0, convertData(getWebsite("https://www.google.com"), 2)); -sound(0, convertData(getWebsite("https://www.google.com"), 8)); - + var imageData = ctx.getImageData(0,0,imagecan.width, imagecan.height); + for(var i = 0; i < imageData.data.length; i++) { + fill = hexToRGB(input.substr(n,6)); + imageData.data[4*i] = fill[0]; + imageData.data[4*i+1] = fill[1]; + imageData.data[4*i+2] = fill[2]; + imageData.data[4*i+3] = 255; + n += 6; + } + // fakeimage = document.createElement('canvas'); + // fakeimage.width = imagecan.width; + // fakeimage.height = imagecan.height; + // fakeimage.getContext("2d").putImageData(imageData, 0, 0); + // ctx.canvas.width = 480; + // ctx.canvas.height = 480; + // ctx.scale(imagecan.width * (480/imagecan.width), imagecan.height *(480/imagecan.height)); + // ctx.drawImage(fakeimage, 0, 0); + // console.log(fakeimage, ctx) + ctx.putImageData(imageData, 0, 0); +} +var url = "http://www.purple.com/purple.html" +animate(0, convertData(getWebsite(url), 2)); +sound(0, convertData(getWebsite(url), 8)); +image(convertData(getWebsite(url), 16)); From 0e154e2ae4903545e566d8a47122ae475be14f39 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sun, 1 Oct 2017 04:39:24 -0400 Subject: [PATCH 12/16] front-end handling --- gyrio/index.css | 45 +++++++++-- gyrio/index.html | 16 +++- gyrio/index.js | 202 ++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 224 insertions(+), 39 deletions(-) diff --git a/gyrio/index.css b/gyrio/index.css index 99d2bc4..3e88c1c 100644 --- a/gyrio/index.css +++ b/gyrio/index.css @@ -18,8 +18,11 @@ canvas, img { } #imagecode { - width: 480px; - height: 480px; + width: 35%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } header { @@ -63,7 +66,7 @@ header { float: left; } -.fa-search, .fa-cog { +.fa-search, .fa-cog, .fa-bars { color: white; float: left; font-size: 140%; @@ -77,10 +80,14 @@ header { transition: background-color 0.2s ease; } -.fa-search:hover, .fa-cog:hover { +.fa-search:hover, .fa-cog:hover, .fa-bars:hover { background-color: rgba(255,255,255,0.1); } +.fa-bars { + float: right; +} + #settings { position: absolute; background-color: rgba(255,255,255,0.5); @@ -128,7 +135,7 @@ header { width: 10%; } -.dropdown-content { +#speedContainer { display: none; position: absolute; top: 100%; @@ -137,6 +144,30 @@ header { height: 150%; } -.show { - display: block; +#modeContainer { + display: none; + position: absolute; + top: 100%; + background-color: rgba(255,255,255,0.1); + right: 0; + width: 350%; +} + +#modeContainer p { + cursor: pointer; + margin: 0; + padding: 10% 0 10% 0; + color: white; + font-weight: 100; + text-align: center; + background-color:rgba(0,0,0,0); + transition: background-color 0.2s ease; +} + +#modeContainer p:hover { + background-color: rgba(0,0,0,0.1); +} + +.show { + display: block !important; } diff --git a/gyrio/index.html b/gyrio/index.html index 7c20cb5..e59ddd2 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -12,13 +12,25 @@
- +

Speed

- +
+
+
+ +
+
+

Linear Oscilloscope

+

Data Auralization

+

Image Visualization

+
+
+
+
diff --git a/gyrio/index.js b/gyrio/index.js index bc2ef64..2defd60 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -11,6 +11,10 @@ function hexToRGB(hex) { } function convertData(text, base){ + if(text.length < 150) { + website = ""; + return; + } var output = ""; for (var i = 0; i < text.length; i++) { @@ -34,7 +38,6 @@ var visualCtx = canvas.getContext("2d"); var audioCtx = new window.AudioContext(); -var osc = audioCtx.createOscillator(); var doAnimate = true; var freq = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; @@ -71,7 +74,7 @@ function generateFrames(frame, string, width, height, rate) { function drawFrame(frame ,input) { visualCtx.fillRect(0,0, canvas.width, canvas.height); visualCtx.beginPath(); - var frame1 = generateFrames(frame, input, 100, 100, 5); + var frame1 = generateFrames(frame, input, 100, 100, speed); visualCtx.moveTo(0,(canvas.height/2)-100); for(var i = 1; i < frame1.length; i++) { visualCtx.lineTo(frame1[i][0],frame1[i][1]); @@ -116,18 +119,18 @@ function getWebsite(url) { var proxy = "https://cors-anywhere.herokuapp.com/"; var xhr = new XMLHttpRequest(); xhr.open("GET", proxy+url, false); - xhr.onreadystatechange = function() { if(xhr.readyState === 4) { if(xhr.status === 200) { } else { document.getElementById("urlInput").value = ""; alert("Invalid URL!"); + } } } - xhr.send(); - return xhr.responseText; + xhr.send(); + return xhr.responseText; } function animate(n , input) { @@ -136,7 +139,11 @@ function animate(n , input) { setTimeout(function() { animate(n+1, input); }, 100/3); } +var type = "LO"; +var speed = 5; var doAnimate = true; +var doSound = false; +var website = ""; var visualCtx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; @@ -144,30 +151,20 @@ canvas.height = window.innerHeight; visualCtx.fillStyle = "#1a1a1a"; visualCtx.fillRect(0,0, canvas.width, canvas.height); -document.getElementsByClassName("fa-search")[0].onclick = function() { - var input = document.getElementById("urlInput"); - var value = input.value; - if(value === "") return; - var data; - data = convertData(getWebsite(value),2); - doAnimate = false; - setTimeout(function() { - doAnimate = true; - animate(0, data); - }, 100/3); -} - -document.getElementsByClassName("fa-cog")[0].onclick = function() { - document.getElementById("speedContainer").classList.toggle("show"); -} +var osc; function sound(n, input) { + if(!doSound) { + osc.stop(); + return; + } if(n === 0) { + osc = audioCtx.createOscillator(); osc.connect(audioCtx.destination); - osc.start(0); - osc.type = "sawtooth"; - // osc.frequency.value = 261.63; - temp = []; + osc.start(0); + osc.type = "sawtooth"; + // osc.frequency.value = 261.63; + temp = []; } // var max = 523.25; // var min = 130.81; @@ -177,18 +174,21 @@ function sound(n, input) { // var direction = 1; // if (rand < osc.frequency.value) {direction = -1;} // osc.frequency.value += direction * input[n] * 10; - setTimeout(function() { sound(n+1, input); }, 500); + setTimeout(function() { sound(n+1, input); }, 10*speed); } function image(input) { + try { + document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); + } catch(err) {} n = 0; imagecan = document.createElement('canvas'); imagecan.width = Math.floor(Math.sqrt(input.length/6)); imagecan.height = imagecan.width; imagecan.id = "imagecode"; document.body.appendChild(imagecan); - ctx = imagecan.getContext("2d"); + var ctx = imagecan.getContext("2d"); var imageData = ctx.getImageData(0,0,imagecan.width, imagecan.height); @@ -212,6 +212,148 @@ function image(input) { ctx.putImageData(imageData, 0, 0); } -// animate(0, convertData(getWebsite(url), 2)); -// sound(0, convertData(getWebsite(url), 8)); -// image(convertData(getWebsite(url), 16)); +function search() { + var input = document.getElementById("urlInput"); + var value = input.value; + if(value === "" || value === website) return; + website = value; + visualCtx.fillStyle = "#1a1a1a"; + visualCtx.fillRect(0,0, canvas.width, canvas.height); + switch(type) { + case "LO": + var data = convertData(getWebsite(website),2); + try { + document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); + } catch(err) {} + doSound = false; + doAnimate = false; + setTimeout(function() { + speed = 5; + doAnimate = true; + document.getElementById("speedInput").value = 5; + animate(0, data); + }, 100/3); + break; + case "DA": + var data = convertData(getWebsite(website),8); + try { + document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); + } catch(err) {} + doAnimate = false; + doSound = false; + setTimeout(function() { + speed = 50; + doSound = true; + document.getElementById("speedInput").value = 50; + sound(0, data); + }, 100/3); + break; + case "IV": + var data = convertData(getWebsite(website),16); + doAnimate = false; + doSound = false; + setTimeout(function() { + image(data); + }, 100/3); + break; + } +} + +document.getElementsByClassName("fa-search")[0].onclick = function() { + search(); +} + +document.getElementById("urlInput").onkeypress = function(e) { + if(e.keyCode == 13) { + search(); + } +} + + +document.getElementsByClassName("fa-cog")[0].onclick = function() { + document.getElementById("speedContainer").classList.toggle("show"); +} + +document.getElementsByClassName("fa-bars")[0].onclick = function() { + document.getElementById("modeContainer").classList.toggle("show"); +} + +window.onclick = function(event) { + if (!event.target.matches(".dropButton")) { + + var dropdowns = document.getElementsByClassName("dropdown-content"); + for (var i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } +} + +document.getElementById("speedInput").onchange = function() { + speed = parseInt(this.value); +} + +document.getElementById("LO").onclick = function() { + if(type === "LO") return; + if(website === "") { + alert("Please enter a website!"); + return; + } + type = "LO"; + try { + document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); + } catch(err) {} + var data = convertData(getWebsite(website),2); + visualCtx.fillStyle = "#1a1a1a"; + visualCtx.fillRect(0,0, canvas.width, canvas.height); + doSound = false; + doAnimate = false; + setTimeout(function() { + speed = 5; + doAnimate = true; + document.getElementById("speedInput").value = 5; + animate(0, data); + }, 100/3); +} + +document.getElementById("DA").onclick = function() { + if(type === "DA") return; + if(website === "") { + alert("Please enter a website!"); + return; + } + type = "DA"; + try { + document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); + } catch(err) {} + var data = convertData(getWebsite(website),8); + visualCtx.fillStyle = "#1a1a1a"; + visualCtx.fillRect(0,0, canvas.width, canvas.height); + doAnimate = false; + doSound = false; + setTimeout(function() { + speed = 50; + doSound = true; + document.getElementById("speedInput").value = 50; + sound(0, data); + }, 100/3); +} + +document.getElementById("IV").onclick = function() { + if(type === "IV") return; + if(website === "") { + alert("Please enter a website!"); + return; + } + type = "IV"; + var data = convertData(getWebsite(website),16); + visualCtx.fillStyle = "#1a1a1a"; + visualCtx.fillRect(0,0, canvas.width, canvas.height); + doAnimate = false; + doSound = false; + setTimeout(function() { + image(data); + }, 100/3); +} From d080fed0398ca4dda9810e31534a0358aa400f2c Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sun, 1 Oct 2017 05:25:48 -0400 Subject: [PATCH 13/16] IV refreshing --- gyrio/index.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/gyrio/index.js b/gyrio/index.js index 2defd60..3f18771 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -215,16 +215,16 @@ function image(input) { function search() { var input = document.getElementById("urlInput"); var value = input.value; - if(value === "" || value === website) return; + if(value === "" || value === website && type !== "IV") return; website = value; visualCtx.fillStyle = "#1a1a1a"; visualCtx.fillRect(0,0, canvas.width, canvas.height); + try { + document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); + } catch(err) {} switch(type) { case "LO": var data = convertData(getWebsite(website),2); - try { - document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); - } catch(err) {} doSound = false; doAnimate = false; setTimeout(function() { @@ -236,9 +236,6 @@ function search() { break; case "DA": var data = convertData(getWebsite(website),8); - try { - document.getElementById("imagecode").parentNode.removeChild(document.getElementById("imagecode")); - } catch(err) {} doAnimate = false; doSound = false; setTimeout(function() { From a8f10450b90b75dda674c37096258e8a715ee8b0 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sun, 1 Oct 2017 07:58:01 -0400 Subject: [PATCH 14/16] added text for audio --- gyrio/index.css | 10 ++++++++++ gyrio/index.html | 4 +--- gyrio/index.js | 9 ++++++--- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/gyrio/index.css b/gyrio/index.css index 3e88c1c..6bd0065 100644 --- a/gyrio/index.css +++ b/gyrio/index.css @@ -17,6 +17,16 @@ canvas, img { -ms-interpolation-mode: nearest-neighbor; } +#DAText { + font-weight: 100; + color: white; + font-size: 500%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + #imagecode { width: 35%; position: absolute; diff --git a/gyrio/index.html b/gyrio/index.html index e59ddd2..6afe8e0 100644 --- a/gyrio/index.html +++ b/gyrio/index.html @@ -32,9 +32,7 @@
-
- -
+

diff --git a/gyrio/index.js b/gyrio/index.js index 3f18771..3bff473 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -49,7 +49,7 @@ visualCtx.fillRect(0,0, canvas.width, canvas.height); function generateFrames(frame, string, width, height, rate) { // Rate is in bits per second // 30 frames per second - var bitsPerSection = Math.ceil(canvas.width/width)+1; + var bitsPerSection = Math.ceil(canvas.width/width)+2; var shift = canvas.width-rate*width*frame/30; var bitsToCalc = Math.ceil(rate*width*frame/(width*30)); var output = []; @@ -91,7 +91,7 @@ function drawFrame2(frame ,input) { visualCtx.beginPath(); var frame1 = generateFrames(frame, input, 100, 100, 5); console.log(frame1); - frame1= rotate(frame1,30); + //frame1= rotate(frame1,30); var xStart = canvas.width/2; var yStart = 10*j + canvas.height/2; var hMM = [xStart*Math.cos(toRad(30))-yStart*Math.sin(toRad(30)),xStart*Math.sin(toRad(30))+yStart*Math.cos(toRad(30))]; @@ -103,6 +103,7 @@ function drawFrame2(frame ,input) { visualCtx.stroke(); } } + function toRad(theta){ return theta*(Math.PI/180); } @@ -155,6 +156,7 @@ visualCtx.fillRect(0,0, canvas.width, canvas.height); var osc; function sound(n, input) { if(!doSound) { + document.getElementById("DAText").innerHTML = ""; osc.stop(); return; } @@ -168,7 +170,8 @@ function sound(n, input) { } // var max = 523.25; // var min = 130.81; - osc.frequency.value = freq[input[n]]; + document.getElementById("DAText").innerHTML = input[n]; + osc.frequency.value = freq[input[n]]; // osc.frequency.value = parseInt(input.substr(n, 10), 2); // var rand = randInt(130, 523); // var direction = 1; From 475919fb2c262730d495463510a381cbfd4d8893 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sun, 1 Oct 2017 09:07:20 -0400 Subject: [PATCH 15/16] fixed website errors --- gyrio/index.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/gyrio/index.js b/gyrio/index.js index 3bff473..27ec9a3 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -11,10 +11,10 @@ function hexToRGB(hex) { } function convertData(text, base){ - if(text.length < 150) { - website = ""; - return; - } + // if(text.length < 150) { + // website = ""; + // return; + // } var output = ""; for (var i = 0; i < text.length; i++) { @@ -131,7 +131,12 @@ function getWebsite(url) { } } xhr.send(); - return xhr.responseText; + console.log(xhr.status); + if (xhr.status === 200) { + return xhr.responseText; + } else { + return undefined; + } } function animate(n , input) { From 88fb3017fb61d87a81b5a9d14d94992e64018868 Mon Sep 17 00:00:00 2001 From: yamanq Date: Mon, 23 Oct 2017 22:22:32 -0400 Subject: [PATCH 16/16] Create README.md --- gyrio/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 gyrio/README.md diff --git a/gyrio/README.md b/gyrio/README.md new file mode 100644 index 0000000..d87c00f --- /dev/null +++ b/gyrio/README.md @@ -0,0 +1,8 @@ +# gyrio +Web Oscilloscope viewer + +## History +Gyrio was originally created at GrizzHacks, a hackathon which took place September 30, 2017 + +## Components +There are 3 major parts to gyrio. First, there is the oscilloscope mode, which converts the data to binary digits and then displays these in a similar method to an oscilloscope. The next mode is an attempt to represent the data in a sound format. To achieve this, the data was converted to a base-8 form and then mapped to a set of 8 tones, which were then outputted. Lastly, the final mode is an attempt to display the data as a whole. The data was converted to hexadecimal and then displayed in an image form, resulting in a picture similar to a colorful QR code.