मालवेअर हे अनाहूत किंवा धोकादायक प्रोग्राम आहेत जे...
.
सर्व नमस्कार! आज मी तुम्हाला मोनोस्नॅप ऍप्लिकेशन्सच्या कुटुंबाची ओळख करून देऊ इच्छितो. हे ॲप पटकन स्क्रीनशॉट घेण्यासाठी डिझाइन केलेले आहेत. या ओळीत आता Mac OS X, Windows, iPad, iPhone आणि अगदी अलीकडे, Google Chrome साठीच्या विस्तारासाठी अनुप्रयोग समाविष्ट आहेत. विस्तार डेस्कटॉप आवृत्त्यांची बहुतेक कार्यक्षमता लागू करतो.
मूलभूतपणे, विस्तार अशा लोकांसाठी डिझाइन केले आहे जे सतत इंटरनेट सर्फ करतात. तुम्हाला आणखी एक चित्र आवडेल 9 गॅगकिंवा तुम्हाला एक मनोरंजक वेबसाइट डिझाइन भेटले आणि ते तुमच्या प्रोजेक्टमध्ये नंतर वापरण्यासाठी जतन करण्याचे ठरवले. कोणत्याही परिस्थितीत, डेस्कटॉप अनुप्रयोगाऐवजी ब्राउझर विस्तार वापरणे अर्थपूर्ण आहे.
विस्तारामध्ये स्क्रीनशॉट घेण्यासाठी 4 मोड आहेत:
1) निवडलेले क्षेत्र कॅप्चर करा - वेब पृष्ठाच्या निवडलेल्या क्षेत्राचा मानक स्नॅपशॉट;
2) पृष्ठाचा दृश्यमान भाग कॅप्चर करा - पृष्ठाच्या दृश्यमान भागाचा स्क्रीनशॉट;
3) पूर्ण पृष्ठ कॅप्चर करा - वेब पृष्ठाचा पूर्ण-उंचीचा स्नॅपशॉट;
4) स्मार्ट कॅप्चर - सर्वात मनोरंजक मोड, तो तुम्हाला तुम्ही फिरवत असलेल्या HTML ब्लॉकचा फोटो घेण्यास अनुमती देतो.
संपादन
स्क्रीनशॉट तयार केल्यानंतर, तुम्हाला तो संपादित करण्याची किंवा ताबडतोब क्लाउड स्टोरेजवर अपलोड करण्याची ऑफर दिली जाते. संपादकामध्ये, वापरकर्ता विशिष्ट क्षेत्रे हायलाइट करू शकतो आणि शिलालेख/टिप्पण्या देऊ शकतो.
साधने:
1) पेन (ब्रश) - तुम्हाला वक्र काढण्याची आणि स्वाक्षरी करण्यास अनुमती देते.
2) रेषा, लंबवर्तुळ, आयत - स्क्रीनशॉटचे मुख्य तुकडे हायलाइट करण्यासाठी वापरलेले आदिम
3) प्रतिमा अस्पष्ट (अस्पष्ट) - प्रतिमा अस्पष्ट करते आणि त्यामुळे गोपनीय माहिती वाचण्यायोग्य बनते.
4) बाण - बाणाच्या रूपात एक आदिम, एखाद्या गोष्टीवर लक्ष केंद्रित करण्यासाठी डिझाइन केलेले.
5) मजकूर (मजकूर) - शिलालेख आणि नोट्ससाठी.
6) शिलालेख (बबल) - मागील दोन साधनांचे संयोजन (मजकूरासह बाण), आपल्याला स्क्रीनशॉटच्या मुख्य भागाकडे निर्देशित करण्याची आणि त्यावर टिप्पणी देण्यास अनुमती देते.
7) प्रतिमा क्रॉपिंग (क्रॉप) - स्क्रीनशॉटमधून आयताकृती क्षेत्र कापते. आपल्याला संपूर्ण स्क्रीनशॉटची आवश्यकता नसल्यास एक अतिशय उपयुक्त वैशिष्ट्य, परंतु त्याचा फक्त एक तुकडा.
8) पॅलेट (कलरपिकर) - मानक रंगांव्यतिरिक्त, तुम्हाला इतर कोणत्याही वापरण्याची परवानगी देते (HEX, RGB किंवा HSB रंग मूल्ये प्रविष्ट करून).
इतर गोष्टींबरोबरच, संपादक बदल ट्रॅकिंगला समर्थन देतो आणि तुम्हाला बदल पूर्ववत (पूर्ववत) आणि पुन्हा करा (पुन्हा) करण्याची परवानगी देतो, तसेच स्क्रीनशॉट साफ करून, संपादन (पुसणे) आधी त्याच्या मूळ स्थितीत परत येतो.
लोड करत आहे
क्लाउडवर प्रतिमा अपलोड करणे अधिकृततेशिवाय शक्य आहे (अप्रतिम स्क्रीनशॉटच्या विपरीत, ते शेवटच्या पाहण्याच्या क्षणापासून संपूर्ण महिन्यासाठी संग्रहित केले जातील), किंवा Facebook किंवा तुमच्या खात्याद्वारे सेवेमध्ये लॉग इन केल्यानंतर. महत्त्वाचे म्हणजे तुम्ही नेहमी स्क्रीनशॉट संपादन मोडवर परत येऊ शकता, त्यामुळे तुम्हाला पुन्हा स्क्रीनशॉट घेण्याची गरज नाही.
विस्ताराची वर्तमान आवृत्ती ही फक्त एक प्रारंभिक आवृत्ती आहे आणि ती सतत अद्यतनित आणि विकसित केली जाईल. आम्हाला आशा आहे की तुम्हाला ते उपयुक्त वाटेल!
"VKontakte" ग्राफिटीची गणना न करता तुम्ही बर्याच काळापासून ऑनलाइन चित्र काढत आहात का? मी सोशल नेटवर्कवरील ग्राफिटी, ब्लेंडिंग मोडसह लेयर्स, पेनची दाब संवेदनशीलता, प्रगत ब्रशेसपासून दूर आहे? हे कोणत्याही प्रकारे शेजारच्या भिंतीवरील “पूर्वावधित” साठी नाही)
परिचय
मला एकदा एक कल्पना आली आणि मी ऑनलाइन संपादकांची एक मोठी यादी गोळा केली ज्यामध्ये मी किमान काहीतरी काढू शकतो. मग ही एक नवीन गोष्ट होती आणि लोक काय घेऊन आले हे पाहणे फक्त मनोरंजक होते... जर माझी स्मृती मला योग्यरित्या सेवा देत असेल, तर त्यापैकी सुमारे चाळीस होती, ज्यात विविध "मुलांच्या" पेंट-आकाराच्या ड्रॉइंग टूल्सचा समावेश होता. मी ते गोळा केले, परंतु यादीतील या सर्व कचऱ्याचा व्यावहारिक उपयोग झाला नाही.
त्यानंतर, माझा ब्लॉग (जो यापुढे अस्तित्वात नाही आणि कधीही अस्तित्वात नाही) सांभाळत असताना, मी अनेक संपादकांची निवड केली ज्यामध्ये कमी-अधिक पूर्ण झालेले काम काढणे शक्य होते. आधीच या यादीत त्यापैकी सुमारे 5-7 होते (मला आता आठवत नाही).
विचित्र गोष्ट म्हणजे, तेव्हापासून जवळजवळ दोन वर्षानंतर, माझ्या शेवटच्या यादीतील माझ्या बुकमार्कमध्ये अजूनही एक मनोरंजक सेवा शिल्लक आहे. अशा प्रकारच्या "नैसर्गिक निवडीतून" गेल्यानंतर, तो आजपर्यंत यशस्वीरित्या टिकून आहे, आणि मला खूप आनंदाने भेट दिली आहे... बरं, महिन्यातून एकदा तरी हे निश्चित आहे: डी.
काय? कुठे?
मग ही सेवा काय आहे? - तुम्ही विचारता, 2draw.net - मी उत्तर देईन: डी.
त्याचे अनाकर्षक (माझ्या मते) स्वरूप असूनही, साइटची कार्यक्षमता खूप चांगली आहे. एक ब्लॉग आहे, वापरकर्त्यांच्या कामांची गॅलरी आहे, एक मंच आहे, एक विकी आहे... आणि खरं तर, एक ड्रॉइंग रूम आहे.
आता आपल्याला सर्वात प्रथम ब्राउझरसाठी टॅबलेट (पेन) ड्रायव्हर स्थापित करणे आवश्यक आहे, जेणेकरून पेन कुशलतेने ब्राउझरमधील अनुप्रयोगावर दबाव हस्तांतरित करू शकेल. साठी ड्रायव्हर डाउनलोड करा
संगणकावर व्हिज्युअल प्रयोगाचे वर्णन करण्यासाठी अनेक संज्ञा वापरल्या जातात, जसे की देव आर्ट, कोड स्केच, डेमो आणि इंटरएक्टिव्ह आर्ट, परंतु मी शेवटी सॉफ्टवेअर कविता ही संज्ञा निवडली. कवितेची कल्पना अशी आहे की ती पॉलिश गद्य, सहजतेने व्यक्त, संक्षिप्त आणि सौंदर्यात्मक असावी.
ही एक अपूर्ण कल्पना नसावी, परंतु एक पूर्ण झालेला भाग जो पाहण्यास आनंददायक असेल. कविता हे साधन नाही; भावना जागृत करणे हे त्याचे कार्य आहे.
माझ्या स्वतःच्या आनंदासाठी, मी गणित, संगणकीय अल्गोरिदम, भौतिकशास्त्र आणि जीवशास्त्रावरील पुस्तके वाचतो. मला खूप लवकर समजले की जर तुम्ही फक्त कल्पना घेऊन धावत असाल तर लोक लवकरच कंटाळतील.
पण मला आकर्षक वाटणाऱ्या कल्पनांपैकी काही मी घेऊ शकतो आणि त्या दृश्यरूपात मांडू शकतो आणि मग लोकांना दृष्य प्रस्तुतीकरणामागील सिद्धांत आणि ते कार्य करणाऱ्या संकल्पना समजल्या नसल्या तरीही आश्चर्याची भावना निर्माण होते.
कार्यक्रम कविता लिहिण्यासाठी तुम्हाला कोणत्याही जटिल तत्वज्ञानाची किंवा गणिताची गरज नाही, फक्त स्क्रीनवर काहीतरी जिवंत आणि चैतन्यपूर्ण पाहण्याची इच्छा.
मी खाली संकलित केलेले कोड आणि उदाहरणे तुम्हाला ही छोटी, परंतु अतिशय तीव्र प्रक्रिया कशी पार पाडली जाते हे समजण्यास मदत करतील. जर तुम्हाला कोड समांतर समजायचा असेल तर तुम्ही हे करू शकता स्रोत फाइल्स येथे डाउनलोड करा.
कविता तयार करताना मुख्य अडचण अशी आहे की सर्वकाही सोपे आणि सोपे असावे. खरोखर छान डेमो तयार करण्यासाठी तीन महिने घालवू नका. त्याऐवजी, कल्पना विकसित करणाऱ्या 10 कविता तयार करा. प्रायोगिक कोड लिहा जो प्रभावी, रोमांचक आहे आणि अयशस्वी होण्यास घाबरू नका.
कॅनव्हासेसचा परिचय
थोडक्यात, कॅनव्हास हा मूलत: द्वि-आयामी बिटमॅप प्रतिमा घटक असतो जो DOM मध्ये अस्तित्वात असतो, ज्याच्या सहाय्याने तो काढता येतो.
रेखाचित्र 2d संदर्भ किंवा WebGL संदर्भ वापरून तयार केले जाऊ शकते. संदर्भ हा एक JavaScript ऑब्जेक्ट आहे जो तुम्ही ड्रॉइंग टूल्स ऍक्सेस करण्यासाठी वापरता. कॅनव्हासवर उपलब्ध असलेल्या JavaScript इव्हेंट्स SVG च्या विपरीत अतिशय संक्षिप्त आहेत.
घडणारी कोणतीही घटना नियमित प्रतिमा घटकांप्रमाणे कॅनव्हासवर काढलेल्या कोणत्याही वैयक्तिक घटकाऐवजी संपूर्ण घटकाला लागू होते. येथे एक साधे कॅनव्हास उदाहरण आहे:
var canvas = document.getElementById("उदाहरण-कॅनव्हास"); var संदर्भ = canvas.getContext("2d"); //ब्लू आयत रेखाचित्र context.fillStyle = "#91C0FF"; context.fillRect(100, // x 100, // y 400, // रुंदी 200 // उंची); //ड्राइंग मजकूर context.fillStyle = "#333"; context.font = "18px Helvetica, Arial"; context.textAlign = "केंद्र"; context.fillText("कॅनव्हासचे अद्भुत जग", // मजकूर 300, // x 200 // y);
सुरुवात करणे अगदी सोपे आहे. फक्त एक गोष्ट जी थोडी अवघड असू शकते ती म्हणजे संदर्भ, ज्यासाठी सेटिंग्ज जसे की फिल स्टाइल, रेषा रुंदी, फॉन्ट आणि स्ट्रोक शैली वास्तविक रेखाचित्र सुरू होण्यापूर्वी सेट करणे आवश्यक आहे.
हे विसरून जाणे खूप सोपे आहे की या सेटिंग्ज अद्यतनित किंवा पुनर्संचयित करणे आवश्यक आहे आणि नंतर आपण अनपेक्षित परिणामांसह समाप्त व्हाल.
हालचालीमध्ये घटक ठेवणे
पहिल्या उदाहरणात, आयत संपूर्ण स्क्रीनवर फक्त एकदाच जातो आणि कॅनव्हासवर स्थिर प्रतिमा म्हणून राहते. ही काही वाईट गोष्ट नाही, परंतु जेव्हा चित्र प्रति सेकंद 60 फ्रेम्सने रिफ्रेश केले जाते तेव्हा ॲनिमेशन खरोखर चांगले वाटते.
आधुनिक ब्राउझरमध्ये बिल्ट-इन रिक्वेस्ट ॲनिमेशनफ्रेम फंक्शन असते जे ब्राउझरच्या ड्रॉइंग लूपसह कस्टम ड्रॉइंग कोड सिंक्रोनाइझ करते. हे कार्यक्षमता आणि गुणवत्तेच्या बाबतीत मदत करते. रेंडर लक्ष्य हा कोड असावा जो प्रति सेकंद 60 फ्रेम्सने चालतो.
(ब्राउझर सपोर्टबाबत एक टीप: जर तुम्हाला जुन्या ब्राउझरमध्ये सपोर्ट पुरवायचा असेल तर काही सोप्या पॉलीफिल्स आहेत):
var canvas = document.getElementById("उदाहरण-कॅनव्हास"); var संदर्भ = canvas.getContext("2d"); var काउंटर = 0; var rectWidth = 40; var rectHeight = 40; var xMovement; // स्क्रीनच्या मध्यभागी आयत ठेवा var y = (canvas.height / 2) - (rectHeight / 2); context.fillStyle = "#91C0FF"; फंक्शन ड्रॉ() ( //वेळ वाढवण्याचा एक अधिक बुद्धिमान मार्ग आहे, परंतु प्रात्यक्षिक काउंटर++ साठी हे पुरेसे आहे; //हे काही छान गणित आहे. लेखाच्या मजकुरात अधिक तपशीलवार स्पष्टीकरण खाली दिले आहे. xMovement = Math.sin(counter / 25) * canvas .width * 0.4 + canvas.width / 2 - rectWidth / 2; //पूर्वी काढलेला निकाल संदर्भ साफ करा.clearRect(0, 0, canvas.width, canvas.height); // कॅनव्हास संदर्भावर थेट काढा.fillRect(xMovement,y,rectWidth,rectHeight);
गणितासह रेखाचित्र
आता लक्ष द्या, आम्ही स्क्रीनवर प्रोग्रामिंग आणि ड्रॉइंगबद्दल बोललो, म्हणून मी गणिताकडे जात आहे. गणित हे जादू निर्माण करते जे नंतर स्क्रीनवर प्रदर्शित होते. खरे सांगायचे तर मला नेहमी गणित आवडायचे ( पण अनेक कलाकार तसे करत नाहीत).
एवढं प्रेम असूनही शाळेत ज्या पद्धतीने शिकवलं जातं त्यामुळे मी काहीशी निराश झालो. हे सर्व अतिशय औपचारिक होते, जे गणितज्ञांसाठी अर्थातच उत्तम आहे, परंतु त्यात उत्साह, सखोल शोध आणि व्यावहारिकता यांचा अभाव होता ज्यामुळे काही अगदी सोप्या संकल्पना शिकण्यात मदत होऊ शकते. तथापि, प्रोग्रामर अमूर्त पुराव्यांकडे दुर्लक्ष करतात आणि मनोरंजक अनुप्रयोगांवर लक्ष केंद्रित करतात.
साइन फंक्शन कसे कार्य करते हे स्पष्ट करण्यासाठी मला तुमचा काही सेकंद वेळ द्या. गणितीय कार्ये वापरून तुम्ही हालचाल कशी निर्माण करू शकता याचा विचार करण्याच्या दृष्टीने हे उपयुक्त ठरेल. खालील लघुप्रतिमा साइन फंक्शनच्या परस्परसंवादी आलेखाच्या लिंक्स आहेत.
लक्षात घ्या की आमच्याकडे sin(x) फंक्शनमध्ये फक्त x पेक्षा जास्त व्हेरिएबल्स आहेत. मी तयार केलेले फंक्शन sin (a * x + b) * c + d आहे. परस्परसंवादी आलेखामधील स्लाइडरसह खेळा आणि आपण पाहू शकता की यापैकी कोणतेही मूल्य बदलल्याने फंक्शनच्या आलेखावर कसा परिणाम होतो.
आता मी मागील कोड उदाहरणावरून सूत्र पुन्हा लिहीन आणि वाचण्यास सोपे असलेली वेगळी आवृत्ती तयार करेन:
var a = 1 / 25, // आलेखामध्ये कमी वारंवार चढ-उतार करा x = counter, // प्रत्येक वेळी काढा() ला b = 0 म्हणतात, // आलेख वर किंवा खाली हलवण्याची गरज नाही. = रुंदी * 0.4, // कॅनव्हासच्या अर्ध्यापेक्षा थोडी कमी वेव्हची रुंदी सेट करा d = canvas.width / 2 - rectWidth / 2; //आयत मध्यभागी हलवा xMovement = Math.sin(a * x + b) * c + d;
मी आधीच दाखवलेल्या कोडचा तुम्हाला प्रयोग करायचा असल्यास, मी तुम्हाला y-अक्षावर हालचाल जोडण्याचा प्रयत्न करण्याचा सल्ला देतो. साइन फंक्शनमधील मूल्ये बदलण्याचा प्रयत्न करा किंवा प्रयोग करण्यासाठी आणि काय होते ते पाहण्यासाठी दुसरे त्रिकोणमिती फंक्शन घ्या.
वापरकर्ता इनपुट
आम्ही गणित वापरून हालचाली पाहत असताना, पृष्ठाभोवती आयत हलवण्यासाठी तुम्ही वेगवेगळ्या इनपुट डिव्हाइसेससह काय करू शकता याचा विचार करण्यासाठी मला थोडा वेळ घ्यायचा आहे. ब्राउझर मायक्रोफोन, वेबकॅम, माउस, कीबोर्ड आणि गेमपॅडसह सर्व संभाव्य इनपुट पर्यायांना समर्थन देतात.
लीप मोशन किंवा काइनेक्ट सारख्या प्लगइनचा वापर करून अतिरिक्त इनपुट पर्याय जोडणे देखील शक्य आहे. WebSockets आणि सर्व्हर वापरून, तुम्ही तुमचे हार्डवेअर व्हिज्युअलायझेशनशी कनेक्ट करू शकता.
तुमचा मायक्रोफोन वेब ऑडिओ API शी कनेक्ट करा आणि तुम्ही तुमचे पिक्सेल ऑडिओसह नियंत्रित करू शकता. तुम्ही तुमच्या वेबकॅमवर आधारित मोशन सेन्सर देखील तयार करू शकता आणि आभासी माशांना घाबरवू शकता ( मी पाच वर्षांपूर्वी फ्लॅशमध्ये असेच काहीतरी केले होते).
आता आम्ही ते बाहेर काढले आहे, चला परत जाऊ आणि आणखी काही उदाहरणे पाहू. एक स्क्वेअर कंटाळवाणा आहे, चला सुरुवात करूया. प्रथम, एक स्क्वेअर फंक्शन बनवू जे अनेक गोष्टी करू शकते. आम्ही त्याला डॉट म्हणू.
वेगळी x आणि y व्हेरिएबल्स वापरण्याऐवजी हलत्या वस्तूंसोबत काम करताना आणखी एक गोष्ट खूप मदत करते ती म्हणजे वेक्टर.
या कोड उदाहरणांमध्ये, जे मी Three.js वरून काढले आहे, तेथे एक Vector2 वर्ग आहे. एकाच वेळी vector.x आणि vector.y वापरणे खूप सोपे आहे, परंतु या वर्गात अनेक सोयी पद्धती देखील आहेत. अधिक तपशीलांसाठी, तुम्ही दस्तऐवज तपासू शकता.
सर्वशक्तिमान डॉट
या उदाहरणात, सर्वकाही थोडे अधिक क्लिष्ट आहे, कारण ते वस्तूंशी संवाद साधत आहे, परंतु ते फायदेशीर आहे. कॅनव्हासवर रेखाचित्र नियंत्रित करणारे नवीन दृश्य ऑब्जेक्ट पाहण्यासाठी कोड उदाहरण पहा.
आमचा नवीन डॉट क्लास या ऑब्जेक्टसह आवश्यक व्हेरिएबल्समध्ये प्रवेश करण्यासाठी कार्य करेल, जसे की कॅनव्हास संदर्भ:
फंक्शन डॉट(x, y, सीन) ( var गती = 0.5; this.color = "#000000"; this.size = 10; this.position = new THREE.Vector2(x,y); this.direction = नवीन तीन .Vector2(गती * Math.random() - speed / 2, speed * Math.random() - speed / 2);
डॉटसाठी कन्स्ट्रक्टर विकसित करणे सुरू करण्यासाठी, आम्ही त्याचे वर्तन कॉन्फिगर करतो आणि काही व्हेरिएबल्स सेट करतो जे आम्ही वापरू. पुन्हा, Three.js वेक्टर क्लास वापरून.
प्रति सेकंद 60 फ्रेम्सवर सामग्री प्रस्तुत करताना, ॲनिमेशन दरम्यान नवीन तयार करण्याऐवजी प्रथम ऑब्जेक्ट्स सुरू करणे महत्त्वाचे आहे. कारण ते मेमरी संसाधने खाऊन टाकते आणि चॉपी ॲनिमेशन होऊ शकते. तसेच, डॉटमध्ये सीनची कॉपी लिंकद्वारे कशी पास केली जाते ते पहा. हे कोड स्वच्छ ठेवण्यास मदत करते:
कोडचे इतर सर्व भाग डॉट ऑब्जेक्टच्या प्रोटोटाइपमध्ये स्थापित केले जातील जेणेकरून तयार केलेल्या प्रत्येक नवीन डॉटला या पद्धतींमध्ये प्रवेश मिळेल. खाली मी सर्व फंक्शन्स एकामागून एक खंडित करेन:
डॉट.प्रोटोटाइप = ( अपडेट: फंक्शन() ( ... ), ड्रॉ: फंक्शन () ( ... ) )
मी अपडेट केलेल्या कोडमधून ड्रॉइंग कोड अपडेट करत आहे. हे कोड राखणे आणि ऑब्जेक्टची कार्यक्षमता वाढवणे खूप सोपे करते. त्याचप्रमाणे, MVC डिझाइन पॅटर्न नियंत्रण आणि सादरीकरण तर्कावर जोर देते. शेवटच्या अपडेट कॉलपासून dt व्हेरिएबल प्रत्येक मिलिसेकंदाने बदलू लागतो.
नाव चांगले आहे, लहान आहे आणि (घाबरू नका) व्युत्पन्न कॅल्क्युलसमधून आले आहे. हे फ्रेम रेट पासून हालचाली दुप्पट करते. अशा प्रकारे जेव्हा गोष्टी खूप क्लिष्ट होतात तेव्हा तुम्ही NES शैलीतील मंदी टाळाल. लोड खूप जास्त असल्यास, काही फ्रेम ॲनिमेशनमधून बाहेर पडतील, परंतु गती समान राहील:
updatePosition: function() ( // रेंडर लूपच्या बाहेर एक व्हेरिएबल तयार करण्याची ही एक छोटीशी युक्ती आहे // यासाठी लूपमध्ये भरपूर मेमरी संसाधन आवश्यक आहे. // व्हेरिएबल फक्त खालील फंक्शनसाठी प्रवेशयोग्य आहे. var moveDistance = new THREE.Vector2(); // हे वास्तविक फंक्शन रिटर्न फंक्शन (dt) आहे ( moveDistance.copy(this.direction); moveDistance.multiplyScalar(dt); this.position.add(moveDistance) स्क्रीन 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 ; ) )(), // हे फंक्शन ताबडतोब कार्यान्वित होते आणि भिन्न कार्ये परत करते.
या फंक्शनमध्ये थोडी गोंधळात टाकणारी रचना आहे, परंतु दृश्यमान करणे सोपे आहे. हे खरोखर खूप मेमरी वापरते. मूव्हडिस्टन्स व्हेरिएबल एकदा सेट केले जाते आणि फंक्शन कॉल केल्यावर कधीही पुन्हा वापरले जाऊ शकते.
हा वेक्टर फक्त नवीन स्थितीची गणना करण्यात मदत करण्यासाठी वापरला जातो, परंतु फंक्शनच्या बाहेर वापरला जात नाही. सदिश गणिताचा हा पहिला घटक आहे जो आम्ही वापरला आहे.
आता दिशा वेक्टर वेळेतील प्रत्येक बदलाने गुणाकार केला जातो आणि नंतर स्थितीत जोडला जातो. शेवटी, स्क्रीनमध्ये बिंदू ठेवण्यासाठी आम्ही मॉड्यूलर क्रिया करतो:
draw: function(dt) ( // सोयीसाठी, व्हेरिएबलचे लहान नाव मिळवा var ctx = this.scene.context; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect(this.position. x, this position.y, this.size, this.size);
मग सर्वकाही सोपे आहे. आम्हाला सीन ऑब्जेक्टवरून संदर्भाची एक प्रत मिळते आणि नंतर एक आयत काढतो ( किंवा तुम्हाला पाहिजे ते). स्क्रीनवर काढण्यासाठी आयत हा कदाचित सर्वात जलद आकार आहे.
आता मी कॉलद्वारे एक नवीन डॉट जोडत आहे this.dot = नवीन डॉट(x, y, this)सीन कन्स्ट्रक्टरमध्ये, आणि नंतर मुख्य ॲक्शन स्पेसच्या अपडेट पद्धतीमध्ये मी this.dot.update(dt) जोडतो आणि संपूर्ण स्क्रीनवर स्केल करण्यासाठी पॉइंट मिळवतो. ( संदर्भातील सर्व कोड पाहण्यासाठी, लेखासाठी स्त्रोत कोड पहा).
आमच्याकडे कोडसह थोडे अंतर्गत डिझाइन आहे हे छान आहे, परंतु ते खरोखर काही विशेष मनोरंजक करत नाही. पण सायकल जास्त मनोरंजक आहे. वर्कस्पेस ऑब्जेक्टमध्ये आपण नवीन DotManager ऑब्जेक्ट तयार करू.
जर आम्ही ही कार्यक्षमता वेगळ्या ऑब्जेक्टमध्ये संकलित केली तर ते अधिक सोयीस्कर आहे, जेणेकरून कोड अधिक सोपा आणि स्वच्छ होईल, कारण प्रक्रिया स्वतःच अधिकाधिक क्लिष्ट होत आहे:
var डॉटमॅनेजर = फंक्शन(numberOfDots, दृश्य) ( this.dots = ; this.numberOfDots = numberOfDots; this.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); } } };
आता, डॉट तयार आणि अद्यतनित करण्याऐवजी, आम्ही डॉट मॅनेजर तयार करण्यासाठी आणि अद्यतनित करण्यासाठी दृश्य वापरतो. सुरू करण्यासाठी, आम्ही 5000 गुण तयार करू:
फंक्शन सीन() ( ... this.dotManager = new DotManager(5000, this); ... ); Scene.prototype = ( ... अद्यतन: function(dt) ( this.dotManager.update(dt); ) ...);
ठीक आहे, ते फक्त एका बिंदूपेक्षा चांगले आहे. आता एकल डॉटसाठी अपडेट पद्धतीमध्ये कोड जोडणे सुरू करण्याची वेळ आली आहे. जेव्हा ऑब्जेक्ट कोड स्क्रीनवरील प्रत्येक बिंदूवर परिणाम करतो तेव्हा सर्वकाही बदलते. तेव्हाच जादू गोष्टींवर काम करायला लागते. साइन फंक्शन लक्षात ठेवा? आता थोडा रिपल इफेक्ट जोडण्याबद्दल काय?
डॉट ऑब्जेक्टसाठी आपण वेव्हपोझिशन व्हेरिएबल तयार करू. अंतिम रेखांकन प्रक्रियेत आपण हे व्हेरिएबल Y अक्षाच्या सापेक्ष स्थितीत जोडू:
updateWave: function(dt, time) ( this.wavePosition = Math.sin(this.scene.currTime / 500 + this.position.x / this.scene.canvas.width * 4) * 20;)
एका ओळीत थोडासा दोष, कोड खंडित होतो, पूर्वीच्या साइन फंक्शनप्रमाणे:
var a = 1 / 500, //वेव्ह इफेक्ट थोडा हळू होण्यासाठी सेट करा x = this.scene.currTime, //याला आलेखाच्या बाजूने थोडेसे शिफ्ट करा, प्रत्येक वेळी ड्रॉ() ला b = this.position.x म्हणतात / this.scene .canvas.width * 4, // आलेख वर किंवा खाली हलवण्याची गरज नाही c = 20, // कॅनव्हास d = 0 च्या अर्ध्यापेक्षा थोडी कमी वेव्ह रुंदी सेट करा; //आयत मध्यभागी हलवा xMovement = Math.sin(a * x + b) * c + d;
ते खूप रोमांचक निघाले...
आणखी एक छोटी युक्ती. मोनोक्रोम पॅलेट निस्तेज दिसत आहे, चला काही रंग जोडूया:
var hue = this.position.x / this.scene.canvas.width * 360; this.color = Utils.hslToFillStyle(रंग, 50, 50, 0.5);
प्रत्येक नव्याने तयार केलेल्या डॉटसाठी, आम्ही त्याची मूळ स्थिती घेतो, आणि कॅनव्हासच्या रुंदीच्या बाजूने तो कुठे आहे यावर अवलंबून, त्याची छटा सेट करतो. Utils.hslToFillStyle हे थोडेसे हेल्पर फंक्शन आहे जे मी काही इनपुट व्हेरिएबल्सला योग्यरित्या फॉरमॅट केलेल्या FillStyle स्ट्रिंगमध्ये बदलण्यासाठी जोडले आहे.
आता सर्वकाही अधिक रोमांचक दिसते. पुन्हा, हे गणित किंवा इनपुट व्हेरिएबल्स वापरून व्हिज्युअलायझेशन नियंत्रित करण्याचे एक उदाहरण आहे. मला त्याच्या साधेपणामुळे RGB ऐवजी HSL कलर मॉडेल वापरून रंग तयार करण्यात खरोखर आनंद आहे. RGB थोडा अमूर्त आहे.
माऊसद्वारे वापरकर्ता संवाद
आतापर्यंत आमच्याकडे कोणताही वास्तविक वापरकर्ता परस्परसंवाद झालेला नाही:
var माउस = कार्य(दृश्य) ( this.scene = दृश्य; 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; ) इतर ( this.position.x = -100000; this.position.y = -100000;
हे साधे ऑब्जेक्ट वर्कस्पेसमधील माऊस क्रियांद्वारे अपडेट लॉजिक एन्कॅप्स्युलेट करते. जेव्हा माउस हलवला जातो तेव्हाच ते पोझिशन वेक्टर अपडेट करते. इतर ऑब्जेक्ट्स नंतर माउस वेक्टरची स्थिती निर्धारित करू शकतात जर त्यांना ऑब्जेक्टचे संदर्भ दिले गेले.
एक टीप. मी येथे विचार करत नाही की कॅनव्हासची रुंदी पिक्सेलमधील DOM परिमाणांशी एक ते एक जुळत नाही, उदा. प्रतिसाद देणारा कॅनव्हास, कॅनव्हासची उच्च पिक्सेल घनता (रेटिना) किंवा जेव्हा कॅनव्हास वरच्या डाव्या कोपर्यात सुरू होत नाही. या प्रकरणांमध्ये, माउस निर्देशांक त्यानुसार समायोजित करणे आवश्यक आहे:
var Scene = function() ( ... this.mouse = new Mouse(this); ... );
वर्कस्पेसमध्ये माऊस ऑब्जेक्ट तयार करणे ही एकच गोष्ट बाकी आहे. आता आम्ही माउससह परस्परसंवादाची ओळख करून दिली आहे, चला बिंदू आकर्षित करण्याचा प्रभाव तयार करूया:
फंक्शन डॉट(x, y, सीन) ( ... this.attractSpeed = 1000 * Math.random() + 500; this.attractDistance = (150 * Math.random()) + 180; ... )
हे प्रभाव बदलण्यासाठी या मूल्यांसह खेळा. आता माउसकडे बिंदू आकर्षित करण्याच्या पद्धतीवर काम करूया. टिप्पण्यांसह हा थोडा लांब कोड आहे:
attractMouse: function() (//पुन्हा, या पद्धतीसाठी खाजगी व्हेरिएबल्स तयार करा var vectorToMouse = new THREE.Vector2(), vectorToMove = new THREE.Vector2(); //हे प्रत्यक्षात एक सामान्य पद्धत रिटर्न फंक्शन आहे(dt) ( var दूरी टोमाऊस, डिस्टंस टॉमोव्ह; // पॉइंटपासून माउसपर्यंतचे x आणि y अंतर दर्शविणारे वेक्टर मिळवा // हे वेक्टर कसे कार्य करतात याबद्दल अधिक जाणून घेण्यासाठी, three.js डॉक्युमेंटेशन vectorToMouse .copy(this.scene.mouse. स्थिती) .sub(this.position); //माऊसपासून वेक्टर अंतर मिळवा = vectorToMouse.length(); //मुव्हिंग डिस्टन्स समायोजित करण्यासाठी वैयक्तिक स्केलर व्हॅल्यूज वापरा moveLength = dt* (this.attractDistance - दूरी टोमाऊस) / हे. ॲट्रॅक्टस्पीड ; // बिंदू आकर्षित केला असेल तरच हलवा (moveLength > 0) ( // माउस व्हेक्टरचा आकार इच्छित फिरत्या लांबी vectorToMove .copy(vectorToMouse) .divideScalar(distanceToMouse) मध्ये बदला .multiplyScalar(moveLength); //Continue and add it now, draw this.position.add(vectorToMove);
) ); )()
जर तुम्हाला सदिश गणितात फारसा ज्ञान नसेल तर ही पद्धत तुम्हाला अवघड वाटू शकते. जर तुम्हाला कागदाच्या तुकड्यावर कॉफी कप चिन्हासारखे काहीतरी बनवायचे असेल तर व्हेक्टर व्हिज्युअल प्रतिनिधित्व तयार करण्यात मदत करू शकतात.
सोप्या भाषेत, हे फंक्शन माउस आणि पॉइंटमधील अंतर मिळवते. आणि मग तो बिंदू माऊसच्या अगदी जवळ सरकतो, तो आधी किती जवळ होता आणि तो आकर्षणाच्या मर्यादेत होता की नाही, तसेच किती वेळ निघून गेला यावर अवलंबून असतो. हे हलविण्यासाठी अंतर मोजून केले जाते (सामान्य स्केलर संख्या ) आणि नंतर त्यास संबंधित वेक्टरने गुणाकार (लांबी 1 सह सदिश
), जे बिंदूपासून माउसकडे निर्देशित केले जाते. होय, शेवटचे वाक्य सोप्या भाषेत वर्गीकरण करणे कठीण आहे.
माझ्यासाठी, कार्यक्रमात्मक कवितेचे सार आणि कलात्मक घटकांची पिढी वेगवेगळ्या शक्यतांचा शोध घेणे आहे. मी शिफारस करतो की तुम्ही तपशील किंवा मोठ्या प्रकल्पांमध्ये जास्त अडकू नका.
काही लहान प्रकल्पांचा प्रयत्न करण्याऐवजी, त्यांच्यासह प्रयोग करून आणि विशिष्ट परिणाम साध्य करण्याऐवजी, तुम्हाला अपयश आणि निराशा येऊ शकते.
मला सर्वात योग्य वाटणारी ऑब्जेक्ट ओरिएंटेड शैली प्राप्त करण्यासाठी या लेखातील कोड अनेक वेळा पुन्हा लिहिला गेला आहे.
तुमच्या स्वत:च्या वर्कफ्लो आणि टूल्सला अनुकूल करण्यासाठी येथील कल्पना स्वीकारा. कविता ही एक मोठी समाकलित प्रणाली नाही, त्यामुळे अवजड वेब प्रकल्पांच्या मर्यादेशिवाय प्रयोग करणे सोपे आहे.
तुमचे कॅनव्हासेस कागदाच्या शीटसारखे लावा ज्यावर तुम्ही पेन्सिलने काढता. मनोरंजक कल्पना शोधा आणि त्यांच्यासह प्रयोग करा. आणि तुमची फॅन्सी फ्लाइट मर्यादित करू नका.
तुमच्या वेबसाइटवर तुमच्या आवडत्या मांजरीचा फोटो मुर्झिकने पोस्ट केला असेल, परंतु तुम्हाला तो कॉपी करायचा नाही किंवा हार्ड ड्राइव्हवर जतन करायचा नाही, तर अशी स्क्रिप्ट साइटच्या बॉडीमध्ये ठेवा.
ड्रॅग अँड ड्रॉप तंत्रज्ञान जवळजवळ कोणत्याही ऍप्लिकेशन प्रोग्राममध्ये वापरले जाते. कधीकधी (उदाहरणार्थ, जेएस गेम्स विकसित करताना) या तंत्रज्ञानाची आवश्यकता असते...
पहिल्या दृष्टीक्षेपात, घटक
असे अनेकदा घडते की आम्हाला तातडीने काही टिपा थेट ब्राउझर स्क्रीनवर बनवण्याची आवश्यकता असते, उदाहरणार्थ, प्रशिक्षण व्हिडिओ रेकॉर्ड करणे किंवा स्क्रीनचा स्क्रीनशॉट (स्नॅपशॉट) तयार करणे.
शिवाय, "स्क्रीन पेन्सिल / स्क्रीन ब्रश" (साइटच्या लेखकाच्या मते) सारखे आश्चर्यकारक आणि उपयुक्त साधन दररोजच्या सरावात देखील उपयुक्त ठरू शकते, उदाहरणार्थ:
1. तुमची संचित कलात्मक प्रतिभा त्वरित बाहेर टाकण्यासाठी आणि नवीन PNG किंवा JPG इमेज फाइलमध्ये कॅप्चर करण्यासाठी.
2. चित्र डाउनलोड न करता आणि फोटोशॉप लाँच न करता मजेदार किंवा मनोरंजक व्यंगचित्र पटकन रेखाटण्यासाठी.
3. मॉनिटर स्क्रीनवरील प्रतिमेला काही वाक्प्रचार किंवा शिलालेख, तसेच अनेक, इतर अनेक “सो दॅट...” सह ऑनलाइन पुरवण्यासाठी.
अशी मूळ कला मित्रांसह सामायिक केली जाऊ शकते, सोशल नेटवर्क्सवर प्रकाशित केली जाऊ शकते इ. आणि स्क्रीन ड्रॉ टूलच्या मदतीने (स्क्रीनवर रेखाचित्रे काढणे), सर्वात मजेदार रेखाचित्रे आणि व्यंगचित्रांचा संपूर्ण डोंगर ऑनलाइन बनवणे आणि नंतर हे काम मित्रांसह किंवा कामाच्या सहकाऱ्यांसोबत हसण्यासाठी जतन करणे सोपे आहे.
सर्वसाधारणपणे, कोणाला त्यांच्या ब्राउझरच्या स्क्रीनवर रेखाटण्याची गरज आहे किंवा कोणाला चित्र काढायचे आहे हे तुम्हाला कधीच कळत नाही आणि का. कोणत्याही परिस्थितीत, आम्ही हस्तक्षेप करणार नाही, परंतु ते फक्त येथे आणि आत्ताच लागू करण्यात मदत करू.
स्क्रीनवर रेखांकन: मूलभूत आवश्यकता
1. तुमच्याकडे Mozilla Firefox ब्राउझर स्थापित आणि उघडला आहे.
2. तुमच्याकडे कीबोर्ड आणि माउस आहे.
3. तुम्हाला थेट ब्राउझर विंडोमध्ये रेखाटण्याची इच्छा आहे.
जर हे सर्व मुद्दे खरे असतील, तर आपण चरण-दर-चरण सूचनांकडे जाऊ शकतो!
फायरफॉक्स ब्राउझरमध्ये स्क्रीनवर रेखांकन: चरण-दर-चरण सूचना
2. ॲड-ऑन डाउनलोड केल्यानंतर (काही सेकंदात), तुम्हाला ते इन्स्टॉल करावे लागेल. उघडलेल्या डायलॉग बॉक्समध्ये, "आता स्थापित करा" वर क्लिक करा.
3. लाइटनिंग-फास्ट इन्स्टॉलेशननंतर, आम्हाला ब्राउझर रीस्टार्ट करण्यास सांगितले जाईल, ज्याला आम्ही सहमती दिली पाहिजे. आम्ही विशेष पॉप-अप बटणावर क्लिक करून ब्राउझर रीस्टार्ट करतो किंवा ते व्यक्तिचलितपणे करतो (मोझिला बंद करा आणि पुन्हा उघडा), परंतु फायरफॉक्स रीस्टार्ट करणे आवश्यक आहे. आणि त्यानंतर आमचे बदल प्रभावी होतील.
4. "ऑन-स्क्रीन ब्रश, ऑन-स्क्रीन पेन्सिल, ऑन-स्क्रीन टेक्स्ट एडिटर... (तुम्हाला काय हवे ते म्हणा)" लाँच करण्यासाठी, तुम्हाला ॲड-ऑन पॅनेल उघडणे आवश्यक आहे, जे येथे आहे:
"दृश्य" - "टूलबार" - "ॲड-ऑन पॅनेल"
त्वरीत लॉन्च करण्यासाठी, तुम्ही “Ctrl+\” की संयोजन वापरू शकता
5. उघडलेल्या ऍड-ऑन पॅनेलमध्ये, आम्हाला आमची स्क्रीन पेन्सिल दिसते - स्क्रीन ड्रॉ प्रोग्रामचा लोगो - ब्राउझरमध्ये स्क्रीनवर रेखाचित्र. त्यावर क्लिक करा आणि कार्यक्षमता समजून घ्या.
6. तुम्ही बघू शकता, येथे तुम्ही हे करू शकता:
- ब्रश आकार बदला (डिजिटल पॅनेल);
— ब्रशचा रंग बदला (रंग फील्डवर क्लिक करा) ();
- मजकूर प्रविष्ट करा (रशियन किंवा इंग्रजी, भिन्न रंग आणि आकार - विशेष बटण);
- चित्रांमध्ये परिणाम जतन करा (फ्लॉपी डिस्क);
- विंडो रीसेट करा (रिक्त पत्रक);
- तुमची रेखाचित्रे पुसून टाका (इरेजर).
सुंदर कोड लिहिणे हा एक आनंद आहे, परंतु हा आनंद इतर प्रोग्रामरसह सामायिक करणे कठीण आहे, जे प्रोग्रामर नाहीत त्यांना सोडा. माझ्या कामाच्या मोकळ्या वेळेत आणि माझ्या कुटुंबासोबत वेळ घालवताना, ब्राउझरमध्ये काढण्यासाठी कॅनव्हास घटकांचा वापर करून कविता कशी प्रोग्राम करावी याबद्दल मी कल्पना करत होतो.
संगणकावरील व्हिज्युअल प्रयोग, कोड आकृती, डेमो, परस्परसंवादी कला इत्यादींचे वर्णन करणाऱ्या अनेक संज्ञा आहेत. या प्रक्रियेचे वर्णन करण्यासाठी, मी प्रोग्रामिंग कविता या शब्दावर स्थिरावलो. कविता ही चमक, हलकी, संक्षिप्त आणि सौंदर्यासाठी पॉलिश केलेली गद्य आहे. हे स्केचबुकमधील कल्पनेचे अर्धवट तयार केलेले स्केच नाही, तर दर्शकांना त्यांच्या आनंदासाठी सादर केलेले काहीतरी सुसंगत आहे. कविता हे साधन नसून ती भावना जागृत करण्यासाठी जगते.
मी स्वतःच्या आनंदासाठी गणित, संगणक तंत्रज्ञान, भौतिकशास्त्र आणि जीवशास्त्रावरील बरीच पुस्तके वाचली. आणि मला जे खूप लवकर समजले ते म्हणजे मी एखाद्या कल्पनेबद्दल बोललो तर लोक पटकन त्याचा कंटाळा करतात. खरं तर, मी एक कल्पना घेऊ शकतो की मला आश्चर्यकारकपणे मनोरंजक वाटते आणि एखाद्या व्यक्तीला कोडिंगबद्दल किंवा ते कसे कार्य करते याबद्दल काहीही कल्पना नसली तरीही मला पटकन स्वारस्य वाटू शकते. कविता प्रोग्राम करण्यासाठी तुम्हाला काही जटिल तात्विक विचार किंवा संगणकीय गणना समजून घेण्याची आवश्यकता नाही. आपल्याला फक्त आपल्या स्क्रीनवर काहीतरी जिवंत आणि श्वासोच्छ्वास पाहण्याची इच्छा असणे आवश्यक आहे. मी खाली दिलेले कोड आणि उदाहरणे तुम्हाला ही जलद आणि गुंतागुंतीची प्रक्रिया प्रत्यक्षात कशी पार पाडायची हे समजण्यास मदत करतील.
मुख्य मुद्दा असा आहे की कविता तयार करणे ही साधी आणि सोपी असावी. खूप छान डेमो असले तरी एक तयार करण्यासाठी तीन महिने घालवण्याची गरज नाही. त्याऐवजी, 10 कविता तयार करा ज्या तुमची कल्पना जिवंत करण्यात मदत करतील. कोड लिहा जो रोमांचक आहे आणि अयशस्वी होण्यास घाबरू नका.
कॅनव्हासचा परिचय
थोडक्यात, कॅनव्हास हा द्विमितीय रास्टर प्रतिमा घटक आहे जो DOM (दस्तऐवज ऑब्जेक्ट मॉडेल) मध्ये राहतो आणि तेथे काढता येतो. तुम्ही 2d संदर्भात आणि WebGL संदर्भात दोन्ही काढू शकता. संदर्भ म्हणजे JavaScript जी आम्ही ड्रॉइंग टूल्स ऍक्सेस करण्यासाठी वापरतो. कॅनव्हाससाठी उपलब्ध असलेल्या JavaScript प्रक्रिया SVG साठी उपलब्ध असलेल्या अगदी स्पष्ट आहेत. कॅनव्हासमध्ये काहीतरी काढण्याऐवजी संपूर्ण घटकावर कॉल केलेली कोणतीही प्रक्रिया नियमित प्रतिमा घटकासारखीच असते. येथे एक मूलभूत कॅनव्हास उदाहरण आहे:
Var canvas = document.getElementById("उदाहरण-कॅनव्हास"); var संदर्भ = canvas.getContext("2d"); //ब्लू आयत काढा context.fillStyle = "#91C0FF"; context.fillRect(100, // x 100, // y 400, // रुंदी 200 // उंची); // काही मजकूर काढा context.fillStyle = "#333"; context.font = "18px Helvetica, Arial"; context.textAlign = "केंद्र"; context.fillText("कॅनव्हासचे अद्भुत जग", // मजकूर 300, // x 200 // y);
येथे काहीही क्लिष्ट नाही, आपण सहजपणे प्रारंभ करू शकता. वास्तविक रेखांकन वापरण्यापूर्वी फिलस्टाइल, लाइनविड्थ, फॉन्ट आणि स्ट्रोकस्टाइल सारख्या सेटिंग्जसह कॉन्फिगर केलेला संदर्भ म्हणजे थोडा गोंधळात टाकणारी एकमेव गोष्ट. सेटिंग्ज अपडेट करणे किंवा रीलोड करणे आणि अनपेक्षित परिणामांसह समाप्त करणे विसरणे सोपे असू शकते.
एक चळवळ निर्माण करणे
पहिले उदाहरण फक्त फिरते आणि स्थिर रेखाचित्र कॅनव्हासमध्ये बदलते. हे सर्व चांगले आणि चांगले आहे, परंतु खरी मजा तेव्हा सुरू होते जेव्हा तुम्ही वेग 60 फ्रेम्स प्रति सेकंदावर सेट करता. आधुनिक ब्राउझरमध्ये रिक्वेस्ट ॲनिमेशनफ्रेम फंक्शनमध्ये प्लगइन असते जे ब्राउझरमध्ये फिरणाऱ्या ड्रॉइंगसह सोर्स ड्रॉइंग कोड सिंक्रोनाइझ करते. यामुळे कार्यक्षमता सुधारते आणि सुरळीत हालचाल होते. प्रस्तुतीकरण लक्ष्य हा कोड असावा जो प्रति सेकंद 60 फ्रेम्सने फिरतो.
var canvas = document.getElementById("उदाहरण-कॅनव्हास");
वर संदर्भ = canvas.getContext("2d"); var काउंटर = 0; var rectWidth = 40; var rectHeight = 40; var xMovement; //स्क्रीनच्या मध्यभागी आयत ठेवा var y = (canvas.height / 2) - (rectHeight / 2); context.fillStyle = "#91C0FF"; फंक्शन ड्रॉ() ( //वेळ वाढवण्याचे अधिक चतुर मार्ग आहेत, परंतु हे काउंटर++) प्रात्यक्षिक हेतूंसाठी आहे; //खालील गणित. कोड खालील मजकुरात अधिक स्पष्टीकरण. xMovement = Math.sin(counter/25) * canvas .width * 0.4 + canvas.width / 2 - rectWidth / 2; //मागील ड्रॉइंगचे परिणाम साफ करा (0, 0, canvas.width, canvas.height); xMovement, y, rectWidth, rectHeight); //नवीन ॲनिमेशन फ्रेम उपलब्ध झाल्यावर या फंक्शनला पुन्हा विनंती करा AnimationFrame(draw) draw();
गणितीय रेखाचित्र
आता सावधगिरी बाळगा, आधी आपण मॉनिटरवर प्रोग्रामिंग आणि ड्रॉइंगबद्दल बोललो होतो, परंतु येथे मी काहीतरी गणिती तयार केले आहे. मी कबूल करतो की मला नेहमी गणित आवडते (इतर अनेक कलाकारांसारखे नाही). एवढं प्रेम असूनही शाळेत ज्या पद्धतीने शिकवलं जातं त्यामुळे मी निराश झालो आहे. हे खूप औपचारिकपणे शिकवले जाते, जे गणित शिक्षकासाठी चांगले असू शकते, परंतु ते उत्साह, शोध आणि व्यावहारिकता गमावते ज्याचा उपयोग बर्याच मनोरंजक गोष्टी पूर्ण करण्यासाठी केला जाऊ शकतो. परंतु चांगली बातमी अशी आहे की प्रोग्रामर याकडे लक्ष देत नाहीत आणि अधिक मनोरंजक गोष्टींवर लक्ष केंद्रित करतात.
आता मी समन्वय प्रणाली कशी कार्य करते हे द्रुतपणे स्पष्ट करण्याचा प्रयत्न करेन. गणितीय कार्य गती कशी निर्माण करू शकते हे समजून घेण्यासाठी हे उपयुक्त ठरेल. खालील चित्र परस्पर समन्वय प्रणाली दाखवते. कृपया लक्षात घ्या की फक्त x समन्वय नाही. मी काढलेले फंक्शन (a*x+b)*c+d असे दाखवले आहे. आलेखावरील स्लाइडरसह खेळा आणि तुम्हाला दिसेल की यापैकी प्रत्येक मूल्य आलेखाचे स्थान आणि स्केल कसे समायोजित करू शकते.
आता मी आधी माझ्याकडे असलेला नमुना कोड वापरून माझे सूत्र पुन्हा लिहीन आणि जे वाचायला सोपे जाईल.
Var a = 1 / 25, // दोलन खूप हळू करा x = काउंटर, // प्रत्येक वेळी ड्रॉ() ला b = 0 म्हणतात, ग्राफच्या बाजूने थोडासा हलवा, // आलेख वर समायोजित करण्याची आवश्यकता नाही किंवा खाली c = रुंदी * 0.4, // दोलन कॅनव्हासच्या अर्ध्यापेक्षा कमी रुंद करा d = canvas.width / 2 - rectWidth / 2; //केंद्रित करण्यासाठी आयताची स्थिती बदला xMovement = Math.sin(a * x + b) * c + d;
डेटा एंट्री
आत्ता आम्ही जे काही केले ते बाजूला ठेवून, पृष्ठामध्ये स्क्वेअर हलविण्यासाठी तुम्ही विविध वापरकर्ता इनपुट उपकरणांसह काय करू शकता याचा विचार करण्यासाठी काही मिनिटे द्या. ब्राउझरमध्ये मायक्रोफोन, वेबकॅम, माउस, कीबोर्ड आणि गेमपॅडसह अनेक पर्याय उपलब्ध आहेत. अतिरिक्त प्लगइन-नियंत्रित पर्याय उपलब्ध असू शकतात, जसे की लीप मोशन किंवा काइनेक्ट. वेबसॉकेट्स आणि सर्व्हर वापरून, तुम्ही व्हिज्युअलायझेशनला होममेड हार्डवेअरशी लिंक करू शकता (तुम्हाला सुधारित म्हणायचे आहे का?). तुमचा मायक्रोफोन वेब ऑडिओ API शी कनेक्ट करा आणि तुमचे ऑडिओ पिक्सेल फीड करा. तुम्ही वेबकॅममधून मोशन सेन्सर बनवू शकता आणि व्हर्च्युअल फिशच्या शाळेला घाबरवू शकता (मी शेवटचे ते पाच वर्षांपूर्वी फ्लॅशमध्ये केले होते).
आता तुम्हाला तुमची कल्पना आली आहे, चला आणखी काही उदाहरणे पाहू. एक चौरस कंटाळवाणा आहे, चला आणखी चौरस घालूया. पण सर्वप्रथम, एक फंक्शन (कोऑर्डिनेट सिस्टीम) तयार करू जे आपल्यासाठी अनेक प्रकारे उपयुक्त ठरेल. त्याला पॉइंट म्हणूया. हलत्या वस्तूंसह कार्य करण्यास मदत करणारी एक महत्त्वाची बाब म्हणजे आपल्याला x आणि y व्यतिरिक्त वेक्टर वापरण्याची आवश्यकता आहे. मी three.js Vector2 वर्गात नमुना कोड संकलित केले आहेत. x वेक्टर आणि y वेक्टरसह कार्य करणे सोपे आहे, परंतु आणखी बरेच सोयीस्कर पर्याय आहेत. आम्ही कशाबद्दल बोलत आहोत हे अधिक चांगल्या प्रकारे समजून घेण्यासाठी, येथे एक नजर टाका. (येथे लिंक असावी).
सर्वशक्तिमान बिंदू
ही उदाहरणे थोडी अधिक क्लिष्ट असतील कारण त्यात वस्तूंचा समावेश आहे, परंतु ते फायदेशीर आहे. नवीन दृश्य कसे कार्य करते हे समजून घेण्यासाठी कोडचे नमुने पहा, जे तुम्हाला कॅनव्हास रेखांकनाच्या मूलभूत गोष्टींमध्ये मदत करेल. आमच्या नवीन पॉइंटमध्ये कॅनव्हास संदर्भाप्रमाणेच कोणत्याही व्हेरिएबलमध्ये प्रवेश करण्यास सक्षम होण्यासाठी मार्कर असेल.
फंक्शन डॉट(x, y, सीन) ( var गती = 0.5; this.color = "#000000"; this.size = 10; this.position = new THREE.Vector2(x,y); this.direction = नवीन तीन .Vector2(गती * Math.random() - speed / 2, speed * Math.random() - speed / 2);
कन्स्ट्रक्टरसह कार्य सुरू करण्यासाठी, त्याच्या ऑपरेशनचे कॉन्फिगरेशन पॉइंटसाठी कॉन्फिगर केले आहे आणि ऑपरेशनसाठी आवश्यक काही व्हेरिएबल्स सेट केले आहेत. आणि पुन्हा आपण three.js वेक्टरकडे वळतो. 60fps वर प्ले करताना, तुमचे आयटम लवकर लाँच करणे आणि प्लेबॅक दरम्यान नवीन तयार न करणे महत्वाचे आहे. हे उपलब्ध मेमरी खाऊ शकते आणि तुमचे व्हिज्युअलायझेशन खराब करू शकते. तसेच, पॉइंट संदर्भानुसार फ्रेमची प्रत कशी पास करतो ते लक्षात घ्या. हे अधिक स्पष्टपणे कार्य करण्यास मदत करते.
डॉट.प्रोटोटाइप = ( अपडेट: फंक्शन() ( ... ), ड्रॉ: फंक्शन () ( ... ) )
उर्वरित सर्व कोड पॉइंट प्रोटोटाइप ऑब्जेक्टवर स्थापित केले जातील जेणेकरून प्रत्येक नवीन पॉइंटला या पद्धतींमध्ये प्रवेश मिळेल. मी फंक्शननुसार फंक्शन समजावून सांगेन.
अद्यतन: function(dt) ( this.updatePosition(dt); this.draw(dt); ),
मी ड्रॉईंग कोड अपडेट कोडपासून वेगळे करतो. हे ऑब्जेक्टला समर्थन आणि हलविणे खूप सोपे करते. MVC डिझाइनप्रमाणेच, ते तुमचे वैयक्तिक नियंत्रण तुमच्या तार्किक दृश्यापासून वेगळे करते. डीटी व्हेक्टर म्हणजे शेवटच्या अपडेटपासून मिलिसेकंदांमध्ये वेळेत झालेला बदल. हे नाव सोयीस्कर आणि लहान आहे आणि कॅल्क्युलस डेरिव्हेटिव्ह (गणना व्युत्पन्न) पासून आले आहे. ते तुमच्या फ्रेम रेटमधून तुमच्या हालचालीचा वेग कमी करते. अशा प्रकारे गोष्टी कठीण झाल्यास तुम्हाला NES शैलीतील मंदीचा अनुभव येणार नाही. जर तुमचा वेग खूप जास्त असेल तर असे होईल की फ्रेम्स वगळल्या जातील, परंतु वेग समान राहील.
UpdatePosition: function() ( // रेंडर लूपच्या बाहेर व्हेरिएबल तयार करण्याची ही एक छोटीशी युक्ती आहे // लूपच्या आत मेमरी वाटप करणे महाग आहे. // व्हेरिएबल फक्त खालील फंक्शनसाठी प्रवेशयोग्य आहे. var moveDistance = new THREE.Vector2(); //हे रिटर्न फंक्शन (dt) आहे ( moveDistance.copy(this.direction); moveDistance.multiplyScalar(dt); this.position.add(moveDistance); // ठेवा स्क्रीनवरील डॉट 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; )(), //लक्षात ठेवा की हे फंक्शन त्वरित कार्यान्वित केले जाते आणि वेगळे कार्य परत करते
हे कार्य त्याच्या संरचनेत थोडे विचित्र आहे, परंतु वापरण्यास सोपे आहे. समन्वय प्रणाली (फंक्शन) मध्ये मेमरी वाटप करणे खरोखर महाग आहे. MoveDistance एकदा सेट केला जाऊ शकतो आणि आवश्यकतेनुसार सिस्टम फंक्शन रीस्टार्ट करताना वापरला जाऊ शकतो.
हा वेक्टर फक्त नवीन स्थितीची गणना करण्यासाठी वापरला जातो आणि फंक्शनच्या बाहेर काम करण्याचा हेतू नाही. हे वापरले जाणारे पहिले गणितीय वेक्टर आहे. आता वेक्टरची दिशा वेळेतील बदलाच्या विरूद्ध गुणाकार केली जाते आणि नंतर स्थितीत जोडली जाते. शेवटी, मॉड्यूलची क्रिया होते, जी स्क्रीनवर बिंदू ठेवते.
ड्रॉ: function(dt) ( // सोयीसाठी एक लहान व्हेरिएबल नाव मिळवा var ctx = this.scene.context; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect(this.position.x, this .position.y, this.size, this.size);
आणि शेवटी सर्वात सोपा भाग. मुख्य ऑब्जेक्टच्या संदर्भाची एक प्रत बनवा आणि एक आयत काढा (किंवा दुसरे काहीतरी, काही फरक पडत नाही). हे फक्त इतकेच आहे की स्क्रीनवर आयत काढणे सर्वात सोपा आहे.
या टप्प्यावर मी एक नवीन डॉट जोडतो आणि त्याला मुख्य कन्स्ट्रक्टरमध्ये this.dot = new Dot(x, y, this) म्हणतो. आणि नंतर मुख्य अपडेट पद्धतीमध्ये मी this.dot.update(dt) जोडतो आणि एक बिंदू स्क्रीनवर फिरताना दिसतो.
कोडमध्ये थोडी अधिक रचना असणे छान आहे, परंतु ते अधिक आकर्षक बनवत नाही. येथूनच चक्र सुरू होते. मुख्य ऑब्जेक्टमध्ये आपण नवीन DotManager ऑब्जेक्ट तयार करू. ही कार्यक्षमता वेगळ्या ऑब्जेक्टमध्ये संकलित करणे सोयीचे आहे कारण मॉडेलिंग अधिक जटिल होत असल्याने ते सोपे आणि स्वच्छ आहे.
Var DotManager = फंक्शन(numberOfDots, सीन) ( 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); } } };
आता टेम्प्लेटमध्ये, डॉट अपडेट करण्याऐवजी, आम्ही डॉट मॅनेजर तयार करतो आणि अपडेट करतो. प्रथम, 5000 गुण तयार करू.
फंक्शन सीन() ( ... this.dotManager = new DotManager(5000, this); ... ); Scene.prototype = ( ... अद्यतन: function(dt) ( this.dotManager.update(dt); ) ...);
हे एका बिंदूपेक्षा नक्कीच खूप चांगले दिसते. तुमच्या पॉइंटवर अपडेट केलेल्या पद्धतीमध्ये अधिक जोडणे सुरू करण्याची हीच वेळ आहे. ऑब्जेक्ट कोडमधील कोणताही बदल स्क्रीनवरील प्रत्येक बिंदूवर दिसून येईल. आणि येथूनच चमत्कार घडू लागतात. वरील समन्वय प्रणाली लक्षात ठेवा? रिपल इफेक्ट तयार करण्याबद्दल कसे? पॉइंट ऑब्जेक्टसाठी आपण वेव्हपोझिशन व्हेरिएबल बनवू. शेवटी, आपण हे व्हेरिएबल Y स्थितीत जोडू.
UpdateWave: function(dt, time) ( this.wavePosition = Math.sin(this.scene.currTime / 500 + this.position.x / this.scene.canvas.width * 4) * 20;)
होय, जेव्हा ते एका ओळीवर लिहिले जाते तेव्हा ते थोडे गोंधळात टाकते, म्हणून मी दुसरी आवृत्ती संलग्न करत आहे, जी समन्वय प्रणालीप्रमाणे बनविली जाते.
Var a = 1 / 500, //ऑसिलेशन खूप हळू करा x = this.scene.currTime, // प्रत्येक वेळी ड्रॉ() ला b = this.position.x / this म्हणतात ग्राफच्या बाजूने थोडासा हलवा. scene.canvas.width * 4, // आलेख वर किंवा खाली समायोजित करण्याची गरज नाही c = 20, // दोलन कॅनव्हास d = 0 पेक्षा थोडे कमी रुंद करा; //केंद्रित करण्यासाठी आयताची स्थिती बदला xMovement = Math.sin(a * x + b) * c + d;
मला काळजी वाटते...
आणखी एक लहान स्पर्श. मोनोक्रोम थोडे कंटाळवाणे आहे, म्हणून थोडे रंग जोडूया.
Var hue = this.position.x / this.scene.canvas.width * 360; this.color = Utils.hslToFillStyle(रंग, 50, 50, 0.5);
प्रत्येक नवीन पॉइंटसाठी, त्याची प्रारंभिक स्थिती सेट करा आणि आडव्या कॅनव्हासच्या बाजूने सावली सेट करा. मी Utils.hslToFillStyle फंक्शन जोडले आहे, जे काही इनपुट व्हेरिएबल्सला योग्यरित्या फॉरमॅट केलेल्या fillStyle चेनमध्ये रूपांतरित करण्यास मदत करेल. गोष्टी आधीच अधिक मनोरंजक होत आहेत. पॉइंट्स शेवटी एका ठिकाणी एकत्रित होतील आणि ते अव्यवस्थितपणे विखुरल्यानंतर इंद्रधनुष्याचा प्रभाव राहणार नाही. पुन्हा, हे काही गणित किंवा इनपुटसह द्रव व्हिज्युअलायझेशनचे उदाहरण आहे. मी RGB ऐवजी HSL कलर मॉडेलद्वारे रंगासह काम करण्यास प्राधान्य देतो कारण ते वापरणे सोपे आहे. RGB थोडा अमूर्त आहे.
माऊससह कार्य करणे
या बिंदूपर्यंत कोणताही वास्तविक वापरकर्ता अनुभव नव्हता.
वर माउस = फंक्शन(दृश्य) ( this.scene = दृश्य; 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; ) इतर ( this.position.x = -100000; this.position.y = -100000;
हे साधे ऑब्जेक्ट माऊस ऑपरेशनचे अपडेट एन्कॅप्स्युलेट करते, बाकीच्या कामाच्या विरूद्ध. अद्यतन असे आहे की वेक्टरची स्थिती फिरत्या माऊसच्या स्थितीशी जुळते. उर्वरित ऑब्जेक्ट्स ऑब्जेक्टमध्ये संदर्भित असल्यास माऊस वेक्टर स्थानापेक्षा भिन्न असू शकतात. एक इशारा मी दुर्लक्षित सोडला. कॅनव्हासची रुंदी DOM पिक्सेलच्या परिमाणांशी जुळत नसल्यास, उदा. कॅनव्हासचा आकार बदलणे किंवा उच्च पिक्सेल घनता (रेटिना) किंवा कॅनव्हास वरच्या डाव्या कोपर्यात स्थित नसल्यास. माउस निर्देशांक त्यानुसार बदलणे आवश्यक आहे.
Var Scene = function() ( ... this.mouse = new Mouse(this); ...);
आकृतीच्या आत एक माउस ऑब्जेक्ट तयार करणे बाकी आहे. आता आपल्याकडे उंदीर आहे, आपण ठिपके त्याच्या मागे लावू शकतो.
फंक्शन डॉट(x, y, सीन) ( ... this.attractSpeed = 1000 * Math.random() + 500; this.attractDistance = (150 * Math.random()) + 180; ... )
मी बिंदूवर अनेक स्केलर मूल्ये जोडली आहेत जेणेकरुन प्रत्येकाने इतरांपेक्षा वेगळे वागावे, प्रक्रिया अधिक वास्तववादी बनवेल. या मूल्यांसह खेळा आणि तुम्हाला फरक जाणवेल. आता माउस पद्धतीवर लक्ष केंद्रित करूया. टिप्पण्यांसह हे थोडे लांब होत आहे.
AttractMouse: function() (//पुन्हा, या पद्धतीसाठी काही खाजगी व्हेरिएबल्स तयार करा var vectorToMouse = new THREE.Vector2(), vectorToMove = new THREE.Vector2(); //हे वास्तविक सार्वजनिक पद्धत रिटर्न फंक्शन आहे(dt) ( var दूरी टॉमाऊस, डिस्टन्स टॉमोव्ह; // बिंदूपासून माउसपर्यंतचे x आणि y अंतर दर्शवणारे वेक्टर मिळवा // हे व्हेक्टर vectorToMouse कसे कार्य करतात याबद्दल अधिक माहितीसाठी तीन.जेएस दस्तऐवजीकरण पहा.copy(this.scene.mouse. पोझिशन) .sub(this.position); //व्हेक्टर डिस्टंस पासून माऊसचे अंतर मिळवा = vectorToMouse.length(); // अंतर बदलण्यासाठी बिंदूसाठी वैयक्तिक स्केलर मूल्ये वापरा moveLength = dt * (हा .attractDistance - दूरी ToMouse) / this.attractSpeed; // बिंदू आकर्षित होत असेल तरच हलवा (moveLength > 0) ( // व्हेक्टरचा आकार इच्छित मूव्ह लांबी vectorToMove .copy(vectorToMouse) मध्ये बदला .divideScalar (distanceToMouse).multiplyScalar(moveLength)
) ); )()
माझ्यासाठी सर्वात महत्त्वाची गोष्ट म्हणजे प्रोग्रामिंग कविता तयार करण्याची प्रक्रिया आणि काहीतरी नवीन तयार करण्याची कला. मी तुम्हाला सल्ला देईन की तपशील आणि मोठ्या प्रकल्पांमध्ये जास्त खोल जाऊ नका. त्याऐवजी, पुनरावृत्ती करा, प्रयोग करा, यश साजरे करा आणि कधीकधी अयशस्वी व्हा. एके दिवशी मला भितीदायक इंद्रधनुष्याच्या तुकड्यासारखे दिसले. मला पुनरावृत्ती होणाऱ्या मंडळांसाठी खूप आशा होत्या, परंतु मी खराब निकालांनी मला माझ्या मार्गापासून परावृत्त केले नाही. शेवटी, येथे तपशीलवार दिलेला कोड हा अतिशय ऑब्जेक्ट ओरिएंटेड शैलीतील शोध आहे, जो मला सर्वात जास्त आवडतो. या कल्पनांना तुमच्या स्वतःच्या प्रक्रिया, साधने आणि तंत्राशी जुळवून घ्या. कविता ही एक मोठी एकात्मिक प्रणाली नाही, म्हणून मोठ्या प्रकल्पांची परिस्थिती विचारात न घेता ती रेखाटणे आणि प्रयोग करणे सोपे आहे.
कॅनव्हासचा एक पेन्सिल म्हणून विचार करा जे तुम्हाला तुमच्या उत्कृष्ट कल्पना आणण्यात मदत करेल आणि तुमच्या निर्मितीला उड्डाण करू देईल.
