Monthly Archives: 3月 2009

2009-03-28

リトルチャロ

いやー、終わりました。1年で、少しは聞き取りも読み取りも発音もちょーーっとだけ向上したような気がします。でも、自分で英文を組み立てる力はほとんど向上した気がしません。いや、でも習ったのと似たような文なら組み立てられるのかな。組み立てても判定できる人が周りにいないから意味ないですけど。

来年度も再放送するみたいなので、二週目と行きますかね。最初の数話は見逃してることだし。

2009-03-26

secmake5

D言語的動的配列型。いや、動的という言葉はなんか曖昧だな。純粋に可変長か、固定長か、かな。格納場所について言及したい訳じゃないし。実行時に長さを変えられるか、そうでないか。いや、コンパイル時に長さが決まっているか、否か。

2009-03-23

更新と未コミットの確認

複数のプロジェクトをCVSやSVNで管理していると、一部のプロジェクトの更新やコミットを忘れたりすることがある。依存するライブラリの更新を忘れてエラーになったり、別な場所で作業したものをコミットし忘れて困ったり。主要なプロジェクトのcvs upを一気に行うスクリプトでも書こうかな。

2009-03-19

JavaScriptでタイマーイベントとcanvas要素を使う

一枚絵を描くだけじゃつまらない、と言われればなるほどごもっとも。やはり動きが見えてこそ、プログラムの甲斐があるという物でしょう。時間に沿った変化。それを実現する鍵になるのがタイマーです。

タイマーを使うには次の関数を使います。

  • setTimeout(f, t)
  • setInterval(f, t)

setTimeoutはtミリ秒経過後に一回だけ関数fを呼び出すよう、タイマーをセットします。

setIntervalはtミリ秒間隔で関数fを繰り返し呼び出すよう、タイマーをセットします。

まずはsetTimeoutから。

function f1()
{
  alert("f1呼ばれた");
}

setTimeout(f1, 1000);

1000ミリ秒後にメッセージを出します。実行は例によってインタラクティブコンソールで可能。

JavaScriptはコード中で自由に関数を作れるので、次のように書いても……

var f2 = function(){ alert("f2呼ばれた");}
setTimeout(f2, 1000);

次のように書いても……

setTimeout(function(){alert("f anonymous呼ばれた");}, 1000);

同じです。

これを使って絵を描いてみましょう。

var cv = document.createElement("canvas");
cv.setAttribute("width", "320");
cv.setAttribute("height", "240");
cv.style.cssText = "border: 1px solid;";
document.body.appendChild(cv);
var ctx = cv.getContext("2d");

setTimeout(drawLine, 50); //50ms後以降にdrawLineを呼び出すようセットする。

function drawLine()
{
  ctx.strokeStyle = "#" + Math.round(Math.random() * 0xffffff).toString(16); //色をランダムで決める。
  ctx.beginPath();
  ctx.moveTo(Math.random() * 320, Math.random() * 240); //始点をランダムで決める。
  ctx.lineTo(Math.random() * 320, Math.random() * 240); //終点をランダムで決める。
  ctx.stroke();
  setTimeout(drawLine, 50); //再度タイマーをセットする。
}

線が増えていく様子が確認できると思います。

setTimeoutは一回きりの呼び出しに使いますが、こうして呼び出されたときに再度タイマーを設定すれば、繰り返し呼び出すような用途にも使えます。

次はsetInterval。setIntervalは止めるまでずっと一定の間隔で関数を呼び出し続けようとします。

var cv = document.createElement("canvas");
cv.setAttribute("width", 120);
cv.setAttribute("height", 120);
cv.style.cssText = "border: 1px solid;";
document.body.appendChild(cv);
var ctx = cv.getContext("2d");

var second = 0;

setInterval(
  function(){
    // 秒をカウント。スコープの外のsecondを参照していることに注意。
    ++second;

    // キャンバスを透明色で塗りつぶす。
    ctx.clearRect(0, 0, 120, 120);

    // 円を描く。
    ctx.strokeStyle="#000";
    ctx.fillStyle="#fff";
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.arc(60, 60, 50, 0, Math.PI*2, false);
    ctx.fill();
    ctx.stroke();

    // 秒針を描く。
    ctx.strokeStyle="#f00";
    ctx.beginPath();
    ctx.moveTo(60, 60);
    ctx.lineTo(
      60+Math.sin(Math.PI * second / 30)*40,
      60-Math.cos(Math.PI * second / 30)*40);
    ctx.stroke();
  }
  , 1000);

setTimeoutで繰り返すと少しずつ実際の経過秒数とずれていってしまうのですが、setIntervalなら大丈夫です。

© 2024 AKIYAMA Kouhei, all rights reserved.