Efni.
- 01. Byrjaðu ferlið
- 02. Uppfærðu agnið
- 03. Fara með flæðið
- 04. Fylgdu en ekki of náið
- 05. Sýnið ögnina
- 06. Vafið um
- 07. Gleði umbúða
- 08. Búðu til margar agnir
- 09. Settu þetta allt upp
- 10. Aðrir skjáir
- 11. Búðu til rist
- 12. Búðu til agnir
- 13. Teiknið skjáinn
- 14. Búðu til flæðisáhrif
- 15. Uppfærðu fylkið
- 16. Uppfærðu agnirnar
- 17. Bættu við textanum
- 18. Finndu músarstöðu
- 19. Vellíðan á sinn stað
- 20. Skrifaðu CSS
- 21. Klára
Leturfræði hefur alltaf leikið stóran þátt í vopnabúr hvers hönnuðar þar sem þeir velja rétt leturgerð sem eykur skilaboðin og setur fram rétt samhengi fyrir það sem verið er að miðla. Undanfarin átta ár hafa vefhönnuðir haft getu til að koma með sérsniðnar leturgerðir eins og hreyfitækni við hönnun sína og hafa svipaða leturfræði og þær sem prenthönnuðir njóta.
Skoðaðu margar af þeim síðum sem eru tilgreindar sem margverðlaunaðar eða viðurkenningar „síða dagsins“ og þú munt fljótlega taka eftir því að notkun þeirra á leturfræði verður aðal í hönnuninni og gerir þeim kleift að hækka sig yfir samkeppni sína. Þetta getur verið allt frá hreyfimyndabréfum, viðbragðshreyfingu til samskipta notenda, til djörfrar notkunar á gerð eyðublaða sem eru í aðalhlutverki (varðveittu leturgerðarskrár þínar öruggar í skýjageymslu).
Ef þú vilt búa til vefsíðu sem vekur athygli með engum læti, reyndu líka að byggja upp vefsíðu. Og vertu viss um að árangur vefsvæðisins sé bjartsýnn með bestu vefþjónustu.
- 3D leturgerðir: 9 helstu ráð
Í þessari kennslu mun tegundaráhrifin nota stafina sem grímu við hraðvirkar, frjálsfljótandi agna gönguleiðir sem hreyfast kraftmikið og fara í gegnum stafina. Það verður ekki aðeins þessi fallega fjör, heldur þar sem þessu verður komið fram á HTML5 strigaþáttinn, þá verður þessu breytt í þrívídd til að snúast í átt að músinni þegar hún hreyfist um skjáinn. Þetta er fullkomið fyrir síðuhausa eða bara þegar þú þarft að vekja athygli notandans fyrir ákall til aðgerða.
Sæktu kennsluskrárnar hér
01. Byrjaðu ferlið
Opnaðu „start“ möppuna úr verkefnaskrám í IDE kóðanum þínum. Verkefnið ætlar að byrja á því að búa til agnaflokkinn. Þetta verður notað til að búa til flæðandi myndefni innan textans í verkefninu. Opnaðu ‘sketch.js’ skrána og bættu við eftirfarandi breytu til að byrja að búa til grunnagnirnar.
virka Particle () {this.pos = createVector (random (breidd), random ((hæð - 100))); this.vel = createVector (0, 0); this.acc = createVector (0, 0); this.maxspeed = maxSpeed; this.prevPos = this.pos.copy ();
02. Uppfærðu agnið
Til þess að færa ögnina verður uppfærsluaðgerð keyrð í hverjum ramma, þetta vinnur út hraðann á ögninni og hröðunina að hraðanum. Hraðinn verður að lokum takmarkaður af hnattbreytu sem verður bætt við síðar. Hraði er bætt við stöðu einstakra agna. Með því að búa til eina ögn verða nokkur þúsund búin til á skjánum hverju sinni.
this.update = virka () {this.vel.add (this.acc); this.vel.limit (this.maxspeed); this.pos.add (this.vel); this.acc.mult (0); }
03. Fara með flæðið
Til að gefa agnirnar flæðandi hreyfingu þeirra verður flæðisviði sem myndast af hávaða fylgt. Aðgerðin sem er búin til hér gerir kleift að senda flæðivigurinn og honum verður fylgt eftir, þaðan kemur nafnið á þessari aðgerð. Krafti vektorstefnunnar verður beitt á ögnina.
this.follow = virka (vektorar) {var x = gólf (this.pos.x / scl); var y = gólf (this.pos.y / scl); var index = x + y * cols; var gildi = vigrar [vísitala]; this.applyForce (gildi); }
04. Fylgdu en ekki of náið
Til þess að koma í veg fyrir að allar agnirnar safnast saman, sem geta auðveldlega gerst við hreyfingu af þessu tagi, mun agnirnar hafa mjög lítið af handahófi bætt við stöðu sína. Þetta mun valda smá dreifingu.
this.scatter = aðgerð (vektorar) {this.pos.x + = handahófi (-0,9, 0,9); this.pos.y + = handahófi (-0,9, 0,9); } þetta.applyForce = virka (afl) {þetta.acc.add (afl); }
05. Sýnið ögnina
Sýningaraðgerðin hér sýnir ögnina. Það fyrsta sem það gerir er að bæta við einum punkta höggi í ljósgráum lit til að búa til línuna. Línan er dregin frá núverandi stöðu til síðustu stöðu í fyrri rammanum. Fyrri staðsetning er geymd næst í gegnum lykkjuna.
this.show = virka () {högg (180); strokeWeight (1); lína (this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y); this.updatePrev (); } this.updatePrev = virka () {this.prevPos.x = this.pos.x; this.prevPos.y = þetta.pos.y; }
06. Vafið um
Brúnastarfsemin gengur upp ef agnið nær að brún skjásins og, ef svo er, sveipar það því til að koma á gagnstæða hlið. Þessi hluti fjallar um x stöðu þannig að hann er að uppgötva hvort hann er meiri en breidd skjásins og sendir hann síðan til vinstri brúar og öfugt.
this.edges = virka () {ef (this.pos.x> breidd) {this.pos.x = 0; this.updatePrev (); } ef (this.pos.x 0) {this.pos.x = breidd; this.updatePrev (); }
07. Gleði umbúða
Þessi kóði er afgangurinn af brúngreiningunni og hann greinir agnið á y ásnum efst og neðst á skjánum. Svigin hér sveipa allan ögnaflokkinn. Þetta þýðir að með því að nota þennan flokk er hægt að búa til margar agnir.
ef (this.pos.y> hæð) {this.pos.y = 0; this.updatePrev (); } ef (this.pos.y 0) {this.pos.y = hæð; this.updatePrev (); }}}
08. Búðu til margar agnir
Nú þegar agnið er búið til er kominn tími til að hugsa um að búa til margar agnir. Til að gera þetta geta allir kóðarnir okkar farið upp fyrir agnaflokkinn. Hér er fjöldi alþjóðlegra breytna lýst yfir til að gera kerfinu kleift að keyra. Það verður hringt í þá á ýmsum tímum meðan á kóðanum stendur, svo hægt er að kanna þá.
var inc = 0,1; var scl = 100, zoff = 0; var cols, raðir, hreyfing = 0; var agnir = []; var flowfield; var img; var maxSpeed; var t, calcX = 0, calcY = 0, currX = 0, currY = 0, targetX = 0, targetY = 0;
09. Settu þetta allt upp
Uppsetningaraðgerðin, sem lýst er hér, stillir hvernig skjárinn mun líta út í byrjun. Fyrsta greiningin sem gerð er er að sjá hver breidd skjásins er. Ef það er tiltölulega stórt er hlaðið stórri mynd, striginn búinn til og hann er minnkaður með CSS til að passa innan skjásins.
aðgerðaruppsetning () {if (windowWidth> 1200) {img = loadImage ("assets / studio.png"); var striga = createCanvas (1920, 630); maxSpeed = 10,5; }
10. Aðrir skjáir
Afgangurinn af if yfirlýsingunni kannar mismunandi skjáupplausnir og hleður inn mynd sem hentar best fyrir þá skjástærð. Svipaðir strigaþættir eru búnir til á sama hátt. Þetta er aðallega til að stöðva farsíma sem eiga við fleiri pixla en það þarf að gera.
annað ef (windowWidth> 900) {img = loadImage ("assets / studio-tablet-wide.png"); var striga = createCanvas (1200, 394); scl = 60; maxSpeed = 7; } annað {img = loadImage ("assets / studio-tablet-tall.png"); var striga = createCanvas (700, 230); scl = 40; maxSpeed = 5; }
11. Búðu til rist
Þegar skjástærðin er unnin er striginn settur inn í haus div tagið á index.html síðunni. Fjöldi dálka og lína er unnið út frá breidd og hæð; það er svolítið eins og ósýnilegt rist. Að lokum er fylki sett fyrir flæðisviðið.
canvas.parent (‘haus’); cols = hæð (breidd / scl); raðir = hæð (hæð / scl); flæðisvið = nýr fylking (cols);
12. Búðu til agnir
Fjöldi agna er settur upp miðað við breidd skjásins - ef skjárinn er 1920 punktar á breidd þá verða til 2500 agnir og það færist þaðan niður á við. A fyrir lykkja býr til nýju agnirnar. Bakgrunnslitur skjásins er stilltur á næstum fullan hvítan lit.
var numParticles = Math.floor ((2500/1920) * breidd); fyrir (var i = 0; i numParticles; i ++) {agnir [i] = nýr agni (); } bakgrunnur (245); }
13. Teiknið skjáinn
Niðurstöður allra útreikninga eru teiknaðir á skjáinn í hverjum ramma í teiknaaðgerðinni. Í fyrsta lagi fyllir ljósgrár ferhyrningur með mjög litla ógagnsæi skjáinn til að fölna það sem áður hefur verið teiknað. Eftir að þetta er teiknað er slökkt á fyllingunni þar sem agnirnar verða úr höggum sem ekki fyllast.
fall teikna () {noStroke (); fylla (245, 10); rétt (0, 0, breidd, hæð); noFill (); var yoff = 0;
14. Búðu til flæðisáhrif
Til að fá flæðisáhrifin eru tvær ‘fyrir’ lykkjur sem fara í gegnum línurnar og dálkana til að uppfæra hávaðagildin. Þessum er síðan breytt í horn frá hávaðagildinu tilbúið til að uppfæra agnir fyrir hverja stöðu á skjánum.
fyrir (var y = 0; y raðir; y ++) {var xoff = 0; fyrir (var x = 0; x cols; x ++) {var index = (x + y * cols); var horn = hávaði (xoff, yoff, zoff) * TWO_PI * 4; var v = p5.Vector.fromAngle (horn);
15. Uppfærðu fylkið
Fylki flæðis er uppfært með horninu og gildin aukin þannig að móti hver staða er aukið í hvert skipti sem það fer upp. Þetta gæti virst flókið en það skapar í raun bara tilviljanakennda flæðishreyfingu fyrir agnirnar til að fylgja á skjánum.
v.setMag (1); flæðisvið [vísitala] = v; xoff + = aukning; } yoff + = inc; zoff + = 0,001; }
16. Uppfærðu agnirnar
Nú eru agnir allar lykkjaðar í fylkingu sinni. Hverri einstökum agnum er sagt að fylgja flæðisviðinu, uppfæra, athuga brúnir skjásins, dreifast aðeins og að lokum teikna á skjáinn með því að nota sýningaraðgerðina. Vistaðu skrána og prófaðu ‘index.html’ til að sjá agnir hreyfast um.
fyrir (var i = 0; i agnir.lengd; i ++) {agnir [i]. fylgja (flæðisviði); agnir [i] .uppfærsla (); agnir [i]. kantar (); agnir [i] .dreifing (); agnir [i] .show (); }}
17. Bættu við textanum
Textinn er gríma sem er settur ofan á. Til að gera þetta er rétt mynd sett ofan á agnirnar. Bættu þessum kóða við áður en lokað er fyrir teiknifallið. Vistaðu og skoðaðu vafrann til að sjá áhrifin sem vinna með textann núna.
mynd (mynd, 0, 0);
18. Finndu músarstöðu
Músastaða er vísað til og x og y gildin eru kortlögð á gráðu horn sem hægt er að færa. Á y ásnum verður þetta -25 til 25 og öfugt fyrir x ásinn. Settu eftir kóðann eftir að síðasta kóðanum var bætt við, áður en teiknaaðgerðinni lauk.
targetY = Math.round (map (mouseX, 0, width, -25, 25)); targetX = Math.round (kort (mús Y, 0, hæð, 25, -25));
19. Vellíðan á sinn stað
Markaðsstaðan fær nú smá slökun svo að gráðurnar nái hægt og rólega. Þetta er búið til með því að nota klassískt slökunaralgoritm að taka núverandi stöðu af áfangastað og margfalda með lágum tölum.
var vx = (targetX - currX) * 0,05; var vy = (targetY - currY) * 0,05; calcX + = vx; calcY + = vy;
20. Skrifaðu CSS
Breytan ‘t’ tekur hér útreiknuð gildi og setur þau í CSS streng með umbreytingargildum rotateX og rotateY. Núverandi staða er reiknuð út frá stöðu sem striganum er nú snúið til.
t = ’rotateX (’ + calcX + ’deg) rotateY (’ + calcY + ’deg)’; currX = calcX; currY = calcY;
21. Klára
Nú er CSS beitt á strigaþáttinn í þessum kóða. Vistaðu síðuna og forskoðaðu þetta í vafranum. Núna uppfærir músin snúning strigans að fullu svo hann snúist þegar músin hreyfist. Auðvitað hreyfast allar agnir í því rými með þeim á skjánum.
canvas.style.WebkitTransform = t; canvas.style.msTransform = t; canvas.style.transform = t;
Þessi grein var upphaflega birt í skapandi vefhönnunartímariti Web Designer. Kauptu271. máleðagerast áskrifandi.
