this.skeleton = new Skeleton([
    new Bone('body', 150, -80, .2, [
        new Bone('head', 50, 20, 1),
        new Bone('leftArm', 90, 190, -4, [
            new Bone('leftArm2', 80, -50, 1)
        ]),
        new Bone('rightArm', 90, 190, 4, [
            new Bone('rightArm2', 80, -50, 1)
        ])
    ]),
    new Bone('leftLeg', 100, 70, -1, [
        new Bone('leftLeg2', 100, 40, 1, [
            new Bone('leftFoot', 30, -110, .1)
        ])
    ]),
    new Bone('rightLeg', 100, 70, 1, [
        new Bone('rightLeg2', 100, 40, 1, [
            new Bone('rightFoot', 30, -110, .1)
        ])
    ])
]);

new Bone(ラベル, Boneの長さ, デフォルトの関節角, 係数[, 子のBoneの配列]);

Boneの長さとデフォルトの関節角で姿勢を変えることができます。

また係数を変更することで回転方向と俊敏さを調整できます。

以下は関節角を計算している部分のコードです。
移動距離から sin, cos を用いて関節角（の差分）を計算しています。

※目標角ではなく差分を与えているのは、歩く以外の動作を同時に行えるようにするためです。
例えば、吠えるとか口から熱線を出すとか。

/**
 *  @param {number} distance
 */
function update(distance) {
    var OFFSET_Y_MAX   = -10,
        ROTATION_PHASE = 200,
        ROTATION_GAIN  = .04,
        OFFSET_Y_PHASE = 100,
        OFFSET_Y_GAIN  =   3,
        deltaRad;
    
    deltaRad = Math.cos(Math.PI * 2 * (distance % ROTATION_PHASE) / ROTATION_PHASE) * ROTATION_GAIN;
    
    this.skeleton.parts.body.rotate(deltaRad);
    this.skeleton.parts.leftLeg.rotate(deltaRad);
    this.skeleton.parts.rightLeg.rotate(deltaRad);
    
    this.destOffsetY += Math.sin(Math.PI * 2 * (distance % OFFSET_Y_PHASE) / OFFSET_Y_PHASE) * OFFSET_Y_GAIN;
}

Bone の長さや係数、周期を調整するといろんな動きができるので、ぜひお試しあれ！

2014-01-01

canvasのコードを見やすくしよう！

明けましておめでとうございます。
本年もどうぞよろしくお願いいたします。

さて、
今年から閃光部（フロントエンド）を離れ
意匠部（デザイン）の所属になるのですが
そうなるとすぐJS忘れちゃいそうで。。。

というわけで忘れないようにブログ始めます！

最初の投稿はcanvasのお話。

canvasで複雑なパスを描こうとすると。。。

(function(win, doc) {

'use strict';

var cvs = doc.createElement('canvas'),
    ctx = cvs.getContext('2d');

cvs.width  = 200;
cvs.height = 300;
doc.body.appendChild(cvs);

ctx.translate(100, 100);
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
ctx.save();
for (var i = 8; i--;) {
    ctx.rotate(45 * Math.PI / 180);
    ctx.moveTo(0, -50);
    ctx.lineTo(0, -80);
}
ctx.restore();
ctx.save();
ctx.translate(-50, 100);
ctx.save();
ctx.translate(0, 0);
ctx.moveTo( 0,  0);
ctx.lineTo(20,  0);
ctx.lineTo(20, 20);
ctx.lineTo( 0, 20);
ctx.lineTo( 0, 40);
ctx.lineTo(20, 40);
ctx.restore();
ctx.save();
ctx.translate(30, 0);
ctx.moveTo( 0,  0);
ctx.lineTo(20,  0);
ctx.lineTo(20, 40);
ctx.lineTo( 0, 40);
ctx.lineTo( 0,  0);
ctx.restore();
ctx.save();
ctx.translate(60, 0);
ctx.moveTo( 0, 10);
ctx.lineTo(10,  0);
ctx.lineTo(10, 40);
ctx.moveTo( 0, 40);
ctx.lineTo(20, 40);
ctx.restore();
ctx.save();
ctx.translate(85, 0);
ctx.moveTo(20, 40);
ctx.lineTo(20,  0);
ctx.lineTo( 0, 30);
ctx.lineTo(25, 30);
ctx.restore();
ctx.restore();
ctx.stroke();

}(this, document));

見づらい(T_T)

でも、これを save() / restore() の対でインデントすると。。。

(function(win, doc) {

'use strict';

var cvs = doc.createElement('canvas'),
    ctx = cvs.getContext('2d');

cvs.width  = 200;
cvs.height = 300;
doc.body.appendChild(cvs);

ctx.translate(100, 100);
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
ctx.save();
    for (var i = 8; i--;) {
        ctx.rotate(45 * Math.PI / 180);
        ctx.moveTo(0, -50);
        ctx.lineTo(0, -80);
    }
ctx.restore();
ctx.save();
    ctx.translate(-50, 100);
    ctx.save();
        ctx.translate(0, 0);
        ctx.moveTo( 0,  0);
        ctx.lineTo(20,  0);
        ctx.lineTo(20, 20);
        ctx.lineTo( 0, 20);
        ctx.lineTo( 0, 40);
        ctx.lineTo(20, 40);
    ctx.restore();
    ctx.save();
        ctx.translate(30, 0);
        ctx.moveTo( 0,  0);
        ctx.lineTo(20,  0);
        ctx.lineTo(20, 40);
        ctx.lineTo( 0, 40);
        ctx.lineTo( 0,  0);
    ctx.restore();
    ctx.save();
        ctx.translate(60, 0);
        ctx.moveTo( 0, 10);
        ctx.lineTo(10,  0);
        ctx.lineTo(10, 40);
        ctx.moveTo( 0, 40);
        ctx.lineTo(20, 40);
    ctx.restore();
    ctx.save();
        ctx.translate(85, 0);
        ctx.moveTo(20, 40);
        ctx.lineTo(20,  0);
        ctx.lineTo( 0, 30);
        ctx.lineTo(25, 30);
    ctx.restore();
ctx.restore();
ctx.stroke();

}(this, document));

見やすい！

さらに beginPath() と stroke() の対もインデントすると。。。

(function(win, doc) {

'use strict';

var cvs = doc.createElement('canvas'),
    ctx = cvs.getContext('2d');

cvs.width  = 200;
cvs.height = 300;
doc.body.appendChild(cvs);

ctx.translate(100, 100);
ctx.beginPath();
    ctx.arc(0, 0, 30, 0, Math.PI * 2, true);
    ctx.save();
        for (var i = 8; i--;) {
            ctx.rotate(45 * Math.PI / 180);
            ctx.moveTo(0, -50);
            ctx.lineTo(0, -80);
        }
    ctx.restore();
    ctx.save();
        ctx.translate(-50, 100);
        ctx.save();
            ctx.translate(0, 0);
            ctx.moveTo( 0,  0);
            ctx.lineTo(20,  0);
            ctx.lineTo(20, 20);
            ctx.lineTo( 0, 20);
            ctx.lineTo( 0, 40);
            ctx.lineTo(20, 40);
        ctx.restore();
        ctx.save();
            ctx.translate(30, 0);
            ctx.moveTo( 0,  0);
            ctx.lineTo(20,  0);
            ctx.lineTo(20, 40);
            ctx.lineTo( 0, 40);
            ctx.lineTo( 0,  0);
        ctx.restore();
        ctx.save();
            ctx.translate(60, 0);
            ctx.moveTo( 0, 10);
            ctx.lineTo(10,  0);
            ctx.lineTo(10, 40);
            ctx.moveTo( 0, 40);
            ctx.lineTo(20, 40);
        ctx.restore();
        ctx.save();
            ctx.translate(85, 0);
            ctx.moveTo(20, 40);
            ctx.lineTo(20,  0);
            ctx.lineTo( 0, 30);
            ctx.lineTo(25, 30);
        ctx.restore();
    ctx.restore();
ctx.stroke();

}(this, document));

もっと見やすい！！

このお正月、<canvas>でゴニョゴニョする際はぜひお試しください。

意匠部ブログ

2022-05-31 日本最南端のイベント・コワーキングスペース「チャレンジ石垣島」が誕生

2022-06-30 チャレンジ石垣島制作秘話「ロゴデザイン」編

2023-02-28 チャレンジ石垣島制作秘話「ライトモード／ダークモードでファビコンを切り替える」編

技術部ブログ『アドベントカレンダー』

2020-12-24 今すぐ使える？！クリスマスイブっぽいイージング関数を作ってみよう！

2021-12-14 すき焼きの写真にすき焼きの3Dモデルを埋め込む方法

2021-12-21【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法】

2021-12-24 トナカイと白ひげのおじいさんに学ぶUVアニメーション

2022-12-24【WebGL】【MSDF】 イブにお父さんがサンタに変身する話

2023-12-24「JS体操」のすゝめ 〜その①〜

2024-12-17 おもしろ社内勉強会・ワークショップ総まとめ！

技術部ブログ 『JS体操』

2024-04-26【JS体操】JavaScript で頭の体操をしよう！〜第1問 44文字 解説編〜

2024-06-17【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜

2024-07-10【JS体操】第2問「画像の横長具合を比較しよう」〜チート部門①②③の解説〜

2024-07-18【JS体操第3問ヒント①】Zalgo Text のできるまで

2024-07-23【JS体操第3問ヒント②】「コードポイント」と「コードユニット」

2024-07-26【JS体操第3問ヒント③】「疎」な配列を「密」にする12の方法

2024-07-30【JS体操第3問ヒント④】「コードポイント」を「文字列」に変換する22の方法

2024-08-03【JS体操】第3問「Zalgo Text の生成」延長戦のお知らせ

2024-08-07【JS体操】第3問「Zalgo Text の生成」〜いろんな回答紹介編〜

2024-12-19【JS体操】第4問「ひらがなを画数順に並び替えよう」解説（最短文字数は109文字！）

2024-12-19【JS体操】第5問「画像からアスキーアートを生成しよう」解説

2025-01-28【JS体操】応援ありがとうございました！〜全5問の振り返り〜

旧意匠部ブログ（※ http）

2014-05-13 U.S.A. は U.S.A でなく U.S.A. なのだ！

閃光部ブログ（※ http）

2012-01-20 お正月スペシャルコンテンツ「おHTML5」の裏側みせちゃいます #1

2012-06-12 Deferred を作ろう！

2012-06-25 Deferred を作ろう！#2

2012-07-25 コールバック関数の実行回数を間引く

2012-08-15 Deferred を使おう：CSSトランジション終了の検知

まずはBoneを描いてみよう

関節を動かすには？

関節の角度はどうやって計算する？

体の上下の動きもわすれずに！

サンプル

2022-12-24【WebGL】【MSDF】イブにお父さんがサンタに変身する話

2023-12-24「JS体操」のすゝめ〜その①〜

技術部ブログ『JS体操』

2024-04-26【JS体操】JavaScript で頭の体操をしよう！〜第1問 44文字解説編〜

2012-08-15 Deferred を使おう：CSS トランジション終了の検知