Early Hacker

Developer
Loktar
Size
4,213 Kb
Views
26,312
  1. Early Hacker Previews
  2. Early Hacker HTML Codes
  3. Early Hacker CSS Codes
  4. Early Hacker JS Codes

How do I make an early hacker?

Created this as an answer for This code golf question was definitely going for the late 80's early 90's hacker screens. Even made a super serious domain for it http://guihacker.com and yeah this totally could be done in 100% css but I love my canvas.. What is a early hacker? How do you make a early hacker? This script and codes were developed by Loktar on 20 August 2022, Saturday.

Early Hacker Previews
IQ Test

Early Hacker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Early Hacker</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas class='hacker-3d-shiz'></canvas>
<canvas class='bars-and-stuff'></canvas>
<div class="output-console"></div> <script src="js/index.js"></script>
</body>
</html>

Early Hacker - Script Codes CSS Codes

@font-face { font-family: 'Source Code Pro'; font-style: normal; font-weight: 400; src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcecodepro/v4/mrl8jkM18OlOQN8JLgasDxM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
body { font-family: Source Code Pro; background:#000; color: #00FF00; margin:0; font-size: 13px;
}
canvas { position:absolute; top:0; left:0;
}
.bars-and-stuff{ left:66.6%;
}
.output-console { position:fixed; overflow:hidden;
}
p{margin:0}

Early Hacker - Script Codes JS Codes

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 */
function Square(z) { this.width = canvas.width/2; if(canvas.height < 200){ this.width = 200; }; this.height = canvas.height; z = z || 0; this.points = [ new Point({ x: (canvas.width / 2) - this.width, y: (canvas.height / 2) - this.height, z: z }), new Point({ x: (canvas.width / 2) + this.width, y: (canvas.height / 2) - this.height, z: z }), new Point({ x: (canvas.width / 2) + this.width, y: (canvas.height / 2) + this.height, z: z }), new Point({ x: (canvas.width / 2) - this.width, y: (canvas.height / 2) + this.height, z: z })]; this.dist = 0;
}
Square.prototype.update = function () { for (var p = 0; p < this.points.length; p++) { this.points[p].rotateZ(0.001); this.points[p].z -= 3; if (this.points[p].z < -300) { this.points[p].z = 2700; } this.points[p].map2D(); }
}
Square.prototype.render = function () { ctx.beginPath(); ctx.moveTo(this.points[0].xPos, this.points[0].yPos); for (var p = 1; p < this.points.length; p++) { if (this.points[p].z > -(focal - 50)) { ctx.lineTo(this.points[p].xPos, this.points[p].yPos); } } ctx.closePath(); ctx.stroke(); this.dist = this.points[this.points.length - 1].z;
};
function Point(pos) { this.x = pos.x - canvas.width / 2 || 0; this.y = pos.y - canvas.height / 2 || 0; this.z = pos.z || 0; this.cX = 0; this.cY = 0; this.cZ = 0; this.xPos = 0; this.yPos = 0; this.map2D();
}
Point.prototype.rotateZ = function (angleZ) { var cosZ = Math.cos(angleZ), sinZ = Math.sin(angleZ), x1 = this.x * cosZ - this.y * sinZ, y1 = this.y * cosZ + this.x * sinZ; this.x = x1; this.y = y1;
}
Point.prototype.map2D = function () { var scaleX = focal / (focal + this.z + this.cZ), scaleY = focal / (focal + this.z + this.cZ); this.xPos = vpx + (this.cX + this.x) * scaleX; this.yPos = vpy + (this.cY + this.y) * scaleY;
};
// Init graphics stuff
var squares = [], focal = canvas.width / 2, vpx = canvas.width / 2, vpy = canvas.height / 2, barVals = [], sineVal = 0;
/* fake console stuff */
var commandStart = ['Performing DNS Lookups for', 'Searching ', 'Analyzing ', 'Estimating Approximate Location of ', 'Compressing ', 'Requesting Authorization From : ', 'wget -a -t ', 'tar -xzf ', 'Entering Location ', 'Compilation Started of ', 'Downloading '], commandParts = ['Data Structure', 'http://wwjd.com?au&2', 'Texture', 'TPS Reports', ' .... Searching ... ', 'http://zanb.se/?23&88&far=2', 'http://ab.ret45-33/?timing=1ww'], commandResponses = ['Authorizing ', 'Authorized...', 'Access Granted..', 'Going Deeper....', 'Compression Complete.', 'Compilation of Data Structures Complete..', 'Entering Security Console...', 'Encryption Unsuccesful Attempting Retry...', 'Waiting for response...', '....Searching...', 'Calculating Space Requirements ' ], isProcessing = false, processTime = 0, lastProcess = 0;
function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); squares.sort(function (a, b) { return b.dist - a.dist; }); for (var i = 0, len = squares.length; i < len; i++) { squares[i].update(); squares[i].render(); } ctxBars.clearRect(0, 0, canvasBars.width, canvasBars.height); ctxBars.beginPath(); var y = canvasBars.height/6; ctxBars.moveTo(0,y); for(i = 0; i < canvasBars.width; i++){ var ran = (Math.random()*20)-10; if(Math.random() > 0.98){ ran = (Math.random()*50)-25 } ctxBars.lineTo(i, y + ran); } ctxBars.stroke(); for(i = 0; i < canvasBars.width; i+=20){ if(!barVals[i]){ barVals[i] = { val : Math.random()*(canvasBars.height/2), freq : 0.1, sineVal : Math.random()*100 }; } barVals[i].sineVal+=barVals[i].freq; barVals[i].val+=Math.sin(barVals[i].sineVal*Math.PI/2)*5; ctxBars.fillRect(i+5,canvasBars.height,15,-barVals[i].val); } requestAnimationFrame(render);
}
function consoleOutput(){ var textEl = document.createElement('p'); if(isProcessing){ textEl = document.createElement('span'); textEl.textContent += Math.random() + " "; if(Date.now() > lastProcess + processTime){ isProcessing = false; } }else{ var commandType = ~~(Math.random()*4); switch(commandType){ case 0: textEl.textContent = commandStart[~~(Math.random()*commandStart.length)] + commandParts[~~(Math.random()*commandParts.length)]; break; case 3: isProcessing = true; processTime = ~~(Math.random()*5000); lastProcess = Date.now(); default: textEl.textContent = commandResponses[~~(Math.random()*commandResponses.length)]; break; } } outputConsole.scrollTop = outputConsole.scrollHeight; outputConsole.appendChild(textEl); if (outputConsole.scrollHeight > window.innerHeight) { var removeNodes = outputConsole.querySelectorAll('*'); for(var n = 0; n < ~~(removeNodes.length/3); n++){ outputConsole.removeChild(removeNodes[n]); } } setTimeout(consoleOutput, ~~(Math.random()*200));
}
setTimeout(function(){ 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; for (var i = 0; i < 15; i++) { squares.push(new Square(-300 + (i * 200))); } ctx.strokeStyle = ctxBars.strokeStyle = ctxBars.fillStyle = '#00FF00'; render(); consoleOutput();
}, 200);
window.addEventListener('resize', function(){ 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';
});
Early Hacker - Script Codes
Early Hacker - Script Codes
Home Page Home
Developer Loktar
Username loktar00
Uploaded August 20, 2022
Rating 4.5
Size 4,213 Kb
Views 26,312
Do you need developer help for Early Hacker?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Loktar (loktar00) Script Codes
Name
CSS eyes
Doom screen wipe effect
Rough Seas re-creation for compo
4th of July Fireworks
Circuit board pattern
Tribute to the C64
Part 2 platformer tutorial
Slime Text
Scrolling Terrain and Shooting Stars
Bezier curve art
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!