mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
293 lines
12 KiB
HTML
293 lines
12 KiB
HTML
<html>
|
|
<head>
|
|
<title>Matrix digital rain</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
</head>
|
|
<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
|
|
<script src="./lib/three.js"></script>
|
|
|
|
<script src="./js/CopyShader.js"></script>
|
|
|
|
<script src="./js/EffectComposer.js"></script>
|
|
<script src="./js/RenderPass.js"></script>
|
|
<script src="./js/ShaderPass.js"></script>
|
|
|
|
<script src="./js/ColorMapPass.js"></script>
|
|
<script src="./js/HorizontalColorationPass.js"></script>
|
|
<script src="./js/LuminosityHighPassShader.js"></script>
|
|
<script src="./js/UnrealBloomPass.js"></script>
|
|
<script src="./js/ImageOverlayPass.js"></script>
|
|
<script src="./js/GPUComputationRenderer.js"></script>
|
|
|
|
<script src="./js/MatrixRenderer.js"></script>
|
|
|
|
<script>
|
|
|
|
const versions = {
|
|
paradise: {
|
|
fontTexture: "./coptic_msdf.png",
|
|
raindropLength: 0.5,
|
|
glyphSequenceLength: 32,
|
|
bloom: {
|
|
strength: 4,
|
|
radius: 1,
|
|
threshold: 0
|
|
},
|
|
palette: [
|
|
{color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
|
|
{color: new THREE.Vector3(0.52, 0.17, 0.05), at: 0.4},
|
|
{color: new THREE.Vector3(0.82, 0.37, 0.12), at: 0.7},
|
|
{color: new THREE.Vector3(1.00, 0.74, 0.29), at: 0.9},
|
|
{color: new THREE.Vector3(1.00, 1.00, 1.00), at: 1.0},
|
|
],
|
|
fallSpeed: 0.05,
|
|
cycleSpeed: 0.05,
|
|
hasThunder: false,
|
|
hasSun: true,
|
|
slant: 0,
|
|
glyphEdgeCrop: 0.0,
|
|
glyphHeightToWidth:1,
|
|
isPolar: true,
|
|
numColumns: 50,
|
|
fade: true,
|
|
cycleStyle: "cycleFasterWhenDimmed"
|
|
},
|
|
nightmare: {
|
|
fontTexture: "./gothic_msdf.png",
|
|
raindropLength: 0.6,
|
|
glyphSequenceLength: 27,
|
|
bloom: {
|
|
strength: 2,
|
|
radius: 0.8,
|
|
threshold: 0.5
|
|
},
|
|
palette: [
|
|
{color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
|
|
{color: new THREE.Vector3(0.52, 0.00, 0.00), at: 0.2},
|
|
{color: new THREE.Vector3(0.82, 0.05, 0.05), at: 0.4},
|
|
{color: new THREE.Vector3(1.00, 0.60, 0.30), at: 0.8},
|
|
{color: new THREE.Vector3(1.00, 1.00, 0.90), at: 1.0},
|
|
],
|
|
fallSpeed: 2.0,
|
|
cycleSpeed: 0.02,
|
|
hasThunder: true,
|
|
hasSun: false,
|
|
slant: 360 / 16,
|
|
glyphEdgeCrop: 0.0,
|
|
glyphHeightToWidth:1,
|
|
isPolar: false,
|
|
numColumns: 60,
|
|
fade: true,
|
|
cycleStyle: "cycleFasterWhenDimmed"
|
|
},
|
|
["1999"]: {
|
|
fontTexture: "./matrixcode_msdf.png",
|
|
raindropLength: 1,
|
|
glyphSequenceLength: 57,
|
|
bloom: {
|
|
strength: 2,
|
|
radius: 0.5,
|
|
threshold: 0.3
|
|
},
|
|
palette: [
|
|
// {color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
|
|
// {color: new THREE.Vector3(0.05, 0.52, 0.17), at: 0.4},
|
|
// {color: new THREE.Vector3(0.12, 0.82, 0.37), at: 0.8},
|
|
// {color: new THREE.Vector3(0.29, 1.00, 0.64), at: 1.0},
|
|
|
|
{color: new THREE.Vector3( 0/255, 0/255, 0/255), at: 0/16},
|
|
{color: new THREE.Vector3( 6/255, 16/255, 8/255), at: 1/16},
|
|
{color: new THREE.Vector3( 11/255, 28/255, 15/255), at: 2/16},
|
|
{color: new THREE.Vector3( 17/255, 41/255, 23/255), at: 3/16},
|
|
{color: new THREE.Vector3( 20/255, 58/255, 31/255), at: 4/16},
|
|
{color: new THREE.Vector3( 23/255, 84/255, 39/255), at: 5/16},
|
|
{color: new THREE.Vector3( 30/255, 113/255, 48/255), at: 6/16},
|
|
{color: new THREE.Vector3( 43/255, 142/255, 60/255), at: 7/16},
|
|
{color: new THREE.Vector3( 57/255, 160/255, 72/255), at: 8/16},
|
|
{color: new THREE.Vector3( 70/255, 175/255, 81/255), at: 9/16},
|
|
{color: new THREE.Vector3( 75/255, 187/255, 85/255), at: 10/16},
|
|
{color: new THREE.Vector3( 78/255, 196/255, 91/255), at: 11/16},
|
|
{color: new THREE.Vector3( 83/255, 203/255, 102/255), at: 12/16},
|
|
{color: new THREE.Vector3( 92/255, 212/255, 114/255), at: 13/16},
|
|
{color: new THREE.Vector3(109/255, 223/255, 130/255), at: 14/16},
|
|
{color: new THREE.Vector3(129/255, 232/255, 148/255), at: 15/16},
|
|
{color: new THREE.Vector3(140/255, 235/255, 157/255), at: 16/16},
|
|
],
|
|
fallSpeed: 1,
|
|
cycleSpeed: 1,
|
|
hasThunder: false,
|
|
hasSun: false,
|
|
slant: 0,
|
|
glyphEdgeCrop: 0.0,
|
|
glyphHeightToWidth:1,
|
|
isPolar: false,
|
|
numColumns: 80,
|
|
fade: true,
|
|
cycleStyle: "cycleFasterWhenDimmed"
|
|
},
|
|
throwback: {
|
|
fontTexture: "./matrixcode_msdf.png",
|
|
raindropLength: 2,
|
|
glyphSequenceLength: 57,
|
|
bloom: {
|
|
strength: 0.3,
|
|
radius: 1.5,
|
|
threshold: 0.0
|
|
},
|
|
palette: [
|
|
{color: new THREE.Vector3(( 0 * 1.3)/255, ( 0 * 1.2)/255, ( 0 * 1.3)/255), at: 0/48},
|
|
{color: new THREE.Vector3(( 6 * 1.3)/255, ( 16 * 1.2)/255, ( 8 * 1.3)/255), at: 1/48},
|
|
{color: new THREE.Vector3(( 11 * 1.3)/255, ( 28 * 1.2)/255, ( 15 * 1.3)/255), at: 2/48},
|
|
{color: new THREE.Vector3(( 17 * 1.3)/255, ( 41 * 1.2)/255, ( 23 * 1.3)/255), at: 3/48},
|
|
{color: new THREE.Vector3(( 20 * 1.3)/255, ( 58 * 1.2)/255, ( 31 * 1.3)/255), at: 4/48},
|
|
{color: new THREE.Vector3(( 23 * 1.3)/255, ( 84 * 1.2)/255, ( 39 * 1.3)/255), at: 5/48},
|
|
{color: new THREE.Vector3(( 30 * 1.3)/255, (113 * 1.2)/255, ( 48 * 1.3)/255), at: 6/48},
|
|
{color: new THREE.Vector3(( 43 * 1.3)/255, (142 * 1.2)/255, ( 60 * 1.3)/255), at: 7/48},
|
|
{color: new THREE.Vector3(( 57 * 1.3)/255, (160 * 1.2)/255, ( 72 * 1.3)/255), at: 8/48},
|
|
{color: new THREE.Vector3(( 70 * 1.3)/255, (175 * 1.2)/255, ( 81 * 1.3)/255), at: 9/48},
|
|
{color: new THREE.Vector3(( 75 * 1.3)/255, (187 * 1.2)/255, ( 85 * 1.3)/255), at: 10/48},
|
|
{color: new THREE.Vector3(( 78 * 1.3)/255, (196 * 1.2)/255, ( 91 * 1.3)/255), at: 11/48},
|
|
{color: new THREE.Vector3(( 83 * 1.3)/255, (203 * 1.2)/255, (102 * 1.3)/255), at: 12/48},
|
|
{color: new THREE.Vector3(( 92 * 1.3)/255, (212 * 1.2)/255, (114 * 1.3)/255), at: 13/48},
|
|
{color: new THREE.Vector3((109 * 1.0)/255, (255 * 1.0)/255, (130 * 1.0)/255), at: 14/48},
|
|
{color: new THREE.Vector3((129 * 1.0)/255, (255 * 1.0)/255, (148 * 1.0)/255), at: 15/48},
|
|
{color: new THREE.Vector3((140 * 1.0)/255, (255 * 1.0)/255, (157 * 1.0)/255), at: 16/48},
|
|
{color: new THREE.Vector3((255 * 1.0)/255, (255 * 1.0)/255, (255 * 1.0)/255), at: 36/48},
|
|
],
|
|
fallSpeed: 0.6,
|
|
cycleSpeed: 0.4,
|
|
hasThunder: false,
|
|
hasSun: false,
|
|
slant: 0,
|
|
glyphEdgeCrop: 0.15,
|
|
glyphHeightToWidth:1.5,
|
|
isPolar: false,
|
|
numColumns: 90,
|
|
fade: false,
|
|
cycleStyle: "cycleRandomly"
|
|
}
|
|
};
|
|
|
|
const urlParams = new Map(window.location.href.replace(/^[^\?]+\?/, "").split("&").map(pair => pair.split("=")));
|
|
const getParam = (keyOrKeys, defaultValue) => {
|
|
if (Array.isArray(keyOrKeys)) {
|
|
const keys = keyOrKeys;
|
|
const key = keys.find(key => urlParams.has(key));
|
|
return key != null ? urlParams.get(key) : defaultValue;
|
|
} else {
|
|
const key = keyOrKeys;
|
|
return urlParams.has(key) ? urlParams.get(key) : defaultValue;
|
|
}
|
|
};
|
|
|
|
const version = versions[getParam("version", "1999")] || versions["1999"];
|
|
|
|
const sharpness = parseFloat(getParam("sharpness", 0.5));
|
|
const animationSpeed = parseFloat(getParam("animationSpeed", 1));
|
|
const fallSpeed = parseFloat(getParam("fallSpeed", 1)) * version.fallSpeed;
|
|
const cycleSpeed = parseFloat(getParam("cycleSpeed", 1)) * version.cycleSpeed;
|
|
const numColumns = parseInt(getParam("width", version.numColumns));
|
|
const raindropLength = parseFloat(getParam(["raindropLength", "dropLength"], version.raindropLength));
|
|
const numFontColumns = 8;
|
|
const glyphSequenceLength = version.glyphSequenceLength;
|
|
const slant = parseFloat(getParam(["slant", "angle"], version.slant)) * Math.PI / 180;
|
|
const glyphEdgeCrop = parseFloat(getParam("encroach", version.glyphEdgeCrop));
|
|
const glyphHeightToWidth = parseFloat(getParam("stretch", version.glyphHeightToWidth));
|
|
const fade = getParam("fade", version.fade).toString() == "true";
|
|
|
|
const effect = getParam("effect", "plain");
|
|
|
|
document.ontouchmove = (e) => e.preventDefault();
|
|
const element = document.createElement("matrixcode");
|
|
document.body.appendChild(element);
|
|
const renderer = new THREE.WebGLRenderer({ stencil: false, depth: false, precision: "lowp" });
|
|
renderer.sortObjects = true;
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
element.appendChild(renderer.domElement);
|
|
const composer = new THREE.EffectComposer( renderer );
|
|
|
|
const fontTexture = new THREE.TextureLoader().load( version.fontTexture );
|
|
|
|
const matrixRenderer = makeMatrixRenderer(renderer, fontTexture, {
|
|
sharpness,
|
|
numColumns,
|
|
animationSpeed, fallSpeed, cycleSpeed,
|
|
glyphSequenceLength,
|
|
numFontColumns,
|
|
hasThunder: version.hasThunder,
|
|
hasSun: version.hasSun,
|
|
isPolar: version.isPolar,
|
|
slant,
|
|
glyphEdgeCrop,
|
|
glyphHeightToWidth,
|
|
fade,
|
|
showComputationTexture: effect === "none",
|
|
raindropLength,
|
|
cycleStyle: version.cycleStyle
|
|
});
|
|
|
|
matrixRenderer.pass.renderToScreen = false;
|
|
composer.addPass( matrixRenderer.pass );
|
|
|
|
const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), version.bloom.strength, version.bloom.radius, version.bloom.threshold );
|
|
if (effect !== "none") {
|
|
composer.addPass( bloomPass );
|
|
}
|
|
|
|
switch (effect) {
|
|
case "plain":
|
|
composer.addPass(new THREE.ColorMapPass(version.palette, 0.05, 100));
|
|
break;
|
|
case "pride":
|
|
composer.addPass(new THREE.HorizontalColorationPass([
|
|
new THREE.Vector3(1, 0, 0),
|
|
new THREE.Vector3(1, 0.5, 0),
|
|
new THREE.Vector3(1, 1, 0),
|
|
new THREE.Vector3(0, 1, 0),
|
|
new THREE.Vector3(0, 0, 1),
|
|
new THREE.Vector3(0.8, 0, 1),
|
|
], 0.1));
|
|
break;
|
|
case "customStripes":
|
|
const flagColorData = getParam("colors", "0.4,0.15,0.1,0.4,0.15,0.1,0.8,0.8,0.6,0.8,0.8,0.6,1.0,0.7,0.8,1.0,0.7,0.8,").split(",").map(parseFloat);
|
|
const numFlagColors = Math.floor(flagColorData.length / 3);
|
|
const colors = [];
|
|
for (let i = 0; i < numFlagColors; i++) {
|
|
colors.push(new THREE.Vector3(flagColorData[i * 3 + 0], flagColorData[i * 3 + 1], flagColorData[i * 3 + 2]));
|
|
}
|
|
composer.addPass(new THREE.HorizontalColorationPass(colors, 0.1));
|
|
break;
|
|
case "none":
|
|
break;
|
|
case "image":
|
|
const imageURL = getParam("url", "https://upload.wikimedia.org/wikipedia/commons/0/0a/Flammarion_Colored.jpg");
|
|
window.texture2 = new THREE.TextureLoader().load( imageURL );
|
|
composer.addPass(new THREE.ImageOverlayPass(texture2));
|
|
break;
|
|
}
|
|
|
|
composer.passes[composer.passes.length - 1].renderToScreen = true;
|
|
|
|
const windowResize = () => {
|
|
const [width, height] = [window.innerWidth, window.innerHeight];
|
|
matrixRenderer.resize(width, height);
|
|
renderer.setSize(width, height);
|
|
composer.setSize(width, height);
|
|
bloomPass.setSize( window.innerWidth, window.innerHeight );
|
|
}
|
|
window.addEventListener("resize", windowResize, false);
|
|
window.addEventListener("orientationchange", windowResize, false);
|
|
windowResize();
|
|
|
|
const render = () => {
|
|
requestAnimationFrame(render);
|
|
matrixRenderer.render();
|
|
composer.render();
|
|
}
|
|
render();
|
|
|
|
</script>
|
|
</body></html>
|