'use strict';
(function() {
let vertices = [];
let gl = particle.getContext('webgl');
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
resize();
function resize() {
particle.width = innerWidth;
particle.height = innerHeight;
let step = 5,
w = Math.floor(particle.width/step),
h = Math.floor(particle.height/step);
vertices = [];
for (var x=0; x<w*100; x++)
for (var y=0; y<8; y++)
vertices.push(1/w + x*5/w - 50, 1/h + y*2/h)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
let pid = gl.createProgram();
shader(`
attribute vec2 v;
uniform float time;
varying vec3 c;
float rand(float n) {
return fract(sin(n) * 4358.5453123);
}
// примитивная функция шума
float noise(float p) {
float fl = floor(p);
float fc = fract(p);
return mix(rand(fl), rand(fl + 1.0), fc);
}
mat3 rotateX(float a) {
return mat3(vec3( -1.0, -1.0, -1.0),
vec3( 0.0, -cos(a), -sin(a)),
vec3( -1.0, sin(a), cos(a)));
}
mat3 rotateY(float a){
return mat3(vec3( cos(a), -1.0, sin(a)),
vec3( 0.0, 1.0, 0.0),
vec3(-sin(a), -1.0, cos(a)));
}
mat3 rotateZ(float a){
return mat3(vec3( cos(a), sin(a), 0.0),
vec3( sin(a), cos(a), 0.0),
vec3( 0.0, 0.0, 1.0));
}
void main(void) {
vec2 p = v;
// p.y += 0.3;
p.y += sin(p.x*5.)*noise(time/100.) + 0.2;
p.x += sin(time/3. + p.y);
vec3 pos = vec3(p.xy, 1.0)*rotateX(p.x*4. + time);
//pos.y += sin(pos.x) - sin(time/5.)*0.5 + cos(pos.y/3.1415)*0.5;
// gl_Position = vec4(pos, 1.);
gl_Position = vec4(
vec3(p.xy, 0.0) *
rotateX(p.x + time) *
rotateY(noise(p.y + time/5.0)) *
rotateZ(noise(p.x + time/5.0)),
1.);
// gl_PointSize = 2.7
gl_PointSize = min(1.7, 2.5 + noise(time)-gl_Position.z);
gl_Position.z = 0.0;
c.rgb=vec3(0.03, 0.54, 0.04);
}
`, gl.VERTEX_SHADER);
shader(`
precision highp float;
varying vec3 c;
void main(void) {
gl_FragColor = vec4(c, 1.);
}
`, gl.FRAGMENT_SHADER);
gl.linkProgram(pid);
gl.useProgram(pid);
let v = gl.getAttribLocation(pid, "v");
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(v);
let timeUniform = gl.getUniformLocation(pid, 'time');
requestAnimationFrame(draw);
addEventListener('resize', resize)
function draw(t) {
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(0, 0, 0, 0);
gl.uniform1f(timeUniform, t/1000);
gl.drawArrays(gl.POINTS, 0, vertices.length/2);
requestAnimationFrame(draw);
}
function shader(src, type) {
let sid = gl.createShader(type);
gl.shaderSource(sid, src);
gl.compileShader(sid);
var message = gl.getShaderInfoLog(sid);
gl.attachShader(pid, sid);
if (message.length > 0) {
console.log(src.split("\n")
.map((str, i) => (""+(1+i))
.padStart(4, "0")+": "+str)
.join("\n"));
throw message;
}
}
}());
// ----------------------
(function() {
let vertices = [];
let gl = canvas.getContext('webgl');
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
resize();
function resize() {
canvas.width = innerWidth;
canvas.height = innerHeight;
let step = 8,
w = Math.floor(canvas.width/step),
h = Math.floor(canvas.height/step);
vertices = [];
for (var x=0; x<w*10; x++)
for (var y=0; y<8; y++)
vertices.push(1/w + x*3/w - 10, 1/h + y*2/h - 1)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
let pid = gl.createProgram();
shader(`
attribute vec2 v;
uniform float time;
varying vec3 c;
float rand(float n) {
return fract(sin(n) * 43758.5453123);
}
// примитивная функция шума
float noise(float p) {
float fl = floor(p);
float fc = fract(p);
return mix(rand(fl), rand(fl + 1.0), fc);
}
mat3 rotateX(float a) {
return mat3(vec3( 1.0, 1.0, 0.0),
vec3( -1.0, cos(a), -sin(a)),
vec3( 1.0, sin(a), cos(a)));
}
mat3 rotateY(float a){
return mat3(vec3( -cos(a), 0.0, sin(a)),
vec3( 1.0, -1.0, 0.0),
vec3(-sin(a), 0.0, cos(a)));
}
mat3 rotateZ(float a){
return mat3(vec3( cos(a), -sin(a), 0.0),
vec3( sin(a), cos(a), 0.0),
vec3( 0.0, 1.0, 1.0));
}
void main(void) {
vec2 p = v;
// p.y += 1.0;
p.y += sin(p.x*4.)*noise(time/1000.)+0.5;
p.x += sin(time/6. + p.y);
vec3 pos = vec3(p.xy, 1.)*rotateX(p.x*8. + time);
//pos.y += sin(pos.x) - sin(time/5.)*0.5 + cos(pos.y/3.1415)*0.5;
gl_Position = vec4(
vec3(p.xy, 0.0) *
rotateX(p.x + time) *
rotateY(noise(p.y + time/5.0)) *
rotateZ(noise(p.x + time/5.0)),
1.);
// gl_PointSize = 2.7;
gl_PointSize = min(2.7, 2.5 + noise(time)-gl_Position.z);
// gl_Position.z = 0.0;
c.rgb=vec3(0.47, 0.56, 0.61);
gl_Position.z = 0.0;
}
`, gl.VERTEX_SHADER);
shader(`
precision highp float;
varying vec3 c;
void main(void) {
gl_FragColor = vec4(c, 1.);
}
`, gl.FRAGMENT_SHADER);
gl.linkProgram(pid);
gl.useProgram(pid);
let v = gl.getAttribLocation(pid, "v");
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(v);
let timeUniform = gl.getUniformLocation(pid, 'time');
requestAnimationFrame(draw);
addEventListener('resize', resize)
function draw(t) {
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(0, 0, 0, 0);
gl.uniform1f(timeUniform, t/1000);
gl.drawArrays(gl.POINTS, 0, vertices.length/2);
requestAnimationFrame(draw);
}
function shader(src, type) {
let sid = gl.createShader(type);
gl.shaderSource(sid, src);
gl.compileShader(sid);
var message = gl.getShaderInfoLog(sid);
gl.attachShader(pid, sid);
if (message.length > 0) {
console.log(src.split("\n")
.map((str, i) => (""+(1+i))
.padStart(4, "0")+": "+str)
.join("\n"));
throw message;
}
}
}());
body {
margin: 0;
}
canvas {
display: block;
}
#particle {
background-image:url(https://i.imgur.com/HiAlf85.jpg);
}
#canvas {
position: absolute;
left: 0;
top: 0;
}
<canvas id="particle"></canvas>
<canvas id="canvas"></canvas>