Beginne mit animierten Typografie/Partikel in Javascript (Zuordnung von Partikeln zu einem Wort)?

Question

In Ordnung, also habe ich viel Erfahrung mit HTML und CSS und einige Erfahrung mit Javascript (ich kann Grundfunktionen schreiben und habe in ähnlichen Sprachen codiert).

Ich bin auf der Suche nach einigen visuellen Projekten und bin speziell daran interessiert, in Partikelsysteme zu gelangen. Ich habe eine Idee für etwas, das dem Namensgenerator von Codecademy ähnlich ist (https://www.codecademy.com/courses/animate-your-name/0/1), wo Partikel einem Wort zugeordnet sind und sich verschieben, wenn sie über dem Wort stehen. Es scheint, als ob alphabet.js ist, was wirklich hinter Codecademy's Demo ist, aber ich kann nicht genau verstehen, wie sie die Partikel zu einem Wort, etc. zugeordnet

Ich habe ein paar grundlegende Tutorials nur rudimentäre Partikel in einer Leinwand, sondern Ich bin mir nicht sicher, ob eine Leinwand der beste Weg ist - Demos, die eine der vielen verfügbaren Bibliotheken verwenden (wie http://soulwire.github.io/sketch.js/examples/particles.html), verwenden keine Leinwand.

Also meine Frage ist - was ist der beste Weg für Anfänger/Fortgeschrittene in Javascript, mit Partikelsystemen zu beginnen? Speziell um den Codecademy Namen Effekt oder ähnliches zu erreichen? Sollte ich versuchen, Leinwand zu verwenden, oder welche Bibliothek wäre am besten zu beginnen und wie würden Sie empfehlen, zu starten?

Answer 1

Der Code für dieses Projekt ist für Ihren fortgeschrittenen JS-Programmierstatus erreichbar.

Wie das Codecademy Projektarbeiten ...

• Beginnen Sie mit jedem Buchstaben Gebäude aus Kreisen und jeder Kreis der Mittelpunkt in einem Array zu speichern. Das Skript alphabet.js enthält dieses Array von Kreismittelpunkten.

• Überprüfen Sie unter mousemove Ereignisse, welche Kreise innerhalb eines bestimmten Radius der Mausposition liegen. Dann animiere jeden dieser entdeckten Kreise mit einfacher Trigonometrie von der Mausposition aus radial nach außen.

• Wenn sich die Maus erneut bewegt, testen Sie, welche Kreise sich nicht mehr im angegebenen Radius der aktuellen Mausposition befinden. Dann animiere jeden dieser "äußeren" Kreise zurück zu ihren ursprünglichen Positionen.

Sie auch nativer html5 Leinwand ohne Bibliotheken verwenden können ...

Ein anderer Ansatz einen beliebigen Text ermöglicht werden "gelöst" und wieder montiert

• zunächst den Text zeichnen auf der Leinwand. Übrigens wird dieser Ansatz jede Zeichnung "auflösen", nicht nur Text.

• Verwenden Sie context.getImageData, um den Deckkraftwert jedes Pixels auf der Zeichenfläche abzurufen. Ermitteln Sie, welche Pixel auf der Leinwand Teile des Textes enthalten. Sie können feststellen, ob ein Pixel ein Teil des Textes ist, weil er undurchsichtig und nicht transparent ist.

tun Sie nun das gleiche Verfahren, das Codecademy mit ihren Kreisen haben - aber Ihre Pixel verwenden:

• Auf mousemove Ereignisse, Test, welche Pixel innerhalb eines bestimmten Radius der Mausposition sind. Dann animiere jedes dieser entdeckten Pixel von der Mausposition aus radial nach außen unter Verwendung einfacher Trigonometrie.

• Wenn sich die Maus erneut bewegt, testen Sie, welche Pixel sich nicht mehr im angegebenen Radius der aktuellen Mausposition befinden. Dann animiere jedes dieser "Außen" -Pixel zurück zu ihren ursprünglichen Positionen.

[Zusatz: mousemove- Ereignis zu testen, ob Kreise innerhalb der Maus erreichbar sind]

Hinweis: Sie wahrscheinlich einen Animationsrahmen am Laufen halten wollen, die Kreise näher oder weiter weg von ihren ursprünglichen Positionen bewegt basierend auf einem Flag (isInside) für jeden Kreis.

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