Coding Design

Sine-waves.js

အားလုံးပဲ မဂၤလာပါခင္ဗ်။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္ အလုပ္လုပ္ကိုင္ေနတဲ့ ေမာင္ေက်ာ္စိုးႏိုင္ ျဖစ္ပါတယ္ခင္ဗ်။
ဒီတစ္ပတ္မွာေတာ့ sine-wave.js အသုံးျပဳပုံနဲ႔ ပတ္သက္ၿပီး ကြၽန္ေတာ္ ေလ့လာမိသေလာက္ မွ်ေဝေပးသြားမွာ ျဖစ္ပါတယ္။

What is Sine-waves js?
Sine-wave.js ဆိုတာ canvas ကို အသုံးျပဳၿပီး sine-wave မ်ားစြာကို ဖန္တီး အသုံးျပဳႏိုင္ေသာ javascript library တစ္ခုျဖစ္ပါတယ္။

Installation
Sine-wave.js ကို NPM ကေနတဆင့္ install လုပ္ၿပီး အသုံးျပဳႏိုင္ပါတယ္။

npm install sine-waves --save

ေနာက္ထပ္နည္းလမ္းတစ္ခုကေတာ့ NPM ကိုအသုံးမျပဳဘဲ ေအာက္ပါ link ကေနတဆင့္ ခ်ိတ္ဆက္အသုံးျပဳႏိုင္ပါတယ္။

https://isuttell.github.io/sine-waves/javascripts/sine-waves.min.js

Easing Function
Sine-wave.js မွာ easing function (၄) မ်ိဳး ရွိပါတယ္။
1.Linear
2.SineIn
3.SineOut
4.SineInOut
Default အေနျဖင့္ Linear function ကို အသုံးျပဳၿပီး wave မ်ားကို left to right direction တစ္ခုအေနျဖင့္သတ္မွတ္ထားပါတယ္။

Wave types
Sine-wave.js မွာ wave types (၃)မ်ိဳး ပါဝင္ပါတယ္။
1.Square
2.Sawtooth
3.Triangle တို႔ျဖစ္ပါတယ္။

Wave Options
Wave တစ္ခုကို စတင္အသုံးျပဳမည္ဆိုပါက wave မွာပါဝင္ေသာ properties မ်ားကိုလည္း သိရွိဖို႔လိုအပ္ပါတယ္။

1.TimeModifier
Wave တစ္ခုရဲ႕ speed ကို သတ္မွတ္ေပးတဲ့ အခါမွာ timeModifier ကို အသုံးႏိုင္ပါတယ္။

2.LineWidth
Wave တစ္ခုရဲ႕ အထူ၊ အပါး stoke ကို သတ္မွတ္အသုံးျပဳခ်င္တဲ့အခါမွာဆိုရင္ lineWidth ကို အသုံးျပဳဖို႔လိုအပ္ပါတယ္။

3.Amplitude
Wave ရဲ႕ အတက္အက် သတ္မွတ္တဲ့အခါမွာဆိုရင္ amplitude ကို အသုံးျပဳရပါတယ္။

4.WaveLength
Wave တစ္ခုကို ဘယ္ေလာက္ အရွည္ အသုံးျပဳခ်င္တဲ့အခါမွာဆိုရင္ wave ရဲ႕ width ကို သတ္မွတ္ဖို႔အတြက္ waveLength ကို အသုံးျပဳဖို႔လိုအပ္ပါတယ္။

5.Segment Length
Wave တစ္ခုမွာ segment မ်ားစြာထည့္ၿပီး အသုံးျပဳခ်င္တဲ့အခါမွာဆိုရင္ segmentLength ကိုသတ္မွတ္ေပးဖို႔ လိုအပ္ပါတယ္။

6.StrokeStyle
Wave တစ္ခုရဲ႕ color ကို strokeStyle ျဖင့္ သတ္မွတ္အသုံးျပဳႏိုင္ပါတယ္။

sinewave.js သတ္မွတ္ခ်က္ေတြကို နားလည္ၿပီဆိုရင္ sine waves ေလးတစ္ခုကို ေရးျပသြားမွာ ျဖစ္ပါတယ္။

Create Canvas

ပထမဆုံးအေနျဖင့္ HTML file create လုပ္ၿပီး body tag ထဲတြင္ canvas တစ္ခုတည္ေဆာက္ပါမည္။
ေနာက္ၿပီး jquery ႏွင့္ sine-waves.js ကို ဆက္လက္ခ်ိတ္ပါမည္။

<!DOCTYPE html>
<html>
<head>
<title>
sine-wave js
</title>
</head>

<body >
<canvas id="waves"></canvas>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" >
</script>
<script src="sine-waves.js" >
</script>
</body>

</html>

ေနာက္ထပ္ script tag ထဲတြင္ ေအာက္ပါအတိုင္း object ေဆာက္ၿပီး wave ကို create လုပ္သြားပါမည္။

$(function(){
var waves = new SineWaves({
el: document.getElementById('waves'),
width: function() {
return $(window).width();
},

height: function() {
return $(window).height();
},

speed: 5,

ease: 'SineInOut',

wavesWidth: '75%',

waves: [
{
timeModifier: 4,
lineWidth: 1,
amplitude: -150,
wavelength: 250
}

],
});

});

Wave တစ္ခုမွာ Color မ်ားစြာအသုံးျပဳၿပီး အေရာင္စပ္ ဖန္းတီးတဲ့အခါမွာဆိုရင္ ေအာက္ပါအတိုင္း resizeEvent function ကိုအသုံးျပဳၿပီး ဖန္တီးႏိုင္ပါတယ္။

resizeEvent: function() {
var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
gradient.addColorStop(1,"rgba(255, 255, 25, 0");

var index = -1;
var length = this.waves.length;
while(++index < length){
this.waves[index].strokeStyle = gradient;
}

Coding sample အားလုံးကိုေတာ့ ေအာက္ပါ codepen link ကေနတဆင့္ ဝင္ေရာက္ေလ့လာႏိုင္ပါတယ္။

Examples on Codepen
The Basics
Animated Borders
Rotate
Alternative Wave Types

အခုမွစေလ့လာမယ့္ သူေတြအတြက္ ဗဟုသုတတိုးပြားၿပီး တစ္စုံတစ္ခုအက်ိဳးရွိမယ္လို႔ ေမွ်ာ္လင့္မိပါတယ္။
အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *