Начните с анимированной типографии/частиц в javascript (отображение частиц в слово)?

Question

Хорошо, поэтому у меня есть большой опыт работы с HTML и CSS, а также некоторый опыт работы с Javascript (я могу писать основные функции и кодировать на похожих языках).

Я ищу, чтобы начать некоторые визуальные проекты и особенно заинтересован в том, чтобы попасть в системы частиц. У меня есть идея для чего-то похожего на генератор имен Codecademy здесь (https://www.codecademy.com/courses/animate-your-name/0/1), где частицы отображаются на одно слово и перемещаются, если они зависают. Кажется, что alphabet.js - это то, что действительно стоит за демо-версией Codecademy, но я не могу точно понять, как они отображали частицы в слово и т. Д.

Я сделал некоторые базовые учебники, просто создавая рудиментарные частицы на холсте, но Я не уверен, что холст - лучший способ - демки, которые используют одну из многих доступных библиотек (например, http://soulwire.github.io/sketch.js/examples/particles.html), не используют холст.

Итак, мой вопрос: какой лучший способ для начинающего/промежуточного в Javascript начать с систем частиц? В частности, для достижения эффекта названия Codecademy или подобного? Должен ли я попытаться использовать холст или с какой библиотекой лучше всего начать и как вы порекомендуете начать?

Answer 1

Код для этого проекта достижим для вашего промежуточного статуса программиста JS.

Как работает проект CodeAcademy ...

• Start путем создания каждой буквы из кругов и сохранение каждой окружности центральной точки в массиве. Сценарий alphabet.js содержит массив центральных точек круга.

• На событиях mousemove, проверьте, какие круги находятся в пределах заданного радиуса положения мыши. Затем анимируйте каждый из этих обнаруженных кругов радиально наружу от положения мыши, используя простую тригонометрию.

• Когда мышь снова перемещается, проверьте, какие круги больше не находятся в указанном радиусе текущей позиции мыши. Затем оживите каждый из этих «внешних» кругов назад к своим исходным позициям.

Вы также можете использовать родной html5 холст без каких-либо библиотек ...

Другой подход, позволяющий любой текст «растворяется» и вновь

• Начните с рисования текста на холсте. Кстати, этот подход «растворит» любой рисунок, а не только текст.

• Используйте context.getImageData, чтобы получить значение непрозрачности каждого пикселя на холсте. Определите, какие пиксели на холсте содержат части текста. Вы можете определить, является ли пиксель частью текста, потому что он будет непрозрачным, а не прозрачным.

Теперь сделайте ту же процедуру, что CodeAcademy сделал со своими кругами - но использовать ваши пиксели:

• On mousemove событие, тест, какие пиксели находятся в пределах заданного радиуса от положения мыши. Затем анимируйте каждый из обнаруженных пикселей радиально наружу от положения мыши, используя простую тригонометрию.

• Когда мышь снова перемещается, проверьте, какие пиксели больше не находятся в указанном радиусе текущей позиции мыши. Затем оживите каждый из этих «внешних» пикселей обратно в исходное положение.

[Дополнение: MouseMove событие, чтобы проверить, если круги находятся в пределах расстояния мыши]

Примечание: Вы, вероятно, хотите, чтобы держать ход анимации кадр, который движется кругами ближе или дальше от своих первоначальных позиций на основе флага (isInside) для каждого круга.

function handleMouseMove(e){ 
    // tell the browser we're handling this event 
    e.preventDefault(); 
    e.stopPropagation(); 
    // calc the current mouse position 
    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 

    // test each circle to see if it's inside or outside 
    // radius of 40px to current mouse position 
    // circles[] is an array of circle objects shaped like this 
    //  {x:,y:,r:,originalX:,originalY:,isInside:} 
    var radius=40; 
    for(var i=0;i<circles.length;i++){ 
     var c=circles[i]; 
     var dx=c.x-mouseX; 
     var dy=c.y-mouseY; 
     if(dx*dx+dy*dy<radius*radius){ 
      c.isInside=true; 
      // move c.x & c.y away from its originalX & originalY 
     }else{ 
      c.isInside=false; 
      // if the circle is not already back at it's originalX, originalY 
      // then move c.x & c.y back towards its originalX, originalY 
     } 
    } 
}