Nugroho's blog.

Friday, November 16, 2012

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)

Tuesday, November 13, 2012

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

Moving to HTML5

After years fighting the slow loading flash without alternative software, I begin to think seriously about moving to HTML5 coding. Altough it ain't true software for me, it provide what I need mostly: animation.

HTML5 support canvas, audio ad video tag, javascript. Need array data? No problem. If then else? OK.

So, begin...

Wednesday, September 19, 2012

Simulate Circular Motion using Visual Python


This little code below show how to move an object in VPython. There’s two object in program, a box and a sphere. The latter object move in circular using simple sin and cos formula. 

I set the angular speed 10 and radius of the motion (not the sphere) is 10. I use label to show sphere’s x and y position. 

Here the result





Here the code

from visual import *

kotak = box(pos=vector(0, 0, 0), length=14, height=14, width=1, color = (0.7,0.7,0.7))

ball=sphere(color=color.green,radius=5)
ball.pos=vector(10,10,0)

timestep = 0.05
a=10
t = .0
omega= 10
px = label(pos=(0,-1,0), text='x = %1.5f' % pi)
py = label(pos=(0,+1,0), text='y = %1.5f' % pi)
while (1==1):
rate(100)
ball.pos.x = a*sin(omega*t)
ball.pos.y = a*cos(omega*t)
px.text = 'x = %1.5f' % ball.pos.x
py.text = 'y = %1.5f' % ball.pos.y
t=t+0.01

Thursday, May 10, 2012

Searching Song using Melody

A moment ago when I'm waking up in the morning suddenly I had a jolt on my ear that make me jump and run in to front door and burst into my front yard with almost out of breath.

No, not an earthquake nor fire. It is a sound of music from a running fast car across street in front of my home. Yeah, it's music I used to listen when I was boy. I want to have that song badly. The problem is, I don't know what song is it--title, singer, band.


I always manage to google a song with no title, provided I know the artist. Without artist I am still, hardly, able to obtain a certain song if I know a word or to of its lyric.

But in this case, I'm finished. I just remember the melody of this song; no title no artist, no lyric. There's iOS application that have ability to detect an anonymous music named Shazam, but it's no use for me as Shazam need the song as sample to identify.

I hope there's music searching machine that have ability to search a melody, even with whistling. :)

Wednesday, May 2, 2012

Supernova: Partikel; Wow!

"Akar?" Elektra berbisik.

"Kamu--Petir?" bisik Bodhi.

Akhirnya Elektra dan Bodhi bertemu, yeah...

Supernova: Partikel; Romantisme a la Dee

Romantisme ala Dee memang beda. Masih ingatkah dengan tiga Supernova terdahulu?

Ksatria mencintai istri orang
Ruben pacaran dengan sesama jenis
Gio sang perjaka menyerahkannya kepada Diva, supermodel sekaligus The High Class PSK

Star mengejar Bodhi si biksu
Bodhi mengejar Kell, (yang ini agak absurd)
Kell, yang tak bekerja, menjadi suami beberapa wanita yang tersebar di berbagai benua

Hubungan Elektra dengan mpret yang aneh.
Watty yang pindah agama karena jatuh cinta dengan kang Atam yang shaleh (dan kaya raya)

Di Partikel, kisah cinta dua manusia dipaparkan secara 'biasa-biasa saja'

Kisah malam pertama diceritakan secara datar. Beda dengan buku lain yang menceritakan berlembar-lembar secara berbunga-bunga, penuh nafsu, romantis yang beda tipis dengan novel porno.

Kisah roman yang penuh haru di Partikel justru kisah antara manusia dengan orangutan, manusia dengan jamur, manusia dengan tumbuhan.

Kisah roman manusia memang ada, namun dijadikan semacam lelucon ironi oleh Dee. Kisah tentang wanita alim dengan orang tua yang setara kiai namun tega mengubur cucunya yang baru lahir hidup-hidup.

Kisah tentang ayah yang jarang di rumah karena melakukan riset yang ambisius di sebuah bukit yang ia capai dengan bersepeda.

Kisah tentang ibu yang bersepeda meninggalkan anak-anaknya tiap malam untuk pengajian, ibadah dan seabreg kegiatan keagamaan lain sebagai pelarian. Belakangan si ibu membawa bapak baru ke rumah. bapak yang punya tiga mobil.
323f (5) amp (1) android (12) apple (7) arduino (18) art (1) assembler (21) astina (4) ATTiny (23) blackberry (4) camera (3) canon (2) cerita (2) computer (106) crazyness (11) debian (1) delphi (39) diary (286) flash (8) fortran (6) freebsd (6) google apps script (8) guitar (2) HTML5 (10) IFTTT (7) Instagram (7) internet (12) iOS (5) iPad (6) iPhone (5) java (1) javascript (1) keynote (2) LaTeX (6) lazarus (1) linux (29) lion (15) mac (28) macbook air (8) macbook pro (3) macOS (1) Math (3) mathematica (1) maverick (6) mazda (4) microcontroler (35) mountain lion (2) music (37) netbook (1) nugnux (6) os x (36) php (1) Physicist (29) Picture (3) programming (189) Python (109) S2 (13) software (7) Soliloquy (125) Ubuntu (5) unix (4) Video (8) wayang (3) yosemite (3)