「javascript」タグアーカイブ

speakedraw(5) – キャンバスの初期化など

進行方向が変わるタイミングで3つのオブジェクトの表示順が変わりまた100回のうちに表示内容が消去されるようになります。ランダムの機能を使用しているのでいつそうなるのかは神のみぞ知るって感じです。。。また方向転換するたびに奏でる音も変わります。どんな音が出るかもまた神のみぞ知るって感じです。。。
関数resetCountで表示状態の初期化とどのオブジェクトが前に来るとかと言う表示順を設定して、関数playSoundでどんな音を出力するのかを設定しています。

// 描画状態を初期化する
resetCount() {
    // 1-100の間から初期化カウントを取得
    var count = Math.random() * 100;
    // 初期化カウントを超えた場合は描画状態を初期化
    if (this.count >= count) {
        this.context.clearRect(0,0,800,600);
        this.count = 0;
    } else {
        // 初期化しない場合は増加
        this.count++;
    }
    // 表示順を設定する。
    this.element.style.zIndex = Math.floor(Math.random() * 3);
    // 音再生
    this.playSound();
}
playSound() {
    // 音量を設定 (0から1の間でランダム)
    var volume = Math.floor(Math.random() * 100);
    // 音程配列から今回再生する音程をランダムに取得
    var note = this.notes[this.keys[Math.floor(Math.random() * this.keys.length)]];
    // 波形(音色)配列から今回再生する波形をランダムに取得
    var oscillatorType = this.oscillatorTypes[Math.floor(Math.random() * this.oscillatorTypes.length)];
    this.synth.play(volume, note, oscillatorType);
}

// 描画状態を初期化する

resetCount() {

// 1-100の間から初期化カウントを取得

var count = Math.random() * 100;

// 初期化カウントを超えた場合は描画状態を初期化

if (this.count >= count) {

this.context.clearRect(0,0,800,600);

this.count = 0;

} else {

// 初期化しない場合は増加

this.count++;

}

// 表示順を設定する。

this.element.style.zIndex = Math.floor(Math.random() * 3);

// 音再生

this.playSound();

}

playSound() {

// 音量を設定 (0から1の間でランダム)

var volume = Math.floor(Math.random() * 100);

// 音程配列から今回再生する音程をランダムに取得

var note = this.notes[this.keys[Math.floor(Math.random() * this.keys.length)]];

// 波形(音色)配列から今回再生する波形をランダムに取得

var oscillatorType = this.oscillatorTypes[Math.floor(Math.random() * this.oscillatorTypes.length)];

this.synth.play(volume, note, oscillatorType);

}

という感じでこのプログラムの解説を終わりにしようと思います。
最後に説明しきれなかった部分等も含めた全体を記載しておきます。
次回はこれを応用したものを作ってみようかと思ってます、はい。
動作するプログラムはこちらです。
続きを読む →

Speakedraw(4) – 追跡せよ(私の足跡?)

コメントを残す

関数move内で進行方向が変わったときにオブジェクトの軌跡を辿る線を描きます。と言っても始点に想定される壁の位置から終点と想定される反対側の壁の位置を結ぶ線です。壁に当たる以外にもオブジェクト同士が接触した時にも描くのでちょっと面白く描かれる時もあります。(オブジェクト接触時は想定外の振る舞いもありますがこれも偶然の産物ということで。)

まずは関数setFromToです。
進行方向と逆に向かって壁に接触するところを始点として設定して
進行方向に向かって壁に接触するところを終点とします。

// 始点と終点を取得
setFromTo() {
    var angle = this.angle >= 0 ? this.angle -180 : this.angle + 180;
    console.log(angle); 
    // 始点
    this.xyFrom = this.getXYPoint(angle);
    // 終点
    this.xyTo = this.getXYTo(this.angle);
}

// 始点と終点を取得

setFromTo() {

var angle = this.angle >= 0 ? this.angle -180 : this.angle + 180;

console.log(angle);

// 始点

this.xyFrom = this.getXYPoint(angle);

// 終点

this.xyTo = this.getXYTo(this.angle);

}

続いて実際に始点と終点を算出する関数getCanvasEdgeです。
現時点のXY座標と角度から壁に接触する座標を取得します。

// キャンバスに接触するXY座標
getCanvasEdge(angle) {
    // XY座標
    var x, y;
    // 対辺初期値
    var yLength = this.y;
    // 底辺初期値
    var xLength = this.x;
    // X加算値
    var xPlus = 1;
    // Y加算値
    var yPlus = 1;
    if (0 <= angle) {
        // 角度が正数の場合
        // 下に向かうのでY=縦幅
        y = this.height;
        // 高さは縦幅-Y
        yLength = this.height - this.y;
        if (angle < 90) {
            // 角度が90未満は横幅-X
            xLength = this.width - this.x;
        }
    } else {
        // 角度が負数の場合
        // 上に向かうのでY=0
        y = 0;
        // 減算するで-1
        yPlus = -1;
        xPlus = -1;
        if (-90 <= angle) {
            // 角度が-90以上の場合は横幅-X
            xLength = this.width - this.x;
        }
    }
    // X座標算出
    x = this.x + (this.calcAdjacent(yLength, angle) * xPlus);
    // 0より小さい場合は0, 横幅より大きい場合は横幅を設定する
    x =  x < 0 ? 0 : this.width < x ? this.width : x;
    // X座標が0または横幅(横の壁からスタートする)場合はYを再度算出する
    if (!(x != 0 && x != this.width)) {
        y = this.y + (Math.abs(this.calcOpposite(xLength, angle)) * yPlus);
    }
    // 設定したXY座標を返す
    return {'x':x, 'y':y};
}

// キャンバスに接触するXY座標

getCanvasEdge(angle) {

// XY座標

var x, y;

// 対辺初期値

var yLength = this.y;

// 底辺初期値

var xLength = this.x;

// X加算値

var xPlus = 1;

// Y加算値

var yPlus = 1;

if (0 <= angle) {

// 角度が正数の場合

// 下に向かうのでY=縦幅

y = this.height;

// 高さは縦幅-Y

yLength = this.height - this.y;

if (angle < 90) {

// 角度が90未満は横幅-X

xLength = this.width - this.x;

}

} else {

// 角度が負数の場合

// 上に向かうのでY=0

y = 0;

// 減算するで-1

yPlus = -1;

xPlus = -1;

if (-90 <= angle) {

// 角度が-90以上の場合は横幅-X

xLength = this.width - this.x;

}

// X座標算出

x = this.x + (this.calcAdjacent(yLength, angle) * xPlus);

// 0より小さい場合は0, 横幅より大きい場合は横幅を設定する

x = x < 0 ? 0 : this.width < x ? this.width : x;

// X座標が0または横幅(横の壁からスタートする)場合はYを再度算出する

if (!(x != 0 && x != this.width)) {

y = this.y + (Math.abs(this.calcOpposite(xLength, angle)) * yPlus);

}

// 設定したXY座標を返す

return {'x':x, 'y':y};

}

動作するプログラムはこちらです。
ちょっと図解もしておきます。
続きを読む →

Speakedraw(3) – 反射角度

コメントを残す

前回からの続きです。

関数「move」からも呼ばれていますが、前回説明したisTouchでも出てくる関数「setAngle」を解説します。
こちらは見ての通りオブジェクトが進む角度を設定します。壁にぶつかったり、他のオブジェクトと接触した時に進行方向が変わるときに使います。ただしこちらは垂直面で接触した際に設定される反射角です。
元の角度が正数の場合は180度を減算、負数の場合は-180度減算します。
例)
30度の場合
30 – 180 = -150度
-150度の場合
-150 – (-180) = 30度　※-と-で実際は加算になります。

setAngle() {
    // プラスの場合は180からマイナスの場合は-180から基の角度を減算する
    var addAngle = (this.angle > 0) ? 180 : -180;
    this.angle = addAngle - this.angle; 
}

setAngle() {

// プラスの場合は180からマイナスの場合は-180から基の角度を減算する

var addAngle = (this.angle > 0) ? 180 : -180;

this.angle = addAngle - this.angle;

}

また水平面で接触した場合は元の角度に-1をかけることで反射角が設定できます。
30度の場合は-30度、120度の場合は-120度になります。
動作するプログラムはこちらです。
続きを読む →

月	火	水	木	金	土	日
« 6月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

shumatzな話

月日はハクタイノカカクにして、ユキコウトシもマタタビナリ

「javascript」タグアーカイブ

speakedraw(5) – キャンバスの初期化など

Speakedraw(4) – 追跡せよ(私の足跡?)

Speakedraw(3) – 反射角度