Rumus Perlambatan

Sering lupa dengan rumus ini.
Supaya tidak lupa, tulis / catat di blog dulu :)

Sebelumnya, pengertian perlambatan:
Perlambatan adalah proses suatu benda bergerak mengurangi kecepatan. (*mohon ralat jika saya keliru). Contohnya, suatu mobil sedang melaju dengan kecepatan 100 km/jam. Kemudian dia mengurang kecepatannya menjadi 40 km/jam. Inilah yang namanya perlambatan.

Yang mempengaruhi perlambatan:
   V = Kecepatan
   V0 = Kecepatan awal
   t = waktu
   d = jarak
   a = perlambatan

Ini dia rumus yang dipakai:
Mencari Kecepatan:
     V = V0 - a*t

Mencari waktu:
     t = V0 / a

Mencari jarak:
     d = V0*t - 0.5*a*t*t

Mencari perlambatan:
     a = (V0*V0) * 0.5 * d

HTML touch Event

Belajar tentang touch Event di HTML, 

Ini yang perlu di tulis:

document.addEventListener("touchStart", <method>, true/false)

document.addEventListener("touchMove", <method>, true/false)

document.addEventListener("touchEnd", <method>, true/false)

Dimana:

<method> berupa function yang berisi tentang aksi setelah touch event.

Sumber:

http://stackoverflow.com/questions/10814838/document-addeventlistenertouchmove-preventbehavior-false-prevents-me-us

Karakter × (kali) di Programming

Kadang sering bingung kalo ada karakter kali di "dynamic text" di actionscript.
Akhirnya setelah cari cara, ketemu salah satu solusi nya.

Solusi:

Pakai shortcut: Alt+0215  (Alt ditekan dan tahan, kemudian tekan bergantian 0,2,1,5)
hasilnya
 ==>   ×

catatan:
Alt+0215 bisa dilihat di shortcut CorelDraw>Insert Character

textField.restrict = "0-9"

Apa itu restrict?
Kira-kira begini, kita punya textField, namun hanya ingin di input dengan karakter tertentu saja, misal angka 0,1,2,3,4,5,6,7,8,9 saja.

Maka, penulisannya: 
textField.restrict = "0-9";

sumber:
http://stackoverflow.com/questions/4702693/actionscript-restrict-only-number-with-two-decimals

Drop Down Menu untuk Blog (CSS3)

Gimana caranya?
Langsung aja ke sumbernya :)


sumber:
http://www.bloggingtuition.org/2013/08/css3-drop-down-menu-for-blogger.html

Kumpulan Link penting

http://beta.appinventor.mit.edu
https://www.wetransfer.com/
http://www.bluestacks.com/

Performa Flash CS5 dan CS6

Kemarin saya mengedit file dengan Flash CS5.
Ketika copy paste suatu movieclip, dan replace movieclip, ternyata Kinerja Flash CS5 menjadi lebih lambat.
Lain hal nya dengan Flash CS6, ketika copy paste seperti cara di atas, Kinerjanya tetap stabil.

Solusi ketika Flash CS5 kinerjanya melambat :
- close file yang sedang di edit
- matikan program Flash tersebut
- jalankan kembali
- edit kembali file yang sama

Solusi lain:
- edit dengan menggunakan Flash CS6
- save as menjadi Flash CS5 Document

Semoga bermanfaat

Mencari FPB dari 2 buah bilangan

Kalau ini adalah mencari Faktor Persekutuan Terbesar atau biasa disebut FPB.


Begini algoritmanya dgn actionscript 2.0 :

function CariFPB(a, b) {
var no = 0;
var FPB = 1;
var a1, b1;
var a2, b2;
var temp = 0;

a1 = a;
b1 = b;
do {
a2 = Math.max(a1, b1)-Math.min(a1, b1);
b2 = Math.min(a1, b1);
a1 = a2;
b1 = b2;
var f = a2 == b2;
if (f) {
FPB = a1;
}
} while (!f);
//trace("FPB: "+FPB)
return FPB;
}

Misal mencari FPB dari bilangan 4 dan 6.
maka:
var hasil = CariFPB(4, 6);
trace(hasil)

--> 2

Algoritma Kelipatan dari 2 buah bilangan

Ketemu tugas kantor yang berhubungan dengan mencari Kelipatan dari 2 bilangan.
Dengan ketentuan, Kelipatannya harus kurang dari 30.

Ini dia algoritmanya dengan actionscript 2.0

function CariKelipatan(a, b) {
var no = 0;
var ArrKelipatan = new Array();
var temp = 0;
var batas = 30;
do {
no++;
temp = no*a*b;
f = temp>batas;
if (!f) {
ArrKelipatan[no-1] = temp;
}
} while (!f);
return (ArrKelipatan);
}

Misalkan 2 buah bilangan yang di cari kelipatannya adalah: 2 dan 3
maka:
var hasil = CariKelipatan(2, 3)
trace (hasil)

--> 6,12,18,24

Gerak Pertikel Bertabrakan - sumbu x - ActionScript 2.0 Flash

Saya ingin mencoba membuat program partikel bertabrakan

kira-kira seperti ini:

Huruf-huruf dianggap objek (movieclip)

Seperti ini programnya:

// fungsi gerak partikel
function gerak() {
this._x += this.dx;
this.xA = this._x-this.arah*this._width/2;
this.xB = this._x+this.arah*this._width/2;
}

// definisi awal dan mencari banyaknya partikel yang ada di layar (banyaknya movieclip "par")
nmax = 0;
do {
nmax++;
mc = this["par"+nmax];
} while (mc<>undefined);


// besar perpindahan dan menentukan arah
for (var i = 1; i<=nmax; i++) {
this["par"+i].besardx = Math.ceil(Math.random()*3)
this["par"+i].arah = -1+2*Math.floor(Math.random()*2)
}


// mengaktifkan gerak tiap partikel
for (var i = 1; i<=nmax; i++) {
this["par"+i].dx = this["par"+i].arah*this["par"+i].besardx;
this["par"+i].onEnterFrame = gerak;
}

// gerakan tiap partikel diaktifkan dengan onEnterFrame
this.onEnterFrame = function() {

for (var i = 1; i<=nmax; i++) {
for (var j = 1; j<=nmax; j++) {
mmc1 = this["par"+i];
mmc2 = this["par"+j];
if (i<>j) {
if (mmc1.xB>mmc2.xB && mmc1.xA<mmc2.xA && mmc1.arah<>mmc2.arah) {
SwapPropertiesA(mmc1,mmc2);
}

if (mmc1.xB>mmc2.xA && mmc1.xA<mmc2.xA && mmc1.arah == mmc2.arah && mmc1.besardx>mmc2.besardx) {
SwapPropertiesB(mmc1,mmc2);
}

if (mmc1.xB<mmc2.xA && mmc1.xA>mmc2.xA && mmc1.arah == mmc2.arah && mmc1.besardx>mmc2.besardx) {
SwapPropertiesB(mmc1,mmc2);
}

}
}
}
CekDinding()

};

function CekDinding() {
for (var i = 1; i<=nmax; i++) {
mcc1 = this["par"+i];
if(mcc1.xB>640){
DindingBx(mcc1)
}else if(mcc1.xB<0){
DindingAx(mcc1)
}
}

}

// dinding kiri
function DindingAx(mc1) {
nx = 0-mc1.xB;
mc1.arah = -mc1.arah;
mc1._x += nx;
mc1.dx = mc1.arah*mc1.besardx;
}

// dinding kanan
function DindingBx(mc1) {
nx = mc1.xB-Stage.width; // 640
mc1.arah = -mc1.arah;
mc1._x -= nx;
mc1.dx = mc1.arah*mc1.besardx;
}


// tumbukan tiap objek tipe 1
function SwapPropertiesA(mc1, mc2) {
// berlawanan arah
nx = mc1.xB-mc2.xB;

swapdx = mc1.besardx;
mc1.besardx = mc2.besardx;
mc2.besardx = swapdx;

swaparah = mc1.arah;
mc1.arah = mc2.arah;
mc2.arah = swaparah;

mc1._x -= nx;
mc2._x += nx;
mc1.dx = mc1.arah*mc1.besardx;
mc2.dx = mc2.arah*mc2.besardx;
}

// tumbukan tiap objek tipe 2
function SwapPropertiesB(mc1, mc2) {
// satu arah yang sama
nx = mc1.xB-mc2.xA;

swapdx = mc1.besardx;
mc1.besardx = mc2.besardx;
mc2.besardx = swapdx;

mc1._x -= nx;
mc2._x += nx;

mc1.dx = mc1.arah*mc1.besardx;
mc2.dx = mc2.arah*mc2.besardx;

}

Algoritma Luhn - untuk kartu kredit

def luhn_checksum(card_number):
    def digits_of(n):
        return [int(d) for d in str(n)]
    digits = digits_of(card_number)
    odd_digits = digits[-1::-2]
    even_digits = digits[-2::-2]
    checksum = 0
    checksum += sum(odd_digits)
    for d in even_digits:
        checksum += sum(digits_of(d*2))
    return checksum % 10
 
def is_luhn_valid(card_number):
    return luhn_checksum(card_number) == 0

sumber:
http://en.wikipedia.org/wiki/Luhn_algorithm

Game buatan Galih Widosamodra

Game saya ini dibuat dengan html5 dan javascript.
Silahkan mencoba:

1. Kartun Japarr
2. Tebak Karya Galih

Memang cukup lama saat membuka game ini.
Saya masih mencari cara supaya lebih cepat dan enteng untuk di buka di browser.

Mohon kritik dan saran dari teman-teman. Thanks
Maklum, masih belajar ... :)

Cara close window javascript-html5

Pengen buat program yang ada tombol close nya.
Akhirnya googling dulu ...
Alhamdulillah ketemu beberapa contoh yang bisa di pakai.

Berikut contoh-contoh program yang bisa dipakai untuk menutup window kita.

Cara 1:
window.open('', '_self', ''); //bug fix
window.close();

Cara 2:
window.open(...);
setTimeout(function(){
    window.open('', '_self', '');
    window.close();
}, 100);

Cara 3:
setTimeout(function() { window.close(); },50);

Cara 4:
top.window.close()


semoga bermanfaat :)

sumber:
http://stackoverflow.com/questions/2032640/problem-with-window-close-and-chrome

Window Debug Javascript - IE, Firefox, Chrome

Ada kalanya program html5 kita error, dan tak bisa berjalan sesuai yang kita ingikan.
Untuk itu, kita bisa menampilkan Window Debug Javascript di Browser.
Error di program kita pun bisa di deteksi.

Ini shortcut nya:
1. Chrome : Ctrl + Shift + J
2. Firefox  : Ctrl + Shift + J
3. IE         : F12


semoga bermanfaat :)

sumber:
http://stackoverflow.com/questions/9464545/debugging-firefox-extension-from-add-on-builder
http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
http://stackoverflow.com/questions/10191099/debugging-javascript-in-ie

resize_canvas - setelah di modifikasi untuk Firefox

function resize_canvas(){
var t = getViewport();

innerWidth = t[0];//window.innerWidth;
innerHeight = t[1];//window.innerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

canvas.width=canvasWidth*scaleFix;
canvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);

canvas.style.left="100px";
canvas.style.top="100px";
canvas.style.marginLeft="100px";
canvas.style.marginTop="100px";


canvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

canvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
canvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";

}

getViewport - window.style.left - di Firefox

function getViewport() {
var viewPortWidth;
var viewPortHeight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}

// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

HTML5 - error di firefox

Kemarin ada error di html5 yang saya buat, ketika dijalankan dengan Firefox.

akhirnya googling deh ...
ketemu: http://www.lynnnayko.com/2012/06/declaration-of-character-encoding-in.html

Ini dia Error nya:
Error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.


Nah begini caranya supaya menghilangkan error tersebut:

Letakkan :
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

di <head>
seperti ini:



!DOCTYPE HTML>
<html>
<head>
<title>Animasi PNG Sequence</title>

<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<style>
body {
margin: 0px;
padding: 0px;
}

</style>
.........
</html>

resize_canvas html5

function resize_canvas(){
var sizecanvas = document.getElementById("myCanvas");
var sizecontext = sizecanvas.getContext('2d');
if (sizecanvas.width  < window.innerWidth){
sizecanvas.width  = window.innerWidth;
}

if (sizecanvas.height < window.innerHeight) {
sizecanvas.height = window.innerHeight;
}

innerWidth = window.innerWidth;
innerHeight = window.innerHeight;
outerWidth = window.outerWidth;
outerHeight = window.outerHeight;

sizeDiffW = innerWidth-canvasWidth;
sizeDiffH = innerHeight-canvasHeight;
chkscaleW = innerWidth/canvasWidth;
chkscaleH = innerHeight/canvasHeight;
scaleFix = Math.min(chkscaleW,chkscaleH);

sizecanvas.width=canvasWidth*scaleFix;
sizecanvas.height=canvasHeight*scaleFix;
context.scale(scaleFix, scaleFix);
sizecanvas.style.left=((innerWidth-canvasWidth*scaleFix)/2)+"px";
sizecanvas.style.top=((innerHeight-canvasHeight*scaleFix)/2)+"px";

sizecanvas.style.marginLeft=""+((innerWidth-canvasWidth*scaleFix)/2)+"px";
sizecanvas.style.marginTop=""+((innerHeight-canvasHeight*scaleFix)/2)+"px";
}

Menjalankan animasi png sequence dengan html5

Menjalankan animasi png sequence dengan html5
Png sequence adalah urutan file png dengan index, yang sudah dipersiapkan sebelumnya.

Ini dia programnya :

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="800"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var iframe = 1;
var maxframe = 10;
var ArrImage = new Array();
for(var i=1;i<=10;i++){
if(i<10) ArrImage[i] = 'images/images000'+i+'.png';
else if(i<100) ArrImage[i] = 'images/images00'+i+'.png';
}

var imageObj = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function animate() {


// update

// clear
//context.clearRect(0, 0, canvas.width, canvas.height);

// draw stuff
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = ArrImage[Math.floor(iframe)];

if(iframe<maxframe) iframe+=0.1;
else iframe=maxframe;

// request new frame
requestAnimFrame(function() {
 animate();
});
}

animate();

</script>
</body>
</html>



mohon koreksi jika ada kekeliruan di program saya
maklum, masih belajar :)

semoga bermanfaat

sumber:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

get timer di javascript

t0 = new Date().getTime();
ts = new Date().getTime() - t0;

ts adalah renggang waktu;

sumber:
http://www.w3schools.com/jsref/jsref_gettime.asp

Animasi dengan HTML dan Flash

Cara animasi dengan HTML5 dan Flash


1. Animasikan dengan menggunakan program Flash

2. Kemudian export menjadi png sequence 

    File > Export > Export Movie > Save as Type PNG Sequence

    shortcut : Ctrl + Alt + Shift + S

3. Save menjadi "namafile".png

   Hasilnya : 

       namafile0001.png

       namafile0002.png

       namafile0003.png

       ....

       namafile0258.png (sesuai dengan jumlah frame)

4. Masukkan di JS

var ArrImages = new Array();

var url = "image"; // folder untuk menyimpan file picture.png

var JumImg = 258

var CountImg = JumImg;

for(var i=0;i<=JumImg;i++){

ArrImages[i] = new Image();

ArrImages[i].addEventListener("load", LoadImageCheck, false);

if(i==0) ArrImages[i].src = url+"namafile0001.png";

else if(i<10) ArrImages[i].src = url+"namafile000"+i+".png";

else if(i<100) ArrImages[i].src = url+"namafile00"+i+".png";

else if(i<1000) ArrImages[i].src = url+"namafile0"+i+".png";

}

Close Window - Menutup window di html5

Perlu untuk menutup windows dengan javascript?
Ini dia jawabannya:

window.close()

sumber:
http://www.w3schools.com/jsref/met_win_close.asp

Semoga bermanfaat.

Coba HTML5 String.fromCharCode(0xB4) di w3school.com

<html>
<body>

<div id="demo">
Click the button to display character of the specified unicode number.</div>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction(){
        var n=String.fromCharCode(0xB4); //----> simbol kali
        var n=String.fromCharCode(0xB8); //----> simbol bagi
        document.getElementById("demo").innerHTML=n;
}
</script>

</body>
</html>

sumber:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_fromcharcode

Simbol kali (x) di javascript

Format dari javascript = String.fromCharCode(angka)

angka adalah nomer identitas karakter

untuk simbol x (kali), bisa dilihat di character map = '0xB4'

jadi,

di javascript, bisa di tulis:

simbol x = String.fromCharCode(0xB4)

cara pemakaiannya: 

ctx.font = '14px symbol'

ctx.fillStyle = '#000000';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.fillText(String.fromCharCode(0xB4), 100, 100);

Semoga bermanfaaat

Pangkat di javascript

Ternyata di javascript mudah sekali mencari nilai dari bilangan berpangkat.

Misal nilai = x^y (mencari x pangkat y)
nilai = Math.pow(x,y)

Contoh dengan angka:
nilai = Math.pow(3,4)
maka
nilai = 81

semoga bermanfaat :)


sumber:
http://www.w3schools.com/jsref/jsref_pow.asp

Mengubah 0.005 menjadi 0,005 dengan javascript

Lagi ngerjain kerjaan kantor, kebetulan nemuin cara lain mengubah angka yang awalnya pakai titik menjadi koma.


Begini caranya:

Misal 
angka = 0.005


maka, cukup split menjadi dua bagian menggunakan string.split(separator,limit):

angkasplit = ""+angka;
angkasplit = angka.split('.',limit);


hasil split menjadi:
0,005


Semoga bermanfaat :)

sumber:
http://www.w3schools.com/jsref/jsref_split.asp

Actionscript Flash Lagi ....

Minggu malem ngerjain kerjaannya si Doni.
Tugasnya, memperbaiki program supaya sesuai klien.
yaitu, memperbesar area utk loadMovie.
yang awalnya 100% menjadi 120%.

Sebenernya hanya meneruskan program yang udah saya buat sebelumnya,
tapi kok susah juga ya.
Kemungkinan karena gak fokus juga.

Awal coba pake DuplicateMovieClip,
maksudnya sih, program utama tidak di ubah,
hanya menambahkan routine utk menggerakkan si DuplicateMovieClip.

Setelah di coba-coba, akhirnya bisa.
Tapi, karena duplicate, si movie ini menjadi di atas movie yang lain.
Tertutup deh movie yang harusnya di depan.

Akhirnya duplicateMovieClip diubah jadi layer baru.
Hanya mengubah Mask dan nama movie.
Konsekuensi, program utamanya harus di utak-atik.

Namun, Akhirnya berhasil juga ......... :)

(Nexttime screenshoot programnya)

Load image di html5

Belajar load image di html5 

Sambil browsing dan tanya taufik, salah satu teman yang sudah mengerti. 
Akhirnya bisa juga .... alhamdulillah 


ini dia programnya:

<DOCTYPE = HTML>

<html lang = "en">

<html>

<head>

<title>Insert Image</title>

</head>

<body>

<canvas id="dasar" width="640" height="480"></canvas>

<script>

var canvas = document.getElementById('dasar');

var context = canvas.getContext('2d');

var Obj = new Image(); 

function Test(){

Obj.onload = function(){

context.drawImage(Obj,0,0,100,100)

}

Obj.src = "tangan/iron_man_helmet.jpg";

//document.body.appendChild(Obj);

}

Test();

</script>

</body>

</html>

Contoh Panggil MP3 di html5

Membuat Kabel Melengkung

Mau bikin garis melengkung di html, akhirnya mencari dulu ke mbah google.

Akhirnya ketemu deh 1. Coba dulu ah...


// Create the triangular path (with rounded corners)
context.beginPath();
// Top Corner
context.moveTo(canvasWidth/2 - x, this.padding);
context.quadraticCurveTo(canvasWidth/2, this.padding - y, canvasWidth/2 + x, this.padding);
// Right Corner
context.lineTo((canvasWidth + this.width)/2 + gamma, this.padding + this.height - gamma);
context.quadraticCurveTo((canvasWidth + this.width)/2 + y, this.padding + this.height + this.innerBorder, (canvasWidth + this.width)/2, this.padding + this.height + this.innerBorder);
// Left Corner
context.lineTo((canvasWidth - this.width)/2, this.padding + this.height + this.innerBorder);
context.quadraticCurveTo((canvasWidth - this.width)/2 - y, this.padding + this.height + this.innerBorder, (canvasWidth - this.width)/2 - gamma, this.padding + this.height - gamma);
// Close Path
context.lineTo(canvasWidth/2 - x, this.padding);
context.closePath();

http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/

Hasil Edit HTML5 - Roda Berputar

Titik Berat segi n

Ini dia cara mencari titik berat bangun datar segi n

sumber: http://fisika2000.blogspot.com/2009/08/pusat-massa-dan-titik-berat.html

Rumus Luas Segi-n Sembarang

Ini dia rumus Luas segi-n sembarang

Kebetulan saya mau buat program yang mencari titik pusat segi 4.

Googling, akhirnya ketemu juga.

Alhamdulillah :)

sumber: http://maruzar.blogspot.com/2011/12/luas-polygon-tak-beraturan-dan.html

kirim

kiriman

test posting

galih

Membuat Kurva di HTML5

format nya
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

contoh penggunaan:

context.beginPath();
context.moveTo(188, 130);
context.bezierCurveTo(140, 10, 388, 10, 388, 170);
context.lineWidth = 10;


sumber
http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/

OOP - awal - untuk library

Barusan belajar HTML lagi
belajar ama si taufik.

untuk persiapan OOP library
ini dia:

var kotak = new kotak();
kotak.setGlow(new Glow());

function kotak(){
this.setGlow = function(glow){
}
}

Glow.js - SETELAH di sederhanakan

var GlowBenar = new Glow('rgba(0,220,200,1)','#FFFFFF');
var GlowSalah = new Glow('rgba(255,0,255,0.9)','#FFFFFF');


var sudut1 = xybutton[nosoal].sdt1;
var sudut2 = xybutton[klikbtn].sdt2;
var jumlsudut = sudut1+sudut2;
var fsudut = jumlsudut==180;
if(fsudut) GlowBenar.draw()
else GlowSalah.draw()


function Glow(clr1,clr2){
this._x = 483;
this._y = 301;
this._radius = 15;
this._color1 = clr1||'#FFFFFF';
this._color2 = clr2||'#FFFFFF';
//------------
this.draw = function(){
var startAngle
var endAngle
var counterClockwise

startAngle = 0
endAngle   = 360
counterClockwise = true;
ctx.save();
ctx.beginPath();
ctx.moveTo(this._x, this._y);
ctx.arc(this._x, this._y, this._radius, startAngle, endAngle, counterClockwise);
ctx.lineTo(this._x, this._y);
ctx.lineWidth = 2;

var grd = ctx.createRadialGradient(this._x, this._y, 0, this._x, this._y, this._radius);
grd.addColorStop(0, this._color1);
grd.addColorStop(1, this._color2);

ctx.fillStyle = grd;
ctx.fill();
ctx.restore();
}
}

Glow.js - Sebelum di sederhanakan

var createGambarGlow = new (function(){
var that = this;
that.radius = 15
that.draw = function(){

try {
var x
var y
var startAngle
var endAngle
var counterClockwise

x = 483
y = 301
startAngle = 0
endAngle   = 360
counterClockwise = true;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, that.radius, startAngle, endAngle, counterClockwise);
ctx.lineTo(x, y);
ctx.lineWidth = 2;
//ctx.fillStyle = 'rgba(255,255,0,0.9)';// fill color

var sudut1 = xybutton[nosoal].sdt1;
var sudut2 = xybutton[klikbtn].sdt2;

var jumlsudut = sudut1+sudut2;
var fsudut = jumlsudut==180;

// create radial gradient
var grd = ctx.createRadialGradient(x, y, 0, x, y, that.radius);
if(fsudut){
grd.addColorStop(0, 'rgba(0,220,200,1)');// biru
grd.addColorStop(1, '#FFFFFF'); // putih
}else{
grd.addColorStop(0, 'rgba(255,0,255,0.9)');// merah
grd.addColorStop(1, '#FFFFFF');// putih
}

ctx.fillStyle = grd;
ctx.fill();
ctx.restore();

} catch (e) {};
}
})();

Properti Garis di HTML5 (line property)

// ketebalan garis
context.lineWidth = 5;

// warna garis
context.strokeStyle = 'blue';


// model ujung garis
ada 3 model:
1. context.lineCap = 'butt';
2. context.lineCap = 'round';
3. context.lineCap = 'square';

Cara Rotasi Objek di HTML

Ini dia contoh routine nya:

   ctx.save();
   ctx.beginPath();

pindahkan dulu ke posisi sekarang
   ctx.translate(xposisi,yposisi)

rotasi objek
   ctx.rotate(sudutrotasi*Math.PI/180);

kembalikan ke posisi semula
   ctx.translate(-xposisi,-yposisi)


   ctx.moveTo(x, y);
   ctx.arc(x, y, Jari , sudut1 , sudut2 , true);
   ctx.lineTo(x, y);
   ctx.fillStyle = warna;
   ctx.fill();
   ctx.closePath();
   ctx.restore();

sebelum rotasi

setelah rotasi

Meng-Copy nilai suatu Array ke Array lain

Reminder: 

Untuk Penggunaan 2 Array yang salah satu isinya berbeda.

Array tidak bisa langsung di tulis seperti ini:
Array2 = Array1

seharusnya:
for(var i in Array1){
    Array2[i] =  Array1[i]
    if(i==nilai){
        Array2[i] = nilaiLain
    }
}

*Berlaku untuk semua bahasa pemrograman

Gradient di HTML5

Hari ini belajar mewarnai objek di HTML5, dan warnanya gradientfill.
Setelah beberapa kali mencoba, akhirnya berhasil juga.

Googling dulu, terus dapet ini nih:
http://www.nixtu.info/2010/07/html5-canvas-gradients-radial-gradient.html
http://www.imajine.in/tutorials/html5/canvas.aspx
http://stackoverflow.com/questions/8793414/how-can-i-make-the-gradient-stops-in-a-css3-linear-gradient
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Color



routine programnya:

for(var i=0;i<3;i++){
ctx.save();
ctx.beginPath();
ctx.arc(ArrTitik[i].x, ArrTitik[i].y, RadiusCircle, (Math.PI/180)*0, (Math.PI/180)*360, false);
// create radial gradient
//var grdRadial=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
//grdRadial.addColorStop(offset, color);
//rgba(0-255, 0-255, 0-255, alpha) 
var grdRadial = ctx.createRadialGradient(ArrTitik[i].x,ArrTitik[i].y, 0, ArrTitik[i].x,ArrTitik[i].y, 360);
grdRadial.addColorStop(0, 'rgba(255, 50, 50, 0.5)');
grdRadial.addColorStop(0.1, 'rgba(255, 50, 50, 0)');
ctx.fillStyle = grdRadial;
ctx.fill();
ctx.closePath();
ctx.restore();
}


Program di atas, untuk membuat 3 buah titik yang gradient.
Hasilnya:

Alhamdulillah berhasil :)

Mulai Beralih ke HTML5 - Heading

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>


-absolute / relative