Binary rain?
Hey, ich bräuchte das skript, das einen "Binary rain" macht, so etwas wie hier:
Ich weiß, dass es dafür skripte gibt, kann sie nur nicht finden, wäre gut wenn es in node wäre, danke im vorraus
2 Antworten
Vom Beitragsersteller als hilfreich ausgezeichnet
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Programmiersprache, Programmieren & Softwareentwicklung
Da Du nicht explizit ausgeschrieben hast in welcher (Scripts)Sprache, hier eine Variante in Javascript.
MatrixRain.html
<html>
<head>
<style>
html,body { /* Page settings */
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: red; /*funy*/
}
canvas {display:block;}
#overlay { /*maincontainer for content*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
color : White;
z-index : 1;
}
#Text {
margin: 30px;
padding: 10px;
border: 1px solid magenta;
}
h1 {
Font-Size: 72px;
}
p {
Font-Size: 20px;
margin-top:1em;
}
</style>
</head>
<body onresize="resize()">
<canvas id="c"></canvas>
<div id = "overlay">
<!--normal HTML here, or whatever you want to display in front of the background-->
<img src="https://img2.dreamies.de/img/901/b/5uzu36uou6w.gif" alt="Erzesel Target" >
<div id = "Text">
<h1>Eselfreude</h1>
<p>I Ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
<p>blah & Blub</p>
</div>
</div>
<script>
var c = document.getElementById("c"); // geting canvas by id c
var ctx = c.getContext("2d");
//max posible where the window can be resized enough for 3x8k Monitors(preset the maximum possible colums while resizing)
var maxWindowWidth = 23040;
//characterset (Kanji should be better)
var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
matrix = matrix.split(''); //converting the string into an array of single characters
var font_size = 10;
var afterGlow = 30; //afterglowtime of charakters 1..100
c.height = window.innerHeight; //canvas at windowsize
c.width = window.innerWidth;
var columns = c.width / font_size; //number of columns for the rain
var maxColumns = maxWindowWidth / font_size; //init the drops for possible 3x8k-Monitors
var rows = c.height / font_size;
var drops = []; //an array of drops - one per column
//x below is the x coordinate (column), drops[x] become the y coordinate (row)
for(var x = 0; x < maxColumns; x++) drops[x] = Math.random() * rows; //set for every drop the random row 0<>canvashight
//start Rain...
setInterval( draw, 60);
function draw() //drawing the characters
{
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0," + 2/(afterGlow) ;
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px arial";
//looping over drops
for( var i = 0; i < columns; i++ )
{
var text = matrix[ Math.floor( Math.random() * matrix.length ) ]; //a random character to print
ctx.fillText(text, i * font_size, drops[i] * font_size); //x = i*font_size, y = value of drops[i]*font_size
//adding a randomness to the reset to make the drops scattered on the Y axis
if( drops[i] * font_size > c.height && Math.random() > .96 )
drops[i] = 0; //sending the drop back to the top randomly after it has crossed the screen
drops[i]++; //incrementing Y coordinate
}
}
function resize()
{
c.height = window.innerHeight; //change the canvassize to new windowsize
c.width = window.innerWidth;
columns = c.width / font_size; //recalculate columns
}
</script>
</body>
</html>
Das Script ist zwar nicht ganz taufrisch, aber dürfte jedem einigermaßen gängigen Browser funktionieren. Es kommt problemlos mit Fenstern zurecht, welche über mehrere Monitore aufgezogen sind und passt sich automatisch Veränderungen der Fenstergöße an.
Auf Linux gibt es CMatrix. Lässt sich laut GitHub auch mittels MinGW gut auf Windows kompilieren: https://github.com/abishekvashok/cmatrix
Woher ich das weiß:eigene Erfahrung – Langjähriger Poweruser & praktische Programmiererfahrung
