Nugroho's blog.: HTML5
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Wednesday, April 24, 2013

Mencari Pi



Nilai Pi

Mencoba tanpa webworker. Pi dapat dihitung dengan kode berikut

var Pi=0, n=1, c=100000;
for (var i=0;i<=c;i++) {
Pi=Pi+(4/n)-(4/(n+2));
n=n+4;
}

perintah dalam tag <script> adalah sebagai berikut



function HitungPi()
{
var loop = document.getElementById("loop");
var c = parseInt(loop.value);
var f = parseFloat(loop.value);
var Pi=0, n=1;

try {
if (isNaN(c) || f != c ) {
throw("errInvalidNumber");
} else if (c<=0) {
throw("errNegativeNumber");
}

for (var i=0;i<=c;i++) {
Pi=Pi+(4/n)-(4/(n+2));
n=n+4;
}
document.getElementById("PiValue").innerHTML = Pi;
} catch (e) {
var msg = "Input Error: ";
if (e=="errInvalidNumber")
msg += "harus angka.";
else if (e=="errNegativeNumber")
msg += "Input harus positif.";
else
msg += e.message;

alert(msg);
}
}

.
Perintah dalam <body>

<label for="loop">Jumlah iterasi:</label>
<input id="loop" type="number" value="100" />
<input type="button" onclick="HitungPi()" value="Hitung Pi" />
<div id="PiValue">Nilai Pi</div>

Hello Canvas World

canvas's not supported
Back to first again
Tulisan di atas ditulis dalam canvas seperti kode di bawah. Di sini perintahnya adalah

context.fillText('Hello Canvas World',canvas.width/2-150,canvas.height/2+15);

context adalah '2d' dari canvas, dalam hal ini context kotak yang menyimpan perintah-perintah '2d' canvas seperti contoh diatas, yaitu menulis text.

fillText('tulisan', posisi_x,posisi_y) adalah perintah untuk menampilkan tulisan dengan warna sesuai fillStyle, yaitu 'green'

strokeText('tulisan', posisi_x,posisi_y) adalah perintah untuk menampilkan tulisan dengan warna 'tepi' sesuai strokeStyle yaitu 'red'



var canvas = document.getElementById('canvasexample'),
context = canvas.getContext('2d');

context.font = '38pt Arial';
context.fillStyle = 'green';
context.strokeStyle = 'red';

context.fillText('Hello Canvas',canvas.width/2-150,canvas.height/2+15);
context.strokeText('Hello Canvas',canvas.width/2-150,canvas.height/2+15);

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

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

Bouncing Ball in HTML 5 using Canvas Method

A Result of Trial and Error


Here the code

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