Jika anda teruja dengan yang baru keupayaan Microsoft Edge, tetapi anda tidak mahu beralih kepadanya daripada pelayar biasa anda, saya faham. Walaupun Edge sudah tentu lebih pantas, lebih seksi dan lebih licin daripada internet Explorer ia tidak mempunyai banyak alat tambah dan sambungan seperti Chrome.

Berita baiknya ialah anda tidak perlu beralih daripada penyemak imbas semasa anda untuk memanfaatkan beberapa ciri baharu Edge. Anda boleh melukis pada halaman web, melihat artikel dalam mod bacaan skrin penuh dan juga mencari Google menggunakan suara anda tanpa meninggalkan Chrome kegemaran anda. Di samping itu, pasukan Google sentiasa berusaha untuk mempercepat dan menambah baik penyemak imbas mereka (mereka, sebagai contoh, telah meningkatkan penggunaan bateri, menurut siaran di Google+ oleh jurutera perisian kanan Peter Kasting).

Okey, Google.

Edge berpendapat ia adalah yang terbaik kerana ia menyepadukan dengan carian. pembantu suara Cortana. Tetapi anda boleh mendapatkan fungsi yang sama dalam Chrome, Google mempunyai ciri carian suara "Hey Google" sendiri.

Untuk mendayakan "Ok Google", klik butang menu dalam Chrome (butang "tiga baris" di penjuru kanan sebelah atas) dan pergi ke menu "Tetapan". Di bawah bahagian "Cari", tandai kotak di sebelah "Dayakan carian suara menggunakan arahan "Ok Google."

Anda kini boleh mengaktifkan Carian Suara Google dengan menyebut, "Ok Google" apabila anda berada dalam tab baharu atau apabila anda berada di Google.com. Selepas mengaktifkan carian suara, cuma suarakan soalan anda dan Google akan mendengar, menterjemah perkataan anda ke dalam teks dan mengembalikan hasil carian.

Coretan pada halaman web.

terbina dalam Fungsi tepi melukis adalah menyeronokkan, tetapi Edge bukan satu-satunya penyemak imbas yang mempunyai keupayaan sedemikian. Anda boleh menemui ciri serupa dalam Chrome dengan jumlah yang besar keupayaan dengan memasang sambungan Cat Web.

Ini mudah dilakukan, ikuti pautan di atas dan klik "Tambah ke Chrome". Setelah sambungan ditambahkan, anda akan melihat ikon palet cat di sebelah kanan bucu atas tingkap. Jika anda ingin melukis sesuatu pada halaman web, klik pada ikon ini dan alatan lukisan akan muncul.

Menggunakan alatan ini, anda boleh melukis garisan, menambah teks, memasukkan bentuk pra-buat dan mengisi kawasan dengan warna pada halaman web. Jika anda ingin menyimpan kerja anda, klik pada ikon kamera untuk mengambil tangkapan skrin.

Mod membaca.

Chrome tidak mempunyai terbina dalam mod skrin penuh membaca, tetapi sambungan Kebolehbacaan boleh mengalih keluar iklan dan elemen lain daripada halaman yang mengganggu bacaan yang selesa, serupa dengan mod bacaan dalam Edge.

Pergi ke halaman sambungan Kebolehbacaan dan klik Tambahkan pada Chrome. Anda akan melihat ikon yang kelihatan seperti kerusi merah di penjuru kanan sebelah atas tetingkap penyemak imbas anda. Klik ikon ini apabila anda ingin melihat halaman dalam format yang mudah dibaca dan pilih "Baca sekarang", sambungan akan cuba melukis semula halaman (ini berfungsi paling baik pada tapak dengan banyak teks).

Selalunya berlaku bahawa kita perlu membuat beberapa nota secara langsung pada skrin penyemak imbas, sebagai contoh, merakam video latihan atau membuat tangkapan skrin (snapshot) skrin.

Lebih-lebih lagi, sangat indah dan alat yang berguna bagaimana "Pensel skrin / berus skrin" (menurut pengarang tapak) boleh berguna dalam amalan harian, contohnya:

1. Untuk membuang bakat seni terkumpul anda serta-merta dan menangkapnya dalam fail imej PNG atau JPG baharu.

2. Untuk cepat melakar karikatur yang lucu atau lucu tanpa memuat turun gambar dan melancarkan Photoshop.

3. Untuk menambah imej pada skrin monitor dalam talian dengan beberapa frasa atau tulisan, serta banyak lagi "SUPAYA...".

Seni asli sedemikian boleh dikongsi dengan rakan-rakan, diterbitkan dalam dalam rangkaian sosial dan lain-lain. Dan dengan bantuan alat Lukis Skrin (melukis pada skrin), mudah untuk membuat lukisan dan karikatur paling lucu dalam talian, kemudian simpan kerja ini untuk ketawa bersama rakan atau rakan sekerja.

Secara umum, anda tidak pernah tahu siapa yang memerlukan atau mahu melukis pada skrin penyemak imbas mereka dan sebabnya. Walau apa pun, kami tidak akan campur tangan, tetapi hanya akan membantu melaksanakannya di SINI dan sekarang juga.

Melukis pada Skrin: Keperluan Asas

1. Anda telah memasang dan membuka pelayar Mozilla Firefox.
2. Anda mempunyai papan kekunci dan tetikus.
3. Anda mempunyai keinginan yang kuat untuk melukis terus dalam tetingkap penyemak imbas.

Jika semua perkara ini benar, maka kita boleh meneruskan ke arahan langkah demi langkah!

Melukis pada skrin dalam pelayar Firefox: arahan langkah demi langkah

2. Selepas muat turun alat tambah (dalam beberapa saat), anda perlu memasangnya. Dalam kotak dialog yang terbuka, klik "Pasang Sekarang."

3. Selepas pemasangan sepantas kilat yang singkat, kami akan diminta untuk memulakan semula penyemak imbas, yang sepatutnya kami setujui. Kami memulakan semula penyemak imbas dengan mengklik butang pop timbul khas atau melakukannya secara manual (tutup Mozilla dan buka semula), tetapi FireFox mesti dimulakan semula. Dan selepas itu perubahan kami akan berkuatkuasa.

4. Untuk melancarkan Berus Skrin, pensel skrin, skrin penyunting teks... (panggil apa sahaja yang anda suka)", anda perlu membuka panel tambahan, yang terletak di:

"LIHAT" - "BAR ALAT" - "PANEL TAMBAHAN"

Untuk pelancaran cepat anda boleh menggunakan kombinasi kekunci "Ctrl+\"

5. Dalam panel tambahan yang terbuka, kami melihat pensel skrin kami - logo Program skrin Lukis - melukis pada skrin dalam penyemak imbas. Klik padanya dan fahami fungsinya.

6. Seperti yang anda lihat, di sini anda boleh:

— tukar saiz berus ( panel digital);
— tukar warna berus (klik pada medan warna) ();
— masukkan teks (Bahasa Rusia atau Inggeris, warna dan saiz yang berbeza — butang khas);
— simpan keputusan dalam gambar (cakera liut);
— tetapkan semula tetingkap (helaian kosong);
- padamkan lukisan anda (pemadam).

Adakah anda telah melukis dalam talian untuk masa yang lama, tidak mengira grafiti VKontakte? Apa yang saya akan tulis adalah jauh dari grafiti di rangkaian sosial, lapisan dengan mod campuran, kepekaan tekanan pen, berus canggih... ini sama sekali tidak untuk "PREVEDS" di dinding jiran )

pengenalan

Saya pernah mempunyai idea dan mengumpulkan senarai besar editor dalam talian di mana saya sekurang-kurangnya boleh melukis sesuatu. Kemudian ia adalah perkara baharu dan ia hanya menarik untuk melihat apa yang orang datangkan... Jika ingatan saya betul, terdapat kira-kira empat puluh daripada mereka, termasuk pelbagai alat lukisan berbentuk cat "kanak-kanak". Saya mengumpulnya dan inilah dia permohonan praktikal semua sampah dari senarai ini tidak pernah ditemui.

Kemudian, apabila saya menjalankan blog saya (yang tidak lagi wujud dan tidak akan wujud lagi), saya membuat pilihan beberapa editor di mana ia mungkin untuk melukis kerja yang lebih kurang siap. Sudah dalam senarai ini terdapat kira-kira 5-7 daripadanya (saya tidak ingat lagi).

Anehnya, selepas hampir dua tahun sejak itu, saya masih mempunyai satu dalam penanda buku saya perkhidmatan yang menarik sejak senarai terakhir saya. Setelah melalui "pemilihan semula jadi" seperti ini, dia berjaya bertahan hingga ke hari ini, dan saya dikunjungi dengan agak ceria... ya, sekurang-kurangnya sebulan sekali, itu pasti: D.

Apa? di mana?

Jadi apakah perkhidmatan ini? - anda bertanya, 2draw.net - Saya akan menjawab: D.

Walaupun penampilannya tidak menarik (menurut pendapat saya), fungsi laman web ini sangat baik. Terdapat blog, galeri karya pengguna, forum, wiki... dan, sebenarnya, bilik lukisan.

Sekarang perkara pertama yang kita perlukan ialah memasang pemacu tablet (pen) untuk penyemak imbas, supaya pen boleh dengan mahir memindahkan tekanan ke aplikasi dalam penyemak imbas. Muat turun pemacu untuk

tulis kod yang bagus- ia adalah satu keseronokan, tetapi sukar untuk berkongsi keseronokan ini dengan pengaturcara lain, apatah lagi mereka yang bukan pengaturcara. Pada masa lapang saya dari kerja dan meluangkan masa bersama keluarga, saya sedang mencari idea tentang cara memprogramkan puisi menggunakan elemen kanvas untuk dilukis dalam penyemak imbas.

Terdapat sejumlah besar istilah yang menerangkan eksperimen visual pada komputer, gambar rajah kod, demo, seni interaktif dan sebagainya. Untuk menerangkan proses ini, saya memutuskan pada istilah puisi pengaturcaraan. Puisi ialah sekeping prosa yang digilap untuk bersinar, ringan, ringkas dan estetik. Ini bukan lakaran separuh siap idea dalam buku lakaran, tetapi sesuatu yang koheren dipersembahkan kepada penonton untuk kesenangan mereka. Puisi bukanlah alat, tetapi ia hidup untuk membangkitkan emosi.

Saya telah membaca banyak buku tentang matematik, Teknologi komputer, fizik dan biologi untuk kesenangan anda sendiri. Dan apa yang saya sedar dengan cepat ialah jika saya bercakap tentang idea, orang cepat bosan dengannya. Malah, saya boleh mengambil idea yang saya rasa sangat menarik dan dengan cepat membuatkan seseorang berasa berminat, walaupun orang itu tidak tahu tentang pengekodan atau cara ia berfungsi. Anda tidak perlu memahami beberapa pemikiran falsafah yang rumit atau pengiraan pengiraan untuk memprogramkan puisi. Apa yang anda perlukan ialah keinginan untuk melihat sesuatu yang hidup dan bernafas pada skrin anda. Kod dan contoh yang saya tinggalkan di bawah akan membantu anda memahami cara sebenarnya menjalankan proses yang cepat dan tidak rumit ini.

Perkara utama ialah mencipta puisi harus tetap ringkas dan mudah. Tidak perlu menghabiskan tiga bulan membina satu, walaupun demo yang sangat keren. Sebaliknya, cipta 10 puisi yang akan membantu menghidupkan idea anda. Tulis kod yang menarik dan jangan takut gagal.

Pengenalan kepada Kanvas

Ringkasnya, kanvas adalah 2 dimensi elemen raster imej, yang terdapat dalam DOM ( model objek dokumen) dan boleh dilukis di sana. Anda boleh melukis kedua-duanya dalam konteks 2d dan dalam konteks WebGL. Konteksnya ialah JavaScript yang kami gunakan untuk mengakses alat lukisan. Proses JavaScript yang tersedia untuk kanvas sangat jelas, tidak seperti yang tersedia untuk SVG. Sebarang proses yang dipanggil pada elemen secara keseluruhan, dan bukannya sesuatu yang dilukis ke dalam kanvas, adalah sama seperti unsur biasa Imej. Di sini contoh asas kanvas:

Var kanvas = document.getElementById("contoh-kanvas"); var context = canvas.getContext("2d"); //Lukis konteks segi empat tepat biru.fillStyle = "#91C0FF"; context.fillRect(100, // x 100, // y 400, // lebar 200 // tinggi); //Lukis beberapa konteks teks.fillStyle = "#333"; context.font = "18px Helvetica, Arial"; context.textAlign = "pusat"; context.fillText("Dunia kanvas yang indah", // teks 300, // x 200 // y);

Tidak ada yang rumit di sini, anda boleh bermula dengan mudah. Satu-satunya perkara yang boleh menjadi sedikit mengelirukan ialah konteks yang mesti dikonfigurasikan dengan tetapan seperti fillStyle, lineWidth, font dan strokeStyle sebelum lukisan sebenar digunakan. Ia boleh menjadi mudah untuk melupakan mengemas kini atau memuat semula tetapan dan berakhir dengan hasil yang tidak dijangka.

Mencipta pergerakan

Contoh pertama hanya berjalan dan berpusing lukisan statik ke dalam kanvas. Ini semua baik dan bagus, tetapi keseronokan sebenar bermula apabila anda menetapkan kelajuan kepada 60 bingkai sesaat. U pelayar moden Terdapat tambahan dalam fungsi requestAnimationFrame yang menyegerakkan kod lukisan sumber dengan lukisan yang bergerak dalam penyemak imbas. Ini meningkatkan kecekapan dan memberikan pergerakan yang lancar. Sasaran pemaparan hendaklah kod yang bergerak pada 60 bingkai sesaat.

var canvas = document.getElementById("contoh-kanvas");

Konteks Var = canvas.getContext("2d"); pembilang var = 0; var rectWidth = 40; var rectHeight = 40; var xPergerakan; //Letakkan segi empat tepat dalam pertengahan daripada skrin var y = (canvas.height / 2) - (rectHeight / 2); context.fillStyle = "#91C0FF"; function draw() ( //Terdapat cara yang lebih bijak untuk menambah masa, tetapi ini adalah untuk tujuan demonstrasi counter++; //Cool matematik di bawah. Penjelasan lanjut dalam teks berikut kod. xMovement = Math.sin(counter / 25) * kanvas .width * 0.4 + canvas.width / 2 - rectWidth / 2; //Kosongkan hasil lukisan sebelumnya context.clearRect(0, 0, canvas.width, canvas.height); //Sebenarnya lukis pada kanvas context.fillRect( xMovement, y, rectWidth, rectHeight); //Minta sebaik sahaja bingkai animasi baharu tersedia untuk memanggil fungsi ini sekali lagi requestAnimationFrame(draw); ) draw();

Lukisan matematik

Sekarang berhati-hati, sebelum ini kita bercakap tentang pengaturcaraan dan lukisan pada monitor, tetapi di sini saya telah menyediakan sesuatu yang matematik. Saya mengaku bahawa saya sentiasa menyukai matematik (tidak seperti artis lain). Walaupun cinta ini, saya kecewa dengan cara ia diajar di sekolah. Ia diajar terlalu formal, yang mungkin bagus untuk guru matematik, tetapi ia kehilangan keseronokan, penerokaan dan pragmatisme yang boleh digunakan untuk mencapai begitu banyak perkara menarik. Tetapi ada juga berita baik, pengaturcara tidak memberi perhatian kepada perkara ini dan menumpukan perhatian kepada perkara yang lebih menarik.

Sekarang saya akan cuba menerangkan dengan cepat bagaimana sistem koordinat berfungsi. Ini akan membantu dalam memahami caranya fungsi matematik boleh mencipta pergerakan. Gambar di bawah menunjukkan sistem koordinat interaktif. Sila ambil perhatian bahawa terdapat bukan sahaja koordinat x. Fungsi yang saya lukis diwakili sebagai (a*x+b)*c+d. Main-main dengan peluncur pada graf dan anda akan melihat bagaimana setiap nilai ini boleh melaraskan kedudukan dan skala graf.

Sekarang saya akan menulis semula formula saya menggunakan kod sampel yang kami ada sebelum ini dan yang akan lebih mudah dibaca.

Var a = 1 / 25, //Jadikan ayunan berlaku lebih perlahan x = counter, //Gerak sepanjang graf sedikit setiap kali draw() dipanggil b = 0, //Tidak perlu melaraskan graf ke atas atau bawah c = lebar * 0.4, //Jadikan ayunan selebar kurang daripada separuh kanvas d = kanvas.lebar / 2 - rectWidth / 2; //Tweak kedudukan segi empat tepat untuk dipusatkan xPergerakan = Math.sin(a * x + b) * c + d;

Input data

Mengetepikan apa yang telah kami lakukan buat masa ini, luangkan masa beberapa minit untuk berfikir tentang perkara yang boleh anda lakukan pelbagai peranti input pengguna untuk mengalihkan segi empat sama dalam halaman. Terdapat banyak pilihan yang tersedia dalam pelayar termasuk mikrofon, kamera web, tetikus, papan kekunci dan pad permainan. Pilihan terkawal pemalam tambahan mungkin tersedia, seperti Leap Motion atau Kinect. Menggunakan WebSockets dan pelayan anda boleh memautkan visualisasi kepada yang dibuat di rumah cara teknikal(maksudnya pembantu?). Sambungkan mikrofon anda ke API Audio Web dan suapan piksel audio anda. Anda juga boleh membina penderia gerakan daripada kamera web dan menakutkan sekumpulan ikan maya (saya melakukan ini dalam kali terakhir dalam Flash kira-kira lima tahun lalu).

Sekarang setelah anda mempunyai idea anda, mari lihat beberapa lagi contoh. Satu segi empat sama membosankan, mari masukkan lebih banyak petak. Tetapi pertama sekali, mari kita cipta satu fungsi (sistem koordinat) yang akan berguna kepada kita dalam banyak cara. Mari kita panggil ia Point. Satu nuansa yang akan membantu kita bekerja dengan objek bergerak ialah kita perlu menggunakan vektor selain daripada x dan y. Saya telah menyusun kod sampel ke dalam kelas Vector2 three.js. Lebih mudah untuk bekerja dengan vektor x dan vektor y, tetapi terdapat banyak pilihan yang lebih mudah. Untuk lebih memahami perkara yang kita bincangkan, lihat di sini. (mesti ada pautan di sini).

Titik yang maha kuasa

Contoh-contoh ini akan menjadi lebih rumit sedikit kerana ia melibatkan objek, tetapi ia berbaloi. Lihat contoh kod untuk memahami cara Scene baharu berfungsi, yang akan membantu anda dengan asas lukisan kanvas. kami Titik baharu akan ada penanda untuk mempunyai akses kepada mana-mana pembolehubah, sama seperti dalam konteks kanvas.

Fungsi Dot(x, y, scene) ( var speed = 0.5; this.color = "#000000"; this.size = 10; this.position = new THREE.Vector2(x,y); this.direction = new TIGA .Vector2(speed * Math.random() - speed / 2, speed * Math.random() - speed / 2); this.scene = scene; )

Untuk mula bekerja dengan pembina, konfigurasi operasinya dikonfigurasikan untuk Point dan beberapa pembolehubah yang diperlukan untuk operasi ditetapkan. Dan sekali lagi kita beralih kepada vektor three.js. Apabila bermain pada 60fps, adalah penting untuk melancarkan item anda lebih awal dan tidak mencipta item baharu semasa main balik. Ini boleh memakan memori yang tersedia dan membuat visualisasi anda bergelora. Juga, perhatikan bagaimana Titik menghantar salinan bingkai dengan rujukan. Ini membantu untuk berfungsi dengan lebih jelas.

Dot.prototype = ( kemas kini: function() ( ... ), draw: function() ( ... ) )

Semua kod selebihnya akan dipasang pada objek prototaip Point supaya setiap Point baharu akan mempunyai akses kepada kaedah ini. Saya akan menerangkan fungsi demi fungsi.

Kemas kini: function(dt) ( this.updatePosition(dt); this.draw(dt); ),

Saya memisahkan kod lukisan daripada kod kemas kini. Ini menjadikannya lebih mudah untuk menyokong dan menggerakkan objek. Sama seperti reka bentuk MVC, ia memisahkan kawalan peribadi anda daripada pandangan logik anda. Vektor dt ialah perubahan masa dalam milisaat sejak output kemaskini terakhir. Nama ini mudah dan pendek dan berasal daripada (jangan risau) derivatif kalkulus (derivatif pengiraan). Ia menolak kelajuan pergerakan anda daripada kadar bingkai anda. Dengan cara ini anda tidak akan mengalami kelembapan gaya NES jika keadaan menjadi sukar. Jika kelajuan anda terlalu tinggi, ia akan berlaku bahawa bingkai akan dilangkau, tetapi kelajuan akan tetap sama.

UpdatePosition: function() ( //Ini adalah helah kecil untuk mencipta pembolehubah di luar gelung pemaparan //Memang mahal untuk memperuntukkan memori di dalam gelung. //Pembolehubah hanya boleh diakses oleh fungsi di bawah. var moveDistance = THREE.Vector2(); //Ini ialah fungsi pulangan sebenar(dt) ( moveDistance.copy(this.direction); moveDistance.multiplyScalar(dt); this.position.add(moveDistance); //Kekalkan titik pada skrin this.position.x = (this.position.x + this.scene.canvas.width) % this.scene.canvas.width; this.position.y = (this.position.y + this.scene .canvas.height) % this.scene.canvas.height; ) )(), //Perhatikan bahawa fungsi ini segera dilaksanakan dan mengembalikan fungsi yang berbeza

Fungsi ini agak pelik dalam strukturnya, tetapi mudah digunakan. Ia benar-benar mahal untuk memperuntukkan memori dalam sistem koordinat (fungsi). MoveDistance boleh ditetapkan sekali dan digunakan apabila memulakan semula fungsi sistem apabila diperlukan.

Vektor ini digunakan hanya untuk mengira kedudukan baharu dan tidak bertujuan untuk berfungsi di luar fungsi. Ini adalah vektor matematik pertama yang digunakan. Sekarang arah vektor didarabkan berbanding dengan perubahan masa, dan kemudian ditambah pada kedudukan. Pada akhirnya, tindakan modul berlaku, yang memegang titik pada skrin.

Draw: function(dt) ( //Dapatkan nama pembolehubah pendek untuk kemudahan var ctx = this.scene.context; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect(this.position.x, this .kedudukan.y, ini.saiz, ini.saiz); )

Dan pada akhirnya bahagian yang paling mudah. Buat salinan konteks objek utama dan lukis segi empat tepat (atau sesuatu yang lain, tidak mengapa). Cuma segi empat tepat adalah yang paling mudah untuk dilukis pada skrin.

Pada ketika ini saya menambah Dot baharu dan memanggilnya this.dot = new Dot(x, y, this) dalam pembina utama. Dan kemudian dalam kaedah kemas kini utama saya menambah this.dot.update(dt) dan satu titik kelihatan bergerak merentasi skrin.

Ia bagus bahawa terdapat sedikit dalam kod lebih banyak struktur, tetapi ia tidak menjadikannya lebih menarik. Di sinilah kitaran bermula. Dalam objek utama kita akan buat objek baru DotManager. Adalah mudah untuk mengumpul fungsi ini dalam objek yang berasingan kerana ia lebih mudah dan bersih apabila pemodelan menjadi semakin kompleks.

Var DotManager = function(numberOfDots, scene) ( this.dots = ; this.numberOfDots = numberOfDots; this.scene = scene; 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); } } };

Kini dalam templat, bukannya mengemas kini Dot, kami mencipta dan mengemas kini DotManager. Mula-mula, mari buat 5000 mata.

Function Scene() ( ... this.dotManager = new DotManager(5000, this); ... ); Scene.prototype = ( ... kemas kini: function(dt) ( this.dotManager.update(dt); ) ... );

Ia pasti kelihatan jauh lebih baik daripada satu titik. Sekarang adalah masa untuk mula menambah lebih banyak kaedah yang dikemas kini di Point anda. Sebarang perubahan dalam kod objek akan ditunjukkan pada setiap titik pada skrin. Dan di sinilah keajaiban mula berlaku. Ingat sistem koordinat di atas? Bagaimana pula dengan mencipta kesan riak? Kami akan mencipta pembolehubah wavePosition untuk objek Point. Akhir sekali, kami akan menambah pembolehubah ini ke kedudukan Y.

UpdateWave: fungsi(dt, masa) ( this.wavePosition = Math.sin(this.scene.currTime / 500 + this.position.x / this.scene.canvas.width * 4) * 20; )

Ya, ia agak mengelirukan apabila ia ditulis pada satu baris, jadi saya melampirkan versi lain, yang dibuat seperti dalam sistem koordinat.

Var a = 1 / 500, //Jadikan ayunan berlaku jauh lebih perlahan x = this.scene.currTime, //Gerak sepanjang graf sedikit setiap kali draw() dipanggil b = this.position.x / this. scene.canvas.width * 4, //Tidak perlu melaraskan graf ke atas atau bawah c = 20, //Jadikan ayunan selebar kurang daripada separuh kanvas d = 0; //Tweak kedudukan segi empat tepat untuk dipusatkan xPergerakan = Math.sin(a * x + b) * c + d;

Saya risau…
Satu lagi sentuhan kecil. Monokrom agak membosankan, jadi mari kita tambah sedikit warna.

Var hue = this.position.x / this.scene.canvas.width * 360; this.color = Utils.hslToFillStyle(hue, 50, 50, 0.5);

Untuk setiap Titik baharu, tetapkan kedudukan awalnya dan tetapkan teduh di sepanjang kanvas mendatar. Saya telah menambah fungsi Utils.hslToFillStyle, yang akan membantu sedikit untuk menukar beberapa pembolehubah input kepada rantai fillStyle yang diformat dengan betul. Perkara sudah menjadi lebih menarik. Titik-titik itu akhirnya akan berkumpul di satu tempat dan tidak akan ada lagi kesan pelangi selepas ia bertaburan secara huru-hara. Sekali lagi, ini ialah contoh visualisasi bendalir dengan beberapa matematik atau input. Saya lebih suka bekerja dengan warna melalui model warna HSL daripada RGB kerana ia lebih mudah digunakan. RGB agak abstrak.

Menggunakan tetikus

Tiada pengalaman pengguna sebenar setakat ini.

Var Mouse = function(scene) ( this.scene = scene; this.position = new THREE.Vector2(-10000, -10000); $(window).mousemove(this.onMouseMove.bind(this)); ); Mouse.prototype = ( onMouseMove: function(e) ( if(typeof(e.pageX) == "nombor") ( this.position.x = e.pageX; this.position.y = e.pageY; ) else ( this.position.x = -100000; this.position.y = -100000; ) ) );

Objek ringkas ini merangkum kemas kini kepada operasi tetikus, berbanding dengan kerja yang lain. Kemas kini ialah kedudukan vektor sepadan dengan kedudukan tetikus bergerak. Selebihnya objek mungkin berbeza daripada kedudukan vektor tetikus jika ia dirujuk dalam objek. Satu kaveat saya tinggalkan tidak diendahkan. Jika lebar kanvas tidak sepadan dengan dimensi piksel DOM, i.e. sebagai tindak balas kepada perubahan dalam saiz kanvas atau ketumpatan tinggi piksel (retina), atau jika kanvas tidak terletak di sudut kiri atas. Koordinat tetikus mesti diubah dengan sewajarnya.

Var Scene = function() ( ... this.mouse = new Mouse(this); ... );

Apa yang tinggal ialah mencipta objek tetikus di dalam rajah. Sekarang kita mempunyai tetikus, kita boleh membuat titik mengikutinya.

Fungsi Dot(x, y, scene) ( ... this.attractSpeed ​​​​= 1000 * Math.random() + 500; this.attractDistance = (150 * Math.random()) + 180; ... )

Saya menambah beberapa nilai skalar ke titik supaya setiap satu berkelakuan berbeza daripada yang lain, menjadikan proses lebih realistik. Main dengan nilai-nilai ini dan anda akan rasai perbezaannya. Sekarang mari kita fokus pada kaedah tetikus. Dah lama sikit dengan komen.

AttractMouse: function() ( //Sekali lagi, buat beberapa pembolehubah persendirian untuk kaedah ini var vectorToMouse = new THREE.Vector2(), vectorToMove = new THREE.Vector2(); //Ini ialah fungsi pulangan kaedah awam sebenar(dt) ( var distanceToMouse, distanceToMove; //Dapatkan vektor yang mewakili jarak x dan y dari titik ke tetikus //Lihat dokumentasi three.js untuk mendapatkan maklumat lanjut tentang cara vektor ini berfungsi vectorToMouse .copy(this.scene.mouse. position) .sub(this.position); //Dapatkan jarak ke tetikus dari vektor distanceToMouse = vectorToMouse.length(); //Gunakan nilai skalar individu untuk titik untuk melaraskan jarak yang digerakkan moveLength = dt * (this .attractDistance - distanceToMouse) / this.attractSpeed; //Hanya alihkan titik jika ia tertarik jika(moveLength > 0) ( //Ubah saiz vektor pada tetikus kepada panjang pergerakan yang diingini vectorToMove .copy(vectorToMouse) .divideScalar (distanceToMouse).multiplyScalar(moveLength);//Teruskan dan tambahkannya pada kedudukan semasa sekarang, dan bukannya dalam cabutan panggil this.position.add(vectorToMove); ) ); )()

Kaedah ini mungkin sedikit mengelirukan jika anda tidak begitu mahir dalam matematik vektor. Vektor boleh divisualisasikan dengan baik dan boleh membantu anda menconteng pada kertas bernoda kopi. Ringkasnya, fungsi ini menunjukkan jarak antara tetikus dan titik. Dan apabila satu titik bergerak lebih dekat ke titik lain, yang berdasarkan sejauh mana ia sudah dekat dengan titik lain dan berapa lama masa telah berlalu. Ini dilakukan dengan mengira jarak pergerakan (angka skalar biasa), dan meningkatkan angka ini dengan menormalkan vektor titik (vektor panjang 1) bertepatan dengan tetikus. Okay, ayat terakhir itu tidak perlu ditulis. dalam bahasa mudah, tetapi ini hanyalah permulaan.

Paling banyak perkara penting bagi saya adalah proses mencipta puisi pengaturcaraan dan seni mencipta sesuatu yang baru. Saya akan menasihatkan anda untuk tidak mendalami butiran dan projek besar. Sebaliknya, ulangi, uji, raikan kejayaan, dan kadangkala gagal. Suatu hari saya berakhir dengan apa yang kelihatan seperti sekeping pelangi yang menyeramkan. Saya mempunyai harapan yang tinggi untuk bulatan rekursif, tetapi saya tidak membiarkan keputusan yang buruk menghalang saya daripada laluan saya. Akhirnya, kod yang telah diperincikan di sini ialah penerokaan dalam gaya yang sangat berorientasikan objek, yang paling saya suka. Sesuaikan idea ini dengan proses, alatan dan teknik anda sendiri. Pantun bukanlah sistem bersepadu yang besar, jadi ia mudah untuk dilukis dan bereksperimen dengannya tanpa mengambil kira syarat projek besar.

Fikirkan kanvas sebagai pensel yang akan membantu anda mengeluarkan idea hebat anda dan membiarkan ciptaan anda terbang.

.

Hai semua! Hari ini saya ingin memperkenalkan anda kepada keluarga aplikasi Monosnap. Aplikasi ini direka untuk penciptaan cepat tangkapan skrin Pada masa ini baris tersebut termasuk aplikasi untuk Mac OS X, Windows, iPad, iPhone dan, lebih baru-baru ini, sambungan untuk Google Chrome. Sambungan melaksanakan kebanyakan kefungsian versi desktop.

Pada asasnya, sambungan direka untuk orang yang sentiasa melayari Internet. Anda mungkin suka gambar lain dengan 9gag atau adakah anda terjumpa reka bentuk yang menarik tapak dan memutuskan untuk menyimpannya untuk kegunaan masa depan dalam projek mereka. Walau apa pun, masuk akal untuk menggunakan sambungan penyemak imbas dan bukannya aplikasi desktop.

Sambungan mempunyai 4 mod untuk mengambil tangkapan skrin:

1) Tangkap Kawasan Terpilih - pukulan standard kawasan khusus halaman web;
2) Tangkap Bahagian Kelihatan Halaman - tangkapan skrin bahagian halaman yang kelihatan;
3) Tangkap Halaman Penuh - petikan tinggi penuh halaman web;
4) Tangkap Pintar - mod yang paling menarik, ia membolehkan anda mengambil gambar blok HTML yang anda tuding.

Mengedit

Selepas membuat tangkapan skrin, anda ditawarkan untuk mengeditnya atau memuat naiknya dengan segera ke storan awan. Dalam editor, pengguna boleh menyerlahkan kawasan tertentu dan meninggalkan inskripsi/komen.

Alatan:

1) Pen (berus) - membolehkan anda melukis lengkung dan membuat tandatangan.
2) Garisan, elips, segi empat tepat - primitif yang digunakan untuk menyerlahkan serpihan utama tangkapan skrin
3) Imej kabur (kabur) - mengaburkan imej dan dengan itu menjadikan maklumat sulit tidak boleh dibaca.
4) Anak panah (anak panah) - primitif dalam bentuk anak panah, direka untuk menumpukan perhatian pada sesuatu.
5) Teks (teks) - untuk inskripsi dan nota.
6) Inskripsi (gelembung) - gabungan dua alat sebelumnya (anak panah dengan teks), membolehkan anda menunjuk ke serpihan utama tangkapan skrin dan meninggalkan komen padanya.
7) Pemotongan imej (crop) - memotong kawasan segi empat tepat daripada tangkapan skrin. sangat ciri yang berguna, jika anda tidak memerlukan keseluruhan tangkapan skrin, tetapi hanya satu serpihan daripadanya.
8) Palet (pemetik warna) - sebagai tambahan kepada warna standard, membolehkan anda menggunakan mana-mana yang lain (dengan memasukkan nilai warna HEX, RGB atau HSB).

Antara lain, editor menyokong penjejakan perubahan dan membolehkan anda membuat asal (buat asal) dan membuat semula (buat semula) perubahan, serta mengosongkan tangkapan skrin dengan mengembalikannya ke keadaan asal sebelum menyunting (lap).

Memuatkan

Memuat naik imej ke awan boleh dilakukan tanpa kebenaran (tidak seperti Tangkapan Skrin Hebat, ia akan disimpan selama sebulan penuh dari saat ini terakhir dilihat), atau selepas log masuk ke perkhidmatan melalui Facebook atau akaun anda. Apa yang penting ialah anda sentiasa boleh kembali ke mod pengeditan tangkapan skrin, jadi anda tidak perlu mengambil tangkapan skrin sekali lagi.

Versi semasa sambungan hanyalah versi permulaan dan akan sentiasa dikemas kini dan dibangunkan. Kami harap anda mendapati ia berguna!