diff --git a/gyrio/index.css b/gyrio/index.css index 31ae89d..99d2bc4 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'; @@ -16,6 +15,128 @@ canvas, img { image-rendering: optimize-contrast; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; +} + +#imagecode { width: 480px; height: 480px; } + +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; +} 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 ba1992b..bc2ef64 100644 --- a/gyrio/index.js +++ b/gyrio/index.js @@ -29,10 +29,24 @@ function generateString() { return final; } +var canvas = document.getElementById("canvas"); +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]; + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +visualCtx.fillStyle = "#000"; +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); + 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 = []; @@ -57,19 +71,61 @@ function generateFrames(frame, string, width, height, rate) { 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]); + 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="#4CAF50"; + 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"*/]; + + for(var j=0;j