Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

原理で3DCG 第2回
基本3DCG + キー入力

<<前へ 01 02 03
【プログラミング全貌(PNG画像)】
次へ>>

第2回補足説明へ

チーッス

みなさんに3DCGを教えている、「スリーディーおねえさん」です。

第1回では3DCG計算の基本のプログラムをひととおり見ましたね。

説明はちょっと難しかったかもしれませんね。

でも、たじろがずにためしてみることが一番勉強になるんですよ。

自分で、新しいテキストファイルを作って、ファイル名を3DCG.htmlとかにして、 1から作ってみましょう。

第2回では第1回のプログラムにキーボード入力の機能を取り付けます。

キー入力の方法がわかれば、自分で動かしてみたりできるでしょ?

キー入力には、ボタンを押しつづけたとき、タッ…タタタタタ、と一呼吸置いてから連射される文字入力用のキー入力と、

ボタンを押した瞬間から、タタタタタ!、とスムーズに入力される「キーセンス」と呼ばれるキー入力の2種類があります。

キーセンスのほうはちょっと難しいので、ここでは文字入力用のほうを説明しています。

でも、キーセンスのほうがゲームで使えるので魅力的ですよね? 「キーセンスに似せた方法」を後のほうの回で説明する予定です。

それではがんばっていきましょうね☆

初版 2016/5/29
改訂 2016/6/04

全17回を予定しています。次回は近日予定

実践 - プレビュー

fig.
▲クリックするとJavaScriptを実行します。
 タッチ操作対応版

ではさっそく、左の JavaScript を実行してください。

左の画像をクリックすると JavaScript が走ります。

キーボードの↑↓←→で8つの点が立体的に動きます。

ほんとに3DCGになっているんですけど、下のような短いプログラムで動いているなんてびっくり!



講義 - プログラム

上で動かしたプログラムと、下のプログラムのコードは同じものです。

プログラムの途中の黄色く塗られた部分は、第1回のプログラムからの変更点です。

[では、このリンクをクリックして説明を読み始めてください。]

比較ファイル: ../../01 kyouzai - 3.html
このファイル: ../../02 kyouzai - 3A.html

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>3DCG</title>
<style></style>
<script>
function $( id ) { return document.getElementById( id ); }


//正六面体の頂点データ
var tens = new Array();
var a;
a = new Object();
	
a.x = -1;
	
a.y = -1;
	
a.z = -1;
	
	
tens[ 0 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = -1;
	
a.z = -1;
	
	
tens[ 1 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = +1;
	
a.z = -1;
	
	
tens[ 2 ] = a;
a = new Object();
	
a.x = -1;
	
a.y = +1;
	
a.z = -1;
	
	
tens[ 3 ] = a;
a = new Object();
	
a.x = -1;
	
a.y = -1;
	
a.z = +1;
	
	
tens[ 4 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = -1;
	
a.z = +1;
	
	
tens[ 5 ] = a;
a = new Object();
	
a.x = +1;
	
a.y = +1;
	
a.z = +1;
	
	
tens[ 6 ] = a;
a = new Object();
	
a.x = -1;
	
a.y = +1;
	
a.z = +1;
	
	
tens[ 7 ] = a;

//正六面体の位置データ
var pos = new Object();
pos.x = 0;
pos.y = 0;
pos.z = 300;

//正六面体の大きさデータ
var scale = 50;
	
//中心からの幅を拡大(つまり左右幅、上下幅それぞれ100の大きさになる)


var canvas;


function onloadx() {
var canvasTag = $( "canvasID" );
canvas = canvasTag.getContext( '2d' );

//キーボード入力(簡易)
document.onkeydown = function( e ) {
switch( e.which ) {
case 37:
	
pos.x--;
	
break;
	
//←キー

case 38:
	
pos.y++;
	
break;
	
//↑キー

case 39:
	
pos.x++;
	
break;
	
//→キー

case 40:
	
pos.y--;
	
break;
	
//↓キー

default:
}
draw();
};

draw();
}


function draw() {

//画面をクリア
canvas.clearRect( 0, 0, 640, 480 );

//頂点1つ1つ取り出す
for( var i = 0; i < tens.length; i++ ) {

//1:空間座標について

var x = tens[ i ].x;
var y = tens[ i ].y;
var z = tens[ i ].z;

//立体を拡大
x = x * scale;
y = y * scale;
z = z * scale;

//立体を移動
x = x + pos.x;
y = y + pos.y;
z = z + pos.z;


//2:空間座標を、画面座標へ変換

var s = 50;
	
	
	
//難しい言葉で「焦点距離」という。

var h = x * ( s / z );
var v = y * ( s / z );

//Shade3Dと同じ画面にするため拡大
h = h * 17.6;
v = v * 17.6;

//縦方向の上下反転を直す
v = -v;

//画面の中心に持ってくる
h = h + 320;
v = v + 240;


//3:○を描く
canvas.beginPath();
canvas.arc( h, v, 4, 0, 3.14159 * 2, false );
canvas.closePath();

canvas.fillStyle = "black";
canvas.fill();
canvas.strokeStyle = "black";
canvas.stroke();
}
}
</script>
</head>
<body onload="onloadx()">
<canvas id="canvasID" width="640" height="480" style="
border
	
	
	
:
	
solid 3px black;
border-radius
	
:
	
16px;
">
このブラウザはcanvasに対応していません。
</canvas><BR>
キーボードの↑↓←→で8つの点が3DCGらしく動きます。
</body>
</html>
TAB

いざ自分のプログラムで onkeydown を書くときは、下図を参考にしてください。


練習 - 不正解のない問題

プログラムの説明は全部見終わったでしょうか?

次は「説明ばかりでは身につかない」と考えて問題を出します。

学校の問題みたいに正解・不正解があると緊張するので、「不正解のない問題」を用意しました。

問題です。

次のゲームで遊んで、敵キャラの配置を覚えなさい。

なお、キーボードの左右キーで自機を動かし、zキーで攻撃です。

STARTボタンで開始します。

SPACE INVADERS [START]
Insert coin.


Z
←_37 →_39
z key:Fire  ←→:Move  (Shoot all ascii characters.)




不正解のない問題って…
これってただのゲームでしょ?!




また次回をお楽しみに。

<<前へ 01 02 03
【プログラミング全貌(PNG画像)】
次へ>>

第2回補足説明へ


以下の内容は小中学生や若者にはつまらない内容だと思います。仕事でより良い製品を作りたい人には興味深い内容かもしれません。

ex. 狩野モデルでこのページの品質をチェック

 「狩野」 よみ:かのう。(人の名前)

狩野モデルは、お客さん向けに作ったモノ(作る予定のモノ)について分析を行います。

狩野モデルは作ったモノの機能を3つに分類します。すると、どの機能を重点的に磨き上げればよいかがハッキリとします。

たとえばこのページには以下のような "機能" があると思います。

『読者はこのページを読んで、「JavaScriptによるキー入力」を確かに習得できる』

この機能は、下の表を見ると3つのカテゴリの「当たり前品質」に分類してあります。

(分類は自分で行います)

「当たり前品質」は、作ったモノの一番の目的を達成するために あって当たり前の機能 ということです。そのため、3つのカテゴリの中で最も優先度が高く、このカテゴリに分類されているものは優先的に直したほうが良いということになります。

このページ(「原理で3DCG 第2回 基本3DCG + キー入力」)は、物事を教えることを一番の目的にしていて、そのためにあって当たり前の機能は、「読者の皆さんが読んで理解できること」です。このことを優先的に直せばいいということになります。

狩野モデルは、そういったことを洗い出すのに役立ちます。当たり前のことができていないことが多いので。




品質要素 判断基準 見解





何かを教えるページとして、あって当然の基本機能。
「洗濯機」でいうと「衣類が洗える機能」
  1. 読者はこのページを読んで、「JavaScriptによるキー入力」を確かに習得できる。
  2. 間違ったことを教えていないこと。
  3. 日本語が正しいこと。
  4. ページ表示にエラーがないこと。

この機能がないと、読者は確実に不満を感じる。

左記番号に対応する見解:

  1. できる限り習得できるようにつとめて作ったつもりだが、まだ足りないと思う。
  2. 間違ったことは教えていないと思うが、わからない。
  3. 日本語には自信がなく、問題がある。修正すべき点あり。
  4. PC、タブレット、スマートホンで確認していますが、モノによってはエラーを出すかもしれません。




なくても目的を果たせるが、あっても良いはずの機能。「洗濯機」でいうと「省エネ機能、静音洗濯機能」
  1. 実際に小学生に読ませてみて、理解できるかどうかのフィードバックを得て反映させる。
  2. 文章だけでなく画像を挿入し理解の補助を図る、または興味を引く。
  3. 難しい言葉を避け、わかりやすい説明。
  4. 文書として整形されまとまりがある。
  5. バリアフリー(文字の大きさ変更機能など)
  6. 紙に問題なく印刷できること。
  7. トラブルシューティング
  8. HTMLとしてaltやtitle属性等をすべて設定してある。
  9. 質問掲示板
  10. 改訂履歴

※「一元的」の言葉の意味は、「1つの事柄ですべてが統一されること」らしいですが、ここで使われている意味はちょっと分かりません。

この機能がないと読者は不満を感じることがある。付加的要素。

左記番号に対応する見解:

  1. フィードバック0の状態です。
  2. 画像による補助を行う余地あり。
  3. 難しい言葉にはある程度注意しましたが修正の余地あり。
  4. まとまりについては不足しています。私の苦手。
  5. バリアフリーは導入するとよい。
  6. 印刷状態の確認が必要。
  7. トラブルシューティングはネットのニーズである。
  8. (8番以降省略)


その他、今回該当するもの:

  • 実践、講義、練習 の三本立てで効率よく学べるようにした。(「JSP&サーブレット」とという本がそうなっていて いいなと思い、導入してみました)
    インベーダーゲームについて、練習としては意味がないと気付きながら置いておくことにした理由は、人の興味を引くためと、勉強の息苦しさを緩和するため。




ユーザーが予想しなかった革新的な機能
「洗濯機」でいうと「衣類同士のからまり防止機能、自動物干し機能」
  1. たとえば、誰でも1回読むだけで、プログラミングできるようになるという夢のような内容。
  2. たとえば、ページ制作にかかる時間が、1日以下。(質の良いページが次々と公開される)

この機能がないとき読者は「なくても仕方がない」と感じる。読者の期待を上回るもの。

今回該当するもの:

  • 本の「前書き」はみんなあまり読まないと思うので、女の子のアニメにしゃべらせることで読みやすくした。
  • ソースコードの説明はどうしても冗長(じょうちょう。ムダのある非効率な方法)になりがちなので、行をピンポイントで説明する仕組みを導入した。
  • 2つのソースコードの変更点を自動でマーキングする機能を導入した。これにより、読者はどこを変更したのかがすぐにわかる。

(上記について読者の方が実際そう思うかは別です)


ページ制作 homepage6047


ページの上端へ (もくじ開く)