eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-17 22:09:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Rebuilt on top of REGL.

Browse Source
This commit is contained in:
Rezmason
2020-01-19 16:03:53 -08:00
parent 09677e5aa4
commit a760d6854a
22 changed files with 10869 additions and 49444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
index.html
View File

@@ -1,318 +1,100 @@
<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>
// iOS STOP SCROLLING DAMN IT
document.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
const fonts = {
coptic: {
textureURL: "./coptic_msdf.png",
sequenceLength: 32
},
gothic: {
textureURL: "./gothic_msdf.png",
sequenceLength: 27
},
matrixcode: {
textureURL: "./matrixcode_msdf.png",
sequenceLength: 57
},
};
const versions = {
paradise: {
bloom: {
radius: 1.15,
strength: 3.5,
threshold: 0
},
cycleSpeed: 0.05,
cycleStyle: "cycleFasterWhenDimmed",
cursorEffectThreshold: 1,
brightnessOffset: 0.0,
brightnessMultiplier: 1.0,
fallSpeed: 0.05,
font: fonts.coptic,
glyphEdgeCrop: 0.0,
glyphHeightToWidth:1,
hasSun: true,
hasThunder: false,
isPolar: true,
rippleType: "circle",
rippleThickness: 0.2,
rippleScale: 30,
rippleSpeed: 0.2,
numColumns: 30,
palette: [
{r: 0.00, g: 0.00, b: 0.00, at: 0.0},
{r: 0.52, g: 0.17, b: 0.05, at: 0.4},
{r: 0.82, g: 0.37, b: 0.12, at: 0.7},
{r: 1.00, g: 0.74, b: 0.29, at: 0.9},
{r: 1.00, g: 1.00, b: 1.00, at: 1.0},
],
raindropLength: 0.5,
slant: 0,
},
nightmare: {
bloom: {
radius: 0.8,
strength: 2,
threshold: 0.5
},
cycleSpeed: 0.02,
cycleStyle: "cycleFasterWhenDimmed",
cursorEffectThreshold: 1,
brightnessOffset: 0.0,
brightnessMultiplier: 1.0,
fallSpeed: 2.0,
font: fonts.gothic,
glyphEdgeCrop: 0.0,
glyphHeightToWidth:1,
hasSun: false,
hasThunder: true,
isPolar: false,
rippleType: null,
rippleThickness: 0.2,
rippleScale: 30,
rippleSpeed: 0.2,
numColumns: 60,
palette: [
{r: 0.00, g: 0.00, b: 0.00, at: 0.0},
{r: 0.52, g: 0.00, b: 0.00, at: 0.2},
{r: 0.82, g: 0.05, b: 0.05, at: 0.4},
{r: 1.00, g: 0.60, b: 0.30, at: 0.8},
{r: 1.00, g: 1.00, b: 0.90, at: 1.0},
],
raindropLength: 0.6,
slant: 360 / 16,
},
classic: {
bloom: {
radius: 0.5,
strength: 2,
threshold: 0.3
},
cycleSpeed: 1,
cycleStyle: "cycleFasterWhenDimmed",
cursorEffectThreshold: 1,
brightnessOffset: 0.0,
brightnessMultiplier: 1.0,
fallSpeed: 1,
font: fonts.matrixcode,
glyphEdgeCrop: 0.0,
glyphHeightToWidth:1,
hasSun: false,
hasThunder: false,
isPolar: false,
rippleType: null,
rippleThickness: 0.2,
rippleScale: 30,
rippleSpeed: 0.2,
numColumns: 80,
palette: [
{r: 0/255, g: 0/255, b: 0/255, at: 0/16},
{r: 6/255, g: 16/255, b: 8/255, at: 1/16},
{r: 11/255, g: 28/255, b: 15/255, at: 2/16},
{r: 17/255, g: 41/255, b: 23/255, at: 3/16},
{r: 20/255, g: 58/255, b: 31/255, at: 4/16},
{r: 23/255, g: 84/255, b: 39/255, at: 5/16},
{r: 30/255, g: 113/255, b: 48/255, at: 6/16},
{r: 43/255, g: 142/255, b: 60/255, at: 7/16},
{r: 57/255, g: 160/255, b: 72/255, at: 8/16},
{r: 70/255, g: 175/255, b: 81/255, at: 9/16},
{r: 75/255, g: 187/255, b: 85/255, at: 10/16},
{r: 78/255, g: 196/255, b: 91/255, at: 11/16},
{r: 83/255, g: 203/255, b: 102/255, at: 12/16},
{r: 92/255, g: 212/255, b: 114/255, at: 13/16},
{r: 109/255, g: 223/255, b: 130/255, at: 14/16},
{r: 129/255, g: 232/255, b: 148/255, at: 15/16},
{r: 140/255, g: 235/255, b: 157/255, at: 16/16},
],
raindropLength: 1,
slant: 0,
},
operator: {
bloom: {
radius: 0.3,
strength: 1.45,
threshold: 0.0
},
cycleSpeed: 0.05,
cycleStyle: "cycleRandomly",
cursorEffectThreshold: 0.466,
brightnessOffset: 0.25,
brightnessMultiplier: 0.0,
fallSpeed: 0.6,
font: fonts.matrixcode,
glyphEdgeCrop: 0.15,
glyphHeightToWidth:1.35,
hasSun: false,
hasThunder: false,
isPolar: false,
rippleType: "box",
rippleThickness: 0.2,
rippleScale: 30,
rippleSpeed: 0.2,
numColumns: 108,
palette: [
{r: 0.00, g: 0.00, b: 0.00, at: 0.0},
{r: 0.18, g: 0.90, b: 0.35, at: 0.6},
{r: 0.90, g: 1.00, b: 0.90, at: 1.0},
],
raindropLength: 1.5,
slant: 0,
<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"
/>
<style>
body {
background: black;
overflow: hidden;
margin: 0;
}
};
versions.throwback = versions.operator;
versions["1999"] = versions.classic;
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;
canvas {
width: 100vw;
height: 100vh;
}
};
</style>
</head>
<body>
<script src="lib/regl.min.js"></script>
<script type="module">
import { loadImages, makeFullScreenQuad } from "./js/utils.js";
import makeConfig from "./js/config.js";
import makeMatrixRenderer from "./js/renderer.js";
import makeBloomPass from "./js/bloomPass.js";
import makeColorPass from "./js/colorPass.js";
const version = versions[getParam("version", "classic")] || versions.classic;
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
document.addEventListener("touchmove", e => e.preventDefault(), {
passive: false
});
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 cursorEffectThreshold = getParam("cursorEffectThreshold", version.cursorEffectThreshold);
const bloomSize = Math.max(0.01, Math.min(1, parseFloat(getParam("bloomSize", 0.5))));
const regl = createREGL({
canvas,
extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"],
optionalExtensions: [
"EXT_color_buffer_half_float",
"WEBGL_color_buffer_float",
"OES_standard_derivatives"
]
});
const effect = getParam("effect", "plain");
const [config, uniforms] = makeConfig(window.location.search, data =>
regl.texture({
data,
width: data.length / 3,
height: 1,
format: "rgb",
mag: "linear",
min: "linear"
})
);
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.font.textureURL );
const matrixRenderer = makeMatrixRenderer(renderer, {
animationSpeed, fallSpeed, cycleSpeed,
cycleStyle: version.cycleStyle,
cursorEffectThreshold,
fontTexture,
glyphSequenceLength: version.font.sequenceLength,
glyphEdgeCrop,
glyphHeightToWidth,
hasSun: version.hasSun,
hasThunder: version.hasThunder,
isPolar: version.isPolar,
rippleType: version.rippleType,
rippleThickness: version.rippleThickness,
rippleScale: version.rippleScale,
rippleSpeed: version.rippleSpeed,
brightnessMultiplier: version.brightnessMultiplier,
brightnessOffset: version.brightnessOffset,
numColumns,
numFontColumns,
raindropLength,
showComputationTexture: effect === "none",
slant,
});
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]));
const fullScreenQuad = makeFullScreenQuad(regl, uniforms);
const renderer = makeMatrixRenderer(regl, config);
const bloomPass = makeBloomPass(regl, config, renderer.fbo);
const colorPass = makeColorPass(regl, config, bloomPass.fbo);
const drawToScreen = regl({
uniforms: {
tex: colorPass.fbo
}
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 resize = () => {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
};
window.onresize = resize;
resize();
const windowResize = () => {
const [width, height, pixelRatio] = [window.innerWidth, window.innerHeight, window.devicePixelRatio];
matrixRenderer.resize(width, height);
renderer.setSize(width, height);
composer.setSize(width * pixelRatio, height * pixelRatio);
bloomPass.setSize( window.innerWidth * pixelRatio * bloomSize, window.innerHeight * pixelRatio * bloomSize );
}
window.addEventListener("resize", windowResize, false);
window.addEventListener("orientationchange", windowResize, false);
windowResize();
fullScreenQuad(renderer.update);
const render = () => {
requestAnimationFrame(render);
matrixRenderer.render();
composer.render();
}
render();
document.body.onload = async () => {
const resources = await loadImages(regl, {
msdfTex: config.glyphTexURL,
backgroundTex:
config.effect === "image" ? config.backgroundImage : null
});
</script>
</body></html>
const loop = regl.frame(({ viewportWidth, viewportHeight }) => {
renderer.resize(viewportWidth, viewportHeight);
bloomPass.resize(viewportWidth, viewportHeight);
colorPass.resize(viewportWidth, viewportHeight);
fullScreenQuad(() => {
renderer.update();
renderer.render(resources);
bloomPass.render();
colorPass.render(resources);
drawToScreen();
});
});
};
</script>
</body>
</html>