eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 14:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Figured out how to make the nightmare matrix code slanted.

Browse Source
This commit is contained in:
Rezmason
2018-09-11 21:11:01 -07:00
parent f303051b1d
commit 99916efbf1
2 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -44,6 +44,7 @@
cycleSpeed: 0.05, cycleSpeed: 0.05,
hasThunder: false, hasThunder: false,
hasSun: true, hasSun: true,
isSlanted: false,
isPolar: true, isPolar: true,
numColumns: 50 numColumns: 50
}, },
@@ -62,10 +63,11 @@
{color: new THREE.Vector3(1.00, 0.60, 0.30), at: 0.8}, {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}, {color: new THREE.Vector3(1.00, 1.00, 0.90), at: 1.0},
], ],
fallSpeed: 0.4, fallSpeed: 2.0,
cycleSpeed: 0.02, cycleSpeed: 0.02,
hasThunder: true, hasThunder: true,
hasSun: false, hasSun: false,
isSlanted: true,
isPolar: false, isPolar: false,
numColumns: 60 numColumns: 60
}, },
@@ -87,6 +89,7 @@
cycleSpeed: 1, cycleSpeed: 1,
hasThunder: false, hasThunder: false,
hasSun: false, hasSun: false,
isSlanted: false,
isPolar: false, isPolar: false,
numColumns: 80 numColumns: 80
} }
@@ -104,10 +107,6 @@
const numColumns = parseInt(getParam("width", version.numColumns)); const numColumns = parseInt(getParam("width", version.numColumns));
const numGlyphColumns = 8; const numGlyphColumns = 8;
const glyphSequenceLength = version.glyphSequenceLength; const glyphSequenceLength = version.glyphSequenceLength;
const palette = version.palette;
const hasThunder = version.hasThunder;
const hasSun = version.hasSun;
const isPolar = version.isPolar;
const effect = getParam("effect", "plain"); const effect = getParam("effect", "plain");
@@ -129,9 +128,10 @@
animationSpeed, fallSpeed, cycleSpeed, animationSpeed, fallSpeed, cycleSpeed,
glyphSequenceLength, glyphSequenceLength,
numGlyphColumns, numGlyphColumns,
hasThunder, hasThunder: version.hasThunder,
hasSun, hasSun: version.hasSun,
isPolar, isPolar: version.isPolar,
isSlanted: version.isSlanted,
}); });
matrixRenderer.pass.renderToScreen = false; matrixRenderer.pass.renderToScreen = false;
@@ -142,7 +142,7 @@
switch (effect) { switch (effect) {
case "plain": case "plain":
composer.addPass(new THREE.ColorMapPass(palette, 0.1)); composer.addPass(new THREE.ColorMapPass(version.palette, 0.1));
break; break;
case "pride": case "pride":
composer.addPass(new THREE.HorizontalColorationPass([ composer.addPass(new THREE.HorizontalColorationPass([

17
js/MatrixRenderer.js
View File

@@ -6,7 +6,8 @@ const makeMatrixRenderer = (renderer, texture, {
numGlyphColumns, numGlyphColumns,
hasThunder, hasThunder,
hasSun, hasSun,
isPolar isPolar,
isSlanted
}) => { }) => {
const matrixRenderer = {}; const matrixRenderer = {};
const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 ); const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
@@ -75,9 +76,9 @@ const glyphVariable = gpuCompute.addVariable(
#ifdef hasThunder #ifdef hasThunder
vec2 distVec = (gl_FragCoord.xy / resolution.xy - vec2(0.5, 1.0)) * vec2(1.0, 2.0); vec2 distVec = (gl_FragCoord.xy / resolution.xy - vec2(0.5, 1.0)) * vec2(1.0, 2.0);
float thunder = (blast(sin(SQRT_5 * simTime * 2.0), 10.0) + blast(sin(SQRT_2 * simTime * 2.0), 10.0)); float thunder = (blast(sin(SQRT_5 * simTime * 2.0), 10.0) + blast(sin(SQRT_2 * simTime * 2.0), 10.0));
thunder *= 20.0 * (1.0 - 1.5 * length(distVec)); thunder *= 30.0 * (1.0 - 1.0 * length(distVec));
newBrightness *= max(0.0, thunder) * 0.4 + 0.6; newBrightness *= max(0.0, thunder) * 1.0 + 0.7;
if (newBrightness > brightness) { if (newBrightness > brightness) {
brightness = newBrightness; brightness = newBrightness;
@@ -179,6 +180,12 @@ const glyphVariable = gpuCompute.addVariable(
float radius = length(diff); float radius = length(diff);
float angle = atan(diff.y, diff.x) + PI; float angle = atan(diff.y, diff.x) + PI;
vec2 uv = vec2(angle / PI, 1.0 - pow(radius * 0.75, 0.6)); vec2 uv = vec2(angle / PI, 1.0 - pow(radius * 0.75, 0.6));
#elif isSlanted
float angle = PI * 0.125;
vec2 rotation = vec2(cos(angle), sin(angle));
vec2 uv = vec2(
(vUV.x - 0.5) * rotation.x + (vUV.y - 0.5) * rotation.y,
(vUV.y - 0.5) * rotation.x - (vUV.x - 0.5) * rotation.y) * 0.75 + 0.5;
#else #else
vec2 uv = vUV; vec2 uv = vUV;
#endif #endif
@@ -212,6 +219,10 @@ const glyphVariable = gpuCompute.addVariable(
mesh.material.defines.isPolar = 1.0; mesh.material.defines.isPolar = 1.0;
} }
if (isSlanted) {
mesh.material.defines.isSlanted = 1.0;
}
// mesh.material = new THREE.MeshBasicMaterial({map: glyphRTT}); // mesh.material = new THREE.MeshBasicMaterial({map: glyphRTT});
scene.add( mesh ); scene.add( mesh );