Binary rain?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
Erzesel
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Programmiersprache, Programmieren & Softwareentwicklung
14.07.2024, 18:58

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.
JulJos2020 
Beitragsersteller
 14.07.2024, 22:37

will das im cmd haben, nicht im browser, aber danke

0