Integrate current time - Githubissues

flinknet commented 2 years ago

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

Would it be possible to integrate the current time? That would make it a perfect clock. I'm not a programmer, but I fiddled around and made something work to better demonstrate what I have in mind. http://jsfiddle.net/7fhdt2za/

Rezmason commented 2 years ago

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.)

flinknet commented 2 years ago

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.

Rezmason / matrix

Integrate current time #15