Hoe de verwerking js downloaden

Hoe de verwerking downloaden js het systeem
    zwaartekracht valse een

over prieel

Arbor is een grafiek visualisatie bibliotheek gebouwd met web werknemers en jQuery. In plaats van te proberen om een ​​allesomvattend kader te zijn, prieel zorgt voor een efficiënte, gerichte kracht layout algoritme plus abstracties voor grafiek organisatie en het scherm refresh handling.

Het laat de werkelijke screen-tekening aan u. Dit betekent dat u kunt gebruiken met canvas, SVG. of zelfs gepositioneerd HTML elementen; wat beeldscherm aanpak geschikt is voor uw project en uw prestaties behoeften.

Als gevolg daarvan kan de code die u schrijft mee gericht zijn op de dingen die uw project uniek maken – de grafiek gegevens en uw visuele stijl – in plaats van tijd doorbrengen op de natuurkunde wiskunde dat de lay-outs mogelijk maakt.

installatie

Om het deeltje systeem te gebruiken, krijgen jQuery en voeg het bestand op lib / arbor.js om je pad ergens en ze op te nemen in uw HTML :

lt; script src ="pad / naar / jquery.min.js"gt; lt; / scriptgt;
lt; script src ="pad / naar / arbor.js"gt; lt; / scriptgt;

Als u wilt prieel handvat realtime kleur en waarde tweens voor u te laten, onder het prieel-tween.js bestand ook. dit zal een paar nieuwe tweening methoden om de ParticleSystem object toe te voegen (zie de docs om te beslissen of dit je aanspreekt of niet).

lt; script src ="pad / naar / jquery.min.js"gt; lt; / scriptgt;
lt; script src ="pad / naar / arbor.js"gt; lt; / scriptgt;
lt; script src ="pad / naar / prieel-tween.js"gt; lt; / scriptgt;

Ermee beginnen

De bron distributie bevat een voorbeeld project die een goede illustratie enkele van de fundamentele idioom voor het werken met de bibliotheek om een ​​visualisatie te bouwen. Meer gedetailleerde documentatie is te vinden in de referentie sectie.

Bovendien, de map demo’s van de bron distributie bevat standalone versie van de demo’s op de site. Maar omdat al gebruiken XHR om hun gegevens op te halen, zul je nog nodig hebt om ze te bekijken vanuit een http-server. Als u niet beschikt over een kopie van apache de hand hebt, gebruik dan de demo-server.sh script naar een lokale server.

Bijdragen

Code inzendingen worden zeer gewaardeerd en sterk aangemoedigd. Stuur pull verzoeken met fixes, verbeteringen, etc. om samizdatco op GitHub. De oldschool kan ook pipe hun diff -u output naar gro.sjrobra@ofni~~V.

licentie

Arbor is uitgebracht onder de MIT licentie.

colofon

ontwerp Arbor wordt sterk beïnvloed door Jeffrey Bernstein uitstekende Traer Physics bibliotheek voor Processing. Bovendien, veel van de brute-force physics code werd oorspronkelijk aangepast van springy.js Dennis Hotson’s.

De Barnes-Hut implementatie n-body is gebaseerd op Tom Ventimiglia en Kevin Wayne’s levendige beschrijving van het algoritme. Dank aan allen voor zo’n elegante en eenvoudige en begrijpelijke code.

ParticleSystem

Het deeltje systeem slaat uw knooppunten en randen en handvatten updaten van hun coördinaten als de simulatie vordert.

× schepping

Parameters voor de physics simulatie kan worden ingesteld bij de schepping-time door te bellen met de aannemer met de argumenten:

arbor.ParticleSystem (afstoting, stijfheid, wrijving, zwaartekracht, fps, dt, precisie)

De parameters en hun standaardwaarden zijn:

  • afstoting1000 afstotende kracht de knooppunten van elkaar
  • stijfheid600 de stijfheid van de randen
  • wrijving0.5 de hoeveelheid demping in het systeem
  • zwaartekrachtvals een extra kracht aantrekken knooppunten de oorsprong
  • fps55 beelden per seconde
  • dt0.02 tijdstap te gebruiken voor de intensivering van de simulatie
  • precisie0.6 nauwkeurigheid vs. snelheid van kracht berekeningen
    (Nul is snel, maar zenuwachtig, een is glad, maar cpu-intensieve)

De standaardwaarden worden gebruikt voor elke weggelaten argumenten. Parameters kunnen ook worden doorgegeven in een object letterlijk. Ter referentie, de volgende gesprekken zijn allemaal gelijk:

arbor.ParticleSystem ()
arbor.ParticleSystem (600)
arbor.ParticleSystem (600, 1000 5, 55. 02, false)
arbor.ParticleSystem ()

Zodra een particle systeem is gemaakt, kunnen de parameters worden getweakt door het passeren van een object om de .parameters methode:

var sys = arbor.ParticleSystem ()
sys.parameters ()

weergave

Het deeltje systeem heeft geen tekening op zijn eigen doen; je nodig hebt om deze routines in een afzonderlijk object, dat wordt geactiveerd door het systeem wanneer het tijd is om het scherm opnieuw te tekenen te bieden. Om dit op te zetten, maakt u een object met twee methoden (.init en .redraw), vervolgens van het particle systeem renderer attribuut om uw nieuwe object:

De .init methode zal eenmaal vóór de eerste passage door de loting lus worden genoemd. Vervolgens zal de werkwijze .redraw telkens het scherm moet opnieuw worden uitgezet genoemd. Neem een ​​kijkje op het voorbeeldproject voor een iets meer uitgewerkte voorbeeld van hoe dit werkt.

nodes

naam is een string id die wordt gebruikt in een gesprek met het partikelsysteem dit knooppunt.

data is een object met sleutels en waarden door de gebruiker. je kunt het gebruiken om extra informatie op te slaan over het knooppunt voor later gebruik in bv tekening.

Maakt een nieuwe knooppunt in het particle systeem en retourneert de resulterende Node object.

naam is een aanduiding voor een knooppunt in het systeem

Geeft de overeenkomstige Node object of undefined als er geen wordt gevonden. Als aangeroepen met een knooppunt als een argument, zal het dat dezelfde knoop (voor idempotentie) terug te keren.

knooppunt is ofwel een identificatie tekenreeks of Node object

Verwijdert de overeenkomstige knooppunt van het deeltje systeem (alsmede Edge s waarin het deelneemt).

randen

addEdge (bron, doel, data)

bron en doel zijn ofwel identifier strijkers of een Node voorwerpen.

gegevens is een user data-object met aanvullende informatie over de rand.

Maakt een nieuw rand aansluiten van de bron en het doel knooppunten vervolgens de resulterende Edge object.

bron en doel zijn ofwel identifier strijkers of een Node voorwerpen.

Geeft een array met daarin alle Edge objecten aansluiten van de opgegeven knooppunten. Als er geen verbindingen bestaan, keert terug [].

knooppunt is een string identifier of Node object

Een array die alle Edge voorwerpen waarbij het knooppunt de bron. Als er geen verbindingen bestaan, keert terug [].

knooppunt is een string identifier of Node object

Een array die alle Edge voorwerpen waarbij het knooppunt het doel. Als er geen verbindingen bestaan, keert terug [].

edge is een Edge object.

Verwijdert de overeenkomstige rand van het particle systeem.

herhaling

callback is een functie met de handtekening ƒ (knooppunt. pt), waar knooppunt een Node object en pt is een object Point met de huidige locatie.

De callback functie zal een keer voor elk knooppunt in het systeem worden ingeroepen.

Merk op dat terwijl de node.p attribuut is altijd in het assenstelsel van het deeltje systeem wordt de pt argument omgezet in pixel coördinaten (mits u .screenSize hebben opgeroepen om het scherm selectiekader specificeren).

callback is een functie met de handtekening ƒ (edge. pt1. pt2) waarbij rand is een Edge object en pt1 en pt2 zijn Point objecten met het huidige eindpunt locaties.

De callback functie zal een keer voor elke Edge in het systeem worden ingeroepen.

Vergelijkbaar met het gedrag van .eachNode. de edge.source.p en edge.target.p attributen zijn altijd in het assenstelsel van het particle systeem, terwijl pt1 en pt2 zal worden omgezet in pixel coördinaten (mits u .screenSize hebben opgeroepen om het scherm selectiekader specificeren).

wijziging

tak is een object van de vorm, randen: lt; gt; gt; .

de knooppunten kenmerk bevat een afbeelding van nodenamen tot gegevensobjecten. Bijvoorbeeld,

de randen attribuut bevat geneste objecten in kaart source identifier te richten, dan richten op de rand van gegevens object. b.v.

Voegt knooppunten en randen om de huidige set in het particle systeem. Het blad object waarden in de branche argument zal toegankelijk zijn via de .data attribuut van de resulterende Node s en Edge s zijn.

tak is een object van de vorm, randen: lt; gt; gt; (Zie .graft voor details).

Voegt knooppunten en randen om de huidige set in het particle systeem en verwijdert iemand die niet in de nieuwe vestiging zijn. Geconserveerd knooppunten zullen hun positie en status te behouden.

callback is een functie met de handtekening ƒ (knooppunt. van. tot), waar knooppunt een Node object en van en naar zijn arrays van randen voor welke node is de bron en het doel respectievelijk.

De callback functie zal een keer worden opgeroepen voor elk knooppunt in het systeem en moet waar terugkeren als de knoop moet worden gesnoeid of niets doen als de knoop ongewijzigd moet blijven. Merk op dat het snoeien van een node zal ook alle randen waaraan hij deelneemt verwijderen

systeem instellingen

parameters () of (params)

indien aanwezig, params is een object met nieuwe instellingen waarden voor het particle systeem. Geldige toetsen zijn dezelfde als voor de ParticleSystem constructorfunctie: afstoting. stijfheid. wrijving. zwaartekracht. fps. en dt.

Als aangeroepen zonder argumenten, retourneert een object met het huidige systeem parameters als sleutels en waarden. Als een argument wordt geleverd, zullen alle waarden die worden gebruikt als de nieuwe parameters (weggelaten waarden blijven onveranderd).

indien aanwezig, de fps argument een positief geheel getal.

Als aangeroepen zonder argumenten, retourneert het frame rate bereikt in de laatste paar seconden van de tekening. Anders zal het argument van de nieuwe doelstelling frame rate in te stellen. Dit beïnvloedt de frequentie waarmee het deeltje systeem herhaalt de simulatie en de frequentie waarmee de ParticleSystem noemt .redraw werkwijze van de aangewezen object door de .renderer attribuut.

Geeft een rechthoek met daarin alle knooppunten met behulp van het systeem coördinaten. De geretourneerde waarde is van de vorm:

Retourneren een aantal fundamentele statistieken over de stand van de activiteit in het systeem. De waarden zijn qua snelheid binnen coördinatenkader van het systeem. Dit kan een bruikbare maat wanneer de inrichting is gestabiliseerd. De geretourneerde waarde is van de vorm:

Handmatig start het systeem draait. Standaard wordt het systeem in werking en pauze op zichzelf basis van het niveau van energie in de deeltjes. Je moet alleen nodig om handmatig te starten nadat eerder de .Stop methode genaamd.

Pauzeert de particle simulatie tot .start wordt genoemd. Aangezien het systeem begint te lopen zodra het wordt geleverd met knopen en randen, kunt u binnenkort .Stop bellen na het maken van het systeem object als het niet zal worden getoond tot later in de pagina levensduur (bv totdat een gebruiker actie plaatsvindt) .

coördineren helpers

breedte en hoogte zijn positieve gehele getallen die de afmetingen van het scherm gebied dat u zal opstellen in.

Het aanroepen van deze methode zorgt voor automatische coördineren transformaties van coördinaten systeem van het particle systeem op uw beeldscherm. Dit blijkt uit de door de .eachNode en .eachEdge iterators en de / fromScreen en dichtstbijzijnde methoden in deze sectie toegevoerd punten.

U vindt bijna altijd willen dit eens bellen als het opzetten van uw ParticleSystem en renderer evenals wanneer de afmetingen van het weergavegebied veranderen.

screenPadding (boven, rechts, onder, links)

Alle argumenten zijn integers het definiëren van het aantal pixels dat lege langs elke rand van het scherm gebied moet worden overgelaten. Ofwel 1, 2 of 4 argumenten worden verwacht en worden op dezelfde wijze uitgelegd, CSS padding: woning.

Wanneer het systeem transformeert punten tussen de coördinatie van systemen zal de opvulling in de locaties die zij levert aan .eachNode en bedrijf factor.

stepsize is een getal tussen 0 en 1 definiëren van het bedrag dat de inbinden moet verhuizen van het ene frame naar de volgende.

Als de knooppunten te verplaatsen en de selectiekader verandert, past het systeem een ​​variabel bedrag van smoothing aan de ‘camera’ bewegingen. Zoals zal stapgrootte 1 de hoeveelheid smoothing af naarmate de grenzen updates geworden momentane.

Indien aanwezig, ervoor kiest een doel van de vorm:

Dit is een verkorte methode die de functies van de voorgaande drie. Als aangeroepen zonder een argument, geeft de huidige grootte van het scherm / padding / scaling. Als een argument wordt geleverd, werkt de instellingen dienovereenkomstig.

systemPoint is een Punt object waarvan de x- en y-waarden worden ingesteld met behulp van het systeem interne coördinatie van de regeling.

Zet de x en y coördinaten voor het screenen op basis van het huidige scherm en opvulling, terugzenden van het resultaat als een nieuw object Point. Als de grootte niet vastgesteld of nog het systeem niet gestart, maar undefined geretourneerd.

ScreenPoint is een Punt object waarvan de x- en y-waarden worden met behulp van het scherm pixel coördinaten.

Zet de x- en y-coördinaten systeem op basis van de huidige schermgrootte en opvulling, terugzenden van het resultaat als een nieuw object Point. Als de grootte niet vastgesteld of nog het systeem niet gestart, maar undefined geretourneerd.

ScreenPoint is een Punt object waarvan de x- en y-waarden worden met behulp van het scherm pixel coördinaten.

Geeft een verwijzing naar het knooppunt dichtstbijzijnde het argument scherm van positie in een object van het formulier:

knooppunt en point zal ofwel de gelijknamige objecten of null, afhankelijk van de vraag of een dergelijk knooppunt bestaat. afstand wordt gemeten in pixels.

tweening

tweenNode (knooppunt, duur, kiest)

knooppunt is een Node object of een id string voor het knooppunt waarvan u de waarden wilt tween.

duur is de tijd (in seconden) de overgang zou moeten duren.

opts is een in kaart brengen van de namen en streefwaarden.

Deze methode kunt u geleidelijke overgangen van de waarden te starten in de .data object van een bepaald Node. Bijvoorbeeld overwegen een knooppunt waarvan .data object eruit ziet:

De volgende oproep wordt dit knooppunt quadruple maken in grootte en kleur veranderen aan het licht blauw in de loop van 3 seconden:

Het systeem kan omgaan met tweenen numerieke waarden of kleuren die worden uitgedrukt als ofwel vernoemd CSS kleuren of hex strings beginnen met een “#”.

Er is ook een sleutelpaar ‘magic’ die kunnen in de opts argument voor de tween gedrag aan te passen. vertraging geeft de tijd in seconden voordat de tween moet beginnen. gemak kan worden ingesteld op één van de namen gezien in het bestand src / easing.js de dynamiek van de overgang regelen.

Merk op dat de tween methoden zijn uitgeschakeld, tenzij je het prieel-tween.js bestand in uw pagina op te nemen.

tweenEdge (edge, duur, kiest)

is de rand waarvan de waarden die u wilt tween.

duur is de tijd (in seconden) de overgang zou moeten duren.

opts is een in kaart brengen van de namen en streefwaarden.

Identiek in gedrag .tweenNode behalve dat het werkt op de .data attribuut van een Edge in plaats van een Node.

Merk op dat de tween methoden zijn uitgeschakeld, tenzij je het prieel-tween.js bestand in uw pagina op te nemen.

Node objecten kapselen de huidige fysica toestand van een punt in het particle systeem en geeft u een plek om de bijbehorende non-physics metadata hechten.

× schepping

Nieuwe knooppunten worden gecreëerd door .addNode methode van het particle systeem. Bijvoorbeeld:

Dit zal een nieuwe Node object te maken met een .data veld bevatten. Merk op dat de massa de waarde van het gegevensobject werd gestript en gebruikt voor massaproductie van het knooppunt in de simulatie.

De ‘magic’ variabelen die u kunt gebruiken op deze manier (en hun standaardwaarden):

  • massa-1.0 de weerstand van het knooppunt om beweging en afstotende kracht
  • vastvals Als dat waar is, zal de knoop worden beïnvloed door andere deeltjes
  • Xauto het startpunt x positie (in het systeem coördinaten)
  • Yauto de start y-positie (in het systeem coördineert)

met behulp van knooppunten

Bij elke tik van de simulatie de waarden in .p bijgewerkt wordt op basis van de afstoting en veerkrachten in het systeem. Om de eigenschappen van het knooppunt (in reactie op, laten we zeggen, een muisklik) te wijzigen, gewoon haar waarden opnieuw in te stellen en het systeem zal de nieuwe waarden te gebruiken in haar volgende tik:

console.log (node.p.x, node.p.y)
gt; gt; 1,2, 0,4

node.p = arbor.Point (1, 1)
console.log (node.p.x, node.p.y)
gt; gt; 1, 1

node.p.y = 13
console.log (node.p.x, node.p.y)
gt; gt; 1, 13

Elk knooppunt bevat een attribuut genaamd .data waarvan de inhoud en het gebruik zijn geheel aan jou. Doorgaans wordt het gebruikt voor het opslaan van metadata over de knoop, zodat uw rendering code kan weten hoe het te tekenen, wat het label tekst zou moeten zijn, die url te gaan om op te klikken, etc.

systeem waarden

name: String (alleen lezen)
massagetal
vaste Boolean
p Point

gebruiker waarden

Edge voorwerpen houden verwijzingen naar de bron en doel knooppunten ze verbinding en hebben een voorkeur ‘rust’ lengte. Ze op te brengen op hun eindpunt knooppunten in een poging om deze optimale afstand te bereiken.

× schepping

Nieuwe randen zijn gecreëerd door .addEdge methode van het particle systeem. Bijvoorbeeld:

sys = arbor.ParticleSystem ()
node1 = sys.addNode ("één knooppunt")
clustnode2 = sys.addNode ("een ander")
edge = sys.addEdge (node1, clustnode2,)

Hierdoor ontstaat een knooppunt paar objecten maakt vervolgens een rand van de eerste naar de tweede. De lengte sleutel is een speciale variabele die wordt gebruikt voor het instellen rusten lengte van de rand. Iedere andere sleutels in het object doorgegeven aan .addEdge zal in .data attribuut de resulterende Edge ’s worden geplaatst.

Merk op dat .addEdge genoemd kan worden met ofwel feitelijke Node objecten of gewoon hun .name s als argumenten. Als een naam wordt gebruikt, maar een knooppunt met die identifier nog niet bestaat, zal het systeem automatisch een te maken voordat u de rand. Zo kan de bovenstaande code worden vereenvoudigd tot:

sys = arbor.ParticleSystem ()
edge = sys.addEdge ("één knooppunt", "een ander",)

systeem waarden

bronknooppunt
doelwit Node
lengte Number

gebruiker waarden

Punt

Point objecten zijn eenvoudig containers voor x / y-coördinaten gebundeld met handige methoden voor het doen van vector berekeningen. Maak punten door te bellen arbor.Point (x, y).

coördineren van data

x
y Number

vector wiskunde

toe te voegen (pt) → Point Geeft een nieuw punt met de som van de twee punten. aftrekken (pt) → Point Geeft een nieuw punt met het verschil van de twee punten. vermenigvuldigen (n) → Point Geeft een lineair verkleinde kopie van het oorspronkelijke punt. divide (n) → Point Geeft een lineair verkleinde kopie van het oorspronkelijke punt. omvang( ) → Nummer Geeft afstand van het punt van de oorsprong. normaal () → Punt Geeft het punt van de vector normaal. normaliseren () → Point Geeft een geschaalde kopie van het punt met een kracht van één.

sanity controleren

explodeerde () → Boolean Geeft waar als x of y is NaN.

Bron: arborjs.org

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *