From 872330dd6ab4da39eff98d59488b2486a4ffb4a5 Mon Sep 17 00:00:00 2001 From: Arav-Agarwal Date: Sun, 1 Oct 2017 00:34:43 -0400 Subject: [PATCH 1/2] 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 2/2] 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)); - - -