osmarks/guihacker
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Did some refactoring, added user options title, gui, and color

Browse Source
This commit is contained in:
Jason Brown 2014-06-11 00:48:45 -05:00
parent 6c0bf2ada3
commit 5a4f327b2b
1 changed files with 145 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
public/javascripts/hack.js
View File

@ -1,46 +1,33 @@
var canvas = document.querySelector(".hacker-3d-shiz"),
ctx = canvas.getContext("2d"),
canvasBars = document.querySelector(".bars-and-stuff"),
ctxBars = canvasBars.getContext("2d"),
outputConsole = document.querySelector(".output-console");
canvas.width = (window.innerWidth/3)*2;
canvas.height = window.innerHeight / 3;
canvasBars.width = window.innerWidth/3;
canvasBars.height = canvas.height;
outputConsole.style.height = (window.innerHeight / 3) * 2 + 'px';
outputConsole.style.top = window.innerHeight / 3 + 'px';
/* Graphics stuff */ /* Graphics stuff */
function Square(z) { function Square(z) {
this.width = canvas.width/2; this.width = settings.canvas.width/2;
this.height = canvas.height; this.height = settings.canvas.height;
z = z || 0; z = z || 0;
var canvas = settings.canvas;
this.points = [ this.points = [
new Point({ new Point({
x: (canvas.width / 2) - this.width, x: (canvas.width / 2) - this.width,
y: (canvas.height / 2) - this.height, y: (canvas.height / 2) - this.height,
z: z z: z,
}), }),
new Point({ new Point({
x: (canvas.width / 2) + this.width, x: (canvas.width / 2) + this.width,
y: (canvas.height / 2) - this.height, y: (canvas.height / 2) - this.height,
z: z z: z
}), }),
new Point({ new Point({
x: (canvas.width / 2) + this.width, x: (canvas.width / 2) + this.width,
y: (canvas.height / 2) + this.height, y: (canvas.height / 2) + this.height,
z: z z: z
}), }),
new Point({ new Point( {
x: (canvas.width / 2) - this.width, x: (canvas.width / 2) - this.width,
y: (canvas.height / 2) + this.height, y: (canvas.height / 2) + this.height,
z: z z: z
})]; })
];
this.dist = 0; this.dist = 0;
} }
@ -56,24 +43,24 @@ Square.prototype.update = function () {
}; };
Square.prototype.render = function () { Square.prototype.render = function () {
ctx.beginPath(); settings.ctx.beginPath();
ctx.moveTo(this.points[0].xPos, this.points[0].yPos); settings.ctx.moveTo(this.points[0].xPos, this.points[0].yPos);
for (var p = 1; p < this.points.length; p++) { for (var p = 1; p < this.points.length; p++) {
if (this.points[p].z > -(focal - 50)) { if (this.points[p].z > -(settings.focal - 50)) {
ctx.lineTo(this.points[p].xPos, this.points[p].yPos); settings.ctx.lineTo(this.points[p].xPos, this.points[p].yPos);
} }
} }
ctx.closePath(); settings.ctx.closePath();
ctx.stroke(); settings.ctx.stroke();
this.dist = this.points[this.points.length - 1].z; this.dist = this.points[this.points.length - 1].z;
}; };
function Point(pos) { function Point(pos) {
this.x = pos.x - canvas.width / 2 || 0; this.x = pos.x - settings.canvas.width / 2 || 0;
this.y = pos.y - canvas.height / 2 || 0; this.y = pos.y - settings.canvas.height / 2 || 0;
this.z = pos.z || 0; this.z = pos.z || 0;
this.cX = 0; this.cX = 0;
@ -82,6 +69,7 @@ function Point(pos) {
this.xPos = 0; this.xPos = 0;
this.yPos = 0; this.yPos = 0;
this.map2D(); this.map2D();
} }
@ -96,30 +84,26 @@ Point.prototype.rotateZ = function (angleZ) {
}; };
Point.prototype.map2D = function () { Point.prototype.map2D = function () {
var scaleX = focal / (focal + this.z + this.cZ), var scaleX = settings.focal / (settings.focal + this.z + this.cZ),
scaleY = focal / (focal + this.z + this.cZ); scaleY = settings.focal / (settings.focal + this.z + this.cZ);
this.xPos = vpx + (this.cX + this.x) * scaleX; this.xPos = settings.vpx + (this.cX + this.x) * scaleX;
this.yPos = vpy + (this.cY + this.y) * scaleY; this.yPos = settings.vpy + (this.cY + this.y) * scaleY;
}; };
// Init graphics stuff // ** Main function **//
var squares = [], function GuiHacker(){
focal = canvas.width / 2, this.squares = [];
vpx = canvas.width / 2,
vpy = canvas.height / 2,
barVals = [],
sineVal = 0;
for (var i = 0; i < 15; i++) { this.barVals = [];
squares.push(new Square(-300 + (i * 200))); this.sineVal = [];
}
//ctx.lineWidth = 2; for (var i = 0; i < 15; i++) {
ctx.strokeStyle = ctxBars.strokeStyle = ctxBars.fillStyle = '#00FF00'; this.squares.push(new Square(-300 + (i * 200)));
}
/* fake console stuff */ // Console stuff
var commandStart = [ this.commandStart = [
'Performing DNS Lookups for ', 'Performing DNS Lookups for ',
'Searching ', 'Searching ',
'Analyzing ', 'Analyzing ',
@ -131,8 +115,8 @@ ctx.strokeStyle = ctxBars.strokeStyle = ctxBars.fillStyle = '#00FF00';
'Entering Location ', 'Entering Location ',
'Compilation Started of ', 'Compilation Started of ',
'Downloading ' 'Downloading '
], ];
commandParts = [ this.commandParts = [
'Data Structure', 'Data Structure',
'http://wwjd.com?au&2', 'http://wwjd.com?au&2',
'Texture', 'Texture',
@ -140,8 +124,8 @@ ctx.strokeStyle = ctxBars.strokeStyle = ctxBars.fillStyle = '#00FF00';
' .... Searching ... ', ' .... Searching ... ',
'http://zanb.se/?23&88&far=2', 'http://zanb.se/?23&88&far=2',
'http://ab.ret45-33/?timing=1ww' 'http://ab.ret45-33/?timing=1ww'
], ];
commandResponses = [ this.responses = [
'Authorizing ', 'Authorizing ',
'Authorized...', 'Authorized...',
'Access Granted..', 'Access Granted..',
@ -153,21 +137,31 @@ ctx.strokeStyle = ctxBars.strokeStyle = ctxBars.fillStyle = '#00FF00';
'Waiting for response...', 'Waiting for response...',
'....Searching...', '....Searching...',
'Calculating Space Requirements ' 'Calculating Space Requirements '
], ];
isProcessing = false, this.isProcessing = false;
processTime = 0, this.processTime = 0;
lastProcess = 0; this.lastProcess = 0;
this.render();
this.consoleOutput();
}
GuiHacker.prototype.render = function(){
var ctx = settings.ctx,
canvas = settings.canvas,
ctxBars = settings.ctxBars,
canvasBars = settings.canvasBars;
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
squares.sort(function (a, b) { this.squares.sort(function (a, b) {
return b.dist - a.dist; return b.dist - a.dist;
}); });
for (var i = 0, len = squares.length; i < len; i++) {
squares[i].update(); for (var i = 0, len = this.squares.length; i < len; i++) {
squares[i].render(); var square = this.squares[i];
square.update();
square.render();
} }
ctxBars.clearRect(0, 0, canvasBars.width, canvasBars.height); ctxBars.clearRect(0, 0, canvasBars.width, canvasBars.height);
@ -187,48 +181,51 @@ function render() {
ctxBars.stroke(); ctxBars.stroke();
for(i = 0; i < canvasBars.width; i+=20){ for(i = 0; i < canvasBars.width; i+=20){
if(!barVals[i]){ if(!this.barVals[i]){
barVals[i] = { this.barVals[i] = {
val : Math.random()*(canvasBars.height/2), val : Math.random()*(canvasBars.height/2),
freq : 0.1, freq : 0.1,
sineVal : Math.random()*100 sineVal : Math.random()*100
}; };
} }
barVals[i].sineVal+=barVals[i].freq; var barVal = this.barVals[i];
barVals[i].val+=Math.sin(barVals[i].sineVal*Math.PI/2)*5; barVal.sineVal+=barVal.freq;
ctxBars.fillRect(i+5,canvasBars.height,15,-barVals[i].val); barVal.val+=Math.sin(barVal.sineVal*Math.PI/2)*5;
ctxBars.fillRect(i+5,canvasBars.height,15,-barVal.val);
} }
requestAnimationFrame(render); var self = this;
} requestAnimationFrame(function(){self.render();});
};
function consoleOutput(){ GuiHacker.prototype.consoleOutput = function(){
var textEl = document.createElement('p'); var textEl = document.createElement('p');
if(isProcessing){ if(this.isProcessing){
textEl = document.createElement('span'); textEl = document.createElement('span');
textEl.textContent += Math.random() + " "; textEl.textContent += Math.random() + " ";
if(Date.now() > lastProcess + processTime){ if(Date.now() > this.lastProcess + this.processTime){
isProcessing = false; this.isProcessing = false;
} }
}else{ }else{
var commandType = ~~(Math.random()*4); var commandType = ~~(Math.random()*4);
switch(commandType){ switch(commandType){
case 0: case 0:
textEl.textContent = commandStart[~~(Math.random()*commandStart.length)] + commandParts[~~(Math.random()*commandParts.length)]; textEl.textContent = this.commandStart[~~(Math.random()*this.commandStart.length)] + this.commandParts[~~(Math.random()*this.commandParts.length)];
break; break;
case 3: case 3:
isProcessing = true; this.isProcessing = true;
processTime = ~~(Math.random()*5000); this.processTime = ~~(Math.random()*5000);
lastProcess = Date.now(); this.lastProcess = Date.now();
break; break;
default: default:
textEl.textContent = commandResponses[~~(Math.random()*commandResponses.length)]; textEl.textContent = this.responses[~~(Math.random()*this.responses.length)];
break; break;
} }
} }
var outputConsole = settings.outputConsole;
outputConsole.scrollTop = outputConsole.scrollHeight; outputConsole.scrollTop = outputConsole.scrollHeight;
outputConsole.appendChild(textEl); outputConsole.appendChild(textEl);
@ -239,25 +236,61 @@ function consoleOutput(){
} }
} }
setTimeout(consoleOutput, ~~(Math.random()*200)); var self = this;
setTimeout(function(){self.consoleOutput();}, ~~(Math.random()*200));
};
// Settings
var settings = {
canvas : document.querySelector(".hacker-3d-shiz"),
ctx : document.querySelector(".hacker-3d-shiz").getContext("2d"),
canvasBars : document.querySelector(".bars-and-stuff"),
ctxBars : document.querySelector(".bars-and-stuff").getContext("2d"),
outputConsole : document.querySelector(".output-console"),
vpx : 0,
vpy : 0,
focal : 0,
color : "#00FF00",
title : "Gui Hacker",
gui : true
},
hash = document.location.hash.substring(1),
userSettings = {};
if (hash){
userSettings = JSON.parse(hash);
document.title = userSettings.title || settings.title;
settings.color = userSettings.color || settings.color;
if(typeof userSettings.gui !== undefined){
settings.gui = userSettings.gui;
}
} }
render(); var adjustCanvas = function(){
consoleOutput(); if(settings.gui){
settings.canvas.width = (window.innerWidth/3)*2;
settings.canvas.height = window.innerHeight / 3;
settings.canvasBars.width = window.innerWidth/3;
settings.canvasBars.height = settings.canvas.height;
settings.outputConsole.style.height = (window.innerHeight / 3) * 2 + 'px';
settings.outputConsole.style.top = window.innerHeight / 3 + 'px';
settings.focal = settings.canvas.width / 2;
settings.vpx = settings.canvas.width / 2;
settings.vpy = settings.canvas.height / 2;
settings.ctx.strokeStyle = settings.ctxBars.strokeStyle = settings.ctxBars.fillStyle = settings.color;
}else{
document.querySelector(".hacker-3d-shiz").style.display = "none";
document.querySelector(".bars-and-stuff").style.display = "none";
}
document.body.style.color = settings.color;
}(),
guiHacker = new GuiHacker(settings);
window.addEventListener('resize', function(){ window.addEventListener('resize', adjustCanvas);
canvas.width = (window.innerWidth/3)*2;
canvas.height = window.innerHeight / 3;
canvasBars.width = window.innerWidth/3;
canvasBars.height = canvas.height;
outputConsole.style.height = (window.innerHeight / 3) * 2 + 'px';
outputConsole.style.top = window.innerHeight / 3 + 'px';
focal = canvas.width / 2;
vpx = canvas.width / 2;
vpy = canvas.height / 2;
ctx.strokeStyle = ctxBars.strokeStyle = ctxBars.fillStyle = '#00FF00';
});