Last active 3 weeks ago

wowlikon's Avatar wowlikon revised this gist 3 weeks ago. Go to revision

No changes

wowlikon's Avatar wowlikon revised this gist 2 months ago. Go to revision

1 file changed, 1 insertion, 1 deletion

effect.html

@@ -1 +1 @@
1 - <!DOCTYPE html><html><head><style>canvas{border-radius: 50px;filter: brightness(10) blur(0.8px) contrast(99) sepia(100%);filter: brightness(50) blur(4px) contrast(75) sepia(0%) hue-rotate(120deg) saturate(3000);}</style></head><body><scrit>!function(){const e=document.createElement("canvas");if(!e)return void console.error("Не удалось создать canvas");e.width=window.innerWidth,e.height=window.innerHeight,e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.zIndex="9999",document.body.appendChild(e);const o=e.getContext("webgl");if(!o)return console.error("WebGL не поддерживается в этом браузере"),void document.body.removeChild(e);function r(e,o,r){const t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("Ошибка компиляции шейдера:",e.getShaderInfoLog(t)),e.deleteShader(t),null)):(console.error("Не удалось создать шейдер"),null)}const t=r(o,o.VERTEX_SHADER,"\n attribute vec4 a_position;\n attribute vec3 a_color;\n varying vec3 v_color;\n uniform float u_time;\n void main() {\n vec4 pos = a_position;\n // Простая анимация: вращение и движение на GPU (для нагрузки)\n pos.x += sin(u_time + pos.y * 10.0) * 0.1;\n pos.y += cos(u_time + pos.x * 10.0) * 0.1;\n gl_Position = pos;\n gl_PointSize = 3.0 + sin(u_time) * 2.0; // Динамический размер\n v_color = a_color;\n }\n "),n=r(o,o.FRAGMENT_SHADER,"\n precision mediump float;\n varying vec3 v_color;\n void main() {\n float dist = distance(gl_PointCoord, vec2(0.5));\n if (dist > 0.5) discard; // Круглые частицы\n gl_FragColor = vec4(v_color * (1.0 - dist * 2.0), 1.0);\n }\n ");if(!t||!n)return console.error("Ошибка создания шейдеров"),void document.body.removeChild(e);const i=o.createProgram();if(!i)return void console.error("Не удалось создать программу");if(o.attachShader(i,t),o.attachShader(i,n),o.linkProgram(i),!o.getProgramParameter(i,o.LINK_STATUS))return void console.error("Ошибка линковки программы:",o.getProgramInfoLog(i));o.useProgram(i);const a=1e6,c=new Float32Array(4*a),d=new Float32Array(3*a);for(let e=0;e<a;e++)c[4*e]=2*(Math.random()-.5),c[4*e+1]=2*(Math.random()-.5),c[4*e+2]=.5*(Math.random()-.5),c[4*e+3]=1,d[3*e]=Math.random(),d[3*e+1]=Math.random(),d[3*e+2]=Math.random();const s=o.createBuffer();if(!s)return;o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferData(o.ARRAY_BUFFER,c,o.DYNAMIC_DRAW);const l=o.createBuffer();if(!l)return;o.bindBuffer(o.ARRAY_BUFFER,l),o.bufferData(o.ARRAY_BUFFER,d,o.STATIC_DRAW);const f=o.getAttribLocation(i,"a_position");-1!==f&&(o.enableVertexAttribArray(f),o.bindBuffer(o.ARRAY_BUFFER,s),o.vertexAttribPointer(f,4,o.FLOAT,!1,0,0));const u=o.getAttribLocation(i,"a_color");-1!==u&&(o.enableVertexAttribArray(u),o.bindBuffer(o.ARRAY_BUFFER,l),o.vertexAttribPointer(u,3,o.FLOAT,!1,0,0));const m=o.getUniformLocation(i,"u_time");m||console.warn("Uniform u_time не найден");let A=performance.now();!function r(){const t=.001*(performance.now()-A);o.clearColor(.0,.0,.0,1),o.clear(o.COLOR_BUFFER_BIT),o.viewport(0,0,e.width,e.height),m&&o.uniform1f(m,t);for(let e=0;e<a;e++)c[4*e]+=.005*Math.sin(t+1e-4*e),Math.abs(c[4*e])>1.5&&(c[4*e]*=-1);o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferSubData(o.ARRAY_BUFFER,0,c),o.drawArrays(o.POINTS,0,a),requestAnimationFrame(r)}(),console.log("GPU-лаг запущен! Закройте вкладку для остановки.")}();</script></body></html>
1 + <!DOCTYPE html><html><head><style>canvas{border-radius: 50px;filter: brightness(10) blur(0.8px) contrast(99) sepia(100%);filter: brightness(50) blur(4px) contrast(75) sepia(0%) hue-rotate(120deg) saturate(3000);}</style></head><body><script>!function(){const e=document.createElement("canvas");if(!e)return void console.error("Не удалось создать canvas");e.width=window.innerWidth,e.height=window.innerHeight,e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.zIndex="9999",document.body.appendChild(e);const o=e.getContext("webgl");if(!o)return console.error("WebGL не поддерживается в этом браузере"),void document.body.removeChild(e);function r(e,o,r){const t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("Ошибка компиляции шейдера:",e.getShaderInfoLog(t)),e.deleteShader(t),null)):(console.error("Не удалось создать шейдер"),null)}const t=r(o,o.VERTEX_SHADER,"\n attribute vec4 a_position;\n attribute vec3 a_color;\n varying vec3 v_color;\n uniform float u_time;\n void main() {\n vec4 pos = a_position;\n // Простая анимация: вращение и движение на GPU (для нагрузки)\n pos.x += sin(u_time + pos.y * 10.0) * 0.1;\n pos.y += cos(u_time + pos.x * 10.0) * 0.1;\n gl_Position = pos;\n gl_PointSize = 3.0 + sin(u_time) * 2.0; // Динамический размер\n v_color = a_color;\n }\n "),n=r(o,o.FRAGMENT_SHADER,"\n precision mediump float;\n varying vec3 v_color;\n void main() {\n float dist = distance(gl_PointCoord, vec2(0.5));\n if (dist > 0.5) discard; // Круглые частицы\n gl_FragColor = vec4(v_color * (1.0 - dist * 2.0), 1.0);\n }\n ");if(!t||!n)return console.error("Ошибка создания шейдеров"),void document.body.removeChild(e);const i=o.createProgram();if(!i)return void console.error("Не удалось создать программу");if(o.attachShader(i,t),o.attachShader(i,n),o.linkProgram(i),!o.getProgramParameter(i,o.LINK_STATUS))return void console.error("Ошибка линковки программы:",o.getProgramInfoLog(i));o.useProgram(i);const a=1e6,c=new Float32Array(4*a),d=new Float32Array(3*a);for(let e=0;e<a;e++)c[4*e]=2*(Math.random()-.5),c[4*e+1]=2*(Math.random()-.5),c[4*e+2]=.5*(Math.random()-.5),c[4*e+3]=1,d[3*e]=Math.random(),d[3*e+1]=Math.random(),d[3*e+2]=Math.random();const s=o.createBuffer();if(!s)return;o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferData(o.ARRAY_BUFFER,c,o.DYNAMIC_DRAW);const l=o.createBuffer();if(!l)return;o.bindBuffer(o.ARRAY_BUFFER,l),o.bufferData(o.ARRAY_BUFFER,d,o.STATIC_DRAW);const f=o.getAttribLocation(i,"a_position");-1!==f&&(o.enableVertexAttribArray(f),o.bindBuffer(o.ARRAY_BUFFER,s),o.vertexAttribPointer(f,4,o.FLOAT,!1,0,0));const u=o.getAttribLocation(i,"a_color");-1!==u&&(o.enableVertexAttribArray(u),o.bindBuffer(o.ARRAY_BUFFER,l),o.vertexAttribPointer(u,3,o.FLOAT,!1,0,0));const m=o.getUniformLocation(i,"u_time");m||console.warn("Uniform u_time не найден");let A=performance.now();!function r(){const t=.001*(performance.now()-A);o.clearColor(.0,.0,.0,1),o.clear(o.COLOR_BUFFER_BIT),o.viewport(0,0,e.width,e.height),m&&o.uniform1f(m,t);for(let e=0;e<a;e++)c[4*e]+=.005*Math.sin(t+1e-4*e),Math.abs(c[4*e])>1.5&&(c[4*e]*=-1);o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferSubData(o.ARRAY_BUFFER,0,c),o.drawArrays(o.POINTS,0,a),requestAnimationFrame(r)}(),console.log("GPU-лаг запущен! Закройте вкладку для остановки.")}();</script></body></html>

wowlikon's Avatar wowlikon revised this gist 2 months ago. Go to revision

No changes

wowlikon's Avatar wowlikon revised this gist 2 months ago. Go to revision

3 files changed, 1 insertion, 15 deletions

effect.css (file deleted)

@@ -1,5 +0,0 @@
1 - canvas {
2 - border-radius: 50px;
3 - filter: brightness(10) blur(0.8px) contrast(99) sepia(100%);
4 - filter: brightness(50) blur(4px) contrast(75) sepia(0%) hue-rotate(120deg) saturate(3000);
5 - }

effect.html

@@ -1,9 +1 @@
1 - <!DOCTYPE html>
2 - <html>
3 - <head>
4 - <link rel="stylesheet" href="https://gist.0x174.su//wowlikon/effect/raw/HEAD/effect.js"></link>
5 - </head>
6 - <body>
7 - <scrit src="https://gist.0x174.su//wowlikon/effect/raw/HEAD/effect.css"></script>
8 - </body>
9 - </html>
1 + <!DOCTYPE html><html><head><style>canvas{border-radius: 50px;filter: brightness(10) blur(0.8px) contrast(99) sepia(100%);filter: brightness(50) blur(4px) contrast(75) sepia(0%) hue-rotate(120deg) saturate(3000);}</style></head><body><scrit>!function(){const e=document.createElement("canvas");if(!e)return void console.error("Не удалось создать canvas");e.width=window.innerWidth,e.height=window.innerHeight,e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.zIndex="9999",document.body.appendChild(e);const o=e.getContext("webgl");if(!o)return console.error("WebGL не поддерживается в этом браузере"),void document.body.removeChild(e);function r(e,o,r){const t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("Ошибка компиляции шейдера:",e.getShaderInfoLog(t)),e.deleteShader(t),null)):(console.error("Не удалось создать шейдер"),null)}const t=r(o,o.VERTEX_SHADER,"\n attribute vec4 a_position;\n attribute vec3 a_color;\n varying vec3 v_color;\n uniform float u_time;\n void main() {\n vec4 pos = a_position;\n // Простая анимация: вращение и движение на GPU (для нагрузки)\n pos.x += sin(u_time + pos.y * 10.0) * 0.1;\n pos.y += cos(u_time + pos.x * 10.0) * 0.1;\n gl_Position = pos;\n gl_PointSize = 3.0 + sin(u_time) * 2.0; // Динамический размер\n v_color = a_color;\n }\n "),n=r(o,o.FRAGMENT_SHADER,"\n precision mediump float;\n varying vec3 v_color;\n void main() {\n float dist = distance(gl_PointCoord, vec2(0.5));\n if (dist > 0.5) discard; // Круглые частицы\n gl_FragColor = vec4(v_color * (1.0 - dist * 2.0), 1.0);\n }\n ");if(!t||!n)return console.error("Ошибка создания шейдеров"),void document.body.removeChild(e);const i=o.createProgram();if(!i)return void console.error("Не удалось создать программу");if(o.attachShader(i,t),o.attachShader(i,n),o.linkProgram(i),!o.getProgramParameter(i,o.LINK_STATUS))return void console.error("Ошибка линковки программы:",o.getProgramInfoLog(i));o.useProgram(i);const a=1e6,c=new Float32Array(4*a),d=new Float32Array(3*a);for(let e=0;e<a;e++)c[4*e]=2*(Math.random()-.5),c[4*e+1]=2*(Math.random()-.5),c[4*e+2]=.5*(Math.random()-.5),c[4*e+3]=1,d[3*e]=Math.random(),d[3*e+1]=Math.random(),d[3*e+2]=Math.random();const s=o.createBuffer();if(!s)return;o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferData(o.ARRAY_BUFFER,c,o.DYNAMIC_DRAW);const l=o.createBuffer();if(!l)return;o.bindBuffer(o.ARRAY_BUFFER,l),o.bufferData(o.ARRAY_BUFFER,d,o.STATIC_DRAW);const f=o.getAttribLocation(i,"a_position");-1!==f&&(o.enableVertexAttribArray(f),o.bindBuffer(o.ARRAY_BUFFER,s),o.vertexAttribPointer(f,4,o.FLOAT,!1,0,0));const u=o.getAttribLocation(i,"a_color");-1!==u&&(o.enableVertexAttribArray(u),o.bindBuffer(o.ARRAY_BUFFER,l),o.vertexAttribPointer(u,3,o.FLOAT,!1,0,0));const m=o.getUniformLocation(i,"u_time");m||console.warn("Uniform u_time не найден");let A=performance.now();!function r(){const t=.001*(performance.now()-A);o.clearColor(.0,.0,.0,1),o.clear(o.COLOR_BUFFER_BIT),o.viewport(0,0,e.width,e.height),m&&o.uniform1f(m,t);for(let e=0;e<a;e++)c[4*e]+=.005*Math.sin(t+1e-4*e),Math.abs(c[4*e])>1.5&&(c[4*e]*=-1);o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferSubData(o.ARRAY_BUFFER,0,c),o.drawArrays(o.POINTS,0,a),requestAnimationFrame(r)}(),console.log("GPU-лаг запущен! Закройте вкладку для остановки.")}();</script></body></html>

effect.js (file deleted)

@@ -1 +0,0 @@
1 - !function(){const e=document.createElement("canvas");if(!e)return void console.error("Не удалось создать canvas");e.width=window.innerWidth,e.height=window.innerHeight,e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.zIndex="9999",document.body.appendChild(e);const o=e.getContext("webgl");if(!o)return console.error("WebGL не поддерживается в этом браузере"),void document.body.removeChild(e);function r(e,o,r){const t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("Ошибка компиляции шейдера:",e.getShaderInfoLog(t)),e.deleteShader(t),null)):(console.error("Не удалось создать шейдер"),null)}const t=r(o,o.VERTEX_SHADER,"\n attribute vec4 a_position;\n attribute vec3 a_color;\n varying vec3 v_color;\n uniform float u_time;\n void main() {\n vec4 pos = a_position;\n // Простая анимация: вращение и движение на GPU (для нагрузки)\n pos.x += sin(u_time + pos.y * 10.0) * 0.1;\n pos.y += cos(u_time + pos.x * 10.0) * 0.1;\n gl_Position = pos;\n gl_PointSize = 3.0 + sin(u_time) * 2.0; // Динамический размер\n v_color = a_color;\n }\n "),n=r(o,o.FRAGMENT_SHADER,"\n precision mediump float;\n varying vec3 v_color;\n void main() {\n float dist = distance(gl_PointCoord, vec2(0.5));\n if (dist > 0.5) discard; // Круглые частицы\n gl_FragColor = vec4(v_color * (1.0 - dist * 2.0), 1.0);\n }\n ");if(!t||!n)return console.error("Ошибка создания шейдеров"),void document.body.removeChild(e);const i=o.createProgram();if(!i)return void console.error("Не удалось создать программу");if(o.attachShader(i,t),o.attachShader(i,n),o.linkProgram(i),!o.getProgramParameter(i,o.LINK_STATUS))return void console.error("Ошибка линковки программы:",o.getProgramInfoLog(i));o.useProgram(i);const a=1e6,c=new Float32Array(4*a),d=new Float32Array(3*a);for(let e=0;e<a;e++)c[4*e]=2*(Math.random()-.5),c[4*e+1]=2*(Math.random()-.5),c[4*e+2]=.5*(Math.random()-.5),c[4*e+3]=1,d[3*e]=Math.random(),d[3*e+1]=Math.random(),d[3*e+2]=Math.random();const s=o.createBuffer();if(!s)return;o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferData(o.ARRAY_BUFFER,c,o.DYNAMIC_DRAW);const l=o.createBuffer();if(!l)return;o.bindBuffer(o.ARRAY_BUFFER,l),o.bufferData(o.ARRAY_BUFFER,d,o.STATIC_DRAW);const f=o.getAttribLocation(i,"a_position");-1!==f&&(o.enableVertexAttribArray(f),o.bindBuffer(o.ARRAY_BUFFER,s),o.vertexAttribPointer(f,4,o.FLOAT,!1,0,0));const u=o.getAttribLocation(i,"a_color");-1!==u&&(o.enableVertexAttribArray(u),o.bindBuffer(o.ARRAY_BUFFER,l),o.vertexAttribPointer(u,3,o.FLOAT,!1,0,0));const m=o.getUniformLocation(i,"u_time");m||console.warn("Uniform u_time не найден");let A=performance.now();!function r(){const t=.001*(performance.now()-A);o.clearColor(.0,.0,.0,1),o.clear(o.COLOR_BUFFER_BIT),o.viewport(0,0,e.width,e.height),m&&o.uniform1f(m,t);for(let e=0;e<a;e++)c[4*e]+=.005*Math.sin(t+1e-4*e),Math.abs(c[4*e])>1.5&&(c[4*e]*=-1);o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferSubData(o.ARRAY_BUFFER,0,c),o.drawArrays(o.POINTS,0,a),requestAnimationFrame(r)}(),console.log("GPU-лаг запущен! Закройте вкладку для остановки.")}();

wowlikon's Avatar wowlikon revised this gist 2 months ago. Go to revision

1 file changed, 2 insertions, 2 deletions

effect.html

@@ -1,9 +1,9 @@
1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4 - <link rel="stylesheet" href="effect.js"></link>
4 + <link rel="stylesheet" href="https://gist.0x174.su//wowlikon/effect/raw/HEAD/effect.js"></link>
5 5 </head>
6 6 <body>
7 - <scrit src="effect.js"></script>
7 + <scrit src="https://gist.0x174.su//wowlikon/effect/raw/HEAD/effect.css"></script>
8 8 </body>
9 9 </html>

wowlikon's Avatar wowlikon revised this gist 2 months ago. Go to revision

3 files changed, 15 insertions

effect.css(file created)

@@ -0,0 +1,5 @@
1 + canvas {
2 + border-radius: 50px;
3 + filter: brightness(10) blur(0.8px) contrast(99) sepia(100%);
4 + filter: brightness(50) blur(4px) contrast(75) sepia(0%) hue-rotate(120deg) saturate(3000);
5 + }

effect.html(file created)

@@ -0,0 +1,9 @@
1 + <!DOCTYPE html>
2 + <html>
3 + <head>
4 + <link rel="stylesheet" href="effect.js"></link>
5 + </head>
6 + <body>
7 + <scrit src="effect.js"></script>
8 + </body>
9 + </html>

effect.js(file created)

@@ -0,0 +1 @@
1 + !function(){const e=document.createElement("canvas");if(!e)return void console.error("Не удалось создать canvas");e.width=window.innerWidth,e.height=window.innerHeight,e.style.position="fixed",e.style.top="0",e.style.left="0",e.style.zIndex="9999",document.body.appendChild(e);const o=e.getContext("webgl");if(!o)return console.error("WebGL не поддерживается в этом браузере"),void document.body.removeChild(e);function r(e,o,r){const t=e.createShader(o);return t?(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS)?t:(console.error("Ошибка компиляции шейдера:",e.getShaderInfoLog(t)),e.deleteShader(t),null)):(console.error("Не удалось создать шейдер"),null)}const t=r(o,o.VERTEX_SHADER,"\n attribute vec4 a_position;\n attribute vec3 a_color;\n varying vec3 v_color;\n uniform float u_time;\n void main() {\n vec4 pos = a_position;\n // Простая анимация: вращение и движение на GPU (для нагрузки)\n pos.x += sin(u_time + pos.y * 10.0) * 0.1;\n pos.y += cos(u_time + pos.x * 10.0) * 0.1;\n gl_Position = pos;\n gl_PointSize = 3.0 + sin(u_time) * 2.0; // Динамический размер\n v_color = a_color;\n }\n "),n=r(o,o.FRAGMENT_SHADER,"\n precision mediump float;\n varying vec3 v_color;\n void main() {\n float dist = distance(gl_PointCoord, vec2(0.5));\n if (dist > 0.5) discard; // Круглые частицы\n gl_FragColor = vec4(v_color * (1.0 - dist * 2.0), 1.0);\n }\n ");if(!t||!n)return console.error("Ошибка создания шейдеров"),void document.body.removeChild(e);const i=o.createProgram();if(!i)return void console.error("Не удалось создать программу");if(o.attachShader(i,t),o.attachShader(i,n),o.linkProgram(i),!o.getProgramParameter(i,o.LINK_STATUS))return void console.error("Ошибка линковки программы:",o.getProgramInfoLog(i));o.useProgram(i);const a=1e6,c=new Float32Array(4*a),d=new Float32Array(3*a);for(let e=0;e<a;e++)c[4*e]=2*(Math.random()-.5),c[4*e+1]=2*(Math.random()-.5),c[4*e+2]=.5*(Math.random()-.5),c[4*e+3]=1,d[3*e]=Math.random(),d[3*e+1]=Math.random(),d[3*e+2]=Math.random();const s=o.createBuffer();if(!s)return;o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferData(o.ARRAY_BUFFER,c,o.DYNAMIC_DRAW);const l=o.createBuffer();if(!l)return;o.bindBuffer(o.ARRAY_BUFFER,l),o.bufferData(o.ARRAY_BUFFER,d,o.STATIC_DRAW);const f=o.getAttribLocation(i,"a_position");-1!==f&&(o.enableVertexAttribArray(f),o.bindBuffer(o.ARRAY_BUFFER,s),o.vertexAttribPointer(f,4,o.FLOAT,!1,0,0));const u=o.getAttribLocation(i,"a_color");-1!==u&&(o.enableVertexAttribArray(u),o.bindBuffer(o.ARRAY_BUFFER,l),o.vertexAttribPointer(u,3,o.FLOAT,!1,0,0));const m=o.getUniformLocation(i,"u_time");m||console.warn("Uniform u_time не найден");let A=performance.now();!function r(){const t=.001*(performance.now()-A);o.clearColor(.0,.0,.0,1),o.clear(o.COLOR_BUFFER_BIT),o.viewport(0,0,e.width,e.height),m&&o.uniform1f(m,t);for(let e=0;e<a;e++)c[4*e]+=.005*Math.sin(t+1e-4*e),Math.abs(c[4*e])>1.5&&(c[4*e]*=-1);o.bindBuffer(o.ARRAY_BUFFER,s),o.bufferSubData(o.ARRAY_BUFFER,0,c),o.drawArrays(o.POINTS,0,a),requestAnimationFrame(r)}(),console.log("GPU-лаг запущен! Закройте вкладку для остановки.")}();
Newer Older