kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge previous commits

Browse Source
This commit is contained in:
yamanq 2017-10-01 02:56:56 -04:00
commit 52b50ceb3b
3 changed files with 231 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
gyrio/index.css
View File

@ -1,5 +1,4 @@
@import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
html { html {
font-family: 'Raleway'; font-family: 'Raleway';
@ -16,6 +15,128 @@ canvas, img {
image-rendering: optimize-contrast; image-rendering: optimize-contrast;
image-rendering: pixelated; image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
}
#imagecode {
width: 480px; width: 480px;
height: 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;
}

22
gyrio/index.html
View File

@ -3,14 +3,28 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Gyrio</title> <title>Gyrio</title>
<link rel="icon" href="../assets/favicon.ico">
<link rel="stylesheet" href="./index.css"> <link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> </head>
<header>
<h1 id="title">Gyrio</h1>
<input id="urlInput" name="URL" placeholder=" Insert a URL...">
<i class="fa fa-search" aria-hidden="true" onclick="this.blur();"></i>
<div class="dropdown">
<i class="fa fa-cog" aria-hidden="true"></i>
<div id="speedContainer" class="dropdown-content">
<h1>Speed</h1>
<div>
<input type="range" min="5" max="100" value="5">
</div>
</div>
</header>
<div id="settings">
</div>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
</html> </html>

117
gyrio/index.js
View File

@ -29,10 +29,24 @@ function generateString() {
return final; 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) { function generateFrames(frame, string, width, height, rate) {
// Rate is in bits per second // Rate is in bits per second
// 30 frames 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 shift = canvas.width-rate*width*frame/30;
var bitsToCalc = Math.ceil(rate*width*frame/(width*30)); var bitsToCalc = Math.ceil(rate*width*frame/(width*30));
var output = []; var output = [];
@ -57,19 +71,61 @@ function generateFrames(frame, string, width, height, rate) {
function drawFrame(frame ,input) { function drawFrame(frame ,input) {
visualCtx.fillRect(0,0, canvas.width, canvas.height); visualCtx.fillRect(0,0, canvas.width, canvas.height);
visualCtx.beginPath(); visualCtx.beginPath();
var frame = generateFrames(frame, input, 100, 100, 100); var frame1 = generateFrames(frame, input, 100, 100, 5);
visualCtx.moveTo(0, canvas.height/2); visualCtx.moveTo(0,(canvas.height/2)-100);
for(var i = 0; i < frame.length; i++) { for(var i = 1; i < frame1.length; i++) {
visualCtx.lineTo(frame[i][0], frame[i][1]); visualCtx.lineTo(frame1[i][0],frame1[i][1]);
} }
visualCtx.strokeStyle="#4CAF50"; visualCtx.strokeStyle="#006064";
visualCtx.stroke(); 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<ColorList.length;j++){
visualCtx.beginPath();
var frame1 = generateFrames(frame, input, 100, 100, 5);
console.log(frame1);
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))];
visualCtx.moveTo(0,(canvas.height/2)-100);
for(var i = 1; i < frame1.length; i++) {
visualCtx.lineTo(frame1[i][0], /*0.05*(j+1)*(*/frame1[i][1]-canvas.height/2/*-canvas.height/2)+canvas.height/2*/);
}
visualCtx.strokeStyle="#"+ ColorList[j];
visualCtx.stroke();
}
}
function toRad(theta){
return theta*(Math.PI/180);
}
function rotate(list,theta){
var output = [];
for(var i=0;i < list.length;i++){
output.push([list[i][0]*Math.cos(toRad(theta))-list[i][1]*Math.sin(toRad(theta)),list[i][0]*Math.sin(toRad(theta))+list[i][1]*Math.cos(toRad(theta))]);
}
return output;
}
function getWebsite(url) { function getWebsite(url) {
var proxy = "https://cors-anywhere.herokuapp.com/"; var proxy = "https://cors-anywhere.herokuapp.com/";
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("GET", proxy+url, false); 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(); xhr.send();
return xhr.responseText; return xhr.responseText;
} }
@ -80,6 +136,31 @@ function animate(n , input) {
setTimeout(function() { animate(n+1, input); }, 100/3); 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) { function sound(n, input) {
if(n === 0) { if(n === 0) {
osc.connect(audioCtx.destination); osc.connect(audioCtx.destination);
@ -100,27 +181,12 @@ function sound(n, input) {
} }
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 image(input) { function image(input) {
n = 0; n = 0;
imagecan = document.createElement('canvas'); imagecan = document.createElement('canvas');
imagecan.width = Math.floor(Math.sqrt(input.length/6)); imagecan.width = Math.floor(Math.sqrt(input.length/6));
imagecan.height = imagecan.width; imagecan.height = imagecan.width;
imagecan.id = "imagecode";
document.body.appendChild(imagecan); document.body.appendChild(imagecan);
ctx = imagecan.getContext("2d"); ctx = imagecan.getContext("2d");
@ -146,7 +212,6 @@ function image(input) {
ctx.putImageData(imageData, 0, 0); ctx.putImageData(imageData, 0, 0);
} }
var url = "http://www.purple.com/purple.html" // animate(0, convertData(getWebsite(url), 2));
animate(0, convertData(getWebsite(url), 2)); // sound(0, convertData(getWebsite(url), 8));
sound(0, convertData(getWebsite(url), 8)); // image(convertData(getWebsite(url), 16));
image(convertData(getWebsite(url), 16));