Жареная курица Простые частицы холста

внешний интерфейс SVG Canvas графика

Если говорить о самой тонкой части канвы, то это должна быть возможность работать с пикселями, возможно, именно поэтому канвас как растровое изображение никогда не сравнивался с svg. Как говорится, семена горчицы Сумеру считаются большими, а также есть поговорка, что маленькие видят большие, частиц достаточно, чтобы создать грандиозный эффект. Это простое руководство по частицам холста для жареной курицы, в котором в основном рассказывается о принципе спецэффектов частиц и небольшой формуле в движении.

будь готов

Прежде всего, когда мы знаем эффект частиц, мы должны думать о том, как мы можем его достичь, и мы должны как можно больше смотреть в лицо нашему дорогому объекту, поэтому у нас есть следующее мышление.

  1. есть частицы
  2. Частицы находятся в движении, а движение требует скорости
  3. равномерное движение/переменное движение
  4. Что нужно делать помимо тренировок

Вечность в мире

Здесь я определяю время и количество генерируемых частиц, а также пул частиц.

Это может быть странно, каждый кадр это время в процессе движения, зачем нам снова устанавливать это время, рендеринг браузера можно считать нормальным прошедшим временем, тутtimeотносительное время Если вы чувствуете головокружение,

Вот маленькая слива:

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

Шучу, на самом деле время означает, что ваша 1 с равна 2 с для маленького мячика, а время, установленное браузерным рендерингом, просто для того, чтобы ваше зрение не видело отставание изображения.

const time=2;
const num=20;
var dots=[];

класс частиц

function dot(x,y,vx,vy){
  //接收粒子点的坐标与方向速度量
  this.x=x;
  this.y=y;
  this.vx=vx;
  this.vy=vy;
  //随机粒子大小
  this.size=Math.ceil(Math.random()*3+2);
  this.ctx={};
}
  //粒子渲染
dot.prototype.render = function(ctx) {
  ctx.save();
  this.ctx=ctx;
  this.ctx.beginPath();
  this.ctx.fillStyle='lightgray';
  this.ctx.arc(this.x-this.size/2,this.y-this.size/2,this.size,0,Math.PI*2);
  this.ctx.closePath();
  this.ctx.fill();
  ctx.restore();
};
  //对当前粒子属性做逻辑计算
dot.prototype.update = function() {
  this.ctx.clearRect(0,0,canvas.width,canvas.heihgt);
  this.x=this.x+this.vx*time;
  this.y=this.y+this.vy*time;
  this.vx = (this.x < canvas.width && this.x > 0) ? this.vx : (-this.vx);
  this.vy = (this.y < canvas.height && this.y > 0) ? this.vy : (-this.vy);
  this.render(this.ctx);
};

В текущем классе частиц я даю только направление скорости, потому что нам требуется только, чтобы частицы двигались с постоянной скоростью, и формула расчета здесь такова:x=vt(х: смещение v: средняя скорость т: время тренировки)

Если вы хотите применить силу или движение с переменной скоростью к частицам, вам нужноthis.a=aчтобы добавить свойство ускорения. Затем в соответствии с направлением ускорения выполняется горизонтальное и вертикальное разложение, и изменяется направление скорости, чтобы выполнить движение с переменной скоростью Формула здесь выглядит следующим образом

  1. v=at
  2. x=(v0+at/2)*t
    v0 — начальная скорость, a — направление ускорения, x — смещение в направлении

Частицы хаотического мира

for(let i=0;i<num;i++){
  var x=Math.ceil(Math.random()*canvas.width);
  var y=Math.ceil(Math.random()*canvas.height);
  var vx=Math.ceil(Math.random()*2);
  var vy=Math.ceil(Math.random()*2);
  var d=new dot(x,y,vx,vy);
  d.render(ctx);
  dots.push(d);
}

Случайная точка координат получается путем случайного накопления ширины Canvas. И мгновенные наши частицы. И толкнуть в ячейку частицы. Вот потому что мыupdateметод будет вызываться напрямуюrender, поэтому нам нужно выполнить его только один раз при создании экземпляраrenderБудуctxОкружение передано, и все может быть передано позжеupdateзаканчивать.

Будь беспокойным, частица шара

requestAnimFrame(anim);
function anim(){
  for(let i=0;i<dots.length;i++){
      dots[i].update();
  }
  requestAnimFrame(anim);
}

Здесь нам нужно только постоянно обновлять данные о частицах в пуле частиц, чтобы заставить частицы работать.

Обучение частицам относительно простое, но оно является основой почти всех эффектов частиц.Частицы уже могут быть сгенерированы, поэтому нам нужно только позволить частицам двигаться по заданному нами пути для достижения нужного нам эффекта.

Расширьте свой разум

  1. Эффект фоновой сетки Zhihu

    Итерировать по всем точкам частиц, если они находятся в диапазоне, используйтеmoveToс лlineToдля создания соединительных линий.

  2. частицы в слова

    Сначала нарисуйте текст на закадровом холсте, а затем верните координаты всех непрозрачных пикселей.Вы можете перемещаться непосредственно при обходе, или вы можете использоватьwidthа такжеheightЧтобы вычислить, нужно ли рисовать текущую точку, сгенерируйте частицы.

    Причина, по которой пиксели здесь непрозрачны, заключается в том, что на холсте, пока вы не установите его, по умолчанию цвет фона отсутствует, то есть все нарисованные пиксели можно судить поalphaО том, равно ли значение 0, также можно судить, установивalphaПорог отбрасывания некоторых точек с недостаточной степенью заполнения. например когдаalphaКогда оно соответствует 128, прозрачность составляет около 0,5, поэтому многие люди используют оценочное значение 128 в своих блогах.

    Есть также много эффектов, эффекты частиц - большая тема, такая как AE Unity и другое программное обеспечение, будут встроенные плагины для частиц и большое количество внешних плагинов для эффектов частиц.

Позже я напишу некоторые высокоуровневые эффекты частиц.

Время от времени обновляйте технические руководства, связанные с холстом и svg, включая фактический тип боя и тип основного принципа, включая 2d, 2.5d и 3d, а также включают базовые знания линейной алгебры, физики, графики и т. д.

Исходный код этого демо:эффект частиц

Добро пожаловать в коллекцию и внимание приглашенных официальных лиц, и бросьте монеты, чтобы накормить.

В то же время, я хотел бы поблагодарить всех за поднятие моих недостатков и проблем в тексте~

Категории