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

added sound rendering

Browse Source
This commit is contained in:
Kenneth Jao 2017-09-30 22:41:04 -04:00
parent 25f6826113
commit b5d1d73b0c
1 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
gyrio/index.js
View File

@ -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) { function randInt(min,max) {
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
} }
function toBinary(text){ function convertData(text, base){
var output = ""; var output = "";
for (var i = 0; i < text.length; i++) for (var i = 0; i < text.length; i++)
{ {
var letter = text[i].charCodeAt(0).toString(2); var letter = text[i].charCodeAt(0).toString(base);
output += "0".repeat(8-letter.length) + letter; output += letter;
} }
return output; return output;
} }
@ -35,8 +28,6 @@ function generateFrames(frame, string, width, height, rate) {
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 = [];
console.log(shift);
console.log(bitsToCalc);
for(var i = bitsToCalc-bitsPerSection; i < bitsToCalc; i++) { for(var i = bitsToCalc-bitsPerSection; i < bitsToCalc; i++) {
try { try {
var x = i*width; var x = i*width;
@ -55,19 +46,16 @@ function generateFrames(frame, string, width, height, rate) {
return output; return output;
} }
var string = toBinary(getWebsite("https://www.google.com")); function drawFrame(frame ,input) {
visualCtx.fillRect(0,0, canvas.width, canvas.height);
function drawFrame(frame) { visualCtx.beginPath();
ctx.fillRect(0,0, canvas.width, canvas.height); var frame = generateFrames(frame, input, 100, 100, 100);
ctx.beginPath(); visualCtx.moveTo(0, canvas.height/2);
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++) { 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"; visualCtx.strokeStyle="#4CAF50";
ctx.stroke(); visualCtx.stroke();
} }
function getWebsite(url) { function getWebsite(url) {
@ -78,17 +66,39 @@ function getWebsite(url) {
return xhr.responseText; return xhr.responseText;
} }
function animate(n) { function animate(n , input) {
if(!doAnimate) return; if(!doAnimate) return;
drawFrame(n); drawFrame(n, input);
setTimeout(function() { animate(n+1) }, 100/3); setTimeout(function() { animate(n+1, input) }, 100/3);
} }
ctx.fillStyle = "#000"; function sound(n, input) {
ctx.fillRect(0,0, canvas.width, canvas.height); 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 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);