Nugroho's blog.

Monday, December 3, 2012

Playing with Opacity on HTML5's canvas

What I do here is wrap whole canvas on this program with a rectangle with opacity 0.1. So the code (under script tag) become like this:

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var n=10;
var bBola=new Array();
function init(){
 canvas=myCanvas;
 context= myCanvas.getContext('2d');
 for (i=0;i &lt n;i++){
  dx = Math.random()*10-5;
  dy = Math.random()*10-5;
  bBola.push(new bola('#007700', 11,dx,dy));
 } 
 setInterval(draw,10);

}

function draw(){
   for (i=0;i &lt n;i++){
   if (bBola[i].x &gt = (canvas.width - bBola[i].r) || bBola[i].x &lt = bBola[i].r) bBola[i].dx *= -1;
  if (bBola[i].y &gt = (canvas.height - bBola[i].r) || bBola[i].y &lt = bBola[i].r) bBola[i].dy *= -1;

  //buat
  bBola[i].context.beginPath();
      bBola[i].context.fillStyle = bBola[i].color;
      bBola[i].context.arc(bBola[i].x,bBola[i].y,bBola[i].r,0,Math.PI*2,false);
  bBola[i].context.fill();
   
  //gerak
      bBola[i].x+=bBola[i].dx;
  bBola[i].y+=bBola[i].dy;
 }
 
 context.fillStyle='rgba(255,255,255,.1)';
 context.fillRect(0,0,canvas.width,canvas.height);
}

function bola(color, r,dx,dy){
     this.canvas  = canvas;
     this.context = canvas.getContext('2d');
     this.r  = r;
     this.x =Math.random()*400+30;
     this.y  = Math.random()*250+30;
     this.dx  = dx;
     this.dy  = dy;
     this.color   = color;
}

window.onload = function(){
        init()
}

Here the complete html page code

<head>
<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var n=10;
var bBola=new Array();
function init(){
canvas=myCanvas;
context= myCanvas.getContext('2d');
for (i=0;i<n;i++){
dx = Math.random()*10-5;
dy = Math.random()*10-5;
bBola.push(new bola('#007700', 11,dx,dy));
}
setInterval(draw,10);

}

function draw(){
for (i=0;i<n;i++){
//pantul
if (bBola[i].x >= (canvas.width - bBola[i].r) || bBola[i].x <= bBola[i].r) bBola[i].dx *= -1;
if (bBola[i].y >= (canvas.height - bBola[i].r) || bBola[i].y <= bBola[i].r) bBola[i].dy *= -1;

//buat
bBola[i].context.beginPath();
bBola[i].context.fillStyle = bBola[i].color;
bBola[i].context.arc(bBola[i].x,bBola[i].y,bBola[i].r,0,Math.PI*2,false);
bBola[i].context.fill();

//gerak
bBola[i].x+=bBola[i].dx;
bBola[i].y+=bBola[i].dy;
}

context.fillStyle='rgba(255,255,255,.1)';
context.fillRect(0,0,canvas.width,canvas.height);
}

function bola(color, r,dx,dy){
this.canvas = canvas;
this.context = canvas.getContext('2d');
this.r = r;
this.x =Math.random()*400+30;
this.y = Math.random()*250+30;
this.dx = dx;
this.dy = dy;
this.color = color;
}

window.onload = function(){
init()
}
</script>
</head>
<body>
<canvas height="300" id="myCanvas" width="500">
</canvas>
</body>

Friday, November 30, 2012

Gradient on HTML5's Canvas

Bouncing Ball using Array on Canvas (without prototype method) in HTML 5

Here the code for this

<head>
<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
var n=5;
var bBola=new Array();
function init(){
canvas=myCanvas;
context= myCanvas.getContext('2d');
for (i=0;i<n;i++){
dx = Math.random()*10-5;
dy = Math.random()*10-5;
bBola.push(new bola('#007700', 17,dx,dy));
}
setInterval(draw,10);

}

function draw(){
context.clearRect(0,0, 500,300);
for (i=0;i<n;i++){
//pantul
if (bBola[i].x >= (canvas.width - bBola[i].r) || bBola[i].x <= bBola[i].r) bBola[i].dx *= -1;
if (bBola[i].y >= (canvas.height - bBola[i].r) || bBola[i].y <= bBola[i].r) bBola[i].dy *= -1;
//buat
bBola[i].context.beginPath();
bBola[i].context.fillStyle = bBola[i].color;
bBola[i].context.arc(bBola[i].x,bBola[i].y,bBola[i].r,0,Math.PI*2,false);
bBola[i].context.fill();
//gerak
bBola[i].x+=bBola[i].dx;
bBola[i].y+=bBola[i].dy;
}
}

function bola(color, r,dx,dy){
this.canvas = canvas;
this.context = canvas.getContext('2d');
this.r = r;
this.x =Math.random()*400+30;
this.y = Math.random()*250+30;
this.dx = dx;
this.dy = dy;
this.color = color;
}

window.onload = function(){
init()
}
</script>
</head>
<body>
<canvas height="300" id="myCanvas" width="500">
</canvas>
</body>

Random Text in HTML 5 using Array and Canvas

Supernova: Partikel; batu kokoh di aliran sungai besar fanatisme

Ini bukan spoiler. Hm, atau sebisa mungkin bukan spoiler, :)

Sesore membaca Partikel, dengan Royyan yang tidur pulas disampingku.

Setelah bagian awal yang bikin bulu kuduk meremang dan reflek tangan yang membelai Royyan dengan penuh syukur, pada sekitar pertengahan buku, aku teringat Bodhi, Elektra dan Ksatria.

Aku teringat Bodhi saat direcoki Tristan yang sedang semangat-semangatnya karena baru masuk Buddha (getsul: seseorang yang baru masuk Tibetan Buddhis) dan berencana ke Nepal.

Juga teringat Elektra saat mendengarkan percakapan Daddy 'Super Wija' dengan Watty yang mau masuk Islam.
(Kok tanya Daddy, tanya Tuhan dong? Sudah Dad. Lalu Tuhan bilang apa?)

Juga saat Ksatria bertanya apakah Adam dan Hawa menikah.

Dee, untuk kesekian kalinya, kembali menulis hal-hal yang beberapa penulis lain bahkan tak berani menyentuh atau mendekatinya. Yeah, agama memang hal yang sensitif untuk dibicarakan.

Dee, melalui Zarah, dengan tenang, tanpa pretensi bertanya hal yang sederhana pada Abah,kakeknya. Namun seperti segala pertanyaan yang berhubungan dengan keyakinan, bukan jawaban yang didapat melainkan hidung berdarah dan 'disinheritance'.

Halaman-halaman awal, agak tengah, mengingatkanku akan 'Atheis' karya Achdiat Kartadimaja dan 'The Da Vinci Code'-nya Dan Brown. Sangat tidak baik untuk tekanan darah para penganut fanatik buta (eh, semua fanatik pasti membabi buta ya). Semoga buku ini tidak dicekal atau menuai protes seperti Akar saat memajang aksara suci hindu Omkara di sampul depan (edisi berikutnya, sampul depannya jadi bolong).

Kalaupun iya, setidaknya aku punya versi asli buku ini. Lanjut baca ah,...

Eh, ngganti popoknya Royyan dulu, :)

Array and Canvas of HTML5 in Blogger

For some reasons, I wasn't able to display canvas consist of object with array. Dunnow,...

Seeking solution...

UPDATE: It seems blogger didn't support prototype, so I have to improvise my code to adapt it.

The Bouncing Ball

The Code for this under the script tag

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init(){
 canvas=myCanvas;
 context= myCanvas.getContext('2d');
 setInterval(draw,10);
 bal=new bola('#007700', 17,dx,dy);
}

function draw(){
   context.clearRect(0,0, 300,300);
   bal.Pantul();
   bal.Create();
   bal.x+=bal.dx;
   bal.y+=bal.dy;
}

function bola(color, r,dx,dy){
     this.canvas  = canvas;
     this.context = canvas.getContext('2d');
     this.r  = r;
     this.x =Math.random()*400+30;
     this.y  = Math.random()*250+30;
     this.dx  = dx;
     this.dy  = dy;
     this.color   = color;
}

bola.prototype.Create = function (){
     this.context.beginPath();
     this.context.fillStyle = this.color;
     this.context.arc(this.x,this.y,this.r,0,Math.PI*2,false);
     this.context.fill();
}

bola.prototype.Pantul = function (){
 if (this.x >= (canvas.width - this.r) || this.x <= this.r) this.dx *= -1;
     if (this.y >= (canvas.height - this.r) || this.y <= this.r) this.dy *= -1; 
}

window.onload = function(){
        init()
}

Pages

Monday, December 3, 2012

Friday, November 30, 2012