matrix like login screen?

rootKID · September 6, 2020

Hello W3S!

So, im a bit confused kinda. Currently, im trying to "re-create" this canvas kind of "matrix effect". Found it from the URL below here:

HTML5 CANVAS MATRIX EFFECT

Now, what i am trying to achieve here, would be the exact same effect - but on a DIV instead? Because from what im aware of the canvas it is not possible to place things like DIV's and FORM's on those? (correct me if im wrong here....)

So at the moment im kinda trying to re-engineer the effect, but still a little lost i guess.

This is my current Javascript Code:

/*
#####################################################################################
# FILE: ( ROOT/file.login.3.html )
# ID & CLASS PREFIX: ( #fl3, .fl3_ )
# SAMPLE 1: ( body#fl3 )
# SAMPLE 2: ( #fl3 )
# SAMPLE 3: ( div.fl3_CLASS_ETC_ )
# SAMPLE 4: ( .fl3_CLASS_ETC_ )
# SAMPLE 5: ( .fl3_ )
#####################################################################################
*/

// "#fl3_matrix_1"
// "fl3_matrix_1_"
// "fl3_matrix_1___"

var
	fl3_matrix_1_id = document.getElementById("fl3_matrix_1"),
	// full screen dimensions
	fl3_matrix_1_screen_width = window.innerWidth, // or "cw = column width"
	fl3_matrix_1_screen_height = window.innerHeight, // or "ch = column height"
	fl3_matrix_1_character_array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
	fl3_matrix_1_max_character_count = 100,
	fl3_matrix_1_falling_character_array = [],
	fl3_matrix_1_fontSize = 10,
	fl3_matrix_1_maxColums = fl3_matrix_1_screen_width/(fl3_matrix_1_fontSize)
;
fl3_matrix_1_id.width = fl3_matrix_1_screen_width; // Width Being Set
fl3_matrix_1_id.height = fl3_matrix_1_screen_height; // Height Being Set

// Generates a random integer
function fl3_matrix_1___randomInt( min, max ) {
	return Math.floor(Math.random() * ( max - min ) + min);
}
// Generates a random float
function randomFloat( min, max ) {
	return Math.random() * ( max - min ) + min;
}
// Generates a "Point"
function Point( x, y ) {
	this.x = x;
	this.y = y;
}

/*
var canvas = document.getElementById( 'canvas' ),
		ctx = canvas.getContext( '2d' ),
    canvas2 = document.getElementById( 'canvas2' ),
    ctx2 = canvas2.getContext( '2d' ),
		// full screen dimensions
		cw = window.innerWidth,
		ch = window.innerHeight,
    charArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
    maxCharCount = 100,
    fallingCharArr = [],
    fontSize = 10,
    maxColums = cw/(fontSize);
    canvas.width = canvas2.width = cw;
    canvas.height = canvas2.height = ch;


    function randomInt( min, max ) {
    	return Math.floor(Math.random() * ( max - min ) + min);
    }

    function randomFloat( min, max ) {
    	return Math.random() * ( max - min ) + min;
    }

    function Point(x,y)
    {
      this.x = x;
      this.y = y;
    }

    Point.prototype.draw = function(ctx){

      this.value = charArr[randomInt(0,charArr.length-1)].toUpperCase();
      this.speed = randomFloat(1,5);


      ctx2.fillStyle = "rgba(255,255,255,0.8)";
      ctx2.font = fontSize+"px san-serif";
      ctx2.fillText(this.value,this.x,this.y);

        ctx.fillStyle = "#0F0";
        ctx.font = fontSize+"px san-serif";
        ctx.fillText(this.value,this.x,this.y);



        this.y += this.speed;
        if(this.y > ch)
        {
          this.y = randomFloat(-100,0);
          this.speed = randomFloat(2,5);
        }
    }

    for(var i = 0; i < maxColums ; i++) {
      fallingCharArr.push(new Point(i*fontSize,randomFloat(-500,0)));
    }


    var update = function()
    {

    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0,0,cw,ch);

    ctx2.clearRect(0,0,cw,ch);

      var i = fallingCharArr.length;

      while (i--) {
        fallingCharArr[i].draw(ctx);
        var v = fallingCharArr[i];
      }

      requestAnimationFrame(update);
    }

  update();
*/

Now, what i am trying to do here, are to grab the ID, which is placed on the "<body>" tag! And from there, i wish to kinda place the text in the background? Not sure if this is possible with JavaScript, but again, the reason i want it as a kinda background is because text can still fill so if i just place them like that with the JavaScript, im pretty sure it would push to all the other elements somehow?

If anybody got any clues or ideas as to how i could potentially manage to get this one running, i would love the help :D

And if you are lost like me, dont hesitate to write and ask for more details.

But just imagine this. Essentially i wish to create the effect in the background like this on the "body" html element, because i can then place stuff like DIVs etc inside there and create my login formular ^^'

Thanks in advance if anybody got a clue to help me going! And dont hesitate to ask for further details if it can help somehow :P

thanks :)

Sign In

matrix like login screen?

Recommended Posts

rootKID

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity