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

not bad for first time

Browse Source
This commit is contained in:
serge
2022-07-05 05:24:38 +10:00
parent a4a0406826
commit c2eb3d0602
4 changed files with 86 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
js/config.js
View File

@@ -91,7 +91,7 @@ const defaults = {
],
raindropLength: 1, // Adjusts the frequency of raindrops (and their length) in a column
slant: 0, // The angle at which rain falls; the orientation of the glyph grid
resolution: 1, // An overall scale multiplier
resolution: .75, // An overall scale multiplier
useHalfFloat: false,
renderer: "webgpu", // The preferred web graphics API
useHoloplay: false,
@@ -174,11 +174,11 @@ const versions = {
},
updated: {
font: "resurrections",
numColumns: 108,
numColumns: 100,
fallSpeed: 0.35,
cycleStyle: "cycleRandomly",
cycleSpeed: 0.8,
glyphEdgeCrop: 0.1,
glyphEdgeCrop: .27,
paletteEntries: [
{ hsl: [0.39, 0.9, 0.0], at: 0.0 },
{ hsl: [0.39, 1.0, 0.6], at: 0.5 },

28
js/regl/main.js
View File

@@ -7,6 +7,7 @@ import makeStripePass from "./stripePass.js";
import makeImagePass from "./imagePass.js";
import makeResurrectionPass from "./resurrectionPass.js";
import makeQuiltPass from "./quiltPass.js";
import makeRipplesPass from "./ripplesPass.js";
import getLKG from "./lkgHelper.js";
const effects = {
@@ -20,6 +21,7 @@ const effects = {
image: makeImagePass,
resurrection: makeResurrectionPass,
resurrections: makeResurrectionPass,
ripples: makeRipplesPass,
};
const dimensions = { width: 1, height: 1 };
@@ -41,19 +43,19 @@ export default async (canvas, config) => {
canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
};
window.onresize = resize;
if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
window.onclick = () => {
if (document.fullscreenElement == null) {
if (canvas.webkitRequestFullscreen != null) {
canvas.webkitRequestFullscreen();
} else {
canvas.requestFullscreen();
}
} else {
document.exitFullscreen();
}
};
}
// if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
// window.onclick = () => {
// if (document.fullscreenElement == null) {
// if (canvas.webkitRequestFullscreen != null) {
// canvas.webkitRequestFullscreen();
// } else {
// canvas.requestFullscreen();
// }
// } else {
// document.exitFullscreen();
// }
// };
// }
resize();
const regl = createREGL({

35
js/regl/ripplesPass.js Normal file
View File

@@ -0,0 +1,35 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a loaded in image
// const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg";
export default ({ regl, config }, inputs) => {
console.log('ripples');
const output = makePassFBO(regl, config.useHalfFloat);
// const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
// const bloomStrength = config.bloomStrength;
// const background = loadImage(regl, bgURL);
const ripplesPassFrag = loadText("shaders/glsl/ripplesPass.frag.glsl");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
// bloomStrength,
time: regl.context("time"),
tex: inputs.primary,
bloomTex: inputs.bloom,
height: regl.context("viewportWidth"),
width: regl.context("viewportHeight"),
},
framebuffer: output,
});
return makePass(
{
primary: output,
},
Promise.all([ripplesPassFrag.loaded]),
(w, h) => output.resize(w, h),
() => render({ frag: ripplesPassFrag.text() })
);
};

33
shaders/glsl/ripplesPass.frag.glsl Normal file
View File

@@ -0,0 +1,33 @@
precision mediump float;
varying vec2 vUV;
uniform float width, height;
uniform float time;
uniform sampler2D tex;
// uniform sampler2D bloomTex;
void main() {
// gl_FragColor = texture2D(tex, vUV);
// vec4 color = texture2D(bloomTex, vUV) + texture2D(tex, vUV);
vec2 iResolution = vec2(width,height);
vec2 cp = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
float cl = length(cp);
vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl / 10.) * cos(cl * 1.0 - time * 5.0) * 0.8;
// vec4 col=smoothstep(0.1,.91,texture2D(color).xyz);
vec3 col = texture2D(tex, uv).xyz;// + texture2D(bloomTex, uv).xyz;;
gl_FragColor = vec4(col,1.0);
}
// void main( out vec4 fragColor, in vec2 fragCoord )
// {
// vec2 cp = -1.0 + 2.0 * fragCoord / iResolution.xy;
// float cl = length(cp);
// vec2 uv = fragCoord / iResolution.xy + (cp / cl) * cos(cl * 12.0 - iTime * 4.0) * 0.02;
// vec3 col = texture(iChannel0, uv).xyz;
// fragColor = vec4(col, 1.0);
// }