Kui olete uuest põnevil Microsofti funktsioonid Edge, aga ma ei taha oma tavalisest brauserist sellele lülituda, mõistan sind. Kuigi Edge on kindlasti kiirem, seksikam ja elegantsem kui Internet Explorer sellel pole nii palju lisandmooduleid ja laiendusi kui Chrome'il.
Hea uudis on see, et mõne Edge'i uue funktsiooni kasutamiseks ei pea te oma lemmikbrauserit vahetama. Saate joonistada veebilehtedele, vaadata artikleid täisekraani lugemisrežiimis ja isegi Google'ist oma häälega otsida, ilma lemmikChrome'ist lahkumata. Lisaks tegeleb Google’i tiim pidevalt oma brauseri kiirendamise ja täiustamisega (nad on näiteks vanemtarkvarainseneri Peter Kastingu Google+ postituse järgi aku tarbimist parandanud).
Okei Google.
Edge arvab, et see on parim, kuna see integreerub otsingumootoriga hääleassistent Cortana. Kuid Chrome'is saate sama funktsiooni, Google'il on oma "Ok Google" häälotsingu funktsioon."Ok Google" lubamiseks vajutage Chrome'is menüünuppu (nupp "kolm rida" paremas ülanurgas) ja minge menüüsse "Seaded". Märkige jaotises „Otsing” ruut valiku „Lülita häälotsing sisse, kui ütlen „Ok Google” kõrval.
Saate nüüd aktiveerida Google Voice Searchi, öeldes "Ok Google", kui olete uuel vahelehel või kui olete saidil Google.com. Pärast häälotsingu aktiveerimist esitage lihtsalt oma küsimus ja Google kuulab, tõlgib teie sõnad tekstiks ja tagastab otsingutulemused.
Doodles veebilehtedel.
Sisseehitatud serva funktsioon joonistamine on lõbus, kuid Edge pole ainus brauser, millel on see võimalus. Sarnase funktsiooni leiate Chrome'ist koos suur summa funktsioone, installides laienduse Web Paint.Seda on lihtne teha, järgige ülaltoodud linki ja klõpsake "Lisa Chrome'i". Pärast laienduse lisamist näete paremal värvipaleti ikooni ülemine nurk aken. Kui soovite veebilehele midagi joonistada, klõpsake sellel ikoonil ja kuvatakse joonistustööriistad.
Nende tööriistade abil saate joonistada veebilehele jooni, lisada teksti, sisestada valmis kujundeid ja täita alasid värviga. Kui soovite oma töö salvestada, klõpsake ekraanipildi tegemiseks kaameraikoonil.
Lugemisrežiim.
Chrome'il pole sisseehitatud täisekraani režiim lugemist, kuid loetavuse laiendus võib sarnaselt Edge'i lugemisrežiimile eemaldada lehelt reklaame ja muid mugavat lugemist segavaid elemente.
Minge loetavuse laienduse lehele ja klõpsake "Lisa Chrome'i". Näete brauseriakna paremas ülanurgas ikooni, mis näeb välja nagu punane tool. Klõpsake seda ikooni, kui soovite lehte loetaval viisil vaadata ja valige "Loe kohe" (Loe kohe), laiendus proovib lehti ümber joonistada (parim palju tekstiga saitidel).
Tihti juhtub, et peame kiiresti tegema mõned märkmed otse brauseri ekraanil, näiteks salvestades koolitusvideo või luues ekraanipildi (hetktõmmise).
Pealegi selline imeline kasulik tööriist kuidas "Ekraanipliiats / ekraanipintsel" (saidi autori sõnul) igapäevases praktikas kasuks võib tulla, näiteks:
1. Kogunenud kunstiannete koheseks väljaviskamiseks ja uude PNG- või JPG-pildifaili jäädvustamiseks.
2. Naljaka või lõbusa karikatuuri kiireks joonistamiseks ilma pilti alla laadimata ja Photoshopi käivitamata.
3. Täiendage monitori ekraanil olevat pilti Internetis mõne fraasi või pealdisega, samuti paljude, paljude muude "TO ...".
Selliseid originaalkunste saab sõpradega jagada, avaldada sotsiaalvõrgustikes jne. Ja Screen Draw tööriistaga (ekraanile joonistamine) on lihtne teha veebis terve mägi kõige naljakamaid joonistusi ja koomikseid ning seejärel salvestada see äri sõprade või töökaaslastega naerma.
Üldiselt ei tea kunagi, kes ja miks võttis või tahtis oma brauseri ekraanile joonistada. Igal juhul me ei sekku, vaid aitame seda realiseerida just SIIN ja KOHE.
Ekraanile joonistamine: esialgsed nõuded
1. Teil on installitud ja avatud Mozilla Firefoxi brauser.
2. Sul on klaviatuur ja hiir.
3. Sul on vankumatu soov joonistada otse brauseriaknas.
Kui kõik need punktid on tõesed, võime jätkata samm-sammult juhiste järgi!
Joonistamine ekraanile Firefoxi brauseris: samm-sammult juhised
2. Pärast lisandmooduli allalaadimist (mõne sekundi pärast) tuleb see installida. Avanevas dialoogiboksis klõpsake "Installi kohe".
3. Pärast lühikest välkkiire installimist palutakse meil brauser taaskäivitada, millega peaksime nõustuma. Taaskäivitame brauseri, klõpsates spetsiaalsel hüpiknupul või teeme seda käsitsi (sulgeme Mozilla ja avame uuesti), kuid Firefox tuleb taaskäivitada. Ja pärast seda jõustuvad meie muudatused.
4. Ekraanipintsli käivitamiseks ekraanipliiats, ekraan tekstiredaktor... (nimetage seda kuidas iganes soovite)", peate avama lisandmoodulite paneeli, mis asub aadressil:
"VAADE" - "TÖÖRIISTAD" - "LISANDUSTE PANEEL"
Sest kiire algus võite kasutada kiirklahvi "Ctrl+\"
5. Avaneval lisandmoodulite paneelil näeme oma ekraanipliiatsit – logo Ekraaniprogrammid Joonista – brauseris ekraanile joonistamine. Klõpsame sellel ja tegeleme funktsionaalsusega.
6. Nagu näete, saate siin:
- muuta pintsli suurust ( digitaalne paneel);
- muuta pintsli värvi (klõpsake värviväljal) ();
- sisestage tekst (vene või inglise keeles erinevates värvides ja suurustes) spetsiaalne nupp);
- salvesta tulemused piltidena (disketile);
- lähtesta aken (tühi leht);
- kustutage oma joonised (kustutuskumm).
Kas olete juba pikka aega veebis joonistanud, ilma "VKontakte" grafitita arvestamata? See, millest ma kirjutan, pole kaugeltki sotsiaalvõrgustiku graffitist, segamisrežiimidega kihid, pliiatsi survetundlikkus, täiustatud pintslid ... see ei ole mingil juhul mõeldud naabri seinal olevate "PREVED" jaoks)
Sissejuhatus
Mul tuli kunagi idee ja kogusin tohutu nimekirja veebitoimetajatest, kuhu saaks vähemalt midagi joonistada. Siis oli see uudsus ja lihtsalt huvitav oli vaadata, mida inimesed välja mõtlevad... Kui mu mälu mind ei peta, siis neid oli seal umbes neljakümne ringis, sealhulgas erinevaid "laste" värvikujulisi joonistusi. Koguge siis kokku ja siin praktilise rakendamise Kogu seda prügi nimekirjast ei leitud kunagi.
Seejärel tegin oma blogimise ajal (mida enam ei ole ja ei ole) mitmest toimetusest valiku, kuhu oli võimalik joonistada enam-vähem valmis töö. Juba selles nimekirjas oli neid umbes 5-7 (enam ei mäleta).
Kummalisel kombel on pärast peaaegu kahte aastat sellest ajast üks minu järjehoidjates endiselt alles huvitav teenindus sellest minu viimasest nimekirjast. Olles läbinud sellise “loodusliku valiku”, on ta tänaseni edukalt ellu jäänud ja küllaltki rõõmsalt külastan teda ... no vähemalt korra kuus, see on kindel:D.
Mida? Kuhu?
Mis see teenus siis on? - küsite, 2draw.net - ma vastan: D.
Vaatamata selle ebaatraktiivsele (minu jaoks) välimusele on saidi funktsionaalsus väga ühtlane. Seal on ajaveeb, kasutajate tööde galerii, foorum, viki ... noh, tegelikult joonistustuba.
Nüüd on esimene asi, mida peame installima brauseri jaoks tahvelarvuti (pliiatsi) draiveri, et pliiats saaks klõpsu brauseris olevale rakendusele üle kanda. Laadige alla draiver
Kirjutage ilus kood- see on rõõm, kuid seda naudingut on raske teiste programmeerijatega jagada, rääkimata neist, kes seda ei tee. Tööst ja perega suhtlemisest vabal ajal tekkis mul idee, kuidas programmeerida luuletust, kasutades brauseris joonistamiseks lõuendielemente.
On suur hulk termineid, mis kirjeldavad visuaalseid katseid arvutis, koodiskeemi, demo, interaktiivset kunsti jne. Selle protsessi kirjeldamiseks otsustasin kasutada terminit programmeerimisluuletus. Luuletus on säravaks lihvitud proosatükk, kerge, lühike ja esteetiline. See ei ole albumi idee poolik visand, vaid midagi sidusat, mis esitatakse vaatajale nende nautimiseks. Luuletus ei ole instrument, kuid see elab, et tekitada emotsioone.
Olen lugenud palju matemaatikateemalisi raamatuid, arvutiteadus, füüsika ja bioloogia teie naudinguks. Ja ma mõistsin väga kiiresti, et kui ma mingist ideest levitan, tüdineb inimestel kiiresti. Tegelikult võin võtta idee, mis minu arvates on uskumatult huvitav ja nakatada inimese kiiresti huvitundega, isegi kui inimesel pole kodeerimisest ja selle toimimisest aimugi. Luuletuse programmeerimiseks ei pea te mõistma keerulisi filosoofilisi mõtteid ega arvutuslikke arvutusi. Kõik, mida vajate, on soov näha oma ekraanil midagi elavat ja hingavat. Allpool toodud koodid ja näited aitavad teil mõista, kuidas seda kiiret ja lihtsat protsessi tegelikult rakendada.
Peaasi, et luuletuse loomine jääks lihtsaks ja kergeks. Pole vaja kulutada kolme kuud ja seda ehitada, kuigi see on väga lahe demo. Selle asemel looge 10 luuletust, mis aitavad ideed ellu viia. Kirjutage kood, mis on põnev ja ärge kartke ebaõnnestuda.
Sissejuhatus Canvasesse
Lühidalt, lõuend on 2D rasterelement pilt, mis asub DOM-is ( objekti mudel dokument) ja sinna saab joonistada. Saate joonistada nii 2D-kontekstis kui ka WebGL-i kontekstis. Kontekst on JavaScript, mida kasutame joonistustööriistadele juurdepääsuks. Lõuendi jaoks saadaolevad JavaScripti protsessid on erinevalt SVG jaoks saadaolevatest väga selged. Iga protsess, mida kutsutakse elemendile tervikuna, mitte millegi lõuendile joonistatule, on täpselt sama, mis tavaline element Pildid. Siin põhiline näide lõuend:
Varcanvas = document.getElementById("example-canvas"); var kontekst = canvas.getContext("2d"); //Joonista sinine ristkülik context.fillStyle = "#91C0FF"; kontekstis fillRect(100, // x 100, // y 400, // laius 200 // kõrgus); //Joonista teksti kontekst.fillStyle = "#333"; kontekst.font = "18px Helvetica, Arial"; kontekst.textAlign = "keskel"; kontekst.fillText("Luuendi imeline maailm", // tekst 300, // x 200 // y);
Siin pole midagi keerulist, saate hõlpsalt alustada. Ainus, mis võib veidi segadust tekitada, on kontekst, mis tuleb enne tegeliku joonise kasutamist moodustada selliste sätetega nagu fillStyle, lineWidth, font ja strokeStyle. Seadete värskendamise või uuesti laadimise unustamine võib olla lihtne ja tulemuseks on ootamatud tulemused.
Liikumise loomine
Esimene näide ainult jookseb ja pöörab staatiline joonis lõuendil. Kõik see on hea, kuid tõeline lõbu algab siis, kui seate kiiruseks 60 kaadrit sekundis. Kell kaasaegsed brauserid funktsioonis requestAnimationFrame on lisandmoodul, mis sünkroniseerib joonise lähtekoodi brauseris liikuva joonisega. See suurendab tõhusust ja tagab sujuva sõidu. Renderduse sihtmärk peaks olema kood, mis liigub kiirusega 60 kaadrit sekundis.
var canvas = document.getElementById("example-canvas");
var kontekst = canvas.getContext("2d"); var loendur = 0; var rectWidth = 40; var rectHeight = 40; varxMovement; //Asetage ristkülik keskel ekraanist var y = (lõuend.kõrgus / 2) - (recHeight / 2); kontekst.fillStyle = "#91C0FF"; funktsioon draw() ( //Aja suurendamiseks on nutikamaid viise, kuid see on demonstreerimise eesmärgil counter++; //Lahe matemaatika allpool. Rohkem selgitusi koodile järgnevas tekstis. xMovement = Math.sin(counter / 25) * lõuend .width * 0,4 + canvas.width / 2 - rectWidth / 2; //Tühjendage eelmised joonistustulemused context.clearRect(0, 0, canvas.width, canvas.height); //Tegelikult joonistage lõuendile context.fillRect( xMovement, y, rectWidth, rectHeight); //Taotle, kui uus animatsiooniraam on saadaval, et seda funktsiooni uuesti kutsuda requestAnimationFrame(draw); ) draw();
matemaatika joonistus
Olge nüüd ettevaatlik, enne seda rääkisime programmeerimisest ja monitorile joonistamisest, kuid siin valmistasin midagi matemaatilist. Tunnistan, et olen matemaatikat alati armastanud (erinevalt paljudest teistest kunstnikest). Sellest armastusest hoolimata olen pettunud selles, kuidas seda koolis õpetatakse. Seda õpetatakse liiga formaalselt, mis võib olla hea matemaatikaõpetajale, kuid see kaotab põnevuse, huvi uurimistöö vastu ja pragmaatilisuse, millega saab palju huvitavat korda saata. Kuid on ka head uudised, programmeerijad ignoreerivad seda ja keskenduvad huvitavamatele asjadele.
Ja nüüd proovin kiiresti selgitada, kuidas koordinaatsüsteem töötab. Kasulik on mõista, kuidas matemaatiline funktsioon suudab tekitada liikumist. Alloleval pildil on interaktiivne koordinaatsüsteem. Pange tähele, et see pole ainult x-koordinaat. Minu joonistatud funktsioon on esitatud kujul (a*x+b)*c+d. Mängige diagrammi liuguriga ja näete, kuidas kõik need väärtused saavad diagrammi asukohta ja skaalat reguleerida.
Ja nüüd kirjutan oma valemi ümber vastavalt näidiskoodile, mis meil varem oli ja mida on lihtsam lugeda.
Var a = 1 / 25, //Muuda võnkumine toimuma palju aeglasemalt x = loendur, //Liikuge graafikul natuke iga kord, kui joonist () nimetatakse b = 0, //Graafi pole vaja ülespoole reguleerida või alla c = laius * 0,4, //Tee võnkumine nii laiaks kui veidi vähem kui pool lõuendist d = canvas.width / 2 - rectWidth / 2; //Muutke tsentreeritava ristküliku asukohta xMovement = Math.sin(a * x + b) * c + d;
Andmete sisestamine
Kui jätta kõrvale see, mida oleme praegu teinud, mõelge mõne minutiga, mida saate teha erinevaid seadmeid kasutaja sisend ruudu liigutamiseks lehel. Brauseris on saadaval palju valikuid, sealhulgas mikrofon, veebikaamera, hiir, klaviatuur ja mängupult. Saadaval võivad olla täiendavad pistikprogrammipõhised valikud, nagu Leap Motion või Kinect. WebSocketsi ja serveri abil saate linkida visualiseeringud omatehtud visualiseeringutega. tehnilisi vahendeid(Kas sa mõtled assistente?). Ühendage mikrofon Web Audio API-ga ja juhtige oma helipiksleid. Saate isegi luua veebikaamera liikumisanduri ja hirmutada virtuaalse kalaparve (tegin seda aastal viimane kord Flashis umbes viis aastat tagasi).
Nüüd, kui teil on idee, vaatame veel mõnda näidet. Üks ruut on igav, paneme rohkem ruute. Aga kõigepealt loome funktsiooni (koordinaatsüsteem), mis on meile siiski mitmes mõttes kasulik. Nimetagem seda punktiks. Üks nüanss, mis aitab meid objektide liikumisel, on see, et peame kasutama muud vektorit kui x ja y. Olen koostanud näidiskoodid klassi three.js Vector2. Vektori x ja vektoriga y on lihtsam töötada, kuid seal on palju mugavamaid võimalusi. Paremaks mõistmiseks, millest ma räägin, vaadake siia. (siin peaks link olema).
Kõikvõimas punkt
Need näited on pisut keerulisemad, kuna need hõlmavad objekte, kuid see on seda väärt. Tutvuge koodinäidistega, et mõista, kuidas uus Scene töötab, mis aitab kaasa lõuendimaalimise põhitõdedele. Meie uus punkt seal on marker, mis võimaldab juurdepääsu mis tahes muutujale, täpselt nagu lõuendi kontekstis.
Funktsioon Dot(x, y, stseen) ( vari speed = 0,5; this.color = "#000000"; this.size = 10; this.position = new THREE.Vector2(x,y); this.direction = new THREE .Vector2(kiirus * Math.random() - kiirus / 2, kiirus * Math.random() - kiirus / 2); see.stseen = stseen; )
Konstruktoriga töö alustamiseks konfigureerige Pointi jaoks selle töö ja määrake mõned tööks vajalikud muutujad. Ja jälle pöördume kolme.js vektori poole. 60 kaadrit sekundis mängides on oluline oma üksused eelkäivitada ja mitte taasesituse ajal uusi luua. See võib teie vaba mälu ära süüa ja muuta renderduse tüütuks. Samuti pange tähele, kuidas Dot edastab kaadri koopia viitena. See aitab sellel paremini töötada.
Dot.prototype = ( update: function() ( ... ), joonista: funktsioon() ( ... ) )
Ülejäänud osa koodist seadistatakse Punkti prototüübiobjektile, nii et igal uuel punktil on juurdepääs nendele meetoditele. Selgitan funktsioonist funktsioonini.
Värskendus: function(dt) ( this.updatePosition(dt); this.draw(dt); ),
Eraldan joonistuskoodi värskenduskoodist. See muudab objekti toetamise ja liigutamise palju lihtsamaks. Nii nagu MVC-skeem eraldab teie isikliku kontrolli ja loogilise vaate. Vektor dt on aja muutus millisekundites alates väljundist viimane värskendus. See nimi on mugav ja lühike ning tuleneb (ärge kartke) arvutustuletistest (arvutustuletis). See lahutab kaadrisagedusest teie liikumiskiiruse. Nii ei teki komplikatsioonide korral NES-stiilis aeglustumist. Kui su kiirus on liiga suur, siis langevad kaadrid välja, kuid kiirus jääb samaks.
UpdatePosition: function() ( //See on väike nipp muutuja loomiseks väljaspool renderdustsüklit //Silmuse sees mälu eraldamine on kallis. //Muutujale on juurdepääs ainult allolevale funktsioonile. var moveDistance = new THREE.Vector2(); //See on tegelik funktsioon return function(dt) ( moveDistance.copy(this.direction); moveDistance.multiplyScalar(dt); this.position.add(moveDistance); //Hoidke punkt ekraanil this.position.x = (this.position.x + this.scene.canvas.width) % this.scene.canvas.width; this.position.y = (see.positsioon.y + see.stseen .canvas.height) % this.scene.canvas.height; ) )(), //Pange tähele, et see funktsioon käivitatakse kohe ja tagastab erineva funktsiooni
See funktsioon on oma ülesehituselt pisut kummaline, kuid seda on lihtne kasutada. Mälu eraldamine koordinaatsüsteemis (funktsioonides) on tõesti kallis. MoveDistance'i saab määrata ühe korra ja kasutada funktsioonisüsteemi vajaduse korral taaskäivitamisel.
Seda vektorit kasutatakse ainult uue asukoha arvutamiseks ja see ei ole mõeldud kasutamiseks väljaspool funktsiooni. See on esimene matemaatiline vektor, mida kasutatakse. Nüüd korrutatakse vektori suund aja muutusega ja lisatakse seejärel positsioonile. Lõpus toimub mooduli tegevus, mis hoiab punkti ekraanil.
Draw: function(dt) ( //Hangi mugavuse huvides muutuja lühinimi var ctx = this.scene.context; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect(this.position.x, this .position.y, this.size, this.size); )
Ja lõpuks kõige lihtsam. Tehke koopia põhiobjekti kontekstist ja joonistage ristkülik (või midagi muud, mis iganes). Lihtsalt ristkülikut on ekraanile kõige lihtsam joonistada.
Siinkohal lisan uue punkti ja nimetan seda põhikonstruktoris see.dot = new Dot(x, y, this). Ja siis lisan põhivärskendusmeetodis this.dot.update(dt) ja üle ekraani liigub punkt.
Tore, et koodis natuke rohkem struktuuri kuid see ei muuda seda atraktiivsemaks. Siit algab tsükkel. Põhiobjektis loome uus objekt punktihaldur. Seda funktsiooni on mugav koguda eraldi objektile, kuna see on lihtsam ja puhtam, kuna modelleerimine muutub järjest keerulisemaks.
Var DotManager = funktsioon(punktide arv, stseen) ( this.dots = ; this.numberOfDots = numberOfDots; this.scene = stseen; for(var i=0; i< numberOfDots; i++) { this.dots.push(new Dot(Math.random() * this.canvas.width, Math.random() * this.canvas.height, this.scene)); } }; DotManager.prototype = { update: function(dt) { for(var i=0; i < this.numberOfDots; i++) { this.dots[i].update(dt); } } };
Nüüd loome mallis punkti värskendamise asemel DotManageri ja värskendame seda. Esiteks loome 5000 punkti.
Funktsioon Scene() ( ... this.dotManager = new DotManager(5000, this); ... ); Scene.prototype = ( ... värskendus: function(dt) ( this.dotManager.update(dt); ) ... );
See näeb kindlasti palju parem välja kui üks täpp. Nüüd on aeg hakata oma punktis värskendatud meetodit rohkem lisama. Kõik objekti koodi muudatused kajastuvad ekraani igas punktis. Ja siin hakkavad juhtuma imed. Kas mäletate ülaltoodud koordinaatide süsteemi? Kuidas oleks lainelise liikumise efekti seadmisega? Loome objektile Point jaoks muutuja wavePosition. Lõpuks lisame selle muutuja Y-positsioonile.
UpdateWave: function(dt, time) ( this.wavePosition = Math.sin(this.scene.currTime / 500 + this.position.x / this.scene.canvas.width * 4) * 20; )
Jah, see on veidi segane, kui see on kirjutatud ühele reale, nii et lisan teise versiooni, mis on tehtud nagu koordinaatsüsteemis.
Var a = 1 / 500, //Muutke võnkumine toimuma palju aeglasemalt x = this.scene.currTime, //Liikuge graafikul veidi iga kord, kui joonist() nimetatakse b = this.position.x / this. scene.canvas.width * 4, //Ei ole vaja graafikut üles või alla reguleerida c = 20, //Tee võnkumine nii laiaks kui veidi vähem kui pool lõuendist d = 0; //Muutke tsentreeritava ristküliku asukohta xMovement = Math.sin(a * x + b) * c + d;
Ma muretsen…
Veel üks väike puudutus. Ühevärviline on veidi igav, nii et lisame värvi.
Varhue = this.position.x / this.scene.canvas.width * 360; this.color = Utils.hslToFillStyle(toon, 50, 50, 0,5);
Määrake iga uue punkti jaoks selle esialgne asukoht ja toon horisontaalselt kogu lõuendil. Lisasin funktsiooni Utils.hslToFillStyle, see aitab veidi mõne sisendmuutuja teisendamiseks õigesti vormindatud fillStyle ahelaks. Asi läheb juba palju huvitavamaks. Täpid kogunevad lõpuks ühte kohta ja pärast nende juhuslikku hajutamist vikerkaareefekti ei teki. Jällegi on see näide liikuvast visualiseerimisest, millel on matemaatika või sisendväärtuste puudutus. Eelistan töötada värviga läbi värvi mudel HSL kui RGB, sest seda on lihtsam kasutada. RGB on veidi abstraktne.
Hiire kasutamine
Seni puudus tegelik kasutajakogemus.
Var Hiir = funktsioon(stseen) ( this.scene = stseen; this.position = new THREE.Vector2(-10000, -10000); $(window).mousemove(this.onMouseMove.bind(this)); ); Mouse.prototype = ( onMouseMove: function(e) ( if(typeof(e.pageX) == "number") ( this.position.x = e.pageX; this.position.y = e.pageY; ) else ( see.positsioon.x = -100000; see.positsioon.y = -100000; ) ) );
See lihtne objekt sisaldab erinevalt ülejäänud tööst hiirega töötamiseks värskendust. Värskendus seisneb selles, et vektori asukoht on sama mis liikuva hiire asukoht. Ülejäänud objektid võivad hiirevektori asukohast erineda, kui neile objektis viidatakse. Üks hoiatus, mille jätsin järelevalveta. Kui lõuendi laius ei vasta DOM-i piksli mõõtmetele, st. vastuseks lõuendi suuruse muutmisele või kõrge tihedusega pikslit (võrkkest) või kui lõuend ei asu vasakus ülanurgas. Hiire koordinaate tuleks vastavalt muuta.
Var Scene = function() ( ... see.hiir = new Mouse(this); ... );
Jääb vaid luua skeemi sees hiireobjekt. Nüüd, kui meil on hiir, saame panna täpid seda järgima.
Funktsioon Dot(x, y, stseen) ( ... this.attractSpeed = 1000 * Math.random() + 500; this.attractDistance = (150 * Math.random()) + 180; ... )
Lisasin punktile paar skalaari, et igaüks käituks teistest erinevalt, muutes protsessi realistlikumaks. Mängige nende väärtustega ja tunnete erinevust. Nüüd on kogu tähelepanu suunatud hiiremeetodile. See tuleb koos kommentaaridega veidi pikaks.
AttractMouse: function() ( //Jälle looge selle meetodi jaoks mõned privaatsed muutujad var vectorToMouse = new THREE.Vector2(), vectorToMove = new THREE.Vector2(); //See on tegelik avaliku meetodi tagastamise funktsioon(dt) ( var distanceToMouse, distanceToMove; //Hangi vektor, mis tähistab x ja y kaugust punktist hiireni //Vaadake kolme.js dokumentatsiooni, et saada lisateavet nende vektorite toimimise kohta vectorToMouse .copy(this.scene.mouse. position) .sub(this.position); //Hiire kauguse leidmine vektorist distanceToMouse = vectorToMouse.length(); //Kasutage punkti individuaalseid skalaarväärtusi liigutatud kauguse reguleerimiseks moveLength = dt * (this .attractDistance - distanceToMouse) / this.attractSpeed; //Liiguta punkti ainult siis, kui see tõmbab ligi if(moveLength > 0) ( //Muutke hiire vektori suurust soovitud liigutuspikkusega vektorToMove .copy(vectorToMouse) .divideScalar (distanceToMouse) .multiplyScalar(moveLength);//Lisage see kohe praegusesse positsiooni, mitte loosimisel kutsuge this.position.add(vectorToMove); ) ); )()
See meetod võib olla veidi segane, kui te pole vektormatemaatikas väga hea. Vektoreid saab hästi renderdada ja need võivad aidata kohviplekiga paberile kritseldada. Lihtsamalt öeldes näitab see funktsioon hiire ja punkti vahelist kaugust. Ja kui punkt liigub teisele punktile lähemale, mis põhineb sellel, kui lähedal ta juba teisele punktile on ja kui palju aega on möödunud. Selleks arvutatakse liikumiskaugus (tavaline skalaararv) ja suurendatakse seda arvu, normaliseerides punktivektori (vektori pikkusega 1), et see vastaks hiirele. Okei, viimast lauset ei pidanudki kirjutama selge keel, kuid see on alles algus.
kõige poolt oluline punkt minu jaoks on programmeerimise luule loomise protsess ja millegi uue loomise kunst. Soovitaksin mitte laskuda liiga detailidesse ja suurtesse projektidesse. Selle asemel korrake, katsetage, tähistage edu ja mõnikord ebaõnnestuge. Ükskord sain midagi, mis nägi välja nagu tükk kohutavast vikerkaarest. Panin suuri lootusi rekursiivsetele ringidele, kuid ma ei lasknud halbadel tulemustel end eksitada. Lõppkokkuvõttes on siin üksikasjalikult kirjeldatud kood uurimine väga objektorienteeritud stiilis, mis mulle kõige rohkem meeldib. Kohandage neid ideid vastavalt oma protsessile, tööriistadele ja tehnikale. Luuletused ei ole suur integreeritud süsteem, mistõttu on neid lihtne joonistada ja katsetada ilma suurte projektide tingimusi arvestamata.
Mõelge lõuendile kui pliiatsile, mis aitab teil oma suurepäraseid ideid ellu viia ja oma loomingul lennata.
.Tere kõigile! Täna tahaksin teile tutvustada Monosnapi rakenduste perekonda. Need rakendused on mõeldud kiire loomine ekraanipildid. Nüüd sisaldab see rida rakendusi Mac OS X-i, Windowsi, iPadi, iPhone'i jaoks ja hiljuti ka laiendust Google Chrome. Laiendus rakendab suurema osa töölauaversioonide funktsioonidest.
Põhimõtteliselt on laiendus mõeldud inimestele, kes pidevalt Internetis surfavad. Sulle võib meeldida mõni teine pilt 9gag või komistasite otsa huvitav disain saidile ja otsustasid selle oma projektis edasiseks kasutamiseks salvestada. Igal juhul on mõttekas kasutada töölauarakenduse asemel brauseri laiendust.
Laienduses on saadaval 4 ekraanipildi režiimi:
1) Jäädvustage valitud ala – standardne löök veebilehe spetsiaalne ala;
2) Capture Visible Part Of The Page – ekraanipilt lehe nähtavast osast;
3) Capture Full Page - hetktõmmis veebilehest täiskõrguses;
4) Smart Capture – kõige huvitavam režiim, mis võimaldab teil teha hetktõmmise HTML-plokist, mille kohal kursorit hõljutasite.
Redigeerimine
Pärast ekraanipildi loomist tehakse ettepanek seda redigeerida või kohe pilvesalvestusse üles laadida. Redaktoris saab kasutaja teatud aladele aktsente teha ja jätta pealdisi / kommentaare.
Tööriistad:
1) Pliiats (pintsel) - võimaldab joonistada kõveraid ja teha allkirju.
2) Joon (joon), ellips (ellips), ristkülik (ristkülik) - primitiivid, mis tõstavad esile ekraanipildi põhifragmente
3) Pildi hägusus (hägu) - hägustab pilti ja teeb seeläbi konfidentsiaalne teave loetamatu.
4) Nool (nool) - noolekujuline primitiivne, mis on mõeldud millelegi keskenduma.
5) Tekst (tekst) - pealdistele ja märkmetele.
6) Sild (mull) - kahe eelmise tööriista kombinatsioon (nool tekstiga), võimaldab teil osutada ekraanipildi võtmefragmendile ja jätta sellele kommentaar.
7) Pildi kärpimine (crop) – lõikab ekraanipildist välja ristkülikukujulise ala. Väga kasulik funktsioon, kui te ei vaja kogu ekraanipilti, vaid ainult ühte fragmenti sellest.
8) Palett (värvivalija) - lisaks standardvärvidele võimaldab kasutada ka mis tahes muud (sisestades HEX, RGB või HSB värviväärtused).
Redaktor toetab muuhulgas muudatuste jälgimist ja võimaldab muudatusi tagasi võtta (tagasi võtta) ja uuesti teha (uuesti teha), samuti ekraanipilti tühjendada, tagastades selle algne olek enne redigeerimist (pühkige).
Laadimine
Pilte pilve üleslaadimine on võimalik ilma loata (erinevalt Awesome Screenshotist säilitatakse neid hetkest terve kuu viimati vaadatud) või pärast teenusesse sisselogimist Facebooki või oma konto kaudu. Kõige tähtsam on see, et saate alati naasta ekraanipiltide redigeerimisrežiimi, nii et te ei pea ekraanipilti uuesti tegema.
Laienduse praegune versioon on alles algus ning seda uuendatakse ja arendatakse pidevalt. Loodame, et see on teile kasulik!
