Gradient on HTML5’s Canvas

function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById(‘myCanvasGrad’); // Make sure we don’t execute when canvas isn’t supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext(‘2d’); // Create gradients var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); radgrad.addColorStop(0, ‘#A7D30C’); radgrad.addColorStop(0.9, ‘#019F62’); radgrad.addColorStop(1, ‘rgba(1,159,98,0)’); var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); radgrad2.addColorStop(0, ‘#FF5F98’); radgrad2.addColorStop(0.75, ‘#FF0188’); radgrad2.addColorStop(1, ‘rgba(255,1,136,0)’); var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); radgrad3.addColorStop(0, ‘#00C9FF’); radgrad3.addColorStop(0.8, ‘#00B5E2’); radgrad3.addColorStop(1, ‘rgba(0,201,255,0)’); var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); radgrad4.addColorStop(0, ‘#F4F201’); radgrad4.addColorStop(0.8, ‘#E4C700’); radgrad4.addColorStop(1, ‘rgba(228,199,0,0)’); // draw shapes ctx.fillStyle = radgrad4; ctx.fillRect(0,0,150,150); ctx.fillStyle = radgrad3; ctx.fillRect(0,0,150,150); ctx.fillStyle = radgrad2; ctx.fillRect(0,0,150,150); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150); } else { alert(‘You need Safari or Firefox 1.5+ to see this demo.’); } } window.onload=function(){ drawShape(); }

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

var canvas, ctx; var quotes = new Array(); var img = new Image(); // Create new img element //or you can also use: //var quotes = []; function setup(){ //canvas and context setup canvas=document.getElementById(“myCanvas”); ctx=canvas.getContext(“2d”); //create values for the array quotes[0]=”random”; quotes[1]=”text”; quotes[2]=”in”; quotes[3]=”html 5″; quotes[4]=”using”; quotes[5]=”array”; quotes[6]=”and”; quotes[7]=”canvas”; //function calls setInterval(draw,300); window.addEventListener(“keydown”,checkKeyboard); } function draw(){ var randomIndex = Math.floor(Math.random()*quotes.length); var randomColor = Math.round(Math.random()*80); var randomX = Math.random()*canvas.width; var randomY = Math.random()*canvas.height*2-canvas.width/2; var randomSize = Math.random()*30+10; ctx.fillStyle=”rgba(0,255,0,0.8)”; ctx.font=randomSize+”px Arial Black, Gadget, sans-serif”; ctx.fillText(quotes[randomIndex],randomX,randomY); ctx.lineWidth=1; //ctx.strokeText(quotes[randomIndex],randomX,randomY); } function checkKeyboard(myEvt){ if(myEvt.keyCode==13){ ctx.clearRect(0,0,canvas.width,canvas.height); } } window.onload = function(){ setup() }

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()
}

A Result of Trial and Error

var context; var x=100; var y=200; var dx=5; var dy=5; function init() { context= myCanvas.getContext(‘2d’); setInterval(draw,10); } function draw() { context.clearRect(0,0, 300,300); context.beginPath(); context.fillStyle=”#0000ff”; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc(x,y,20,0,Math.PI*2,true); context.closePath(); context.fill(); // Boundary Logic if( x300) dx=-dx; if( y300) dy=-dy; x+=dx; y+=dy; } window.onload = function() { init(); };
Here the code

Bouncing Ball using Array in HTML5

I want to create bouncing ball program that’s very easy on Flash, Python or Delphi yet very tricky on html5. The program consist of n ball with random velocity (each) moving in a 2d box (oh yeah, square then 🙂 ) 
I am playing with array in html5 script which is helpful on this program. I don’t declare the array using

aBola = new array()

that come  as standart on many language, but prefer

aBola = []

instead, just like list on python. In this program, array’s just like container for ball.

In html5, moving an object is a bit tricky and, for some Pascal programmer like me, bringing an old memory of draw-clear-draw-clear… cycle; draw a ball, delete it, draw the same ball but slightly right, delet it, … and so on. All that kind of tedious job, but it worth for the sake of fast execution and no-need-slow-loading-flash-player thing.

Here’s the code under script tag. Keep in mind that many variable’s name is in indonesian (ball -> bola, bounce->pantul, collision -> tumbukan )

 
//bola:ball
//pantul:bounce
var context;
var n=10;

// membuat bola
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;
}
function init(){
canvas = document.getElementById("myCanvas")
context = canvas.getContext('2d');
// membuat array untuk bola
//create array for ball
aBola = [];
for (i=1;i<=n;i++){
//membuat bola sejumlah n dengan dx dan dy acak
//create n balls with random dx and dy
dx = Math.random()*10-5;
dy = Math.random()*10-5;
aBola.push(new bola('#007700', 17,dx,dy));
}
setInterval(draw,20);
}
function draw(){
context.clearRect(0,0, 500,350);
for (i in aBola) {
//menggerakkan bola
//moving balls
aBola[i].x += aBola[i].dx;
aBola[i].y += aBola[i].dy;
aBola[i].Pantul();
aBola[i].Create();
}
}

(to be continued) //bola:ball //pantul:bounce var context; var n=10; // membuat bola 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; } function init(){ canvas = document.getElementById(“myCanvas”) context = canvas.getContext(‘2d’); // membuat array untuk bola //create array for ball aBola = []; for (i=1;i<=n;i++){ //membuat bola sejumlah n dengan dx dan dy acak //create n balls with random dx and dy dx = Math.random()*10-5; dy = Math.random()*10-5; aBol`.push(new bola(‘#007700’, 17,dx,dy)); } setInterval(draw,20); } function draw(){ context.clearRect(0,0, 500,350); for (i in aBola) { //menggerakkan bola //moving balls aBola[i].x += aBola[i].dx; aBola[i].y += aBola[i].dy; aBola[i].Pantul(); aBola[i].Create(); } } window.onload = function() { init(); };

2D/3D Ball Collision

I used on 1D collission problem where, in case of elastic collision, the ball is changing velocity each other. In 2D/3D case however, the collision is not always head-on collision (which is basically 1 dimension collision).

Head-on

The system above’s easy too solve, as simple as interchanging velocity (in elastic case).

Not head-on

When two balls are in non-head-on collision we could always using transposed new coordinate where both of ball center are on the new x-axis like below

On the new coordinate, we can treat the velocities along x-axis as one dimensional collision case and let go on other component (y, z) intact.
Below’s snippet from python code of balls collision detection; the whole code is code of moving many ball on a box.
###deteksi tumbukan antar bola
for i in arange(jumlah):
for j in arange(i+1,jumlah):
jarak=mag(lbola[i].pos-lbola[j].pos)
if jarak<(lbola[i].radius+lbola[j].radius):
arah=norm(lbola[j].pos-lbola[i].pos)
vi=dot(lbola[i].v,arah)
vj=dot(lbola[j].v,arah)
tukar=vj-vi
lbola[i].v=lbola[i].v+tukar*arah
lbola[j].v=lbola[j].v-tukar*arah
pantul=lbola[i].radius+lbola[j].radius-jarak
lbola[i].pos=lbola[i].pos-pantul*arah
lbola[j].pos=lbola[j].pos+pantul*arah