Share
Two.js een API waarmee u eenvoudig 2D-vormen met code kunt maken. Volg mee en je leert hoe je vormen maakt en animeert vanuit JavaScript.
Two.js is renderer agnostisch, dus u kunt op dezelfde API vertrouwen om te tekenen met Canvas, SVG of WebGL. De bibliotheek heeft veel methoden die kunnen worden gebruikt om te bepalen hoe verschillende vormen op het scherm worden weergegeven of hoe ze worden geanimeerd.
De niet-gecomprimeerde versie van de bibliotheek heeft een grootte van ongeveer 128 KB, terwijl de gecomprimeerde versie 50 KB is. Als u de nieuwste versie gebruikt, kunt u de grootte van de bibliotheek verder verkleinen met een aangepaste versie.
Je kunt de verkleinde versie van de bibliotheek downloaden via GitHub of je kunt direct linken naar de door CDN gehoste versie. Nadat u de bibliotheek aan uw webpagina hebt toegevoegd, kunt u beginnen met het tekenen en animeren van verschillende vormen of objecten.
Ten eerste moet je Two.js vertellen over het element waarop je wilt tekenen en je vormen animeren. U kunt enkele parameters doorgeven aan de Twee constructeur om zaken te regelen.
Stel het type renderer in met behulp van de type eigendom. U kunt een waarde als opgeven svg, WebGL, canvas, etc. Het type ingesteld op svg standaard. De breedte en hoogte van de tekenruimte kunnen worden opgegeven met behulp van de breedte en hoogte parameters. U kunt de tekenruimte ook instellen op het volledig beschikbare scherm met behulp van de volledig scherm parameter. Wanneer volledig scherm is ingesteld op true, de waarden van breedte en hoogte zal worden genegeerd.
Ten slotte kun je Two.js vertellen om automatisch een animatie te starten met behulp van de Boolean automatische start parameter.
Nadat u alle gewenste parameters aan de constructor hebt doorgegeven, kunt u lijnen, rechthoeken, cirkels en ellipsen tekenen.
Je kunt een lijn tekenen met two.makeLine (x1, y1, x2, y2). Hier, (x1, y1) zijn de coördinaten van het eerste eindpunt, en (x2, y2) zijn de coördinaten van het tweede eindpunt. Deze functie retourneert een Two.Line object, dat kan worden opgeslagen in een variabele voor verdere manipulatie op een later tijdstip.
Op dezelfde manier kunt u normale en afgeronde rechthoeken tekenen met two.makeRectangle (x, y, width, height) en two.makeRoundedRectangle (x, y, width, height, radius) respectievelijk. Onthoudt dat X en Y bepalen het midden van de rechthoek, in plaats van de coördinaten linksboven zoals vele andere bibliotheken. De breedte en hoogte parameters bepalen de grootte van de rechthoek. De radius parameter wordt gebruikt om de waarde van de straal voor de afgeronde hoek op te geven.
U kunt ook cirkels en ellipsen op een webpagina weergeven met two.makeCircle (x, y, radius) en two.makeEllipse (x, y, width, height) respectievelijk. Net als de rechthoeken, de X en Y parameters geven het midden van de cirkel of ellips aan. Het instellen van breedte en hoogte dezelfde waarde in het geval van een ellips zal het als een cirkel weergeven.
Een handige methode in Two.js die u vaak zult gebruiken, is two.makeGroup (objecten). U kunt een lijst met verschillende objecten doorgeven of een array van objecten, paden of groepen doorgeven als de parameter voor deze methode. Het zal ook a terugkeren Two.Group voorwerp.
Nadat u een groep hebt gemaakt, kunt u alle onderliggende items in één keer bewerken met behulp van eigenschappen die de groep aan u beschikbaar stelt.
De beroerte en vullen eigenschappen kunnen worden gebruikt om de lijn en vulkleur in te stellen voor alle kinderen in een groep. Ze accepteren alle geldige formulieren waarin u een kleur in CSS kunt weergeven. Dit betekent dat u vrij bent om RGB-, HSL- of hexadecimale notatie te gebruiken. Je kunt ook gewoon de naam van de kleur gebruiken, zoals oranje, rood, of blauw. Op dezelfde manier kunt u waarden instellen voor alle andere eigenschappen, zoals lijnbreedte, ondoorzichtigheid, mijter, en pet. Het is mogelijk om de vulling en lijn van alle kinderen in een groep te verwijderen met behulp van de geen vulling() en noStroke () methoden.
Je kunt ook andere fysieke transformaties toepassen zoals schaal, omwenteling, en vertaling. Deze transformaties worden toegepast op individuele objecten. Het toevoegen van nieuwe objecten aan een groep en het verwijderen ervan is eenvoudig met methoden zoals toevoegen() en verwijderen().
U kunt zowel lineaire als radiale verlopen definiëren in Two.js. Het definiëren van een verloop betekent niet dat het automatisch op het scherm wordt weergegeven, maar het zal voor u beschikbaar zijn om te gebruiken bij het instellen van de vullen of beroerte waarden van verschillende objecten.
U kunt een lineaire gradiënt definiëren met two.makeLinearGradient (x1, y1, x2, y2, stops). De waarden x1 en y1 bepaal de coördinaten van de start van het verloop. Evenzo de waarden x2 en y2 bepaal de coördinaten van het einde van het verloop. De stops parameter is een array van Two.Stop instances. Deze definiëren de kleuren van elk deel van de array en waar elke kleur overgaat in de volgende. Ze kunnen worden gedefinieerd met behulp van nieuwe Two.Stop (offset, kleur, dekking), waar compenseren bepaalt het punt op het verloop waar die specifieke kleur volledig moet worden weergegeven. De kleur parameter bepaalt de kleur van de gradiënt op het specifieke punt. U kunt elke geldige CSS-kleurrepresentatie als waarde gebruiken. eindelijk, de ondoorzichtigheid parameter bepaalt de dekking van de kleur. De dekking is optioneel en kan elke waarde tussen 0 en 1 hebben.
U kunt radiale verlopen op dezelfde manier definiëren met behulp van two.makeRadialGradient (x, y, radius, stops, fx, fy). In dit geval de waarden X en Y bepaal het midden van het verloop. De radius parameter geeft aan hoever de gradiënt moet worden verlengd. U kunt ook een aantal tussenstops doorgeven aan deze methode om de kleursamenstelling van de verlopen in te stellen. De parameters fx en foei zijn optioneel en kunnen worden gebruikt om de focuspositie voor het verloop op te geven.
Bekijk enkele van de soorten verloop en hun code in de CodePen hieronder.
Vergeet niet dat de X en Y Positie van de verlopen zijn met betrekking tot de oorsprong van de vorm die ze proberen te vullen. Een radiale gradiënt die een vorm vanuit het midden moet vullen, heeft bijvoorbeeld altijd X en Y op nul gezet.
Met Two.js kunt u ook tekst in het tekengebied schrijven en deze later volgens uw behoeften bijwerken. Dit vereist het gebruik van de methode two.makeText (bericht, x, y, stijlen). Het kan uit de naam van de parameters blijken dat bericht is de daadwerkelijke tekst die u wilt schrijven. De parameters X en Y zijn de coördinaten van het punt dat zal fungeren als middelpunt voor het schrijven van de tekst. De stijlen parameter is een object dat kan worden gebruikt om de waarden van een groot aantal eigenschappen in te stellen.
U kunt stijlen gebruiken om de waarden van eigenschappen zoals lettertype in te stellen familie, grootte, en opstelling. U kunt ook de waarde van eigenschappen zoals opgeven vullen, beroerte, ondoorzichtigheid, omwenteling, schaal, en vertaling.
Na het leren van al deze methoden en eigenschappen, is het tijd om ze toe te passen op een project. In deze zelfstudie laat ik je zien hoe we Two.js kunnen gebruiken om de eerste tien elementen van het periodiek systeem weer te geven met elektronen die rond de kern draaien. De kern zal ook een beetje bewegen om de visuele aantrekkelijkheid van onze voorstelling te verbeteren.
We beginnen met het definiëren van enkele variabelen en functies die later zullen worden gebruikt.
Accentsconagua
var centerX = window.innerWidth / 2; var centerY = window.innerHeight / 2; var elem = document.getElementById ("atomen"); var elementNames = ["", "Waterstof", "Helium", "Lithium", "Beryllium", "Borium", "Koolstof", "Stikstof", "Zuurstof", "Fluor", "Neon"]; var stijlen = uitlijning: "midden", grootte: 36, familie: "Lato"; var nucleusCount = 10; var nucleusArray = Array (); var electronCount = 10; var electronArray = Array (); function intRange (min, max) return Math.random () * (max - min) + min; De code hierboven slaat de coördinaten van het midden van ons venster op in de variabelen centerX en Centery. Deze zullen later worden gebruikt om ons atoom in het midden te plaatsen. De elementNames array bevat de namen van de eerste tien elementen van het periodiek systeem. De index van elke naam komt overeen met het aantal elektronen en protonen van dat element en begint met een lege tekenreeks. De stijlen object bevat eigenschappen voor het opmaken van het tekstobject.
We hebben ook een functie gedefinieerd intRange () om een willekeurig geheel getal te krijgen binnen bepaalde uitersten.
var two = new Two (fullscreen: true). appendTo (elem); var protonColor = two.makeRadialGradient (0, 0, 15, nieuwe Two.Stop (0, "red", 1), nieuwe Two.Stop (1, "black", 1)); var neutronColor = two.makeRadialGradient (0, 0, 15, nieuwe Two.Stop (0, "blue", 1), new Two.Stop (1, "black", 1)); voor (i = 0; i < nucleusCount; i++) nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8)); nucleusArray.forEach(function(nucleus, index) if (index % 2 == 0) nucleus.fill = protonColor; if (index % 2 == 1) nucleus.fill = neutronColor; nucleus.noStroke(); );
Dit maakt een exemplaar van twee en definieert twee radiale verlopen. De rood / zwarte radiale verlopen vertegenwoordigen protonen en blauw / zwarte gradiënten vertegenwoordigen neutronen.
We hebben de intRange () functie om al deze neutronen en protonen binnen 20 pixels van elkaar te plaatsen. De makeCircle () methode stelt ook de straal van deze protonen en neutronen in op 10 pixels. Daarna herhalen we opnieuw nucleusArray en vul elke cirkel afwisselend met een ander verloop.
for (var i = 0; i < 10; i++) if (i < 2) var shellRadius = 50; var angle = i * Math.PI; electronArray.push( two.makeCircle( Math.cos(angle) * shellRadius, Math.sin(angle) * shellRadius, 5 ) ); if (i >= 2 && i < 10) var shellRadius = 80; var angle = (i - 2) * Math.PI / 4; electronArray.push( two.makeCircle( Math.cos(angle) * shellRadius, Math.sin(angle) * shellRadius, 5 ) );
Het plaatsen van neutronen en protonen in de kern was eenvoudig. Het op de juiste manier plaatsen van de elektronen op een uniforme afstand vereist echter een beetje wiskunde. Wij gebruiken de shellRadius variabele om de afstand van verschillende elektronenschillen van de kern te specificeren. Een hele cirkel bedekt een hoek die gelijk is aan 2 PI-radialen. We kunnen verschillende elektronen uniform plaatsen door de 2 PI-radialen gelijkmatig over elkaar te verdelen.
De Math.cos () en Math.sin () functies worden gebruikt om de verticale en horizontale componenten van de positievector van verschillende elektronen te scheiden op basis van hun hoek.
var orbitA = two.makeCircle (centerX, centerY, 50); orbitA.fill = "transparant"; orbitA.linewidth = 2; orbitA.stroke = "rgba (0, 0, 0, 0.1)"; var orbitB = two.makeCircle (centerX, centerY, 80); orbitB.fill = "transparant"; orbitB.linewidth = 2; orbitB.stroke = "rgba (0, 0, 0, 0.1)"; var groupElectronA = two.makeGroup (electronArray.slice (0, 2)); groupElectronA.translation.set (centerX, centerY); groupElectronA.fill = "oranje"; groupElectronA.linewidth = 1; var groupElectronB = two.makeGroup (electronArray.slice (2, 10)); groupElectronB.translation.set (centerX, centerY); groupElectronB.fill = "geel"; groupElectronB.linewidth = 1; var groupNucleus = two.makeGroup (nucleusArray); groupNucleus.translation.set (centerX, centerY);
Dit deel van de code plaatst elektronen uit verschillende shells evenals neutronen en protonen in hun eigen afzonderlijke groepen. Het stelt ook de vulkleuren in voor alle elektronen in een specifieke baan tegelijk.
two .bind ("update", functie (frameCount) groupElectronA.rotation + = 0.025 * Math.PI; groupElectronB.rotation + = 0.005 * Math.PI; groupNucleus.rotation - = 0.05;) .play (); var text = two.makeText ("", centerX, 100, styles); nucleusArray.forEach (functie (nucleus, index) nucleus.opacity = 0;); electronArray.forEach (functie (elektron, index) electron.opacity = 0;); Dit deel van de code stelt de dekking van individuele elektronen en protonen op nul. Het vertelt ook Two.js om de elektronen en protonen op specifieke snelheden te roteren.
zichtbaar = 0; document.addEventListener ("klik", functie (gebeurtenis) if (zichtbaar < nucleusArray.length) nucleusArray[visible].opacity = 1; electronArray[visible].opacity = 1; visible++; text.value = elementNames[visible]; else nucleusArray.forEach(el => el.opacity = 0); electronArray.forEach (el => el.opacity = 0); zichtbaar = 0; text.value = elementNames [0]; ); Met het laatste deel van de code kunnen we de elementen doorlopen door met de muis te klikken of te tikken. Om het volgende element te laden, maken we nog een elektron en nog een proton of neutron zichtbaar en werken de elementnaam bij. Na het klikken op het laatste element, zijn alle deeltjes weer verborgen zodat we opnieuw kunnen beginnen. De zichtbaar variabele houdt het aantal atomische deeltjes bij dat momenteel zichtbaar is, zodat we ze overeenkomstig kunnen weergeven of verbergen.
Probeer te klikken of te tikken in de volgende CodePen-demo om de eerste tien elementen van het periodiek systeem weer te geven.
We zijn deze zelfstudie begonnen met een korte introductie tot de bibliotheek Two.js en hoe deze kan worden gebruikt om vormen te tekenen zoals rechthoeken, cirkels en ellipsen. Daarna hebben we besproken hoe we verschillende objecten kunnen groeperen om ze allemaal tegelijkertijd te manipuleren. We hebben dit vermogen gebruikt om elementen te groeperen om ze te synchroniseren en synchroon te roteren. Deze hulpmiddelen kwamen allemaal samen in onze animatie van de atomen van de eerste tien elementen in het periodiek systeem.
Zoals je kunt zien, is het heel eenvoudig om geanimeerde 2D-afbeeldingen te maken met Two.js. De focus van deze post was om je snel van start te laten gaan, dus we hebben alleen de basis besproken. U moet echter de officiële documentatie lezen om meer over de bibliotheek te weten te komen!
