7

Есть фоновое изображение. Как можно сделать на нем анимацию в виде двигающейся кучи шариков по заданной траектории? Что-то на подобии этого, например - https://www.ciklum.com

Помогите или примером, или советом, или статьёй, туториалом. Буду премного благодарен, так как не знаю, куда двигаться вообще.

Насколько я слышал, это называется как-то вроде dots javascript animation

9
  • может просто гифку запилить и не париться?
    – ThisMan
    6 авг 2019 в 15:08
  • интерактивности ведь ни какой нет
    – ThisMan
    6 авг 2019 в 15:08
  • Нет. Нужно именно на фон наложить всё это дело. 6 авг 2019 в 15:09
  • particle js поищите так
    – ThisMan
    6 авг 2019 в 15:22
  • @StrangerintheQ я так понимаю, для новичка это нереально сделать? 6 авг 2019 в 15:31

5 ответов 5

18
+100

Вот вроде что-то похожее получилась, вращаем точки в зависимости от их положения, времени + немного математического шума.

UPD: добавил фокусы с цветом и адаптивность

// массив с вершинами, в которых будем рисовать точки
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 = 15,
      w = Math.floor(canvas.width/step), 
      h = Math.floor(canvas.height/step);
  
 // при ресайзе заполняем массив положениями вершин
  vertices = [];
  for (var x=0; x<w*3; x++) 
    for (var y=0; y<10; y++) 
      vertices.push(1/w + x*2/w - 2, 1/h + y*2/h - 1)

  // отправляем массив с вершинами в память видео карты
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}

// создаем новую программу для gpu, она состоит из 2х шейдеров, 
// вершинного и фрагментного
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);
  }
  
  // поворот вдоль оси x
  mat3 rotateX(float a){
    return mat3(vec3( 1.0,     0.0,    0.0), 
                vec3( 0.0,  cos(a), -sin(a)),
                vec3( 0.0,  sin(a),  cos(a)));
  }
  
  // поворот вдоль оси y
  mat3 rotateY(float a){
    return mat3(vec3( cos(a), 0.0, sin(a)), 
                vec3(    0.0, 1.0,    0.0),
                vec3(-sin(a), 0.0, cos(a)));
  }

  // поворот вдоль оси z
  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;
    
    // двигаем точку по y в зависимости от времени и положения по x
    p.y += sin(p.x*10.)*noise(time/1000.) + 0.5;
    
    // двигаем точку по x в зависимости от времени и положения по y
    p.x -= cos(p.y)  + sin(time/2.);
    
    // считаем итоговое положение  вершины, с учетом поворотов вокруг 
    // 3х осей в зависимости от значения функции шума и времени
    gl_Position = vec4(
      vec3(p.xy, 0.0) * 
      rotateX(p.x*3.0 + time) * 
      rotateY(noise(p.y + time/10.0)) * 
      rotateZ(noise(p.x + time/15.0)), 
    1.);
    
    // размер точки устанавливаем в зависимости от ее удаления плюс шум
    gl_PointSize = min(2.7, 1.5 + noise(time)-gl_Position.z);
    
    // ставим координату по z на 0,  чтобы избежать пропадания точек, 
    // которые при вращении как бы попали за точку наблюдателя 
    // (отрицательная z координата)
    gl_Position.z = 0.0;
    
    c = 0.2 + 0.8 * vec3(
      noise(time/2.0 + gl_Position.x),
      noise(time/3.0 + gl_Position.y),
      noise(time)
    );
    
  }
`, 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);

// получаем точку привязки атрибута “v” в активной программе
let v = gl.getAttribLocation(pid, "v");

// указываем как интерпретировать данные в последнем привязанном буфере 
// со значениями вершин, который будет связан с атрибутом "v", 
// тут важно число 2, это указание сколько элементов из буфера, 
// привязано к одной вершине, 
// сейчас это 2, X и Y, тут могло быть число от 1 до 4.
gl.vertexAttribPointer(v, 2, gl.FLOAT, false, 0, 0);

// включаем доступ к атрибуту "v"
gl.enableVertexAttribArray(v);

// получаем точку привязки переменной типа uniform с именем time,
// uniform переменные меняются только со стороны cpu, для gpu это постоянные данные
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);

  // устанавливаем значение переменной time
  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;
  }
}
<canvas id="canvas" style="background-color:black;margin:-10px"/>

11
  • подскажи плз литературу, что бы уметь делать такие вещи))) 7 авг 2019 в 6:58
  • @ВиталикЧерный чесслово, только математика в разрезе компьютерной графики. про сам webgl я попозже напишу небольшой пошаговый туториал как это сделано. 7 авг 2019 в 7:00
  • @ВиталикЧерный вот неплохой гайд на русском от одного из разработчиков хрома, в части webgl, который кстати активно отвечает на en.so в вопросах про webgl webglfundamentals.org/webgl/lessons/ru stackoverflow.com/users/128511/gman 7 авг 2019 в 7:03
  • @ВиталикЧерный ну и у меня можете спрашивать ;) правда профильного образования по этой теме у меня нет, просто когда то мне стало это все жутко интересно и пока не отпустило 7 авг 2019 в 7:14
  • 3
    @m0nte-cr1st0 это называется конкурс, но если будете его открывать, пусть неделю повисит, так этот пост увидит больше человек= ), эта опция становится доступна через 2 дня после того, как был задан вопрос 7 авг 2019 в 7:33
6

Вот, что сумел соорудить, кстати.

// modified version of random-normal
function normalPool(o){var r=0;do{var a=Math.round(normal({mean:o.mean,dev:o.dev}));if(a<o.pool.length&&a>=0)return o.pool[a];r++}while(r<100)}function randomNormal(o){if(o=Object.assign({mean:0,dev:1,pool:[]},o),Array.isArray(o.pool)&&o.pool.length>0)return normalPool(o);var r,a,n,e,l=o.mean,t=o.dev;do{r=(a=2*Math.random()-1)*a+(n=2*Math.random()-1)*n}while(r>=1);return e=a*Math.sqrt(-2*Math.log(r)/r),t*e+l}

const NUM_PARTICLES = 600;
const PARTICLE_SIZE = 0.5; // View heights
const SPEED = 30000; // Milliseconds

let particles = [];

function rand(low, high) {
  return Math.random() * (high - low) + low;
}

function createParticle(canvas) {
  const colour = {
r: 64,
g: 156,
b: 13,
a: rand(0, 1),
  };
  return {
x: -2,
y: -2,
diameter: Math.max(0, randomNormal({ mean: PARTICLE_SIZE, dev: PARTICLE_SIZE / 2 })),
duration: randomNormal({ mean: SPEED, dev: SPEED * 0.1 }),
amplitude: randomNormal({ mean: 16, dev: 2 }),
offsetY: randomNormal({ mean: 0, dev: 10 }),
arc: Math.PI * 2,
startTime: performance.now() - rand(0, SPEED),
colour: `rgba(${colour.r}, ${colour.g}, ${colour.b}, ${colour.a})`,
  }
}

function moveParticle(particle, canvas, time) {
  const progress = ((time - particle.startTime) % particle.duration) / particle.duration;
  return {
...particle,
x: progress,
y: ((Math.sin(progress * particle.arc) * particle.amplitude) + particle.offsetY),
  };
}

function drawParticle(particle, canvas, ctx) {
  canvas = document.getElementById('particle-canvas');
  const vh = canvas.height / 100;

  ctx.fillStyle = particle.colour;
  ctx.beginPath();
  ctx.ellipse(
particle.x * canvas.width,
particle.y * vh + (canvas.height / 2),
particle.diameter * vh,
particle.diameter * vh,
0,
0,
2 * Math.PI
  );
  ctx.fill();
}

function draw(time, canvas, ctx) {
  // Move particles
  particles.forEach((particle, index) => {
particles[index] = moveParticle(particle, canvas, time);
  })

  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the particles
  particles.forEach((particle) => {
drawParticle(particle, canvas, ctx);
  })

  // Schedule next frame
  requestAnimationFrame((time) => draw(time, canvas, ctx));
}

function initializeCanvas() {
  let canvas = document.getElementById('particle-canvas');
  canvas.width = canvas.offsetWidth * window.devicePixelRatio;
  canvas.height = 320 * window.devicePixelRatio;
  let ctx = canvas.getContext("2d");

  window.addEventListener('resize', () => {
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
ctx = canvas.getContext("2d");
  })

  return [canvas, ctx];
}

function startAnimation() {
  const [canvas, ctx] = initializeCanvas();

  // Create a bunch of particles
  for (let i = 0; i < NUM_PARTICLES; i++) {
particles.push(createParticle(canvas));
  }
  
  requestAnimationFrame((time) => draw(time, canvas, ctx));
};

// Start animation when document is loaded
(function () {
  if (document.readystate !== 'loading') {
startAnimation();
  } else {
document.addEventListener('DOMContentLoaded', () => {
  startAnimation();
})
  }
}());
<canvas id="particle-canvas"></canvas>

<style>
  html, body {
    margin: 0;
  }

  #particle-canvas {
    width: 100%;
    height: 100%;
    background-image:url(https://i.imgur.com/HiAlf85.jpg);
  }
</style>

9
5

Вот совместил два канваса. Наверное, это не очень хороший вариант, так как очень много схожего кода и можно как-то обойтись одним канвасом... Но нужно задать двум плоскостям разные матрицы вращения, сделать их "независимыми" друг от друга. Это первое, что на ум пришло.

'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 = 10,
      w = Math.floor(particle.width/step), 
      h = Math.floor(particle.height/step);
  
  vertices = [];
  for (var x=0; x<w*3; x++) 
    for (var y=0; y<10; y++) 
      vertices.push(1/w + x*10/w - 5, 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; 

  mat3 rotateX(float a) {
    return mat3(vec3( 1.0,     0.0,    0.0), 
                vec3( -1.0,  cos(a), -sin(a)),
                vec3( 0.0,  sin(a),  cos(a)));
  }
  
  mat3 rotateY(float a){
    return mat3(vec3( cos(a), 0.0, sin(a)), 
                vec3(    0.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,     0.0,  1.0));
  }
  
  void main(void) {
    vec2 p = v;
    p.y += 0.3;
    p.x += sin(time/4. + p.y);
    vec3 pos = vec3(p.xy, 0.0)*rotateX(p.x*3. + time);
    //pos.y += sin(pos.x) - sin(time/5.)*0.5 + cos(pos.y/3.1415)*0.5;
    gl_Position = vec4(pos, 1.);
    
    gl_PointSize = 2.7;
    gl_Position.z = 0.0;
    c.rgb=vec3(1.0, 0.5, 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;
  }
}
}());

// ----------------------

(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 = 10,
      w = Math.floor(canvas.width/step), 
      h = Math.floor(canvas.height/step);
  
  vertices = [];
  for (var x=0; x<w*3; x++) 
    for (var y=0; y<10; y++) 
      vertices.push(1/w + x*10/w - 5, 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; 

  mat3 rotateX(float a) {
    return mat3(vec3( -1.0,     -1.0,    0.0), 
                vec3( 0.0,  cos(a), -sin(a)),
                vec3( 0.0,  sin(a),  cos(a)));
  }
  
  mat3 rotateY(float a){
    return mat3(vec3( cos(a), 0.0, sin(a)), 
                vec3(    0.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,     0.0,  1.0));
  }
  
  void main(void) {
    vec2 p = v;
    p.y += 0.3;
    p.x += sin(time/4. + p.y);
    vec3 pos = vec3(p.xy, 0.0)*rotateX(p.x*3. + time);
    //pos.y += sin(pos.x) - sin(time/5.)*0.5 + cos(pos.y/3.1415)*0.5;
    gl_Position = vec4(pos, 1.);
    
    gl_PointSize = 2.7;
    gl_Position.z = 0.0;
    c.rgb=vec3(1., 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);
  background-size: cover;
}
#canvas {
  position: absolute;
  left: 0;
  top: 0;
}
<canvas id="particle"></canvas>
<canvas id="canvas"></canvas>

4

И ещё два варианта

Раз

'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 = 7,
      w = Math.floor(particle.width/step), 
      h = Math.floor(particle.height/step);
  
  vertices = [];
  for (var x=0; x<w*10; x++) 
    for (var y=0; y<8; y++) 
      vertices.push(1/w + x*10/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) * 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,     0.0,    0.0), 
                vec3( -1.0,  cos(a), -sin(a)),
                vec3( 0.0,  sin(a),  cos(a)));
  }
  
  mat3 rotateY(float a){
    return mat3(vec3( cos(a), 0.0, sin(a)), 
                vec3(    0.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,     0.0,  1.0));
  }
  
  void main(void) {
    vec2 p = v;
    // p.y += 0.5;
    p.y += sin(p.x*5.)*noise(time/1000.) + 0.5;
    p.x += sin(time/6. + 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*3.0 + time) * 
      rotateY(noise(p.y + time/5.0)) * 
      rotateZ(noise(p.x + time/15.0)), 
    1.);
    
    gl_PointSize = min(2.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 = 4,
      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*10/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( 2.0,  sin(a),  cos(a)));
  }
  
  mat3 rotateY(float a){
    return mat3(vec3( cos(a), 0.0, sin(a)), 
                vec3(    0.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,     0.0,  1.0));
  }
  
  void main(void) {
    vec2 p = v;
    // p.y += 1.0;
    p.y += sin(p.x*4.)*noise(time/100.)+0.5;
    p.x += sin(time/6. + p.y);
    vec3 pos = vec3(p.xy, 1.)*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_PointSize = 2.7;
    // gl_PointSize = min(2.2, 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>

Два

'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>

7
0

Спасибо @StrangerintheQ за подсказку

Решение на одной канве.

let vertices = [];
let gl = cvs.getContext('webgl');
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());

resize();

function resize() {
  cvs.width = innerWidth;
  cvs.height = innerHeight;
  let step = 15, w = cvs.width/step, h = cvs.height/step;
  vertices = [];
  for (var x=0; x<w*3; x++) 
    for (var y=0; y<7; y++) 
      vertices.push(1/w + x*3/w - 3, 1/h + y*2/h)
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
}

let pid = gl.createProgram();

shader(`
  attribute vec2 v; 
  uniform float time; 
  uniform float shift;
  varying vec2 p;
  varying vec3 c; 

  mat3 rotateX(float a) {
    return mat3(vec3( 1.0,     0.0,    0.0), 
                vec3( 0.0,  cos(a), -sin(a)),
                vec3( 0.0,  sin(a),  cos(a)));
  }
  
  mat3 rotateY(float a){
    return mat3(vec3( cos(a), 0.0, sin(a)), 
                vec3(    0.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,     0.0,  1.0));
  }
  
  void main(void) {
    p = v;
    p.y += 0.1;
    if (shift>0.2)
        p.x += sin(time/14. + p.y);
    else
        p.x -= cos(time/4. + p.y);
    vec3 pos = vec3(p.xy, 0.0);
    if (shift>0.2)
        pos*=rotateX(p.x*6. + time);
    else
        pos*=rotateX(p.x/3. + time/1.2)
            *rotateZ(p.x/10. + time/5.);
    pos.y += sin(pos.x) - sin(time/5.)*0.2 + cos(pos.y/3.1415)*0.1;
    gl_Position = vec4(pos, 1.);
    
    gl_PointSize = 2.7;
    gl_Position.z = 0.0;
    if (shift>0.2)
        c.rgb=vec3(0.47, 0.56, 0.61);
    else
        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');
let shiftUniform = gl.getUniformLocation(pid, 'shift');

requestAnimationFrame(draw);
addEventListener('resize', resize)

function draw(t) {

    // first grid
  gl.uniform1f(timeUniform, t/1000);
  gl.uniform1f(shiftUniform, 0);
  gl.drawArrays(gl.POINTS, 0, vertices.length/2);
    
    // second grid
  gl.uniform1f(shiftUniform, 0.5);
  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 {
    overflow: hidden;
    margin:0px
}

body {
    overflow: hidden;
}
<canvas id="cvs" style="background-image:url(https://i.imgur.com/HiAlf85.jpg);"/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.