Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Integrate current time #15

Closed
flinknet opened this issue Aug 12, 2022 · 2 comments
Closed

Integrate current time #15

flinknet opened this issue Aug 12, 2022 · 2 comments

Comments

@flinknet
Copy link

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
Copy link
Owner

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?

image

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>

image

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

@flinknet
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Rezmason @flinknet