Milyen szép rajz a böngésző
Írja szép kód - ez egy öröm, de nehéz megosztani ezt az örömet más programozók, nem is beszélve azokról, akik nem. Az ő szabad és kommunikál családi idő, volt egy elképzelése arról, hogyan kell programozni egy verset a canvas elem felhívni a böngészőben.
Számos szempontból, hogy leírják a vizuális kísérletek a számítógépes kód rendszer demo, interaktív művészet, és így tovább. Ahhoz, hogy ezt a folyamatot, azt megtippelni a kifejezés programozási vers. Vers - csiszolt darab prózai, egyszerű, rövid és esztétikus. Ez nem egy félig kész vázlatot az elképzelést, egy album, de valami csatlakoztatva által benyújtott közönség örömét. Vers - nem eszköz, hanem él, hogy körülbelül érzelem.
Olvastam egy csomó könyvet a matematika, számítástechnika, fizika, biológia saját öröm. És hamar rájöttem, hogy ha én lakom bármilyen ötlet, az emberek unatkozni. Tény, hogy tudok venni egy ötlet, ami szerintem hihetetlenül izgalmas és gyorsan megfertőzheti az emberi értelemben vett érdek, még akkor is, ha a személy nem tudja a kódolási és hogyan működik egyáltalán. Nem kell, hogy fogja meg néhány komplex filozófiai gondolkodás és számítási számításokat annak érdekében, hogy programozni egy verset. Azt kell csak a vágy, hogy valami élő és amelynek levegőt a képernyőn. Kódok és példákat hagyok lent segít megérteni, hogyan kell ténylegesen elvégezni ezt a gyors és egyszerű folyamat.
A fő jellemzője az, hogy a teremtés a vers legyen egyszerű és könnyű. Nem kell tölteni három hónapot, és épít egy, bár egy nagyon cool demo. Ehelyett hozzon létre egy 10 vers, ami segíteni fog az ötlet, hogy az élet. Írja kódot izgalmas lesz, és nem kell félni, hogy nem.
Nincs semmi bonyolult, könnyen induláshoz. Az egyetlen dolog, ami lehet egy kicsit zavaró, hogy a tekintetben, hogy meg kell alakítani a beállításokkal, mint például fillStyle, csíkszélesség, betűtípussal és strokeStyle, mielőtt a tényleges szám lesz használva. Akkor könnyen elfelejti frissíteni vagy újratölti a beállításokat, és végül kap egy váratlan eredményt.
Az első példa csak akkor fut, és átalakítja egy statikus képet a vászonra. Mindez jó, de az igazi móka akkor kezdődik, amikor kérsz egy sebessége 60 képkocka másodpercenként. Modern böngészők add-in requestAnimationFrame funkció, amely szinkronizálja a kódot az eredeti rajz egy mintát, ami mozog a böngészőben. Ez javítja a hatékonyságot, és ad egy sima út. A cél a vizualizáció, hogy kódot, ami mozog sebességgel 60 képkocka másodpercenként.
var vászon = document.getElementById ( 'például-vászon');
Most légy óvatos, mielőtt beszéltünk a programozás és a rajz a képernyőn, de itt már kész valami matematikai. Bevallom, hogy én mindig szerettem a matematika (ellentétben sok más művész). Annak ellenére, hogy ez a szeretet, csalódott vagyok, ahogyan azt tanítják az iskolában. Tanári túl formális, hogy lehet jó a matematika tanára, de elvesztette a csodálat, érdeklődését a tanulás és a pragmatizmus, amellyel lehet, hogy egy csomó érdekes dolgot. De van jó hír, programozók nem figyelni rá, és koncentrálni sokkal érdekesebb dolgokat.
És most megpróbálom gyorsan elmagyarázza, hogy a koordináta rendszerben. Ez hasznos lesz megérteni, hogy egy matematikai függvény lehet létrehozni egy mozgalom. Az alábbi kép mutatja egy interaktív koordináta rendszerben. Kérjük, vegye figyelembe, hogy nem csak az x-koordináta. A funkció, amit levonni, képviseletében a (a * x + b) * c + d. Játssz csúszka menetrend szerint, és láthatjuk, hogy minden ilyen értékek állítsuk be és a skála a grafikon.
Ha továbbra is szeretné, hogy továbbra is együtt dolgozik a kódot, azt javasoljuk, hogy állítsa mozgását és irányát. Próbálja meg módosítani az értékeket a koordináta-rendszerben, vagy menjen egy másik funkció, és meglátjuk, mi történik.
Ezek a példák egy kicsit bonyolultabb, mert az objektumokkal társított, de megéri. Lásd mintakódot hogy meg fogja érteni, hogy az új jelenet, amely segít az alapokat a rajzot a vásznon. Az új fordulópont jeiölőanyagot férhetnek hozzá olyan változó, mint az összefüggésben a vásznon.
A kezdéshez a tervező szabni a konfigurációs pontok munkáját, és állítsa be néhány változó a munkához szükséges. Ismét fordulunk Three.js vektor. Ha van egy lejátszási frame rate 60fps, fontos, hogy a piaci bevezetés előtt az elemeket, vagy új lejátszás közben. Meg lehet enni a rendelkezésre álló memória, és a megjelenítés meredek. Szintén figyelni, ahogy pont továbbít egy példányt a link kerete. Segít dolgozni pontosabban.
A többi kód lesz telepítve a létesítményben, mivel a prototípus pontokat. az egyes új pontok férhetnek hozzá ezeket a módszereket. Elmagyarázom funkcióról funkciót.
Azt külön a rajz kódját a frissítés. Segít sokkal könnyebb, hogy támogassa és mozgassa a tárgyat. Csakúgy, mint az MVC rendszer elkülöníti a személyes ellenőrzés és logikai nézet. Vector dt - az időbeli változást ezredmásodperc a legutóbbi frissítés óta. Ez a cím könnyen és rövid, és jön (ne aggódj) fogkő-származékok (származék számítás). Ő kivonja a sebesség a mozgás a frame rate. Így, akkor nem lassul NES stílus, ha bármilyen problémát tapasztal. Ha a sebesség túl nagy, kiderül, hogy lesz esett kereteket, de az arány ugyanaz marad.
Ez a funkció egy kicsit furcsa a struktúrájában, de könnyen használható. Tényleg drága memóriát a koordináta-rendszerben (funkció). MoveDistance lehet állítani és a használat után, amikor újra elindítja a rendszer funkcióit, ha szükséges.
Ezt a vektort csak kiszámítani, hogy az új helyzetben, és nem célja a szabadtéri funkciókat. Ez az első matematikai vektor, kezdték használni. Most az irányt a vektort megszorozzuk, szemben az idő változása, majd hozzáadjuk a pozícióba. Végén a kereset a modult, amely tartja a pontot a képernyőn.
És a végén a legkönnyebb. Készítsen másolatot az összefüggésben a fő célja, és rajzoljon egy téglalapot (vagy bármi mást, ez nem számít). Csak egy téglalapot a legegyszerűbb módja, hogy dolgozzon meg a képernyőn.
Ebben a szakaszban vagyok, hogy egy új pontot, és hívják this.dot = new Dot (x, y, ez) főként a tervezők. És akkor, a fő frissítési eljárás adhatok this.dot.update (dt), és egy mozgó pont jelenik meg a képernyőn.
Nagyon szép, hogy a kód egy kicsit szerkezet, de nem adja meg vonzóbbá. Itt a ciklus kezdődik. Alapvetően az objektum hozunk létre egy új objektumot DotManager. Kényelmes összeszerelni ezt a funkciót egy külön objektum, mert könnyebb és pusztán azért, mert a szimuláció egyre nehezebb.
Most a sablon, ahelyett, hogy frissítse a ponton, akkor hozzon létre és frissítse DotManager. Először hozzon létre 5000 pont.
Az biztos, hogy sokkal jobban néz ki, mint egy pont. Most itt az ideje, hogy elkezd hozzá inkább a frissítési módszert a pontot. Bármilyen változás a tárgykód tükröződni fog minden pontot a képernyőn. De csodákat, és kezdjük el fordul elő. Emlékezz koordinátarendszer felett található? Hogyan fogja beállítani a hatása hullámszerű mozgás? Létrehozunk egy változót wavePosition arra a pontra, az objektum. Összefoglalva, adjuk hozzá ezt a változót a helyzet Y.
Igen, egy kicsit zavaró, ha meg van írva egy sorban, ezért tettem egy másik lehetőség, ami készült egy koordináta-rendszerben.
Aggódom ...
Egy másik kis bárban. Monokróm kicsit unalmas, úgyhogy hozzá egy kis színt.
Minden egyes új fordulópont meghatározott eredeti helyzetébe, és az alaphangot a vásznon vízszintesen. Én egy olyan funkciót Utils.hslToFillStyle. ez egy kis segítség lehet átalakítani valamilyen bemeneti változók egy megfelelően formázott fillStyle lánc. Olyan esetek, amelyek már sokkal érdekesebb. A lényeg a végén fognak gyűjteni egy helyen, és nem lesz szivárvány hatás után véletlenszerűen szétszórt. Ez megint egy példa a mobil képkezelő keverve matematika vagy a bemeneti értékeket. Szeretek dolgozni színenként modell HSL, mint az RGB, mert könnyebb használni. RGB kicsit elvont.
Eddig a pontig nem volt igazi felhasználói élményt.
Továbbra is csak a létrehozásához kattintson az objektumra a sémát. Most, hogy van egy egér, akkor megteheti, hogy pont fogja követni.
Ez a módszer lehet egy kicsit megzavarja, ha nem jól ismerik a vektor matematika. Vektorok jól láthatóvá és segíthet felhívni doodles papírra kávéfoltok. Egyszerűen fogalmazva, ez a funkció megmutatja a távolságot az egér és a lényeg. És amikor a pont közelebb kerül a másik pont, amelynek alapja, hogy mennyi van közel egy pontot, és, hogy mennyi idő telt el. Ez úgy történik, hogy kiszámítjuk a távolságot a mozgás (normál skalár ábra), és ez a szám növekszik azáltal, hogy normalizáltuk a vektor (a vektor hossza 1) egybeesik az egér. Oké, az utolsó mondat nem szükséges, hogy írjon egyszerű nyelven, de ez csak a kezdet.
A legfontosabb dolog számomra az a folyamat, ami egy vers programozás és művészet létrehozásának valami újat. Azt javasoljuk, hogy ne menjen be részleteket és nagy terveket. Ehelyett ismételjük, kísérlet, élvezni a siker és néha hagyja, amit nem értek. Egyszer kaptam valamit, mint egy darab hátborzongató szivárvány. Volt nagy reményeket rekurzív körökben, de nem hagyja, hogy a rossz eredmények ütni az utamból. Végül, a kód, hogy itt részletesen ismerteti - a tanulmány egy nagyon objektum-orientált stílus, amely szeretem a legjobban. Alkalmazkodni az ötleteket a saját folyamatok, eszközök és technikák. Versek nem nagy, integrált rendszer, így könnyen felhívni, és kísérletezni vele anélkül, hogy figyelembe véve a feltételeket nagyszabású projekteket.
Tekintsük a vásznon, mint egy ceruza, amely segít megvalósítani a csodálatos ötlet, és, és lehetővé teszi a alkotásait repülni.
FIGYELEM! Ön egy elavult böngészőt használ Internet Explorer
Ez a weboldal épül a fejlett, korszerű technológiák és nem támogatja az Internet Explorer a második és a hetedik változat.
