First of all, thank you very much for your work. This is by far the best code rain I'v

Integrate current time about matrix HOT 2 CLOSED

rezmason commented on May 14, 2024

Integrate current time

from matrix.

Comments (2)

flinknet commented on May 14, 2024 1

Thank you for your answer.

but is there a reason folks who want what you want couldn't do what you've done, and make a little website that puts the code rain in an iframe?

I guess you are right. If i can do it, than anybody can handle that.

from matrix.

Rezmason commented on May 14, 2024

Sorry for the late reply. Thanks for your kind words!

The blend mode you chose in your proof of concept produces a pretty cool "frosted glass" look, doesn't it?

I suppose I could add a showTime option or something, but is there a reason folks who want what you want couldn't do what you've done, and make a little website that puts the code rain in an iframe?

I'm not opposed to adding things like this, but most feature requests I act on are so tightly integrated into the renderer that modifying the project really is the only viable option.

It hadn't even occurred to me to take the approach you have, using an iframe as a visual element in a larger composition. Check this out!

<html>
<head>
  <style>
    body {
      background-color: black;
    }

    @font-face {
        font-family: Matrix-Code;
    }

    iframe {
      border: none;

      width:100%;
      height:100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    #over {
      background: black;
      color: hsl(115, 10%, 55%);
      mix-blend-mode: hard-light;

      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;

      display: grid;
      justify-content: center;
      align-items: center;

      font-size:40vh; 
      font-family: Matrix-Code;
      font-weight: 900;
      letter-spacing: -.2em;
    }
  </style>
</head>
<body>
  <iframe src="https://rezmason.github.io/matrix/?width=400"></iframe>
  <div id="over" onload="currentTime()"></div>
</body>
<script>
  function currentTime() {
    let date = new Date(); 
    let hh = date.getHours();
    let mm = date.getMinutes();

     hh = (hh < 10) ? "0" + hh : hh;
     mm = (mm < 10) ? "0" + mm : mm;

     let time = hh + ":" + mm;

    document.getElementById("over").innerText = time;
    document.getElementById("over2").innerText = time;
    let t = setTimeout(function(){ currentTime() }, 1000); 
  }

  currentTime();
</script>
</html>

Works like a dream! Except the Matrix font has no "6" character. (They added it in Resurrections, I'm working on an update.)

from matrix.

Recommend Projects

Integrate current time about matrix HOT 2 CLOSED

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs