ブラウザで花火の物理シュミレーションをしてみた

ブラウザとJavaScriptとHTMLのdivタグだけでいろいろな数値計算シュミレーションができるんじゃないかと思って、打ち上げ花火のシュミレーション行うプログラムを作ってみました。

IntenetExplorerでも動かしたいので、あえてcanvasとかは使いません。

コンパイルいらないし、昔のBasicみたいな感じで手軽にいろいろな数値計算をするシュミレーションプログラムが作れて、とっても楽しくていい感じ。

はじめてのプログラム学習とかでも使えそう。

次はライフゲームを作ってみようと思います。

------------

function print(name)

{

if(name==null)return;

$("body").append(name+"<br/>");

}

function myrandom()

{

return Math.random();

}

function mysin(d)

{

return Math.sin(d);

function mycos(d)

{

return Math.cos(d);

}

$(function(){

oninit();

main();

});

var event_no=0;

var event_param1=0;

var event_param2=0;

var quantity=300;

var size = 3;

var circle=0.97;

var gravity=1.1;

var speed=5;

var top=3;

var left=2;

var color=0xffff00;

var Radian = 6.283;

var pos_x=[];

var pos_y=[];

var vel_x=[];

var vel_y=[];

var frame = 0;

function init_hanabi()

{

var i;

for (i = 0; i < quantity; ++i) {

var angle = myrandom() * Radian;

var aspeed = myrandom() * speed;

pos_x[i]=400;

pos_y[i]=100;

vel_x[i]=mycos(angle) * aspeed;

vel_y[i]=mysin(angle) * aspeed;

}

frame = 0;

}

function render_hanabi()

{

var i;

var len;

frame++;

for (i = 0; i < quantity; i++) {

pos_x[i] += vel_x[i];

pos_y[i] += vel_y[i];

vel_x[i] *= circle;

vel_y[i] *= circle;

pos_y[i] += gravity;

}

}

function view_render()

{

var i;

for(i=0;i<quantity;i++){

$("#tag"+i).css({

left: ""+parseInt(pos_x[i])+"px",

top: ""+parseInt(pos_y[i])+"px"

});

}

return 0;

}

function view_init()

{

var i;

$("body").css({

'background-color':"#000000",

});

for(i=0;i<quantity;i++){

$("body").append("<div id=\"tag"+i+"\"></div>")

$("#tag"+i).css({

'background-color':"#ffcc88",

position:"absolute",

border:"solid 1px",

width: "2px",

height: "2px"

});

}

view_render();

return 0;

}

function oninit()

{

var i;

init_hanabi();

view_init();

return 0;

}

function main()

{

var en=0;

while(event_no!=-1){

if(frame>200)return 0;

render_hanabi();

view_render();

setTimeout(main,50);

break;

}

return 0;

}