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

basic rendering function

Browse Source
This commit is contained in:
Kenneth Jao 2017-09-30 20:54:55 -04:00
commit 4ea16e8b91
2 changed files with 77 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gyrio/index.html
View File

@ -7,9 +7,10 @@
<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>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
</html> </html>

96
gyrio/index.js
View File

@ -3,14 +3,22 @@ var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
var frames = [ var frames = [];
"0"
];
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){
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;
}
function generateString() { function generateString() {
var final = ""; var final = "";
var length = randInt(50,100); var length = randInt(50,100);
@ -20,24 +28,65 @@ function generateString() {
return final; return final;
} }
function generateFrames(string, speed) { function generateFrames(frame, string, width, height, rate) {
// Speed is in bits per second // Rate is in bits per second
// 30 frames per second
} var shift = canvas.width-rate*width*frame/30;
var bitsToCalc = Math.ceil(rate*width*frame/(width*30));
function drawFrame(frame) { var output = [];
ctx.beginPath(); console.log(shift);
var frame = frames[frame]; console.log(bitsToCalc);
for(var i = 0; i < frame.length; i++) { for(var i = 0; i < bitsToCalc; i++) {
if(frame[i] === "0") { var x = i*width;
console.log("asdf"); if(parseInt(string[i])) {
ctx.beginPath(); output.push([x+shift, -height+canvas.height/2]);
ctx.moveTo(0,canvas.height/2); output.push([x+width+shift, -height+canvas.height/2]);
ctx.lineTo(canvas.width,canvas.height/2); if(string[i-1] === 0) {
ctx.strokeStyle="#4CAF50"; output.push([x+width+shift, canvas.height/2]);
ctx.stroke(); }
} else {
output.push([x+shift, canvas.height/2]);
output.push([x+width+shift,canvas.height/2]);
} }
} }
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);
console.log(frame);
ctx.moveTo(0, canvas.height/2);
for(var i = 0; i < frame.length; i++) {
ctx.lineTo(frame[i][0], frame[i][1]);
}
ctx.strokeStyle="#4CAF50";
ctx.stroke();
} }
function getWebsite(geturl) { function getWebsite(geturl) {
@ -49,5 +98,10 @@ function getWebsite(geturl) {
ctx.fillStyle = "#000"; ctx.fillStyle = "#000";
ctx.fillRect(0,0, canvas.width, canvas.height); ctx.fillRect(0,0, canvas.width, canvas.height);
generateFrames(generateString());
drawFrame(0); function animate(n) {
drawFrame(n);
setTimeout(function() { animate(n+1) }, 100/3);
}
animate(0);