* 演習X - 制作課題(ランダムな描画表現) [#nc2339c4]

#contents

** X.0 課題の概要 [#b475b6b8]
~ これまでに学んだプログラミングの技法を用いて、自動的に描画を行うコードを作成してもらいます。
~ ただし、以下の条件を守ってください。

+ ''ランダム関数 - Math.random() - を使うこと。すなわち、実行の度に異なる絵が出力されること。''
+ すでに提出済みのHTMLページ(自己紹介)の中の一つのコンテンツとして描画を示すこと。
+ 個々のキャンバス(以下、canvas)のサイズは320x240とし、それらのcanvasを最低9つ、上記のHTMLページの中に並べること。
+ 描画に引き続き、HTMLのなかで、描画にあたって「工夫したところ」や「アピールしたいこと」等をコメントしてください。

~ canvasの数に上限はありません。また、canvasの並べ方も自由とします。

** X.1 課題の例 [#h252218d]
~ 以下に、課題の制作例のスクリーンショットを示します。
- [[HTMLファイル:http://kenrikodaka.com/htmlinsert/work99/work.html]]
#ref(http://kenrikodaka.com/image/class/work.png,,802x605)

~ この例では、幅320pixel高さ240pixelのcanvasを、3行3列のレイアウトで並べています。
~全てのキャンバスに対して、異なる描画表現を記述する必要はありません。
この例のように、見栄えを考慮して、類似の描画表現を含む複数のキャンバスを、
単一のページの中にうまくレイアウトしてください
(ただし、質的に明らかに異なる描画を、最低3種類はつくること)。 

** X.2 ファイルの作り方の例 [#of36a0f8]
~ 今回の課題では、一つのページに複数のcanvasを出力することを想定しています。
こういったケースでは、描画命令を記述するjavascriptの本体を、
それぞれのcanvasに対応させるように分離して、
複数の外部ファイルとして管理しておくことが便利です。
~ ファイルの構成は、同一フォルダ(名前は学籍番号「''165XXX''」としてください)の中に、以下の2種類のファイルを含めるものとします。
+ HTMLファイル(1つ)
-- work.html
+ Javascriptファイル(キャンバスと同じ数、最低9つ)
-- cv01.js, cv02.js, cv03.js, cv04.js, cv05.js, cv06.js, cv07.js, cv08.js, cv09.js ...

*** X.2.1 HTMLファイルの内容 [#qaa2a1a8]
HTMLファイル(work.html)のソースを示します。
~- - - - - ソース - - - - - - - - - - - - - - - - - - - - -
#highlight(html:nocontrols){{
<!DOCTYPE html>
<html>
  <head>
    <title>名古屋市太郎のページ</title>
    <!-- Javascriptファイルの読み込み -->
    <script type="text/javascript" src="cv01.js"></script>
    <script type="text/javascript" src="cv02.js"></script>
    <script type="text/javascript" src="cv03.js"></script>
    <script type="text/javascript" src="cv04.js"></script>
    <script type="text/javascript" src="cv05.js"></script>
    <script type="text/javascript" src="cv06.js"></script>
    <script type="text/javascript" src="cv07.js"></script>
    <script type="text/javascript" src="cv08.js"></script>
    <script type="text/javascript" src="cv09.js"></script>
    <!-- CSS(canvas間を詰める) -->
    <style>
      canvas {
      padding: 0px; border:  0px; margin: -2px;
      }
      </style>      
  </head>
  <!-- ファイルの読み込み時に, draw01()からdraw09()までを順に実行. -->
  <body onLoad=
	"draw01();draw02();draw03();
	 draw04();draw05();draw06();
	 draw07();draw08();draw09();">

    <h1>ランダムドローイング(最終課題)</h1>

    <canvas id="main01" width="320" height="240"></canvas>
    <canvas id="main02" width="320" height="240"></canvas>
    <canvas id="main03" width="320" height="240"></canvas>
    <!-- 改行 --><BR>
    <canvas id="main04" width="320" height="240"></canvas>
    <canvas id="main05" width="320" height="240"></canvas>
    <canvas id="main06" width="320" height="240"></canvas>
    <!-- 改行 --><BR>
    <canvas id="main07" width="320" height="240"></canvas>
    <canvas id="main08" width="320" height="240"></canvas>
    <canvas id="main09" width="320" height="240"></canvas>
  </body>

  <h2>工夫したところ</h2>
  バームクーヘンの断面に見えるようにXXを工夫しました。とか。
</html>
}}
~ 以下で、簡単にポイントをまとめます。
- まず、6-14行目で、複数(9つ)のjavascriptファイルを読み込んでいます。「.js」はjavascriptの拡張子として用いられるものです。
 <script type="text/javascript" src="cvXX.js"></script>
このように、scriptタグの中でsrc属性にファイル名を指定してやることで、javascriptの実体を、外部ファイルとして管理することが可能となります。
なお、このケースでは、jsファイルがhtmlファイルと同一の階層にありますが、
それとは異なる方法として、同一階層にフォルダを作り、
その中でまとめてjavascript関連のファイルを管理する構成も非常に一般的です。
この場合は、(フォルダ名をfolderとする)以下のように指定します。
 <script type="text/javascript" src="folder/cvXX.js"></script>

- 23-26行目では、onLoad属性として、読み込み時に実行する関数名が9つ、
セミコロンを隔てて指定されています。
 <body onLoad="draw01();draw02();draw03();....;">
各関数は、6-14行目で参照されているjavascriptのファイル(cv01.js-cv09.js)の中で定義されているものです。後述するように、cv01.jsでは関数「draw01」、cv02.jsでは関数「draw02」、、、という規則で関数名がつけられています。このようにして、複数のjavascriptファイルの間でお互いの関数名の定義が重複しないようにしています。

-27-37行目で、描画のためのcanvasをHTML本体に配置しています(canvasタグ)。
BRタグは改行として機能しています。
また、canvasの幅と高さは320x240で統一していることに注意して下さい。
なお、ここでも、canvasは全部で9つあり、それぞれに異なるid属性(main01, main02, ...main09)が与えられています。これによって、関数の種類(あるいはjavascriptファイルのインデックス)に応じて、特定のcanvasを指定して描画を出力することができます。

*** X.2.2 javascriptファイルの内容 [#t671956d]
~ javascriptファイルの中には、
これまでHTML文書のscriptタグの内部(開始タグ<script>と終了タグ</script>に挟まれた部分)
に書かれていたものを記述する必要があります。
この際、複数のjavascriptファイル内で同一の関数名を定義してしまうと誤動作を起こす元となりますので、
各javascriptファイルに固有の関数名(draw01, draw02, draw03, ...)をつけるようにしましょう。
さらに、各javascriptファイル、cv01.js, cv02.js, cv03.js, ...は、
それぞれ、idとしてmain01, main02, main03, ...を有するキャンバスをターゲットとすることとします。
~すなわち、各javascriptファイルの内部は以下のような構造となります。
~- - - - - cv01.js - - - - - - - - - - - - - - - - - - - - -
#highlight(js:nocontrols){{
function draw01(){
    var canvas = document.getElementById("main01");
    var context = canvas.getContext("2d");
    //以下、描画本体
}
}}
~- - - - - cv02.js - - - - - - - - - - - - - - - - - - - - -
#highlight(js:nocontrols){{
function draw02(){
    var canvas = document.getElementById("main02");
    var context = canvas.getContext("2d");
    //以下、描画本体
}
}}
~- - - - - cv03.js - - - - - - - - - - - - - - - - - - - - -
#highlight(js:nocontrols){{
function draw03(){
    var canvas = document.getElementById("main03");
    var context = canvas.getContext("2d");
    //以下、描画本体
}
}}
~・
~・
~・


** X.3 提出方法、期日など [#e7745b91]
- 締め切りは7月31日(日曜日)
-- 8月1日に採点します。
- 締め切りは8月7日(日曜日)
-- 8月8日(月)に採点します。
- 共有フォルダ内の
 ToTeacher/Kodaka/メディア工学基礎/最終課題/
内に、165XXXというフォルダをアップロードして下さい。
XXXには、学籍番号の下3桁が入ります。
- ファイル構成は、X.2 に従う。繰り返しますが、HTMLファイルは、既に提出している自己紹介ページに加筆するようなかたちで作成してください。

** X.4 補足 [#x5e955ee]
*** X.4.0 配列 [#l2e214ac]
~ 今回の『情報処理基礎』では時間がなくて学べませんでしたが、重要なプログラムの機能に「配列」があります。
「配列」を使うと、複数のデータを(見かけ上)単一の変数のなかに記憶することができるため、膨大な変数を扱うような処理では重宝します。
配列に限らず、未学習の機能を積極的に使って描画を行うことについてはもちろん歓迎します。
昨年度の『情報処理』で使用した配列の授業資料を添付します。必要に応じて参考にしてください。

- [[『演習8・配列(情報処理2015)』:https://www.dropbox.com/s/bufe3z6g06iwalk/%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86_ARRAY%28151216%29.pdf?dl=0]]

*** X.4.1 デバッグ [#pc420d93]
~ Safariで「開発→エラーコンソールを表示」を指定すると、エラーの内容(エラーの行番号と原因)を表示してくれます。
開発メニューを表示するためには、「Safari」メニューの「環境設定」をクリックし、
「詳細」タブにおいて「メニューバーに"開発"メニューを表示」にチェックを入れてあげる必要があります。

*** X.4.2 より高度なデバッグ(変数の追跡) [#yb379db9]
~ console.log関数を使用すると、プログラム実行時の変数の変遷を追跡することができます。
具体的には、例えば、
 for(var i = 0 ; i < 10 ; i++){
     console.log("i = " + i);
 }
のようなかたちで、追跡したい変数をlog関数の引数として指定します。
log関数の中身は、以下の二種類の方法で可視化することができます。
- Safariで「開発→エラーコンソールを表示」で「コンソール」タブを選択し、さらに右上に表示される選択肢のなかで「ログ」を指定する
- Chromeで「表示→開発/管理→Javascript コンソール」を指定する

~このように変数を追跡する方法は、エラーの場所を追跡するうえで非常に有用です。

*** X.4.3 文章の整形(Sublime) [#pc420d93]
~ Sublimeで対象となる文章を指定し(cmd Aで全指定するのがよい)「Edit → Line → Reindent」とすることで、文章の階層が整理され、コードの視認性が高まります。ぜひ活用しましょう。

*** X.4.4 ランダム関数を使った描画サンプル [#s995ff92]
+ ランダムな大きさの円をキャンバスに収まるようにランダムに配置する [#j90f96bc]
~- - - - - 実行例 - - - - - - - - - - - - - - - - - - - - -
~[[(sampleXB.html):http://kenrikodaka.com/htmlinsert/sampleXB.html]]
#ref(http://kenrikodaka.com/image/class/sampleXB.png,,326x244)
~- - - - - ソース - - - - - - - - - - - - - - - - - - - - -
~(XB.js - javascriptファイル - )
#highlight(js:nocontrols){{
function drawXB(){
    var canvas = document.getElementById("mainXB");
    var context = canvas.getContext("2d");

    //円の中心座標(x,y), 半径(r)    
    var x,y,r;
    var w = canvas.width;    var h = canvas.height;
    //描画の透明度を半分にする
    context.globalAlpha = 0.5;
    
    for(var i=0;i<50;i++){
        //パスの(塗りつぶしの)色をランダムに設定 
        context.fillStyle = "rgb(" + 
            Math.floor(Math.random() * 256) + "," + 
            Math.floor(Math.random() * 256) + "," + 
            Math.floor(Math.random() * 256) + ")";

        //パスの開始
        context.beginPath();

        //円の中心座標はキャンバス内でランダムに選ぶ. 
        x = w * Math.random();
        y = h * Math.random();
        //円の半径の最大値は, 
        //円の中心位置から最も近いキャンバスの境界線までの距離
        r = Math.random() * Math.min(y, h-y, x, w-x);
	
        context.arc(x,y,r,0,2*Math.PI,true); 	//円のパスを生成
        context.fill(); //描画
    }
}
}}
(htmlファイルは省略)


#highlight(end)

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS