mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
b4c555c912
I could not tolerate the iOS status bar on top of this beautiful simulation. That's why. Idea: https://itnext.io/make-your-pwas-look-handsome-on-ios-fd8fdfcd5777
46 lines
1.4 KiB
HTML
46 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Matrix digital rain</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
|
|
<style>
|
|
@supports (padding-top: env(safe-area-inset-top)) {
|
|
body {
|
|
padding: 0;
|
|
height: calc(100% + env(safe-area-inset-top));
|
|
}
|
|
}
|
|
body {
|
|
background: black;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
canvas {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!--
|
|
This is an implementation of the green code seen in The Matrix film and video game franchise.
|
|
This project demonstrates five concepts:
|
|
1. Drawing to floating point frame buffer objects, or 'FBO's,
|
|
for performing computation and post-processing
|
|
2. GPU-side computation, with fragment shaders
|
|
updating two alternating FBOs
|
|
3. Rendering crisp "vector" graphics, with a multiple-channel
|
|
signed distance field (or 'MSDF')
|
|
4. Creating a blur/bloom effect from a texture pyramid
|
|
5. Color mapping with noise, to hide banding
|
|
|
|
For more information, please visit: https://github.com/Rezmason/matrix
|
|
-->
|
|
<script type="module" src="js/main.js"></script>
|
|
</body>
|
|
</html>
|