html5 मध्ये आपण चौकोन, वर्तुळ कसे काढायचे ते पाहिले. आता त्या सूत्रांचा उपयोग करून आपल्याला पताका काढता येतील. यासाठी एका आकाराचे अनेक त्रिकोण एका रांगेत काढावे लागतील गणिती सूत्रांचा उपयोग करून ते काढता येतील. शिवाय प्रत्येक पत्रिकोणाचा रंग दरवेळी बदलावा यासाठी खाली दाखविल्याप्रमाणे get_random_color() हे सूत्र वापरून रंग निश्चित करणार्‍या सहा हेक्झाडेसिमल अंकात दर त्रिकोणासाठी बदल करता येईल.
html5 मध्ये अक्षरेही काढता येतात. मात्र मराठी अक्षरांसाठी वेबपेजचा अक्षरसंच UTF-8 ठेवणे व मंगल font वापरणे आवश्यक आहे.
ज्ञानदीपतर्फे नवीन वर्षाच्या शुभेच्छा देण्यासाठी खालील प्रोग्राम लिहिला आहे. तो. save करून ब्राऊजरमध्ये उघडा म्हणजे वरील शुभेच्छा दिसेल.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Pataka</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
}
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
HTML5 - Canvas वापरून वेबपेजवर आकृत्या काढण्याच्या पहिल्या भागात आपण चौकोन चार रेषा काढून काढला होता. मात्र चौकोन काढण्यासाठी rect(x0,y0,w,h) असे तयार सूत्र वापरता येते. म्हणजे
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
याऎवजी ctx.rect(100,100,200,200) असे लिहिता येते.
वरील चौकोन रंगाने पूर्ण भरला होता. असा रंगीत चौकोन न काढता आपल्याला फक्त चौकट काढावयाची असल्यास ctx.lineWidth, ctx.strokeStyle,ctx.stroke() यांचा उपयोग करून कडांची जाडी, रंग ठरवून चौकट काढता येते. अथवा चौकट असणारा रंगीत चौकोन काढता येतो.
ctx.rect या सूत्राचा वापर करून तसेच जावास्क्रीप्टच्या गणिती प्रक्रिया वापरून बुद्धीबळाचा पट काढता येईल . त्याचा प्रोग्राम व चित्र दिले आहे.
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
वेबपेजवर चित्रे व आकृत्या काढणे आता HTML5 - मधील Canvas सुविधेमुळे आता अगदी सोपे झाले आहे. चौकोन काढणे - खाली एक २००x२०० पिक्सेल आकाराचा चौरस काढण्याचा प्रोग्रॅम दिला आहे.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Square</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#FF6699";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html> प्रोग्रामचे वर्णन- वेबपेजच्या head टॅगमध्ये जावास्क्रिप्टचा मुख्य प्रोग्राम आहे.व body मध्ये onLoad="init()"; या आज्ञेने तो कार्यान्वित केला आहे. body मध्ये canvas हे एलेमेंट असून त्यात canvas चा ID व लांबी व उंची दिली आहे. हा आपला ड्राईंग बोर्ड झाला. जावास्क्रिप्ट फंक्शनमध्ये document.getElementById('canvas') वापरून त्याला ctx हे नाव दिले आहे. ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)canvas ला (2D) म्हण्जे फक्त दोनच परिमाणे लांबी व रुंदी आहेत. पुढील भागातील ओळींचा अर्थ सहज समजण्यासारखा आहे.वरील प्रोग्राममध्ये आवश्यक ते बदल करून पाहिजे त्या आकाराचा कोणताही त्रिकोण, चौकोन वा बहुभुजाकृती काढता येईल. त्याचा रंगही हवा तसा बदलता येईल.
वर्तुळ काढणे-
वर्तुळ काढण्यासाठी त्याच्या मध्यबिंदूचे सहगुणक व त्रिज्या देऊन पूर्ण वर्तुळासाठी रेडियनमध्ये कोन द्यावा लागतो. वरील प्रोग्राममध्ये खालीलप्रमाणे बदल करा.
ctx.fillStyle = "#336699";
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
आता ब्राउजरमध्ये हे वेबपेज उघडल्यास खालीलप्रमाणे चित्र दिसेल.( चित्रातील आकडे व अक्ष रेषा माहितीसाठी दिल्या आहेत.)
रेष काढणे - रंग न भरता साधी रेष काढायची असेल तर ctx.fillStyle आणि ctx.fill(); न वापरता फक्त ctx.stroke(); वापरावे लागते. त्याचे उदाहरण व चित्र खाली दिले आहे. <!DOCTYPE html>
<html>
<head>
<title>HTML 5 Line</title>
<meta charset="UTF-8">
<script>
function init() {
ctx = document.getElementById('canvas').getContext('2d');
ctx.moveTo(50,50);
ctx.lineTo(300,150);
ctx.stroke();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="600" height="400">
Your browser does not support the canvas element .
</canvas>
</body>
</html>
लहान मुलांना नेहमी वाटणारे कुतुहल म्हणजे घड्याळ. त्यातले काटे आपोआप सारखे कसे फिरत असतात व मोठी माणसे घड्याळाकडे पाहून चटकन्‌ किती वाजले कसे सांगतात याचे कोडे त्यांना उलगडत नाही.
माझी नात चि. अनुषा नुकतीच इंग्रजी अक्षरे काढायला शिकली होती. नवीन काहीतरी शिकायची तिला भारी हौस. एकदा ती माझ्याकडे आली व म्हणाली,
’आबा, घड्याळ वाचायला शिकवा.’
तिचा उत्साह पाहून मी एक पुठ्ठ्याचे घड्याळ तयार केले व त्यावर फिरणारे काटे लावले पण मग माझ्या लक्षात आले की तिला फक्त तासाचा काटाच समजू शकेल. कारण घड्याळावर फक्त १ ते १२ एवढेच आकडे असतात. मिनिट काटा पाहून मिनिटे ओळखायची असतील तर पाचाचा पाढा येणे आवश्यक आहे.
असा पाढा न येताही मिनिटे समजायची असतील तर मुख्य तासांच्या आकड्या जवळ मिनिटेही लिहावी लागतील. तासाच्या काट्याचा रंग तासाचे आकडे दाखविण्यासाठी व मिनिट काट्याचा रंग मिनिटे दाखविण्यासाठी केला तर तास व मिनिटे चटकन ओळखता येतील.
मग तसे घड्याळ मी तयार केले.
मग मनात विचार आला की तासाचे व मिनिटाचे घड्याळ वेगळे केले तर मुलांना घड्याळ समजणे आणखी सोपे होईल.
एवढा खटाटोप करण्याऎवजी डिजिटल घड्याळ वापरले तर. डिजिटल घड्याळ समजायला फार सोपे. तास, मिनिटे व सेकंद यांचे आकडे वाचले की झाले पण त्याला आपल्या जुन्या घड्याळाची कधीच सर येत नाही. म्हणूनच डिजिटल क्रांतीनंतरही काट्यांच्या घड्याळाने आपले महत्व टिकवून ठेवले आहे.
आता तर घड्याळ दागिना म्हणून वापरला जातो व त्यातही काट्यांच्या घड्याळाला जास्त मान आहे.पूर्वी लंबकाचे मोठे घड्याळ ही घरातील दिवाणखान्यातील भूषणावह वस्तू असे. दर तासाला ठोके देणारे घड्याळ असणे ही त्या काळातील चैन असे.
घड्याळाच्या आकार व डिझाईनमध्ये अनेक प्रकार आज उपलब्ध आहेत. आकड्यांच्या जागी रोमन लिपीतील आकडे वा नुसते ठिपके वा अन्य चिन्हे ही वापरली जातात. पण मुलांच्या दृष्टीने ती समजण्यास अगम्य ठरतात.
दर तासाला किती वाजले हे सांगणारी वा विशिष्ट श्लोक म्हणणारी वा पक्षांचे आवाज देणारी घड्याळॆही बाजारात मिळतात.
घड्याळाचा विषय निघाला म्हणून आठव्ले. आम्हाला लहानपणी कवी केशव कुमार यांची ‘आजीचे घड्याळ’ या नावाची एक सुंदर कविता अभ्यासाला होती. त्याची सुरुवात अशी होती.
आजीच्या जवळी घड्याळ कसले आहे चमत्कारिक,
देई ठेवुनि तें कुठे अजुनि हे नाही कुणा ठाउक;
त्याची टिक टिक चालते न कधिही, आहे मुके वाटते,
किल्ली देई न त्यास ती कधितरी, ते सारखे चालते
कोंबडा आरवणे, उन्हे ओटीवर येणे, दिवेलागण होणे इत्यादी गोष्टींमधून आजीला कशी काय वेळ कळते हे बालमनाला कोडे पडते व आजीने आपले जादूचे घड्याळ कोठे तरी लपवून ठेवले असेल असे त्याला वाटते.
आपले घड्याळ फक्त बारा तासांचे असते व दिवस व रात्र असे तासकाट्याचे दोन फेरे केल्याशिवाय २४ तासांचा दिवस ही कल्पना मुलांच्या मनात रुजत नाही. निसर्गातील होणार्‍या बदलांचा संबंध घड्याळाशी लावल्याखेरीज मुलांना घड्याळ नीट समजणे अवघड होते हे माझ्या लक्षात आले. पहाट, सकाळ, मध्यान्न, दुपार, संध्याकाळ, तिनीसांज, रात्र, मध्यरात्र असे अनेक शब्द आपण वेळ सांगण्यासाठी वापरतो. मुलांच्या घड्याळात यांचा समावेश केला तर ?
मग घड्याळातील आकडेही आकाशातील सूर्याच्या स्थानाप्रमाणे लिहिले व १२ तासांचे दोन फेरे एकाच घड्याळात पहायला मिळाले तर किती सोपे होईल.सकाळी सहा ते सायंकाळी सहापर्यंतचा घड्याळाचा भाग दिवसनिदर्शक पांढरा व सायंकाळी सहा ते सकाळी सहा पर्यंतचा घड्याळाचा खालचा भाग रात्र दाखविण्यासाठी काळ्या रंगाचा केला तर अधिक चांगले होईल.दिवसाचे आकडे सूर्याच्या प्रतिमेत तर रात्रीचे आकडे चंद्राच्या प्रतिमेत काढता येतील.
यावर एक आक्षेप येऊ शकेल की सर्व ठिकाणी व वर्षातील कोणत्याही दिवशी सूर्य ६ वाजता उगवेल व सायंकाळी ६ वाजता मावळेल हे शक्य नाही.सीझनप्रमाणे दिवस मोठा व रात्र लहान किंवा दिवस लहान व रात्र मोठी असू शकते. सूर्य उगवण्याची वेळही स्थान व दिनांकानुसार बदलते ही चूक सुधारण्यासाठी वरील घड्याळातील खालचा काळा भाग अक्षांश-रेखांशाप्रमाणे व दिनांकानुसार बदलता येऊ शकेल. असे करता आले की कोणत्याही दिवशी सूर्योदय व सूर्यास्त घड्याळात बिनचूक दाखविता येतील. फ्लॅश तंत्रज्ञान वापरून असे घड्याळ करता येणे शक्य आहे. मग त्याचीच इलेक्ट्रॉनिक आवृत्ती करता येईल.
मग जणुकाही आजीचे जादूचे घड्याळच मुलांना गवसल्याचा आनंद होईल.
लहानपणी आम्ही ‘वाघोबा, वाघोबा, किती वाजले? ’ असा खेळ खेळत असू. यात वाघोबाचे राज्य आलेल्या मुलाने पाठ करून किती वाजले हे सांगायचे व त्यासाठी १ ते १२ पर्यंत कोणताही आकडा सांगायचा. जोपर्यंत १२ हा आकडा सांगितला जात नाही तोपर्यंत बाकीची मुले हळू हळू पुढे सरकत. मध्यंतरात केव्हाही वाघोबाने मागे वळून पाहिले की सर्व मुले स्तब्ध व्हायची. कोणी हलले की त्याच्यावर राज्य यायचे. बारा वाजले हे म्हटले की वाघोबा मागे वळून मुलांमागे धावायचा व ज्याला तो शिवेल त्याच्यावर राज्य यायचे. याउलट मुले जवळ येऊन त्यापैकी कोणी वाघोबाच्या पाठीत धपाटा घातला तर त्याला परत राज्य घ्यायला लागायचे. वाळूचे घड्याळ
या खेळातून घड्याळात १२ आकडे असतात व १२ ला विषेष महत्व आहे हे मुलांना लक्षात यायचे.
स्वयंचलित घड्याळाचा शोध लागण्यापूर्वी लोक वाळूचे घड्याळ वापरत.वाळूच्या घड्याळात दोन शंकूच्या आकाराची काचेची भांडी एकमेकावर जोडून एका बाजूस बारिक वाळू भरतात व जोडाच्या जागी एक बारिक छिद्र पाडतात. वाळूचे भांडे वरच्या बाजूस राहील असे ठेवले की वाळू मधल्या भोकातून खालच्या भांड्यात पडू लागते. सर्व वाळू खालच्या भांड्यात येण्यास लागणारा वेळ म्हणजे एक तास वा विशिष्ट कालमापनाचे एकक धरले जाते. वाळूचे घड्याळ परत उलट करून ठेवले की पुन्हा चालू होते.
तर आपल्याकडे वेळ मोजण्यासाठी घटिका पात्र वापरले जाई.घटीकापात्र म्हणजे तांब्याचे एक विशिष्ट आकाराचे भांडे , याला तळांत एक बारीक छिद्र असते . हे भांडे पाण्याच्या घंगाळात तरंगत ठेवले जाई. पाणी आत शिरून ते भरल्यावर जड होऊन पाण्यात बुडले म्हणजे एक घटका झाली असे समजले जायचे. लग्नाचा मुहूर्त पूर्वी या साधनाने ठरवला जायचा.
चेंडूंचे घड्याळ
चेंडूंच्या स्वरुपात किती वाजले दाखविणारी एक सुंदर फ्लॅश मुव्ही माझ्या पाहण्यात आली. यात सेकंदासेकंदाने चेंडू वर जातॊ. व मिनिट पट्यावर पडतो. वरच्या दोन पट्यांवर वरील चेंडू मिनिटे तर खालच्या पट्टीवरील चेंडू तास दर्शवितात. Ref:http://abowman.com/google-modules/ball-clock/
सावलीवरून वेळ कळू शकते. वर्षातील कोणत्याही दिवशी सावलीवरून वेळ ठरविण्यासाठी सनडायल या साधनाचा वापर करता येतो. या साधनात ध्रुव तार्‍याच्या दिशेत तिरकी पट्टी लावलेली असते व त्याची सावली निरनिराळ्या वेळेला कोठे पडेल त्याप्रमाणे रेषा काढलेल्या असतात.स्थायी मोठ्या सनडायलची उत्तम उदाहरणे म्हणजे भारतातील जंतरमंतर आणि रेडिंग,कॅलिफोर्निया येथील सॅक्रीमेंटो नदीवरील सनडायल ब्रिज घड्याळ
