Membuat Animasi Banyak Bola Bergerak dalam Kotak 3D Dengan Tombol Pengendali (3)
By Harjito
Selain tombol kontrol, output data juga penting untuk ditambahkan dalam media simulatif. Pada sessi ini kita akan belajar menabahkan output berupa waktu dan banyaknya timbukan yang terjadi.
Langkap Pemrograman
- Buat file baru dengan nama particle-in-box-with-simulatif.html
- Tuliskan perintah berikut:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Get Started</title>
<!-- memanggil package BabylonJS -->
<script src="babylon.js"></script>
<style>
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<!-- Menambahkan panel -->
<div id="panel">
<h3>
<label>Control</label>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button><br>
<label>Resize Box</label>
<input type="range" min="1" max="100" value="50" class="slider" id="slider"><br>
<label>Time: </label><span id="time">0</span> second<br>
<label>Total Collision: </label><span id="collision">0</span>
</h3>
</div>
<!--membuat area kerja-->
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
// mendefinisikan objek
var boxSize = 5, ballSize =0.3, balls = [], playBtn, stopBtn, pauseBtn, counter=0;
var limit = (boxSize-ballSize)/2
var scene = new BABYLON.Scene(engine);
var status = 'idle';
var startTime = (new Date()).getTime();
setInterval(timer,1000)
var createScene = function() {
// memberikan warna background
scene.clearColor = new BABYLON.Color3(0, 0.2, 0.3);
// meletakkan kamera (sudut pandang 3D)
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
// meletakkan lampu/pencahayaan
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, 8, 10), scene);
// membuat kotak berukuran 5 x 5 x 5
box = BABYLON.Mesh.CreateBox("box", boxSize, scene);
// menyiapkan material warna untuk kotak
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.6, 0.5);
box.material = myMaterial
// meletakkan kotak pada koordinat 0,0,0
box.position = new BABYLON.Vector3(0, 0, 0);
// Mebuat kotak utama transparan 50%
box.visibility = 0.3
var material = new BABYLON.StandardMaterial(scene);
material.alpha = 1;
material.diffuseColor = new BABYLON.Color3(1, 0.2, 0.1);
material.diffuseTexture = new BABYLON.Texture("img/metal.jpeg", scene);
var n = 50
// membuat bola sebanyak 50
for(i=0; i < n; i++){
// membuat bola
balls[i] = BABYLON.Mesh.CreateSphere(0, 0, 0.3, scene);
// meletakkan bola dalam kotak secara acak
balls[i].position = new BABYLON.Vector3(Math.random()*4-2, Math.random()*4-2, Math.random()*4-2);
balls[i].material = material;
balls[i].visibility = 0;
}
setInterval(animate, 20)
// // menambahkan animasi pergerakan bola dalam kotak, dengan periode 10 milisecond
return scene;
};
// menyiapkan animasi
function animate(){
// Menentukan sudut pergerakan secara acak
if(status !='play'){
clearInterval(timer)
return;
}
startCount = counter;
balls.forEach(function(ball, key){
var obj = -1;
if(!ball.dir){
balls[key].dir = [Math.random()*12*Math.PI/6, Math.random()*12*Math.PI/6, 0.02, false]
}
if(Math.abs(balls[key].position.x) >=limit ){
balls[key].dir[0] = Math.PI - balls[key].dir[0];
if(obj !=key){
obj = key;
counter += 1;
}
}
if(Math.abs(balls[key].position.y) >= limit ){
balls[key].dir[1] = 2*Math.PI - balls[key].dir[1];
if(obj !=key){
obj = key;
counter += 1;
}
}
if(Math.abs(balls[key].position.z) >= limit ){
balls[key].dir[0] = 2*Math.PI - balls[key].dir[0];
if(obj !=key){
obj = key;
counter += 1;
}
}
// setCoordinate(key, balls[key].dir)
balls[key].position.x += balls[key].dir[2] * Math.cos(balls[key].dir[0]) * Math.cos(balls[key].dir[1]);
balls[key].position.z += balls[key].dir[2] * Math.sin(balls[key].dir[0]) * Math.cos(balls[key].dir[1]);
balls[key].position.y += balls[key].dir[2] * Math.sin(balls[key].dir[1]);
if(startCount != counter){
document.getElementById('collision').innerHTML = counter;
}
})
}
// merender ke dalam canvas
var scene1 = createScene();
engine.runRenderLoop(function() {
scene1.render();
});
function timer(){
var now = (new Date()).getTime()
var time = (now-startTime)/1000;
if(status == 'play'){
document.getElementById('time').innerHTML = Math.round(time)
}
}
document.getElementById('play').addEventListener('click', function(e){
e.preventDefault()
if (status == 'idle'){
for(i=0; i< balls.length; i++){
balls[i].visibility = 1;
}
}
status = 'play';
// createScene
setInterval(timer,1000)
})
document.getElementById('pause').addEventListener('click', function(e){
e.preventDefault()
status = 'pause';
})
document.getElementById('stop').addEventListener('click', function(e){
e.preventDefault()
status = 'idle';
for(i=0; i< balls.length; i++){
balls[i].visibility = 0;
}
})
document.getElementById('slider').addEventListener('click', function(e){
e.preventDefault()
if(parseInt(e.target.value)<10) {
e.target.value = 10;
}
var scaling = parseInt(e.target.value)/50;
status = 'pause';
for(i=0; i< balls.length; i++){
if(balls[i].position.x<0){
balls[i].position.x = Math.ceil(balls[i].position.x*scaling);
}else{
balls[i].position.x = Math.floor(balls[i].position.x*scaling);
}
if(balls[i].position.y<0){
balls[i].position.y = Math.ceil(balls[i].position.y*scaling);
}else{
balls[i].position.y = Math.floor(balls[i].position.y*scaling);
}
if(balls[i].position.z<0){
balls[i].position.z = Math.ceil(balls[i].position.z*scaling);
}else{
balls[i].position.z = Math.floor(balls[i].position.z*scaling);
}
}
limit = (boxSize*scaling-ballSize)/2;
status = 'play';
box.scaling = new BABYLON.Vector3(scaling,scaling,scaling);
//
})
</script>
</body>
</html>
Live Demo
Tags:
Ikuti terus tutorial saya di e-Project dan channel
saya di
