[Work/Class]

授業資料

コンテンツ

Java With Processing

Processing IDEを用いて,Javaの基礎からオブジェクト指向プログラミングまでを学ぶ.

JavaScript with P5.js

ProcessingのJavaScript版であるP5.jsを用いて,ES2015準拠でオブジェクト指向プログラミングを学ぶ.

Python3の基礎とデータ処理

Pythonの基礎と,それ用いたオープンデータの取得や処理を行う.

C++11の場合

Javaのオブジェクト指向プログラムをC++に移植するための,C++のオブジェクト指向の基礎.

ES2015で動的Webアプリ

WebSocket通信を用いて,ウェブブラウザ上で動作する動的Webアプリケーションを製作する.JavaScriptの最新版であるECMAScript2015を使用する.

OpenGL - WebGL

OpenGL1系と2系以降,そのブラウザ動作版であるWebGL.

サウンドトラック制作基礎

映像で使用するオリジナル劇伴をコンピュータで作る.

Web基礎

Webサイト制作.コンテンツの作り方.

Google Maps APIの基礎

GoogleMapsを独自にカスタマイズし,自分のWebサイトに取り込む方法.


[Work/Class/JavaScript with P5.js/basic]

P5.jsの基礎

HTMLファイル

この授業では,HTMLファイルはいじらない.読み込むjsファイルの箇所のみを変更して使いまわす.

<html lang="ja">
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>P5.jsの基本の基本</title>

   <!-- 絶対パス指定URLでネットから直接ライブラリを読み込む -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js">
   </script>

   <!-- 自分のP5.jsコードを読み込む -->
   <script type="text/javascript" src="./My1stP5.js">
   </script>
   </head>
   <body>

   </body>
</html>

JavaScriptファイル

これがP5.jsのプログラム本体となる.(Processingの習慣でSketchスケッチとも呼称する)

// P5.jsの自分のスケッチ My1stP5.js

//canvasを格納する変数の定義
let canvas;

function setup(){
    // 描画領域のサイズを決める
    // Java版のsize(640, 480);に相当する
    canvas = createCanvas(640, 480);
    // この命令でhtml上にcanvasタグが挿入される.

    // Canvasのclassを指定する.
    canvas.class("myCanvas");

    //色モードをRGB, 範囲を0~255に指定する
    colorMode(RGB, 255);

    //これから描画する図形の中の色をRGBで,100, 200, 255にする
    fill(100, 200, 255);

    //左から100,上から200の位置に,幅50,高さ50で,指定された色の円を描く
    ellipse(100, 200, 50, 50);

}

実行

HTMLファイルをブラウザで読み込むと,JavaScriptファイルに記入したスケッチが実行される.


[Work/Class/JavaScript with P5.js/basic]

プログラムをGitHubで管理する

一人で編集する

この項目は「そのプログラムを触っているのが自分一人」という前提.

プログラムをGitHubへ保存・登録する

まず,この授業用のフォルダを作成する.

その中にスケッチ単位のフォルダをさらに作り,前項のhtmlファイルとjsファイルをスケッチフォルダの中に保存する.

現在の実行状態.

GitHub Desktopのメニューから「File」→「New Repository」をするとこのような画面が出る.「Local Path」の「Choose」を選択.

授業用のフォルダ「を含んでいるフォルダ」を選択する.

「Name」には授業用のフォルダ名を入れ,「Initialize this repository with a README」にチェックを入れる.

GitHub DesktopにCurrent Projectとして登録された.これで自分のコンピュータの中のデータベースでは管理ができるようになる.

GitHub.comのサーバに登録する.クラウドに保存するようなイメージ.プロジェクトの名前(ここでは「P5jsDocuments」,Descriptionには「なんのプロジェクトなのか」を記入し,「Keep this code private」にチェックを入れる.チェックを入れないとGitHubのサーバに登録した途端全世界に公開されてしまう.「Publish」でサーバ上に登録される.

https://github.com 上の自分のページを見ると,確かにプロジェクトが登録されている.

その中を見ると,最初のコードを格納したフォルダが存在していて,

中にHTMLファイルとJSファイルが登録されている.ソースコードの中身を見ることもできる.

コードを書き足して,Gitも更新する

先ほどの円を書いた後に,以下のコードを追記して保存する.

  // グレー
    fill(100, 100, 100)
    // 先ほどの円とは別に円を描く
    ellipse(200, 300, 80, 80);

実行するとこのようになる.

GitHub Desktopに「どこを変更したのか」が表示される.行頭に「-」が付いている赤の行が削除され,行頭に「+」が付いている緑の行が追加されている.左上には「Changes 1」つまり1つのファイルを変更した,という表示が出ている.

「どういう変更をしたのか」を簡潔に書いて,「Commit」する.

「このコンピュータの中」のデータベースに,変更が登録された.GitHubのサーバ上も更新したいため,「Push Origin」(originはサーバ上,という意味)

Pushが終わった.

Webから確認すると,サーバ上もちゃんと更新されている.

別のコンピュータに持ってくる

GitHub.comのサーバ上の状態をそのまま別のコンピュータに持ってくることを「Clone」という.

プログラムコードを別のコンピュータで進めたい場合,まずGithub.comのWebのプロジェクトページから,「Clone or Download」を押して,そのプロジェクトのレポジトリのURLを表示させ,コピーする.

GitHub Desktop上で「File」→「Clone a Repository」をするとこの画面になる.

GitHub DesktopではCloneをする方法が2つある.

1つ目は,「GitHub.com」タブを選択すると,自分のGitHubに保存されているレポジトリ一覧がでるので,選択して,保存したい場所を「Local Path」で選び,「Clone」

2つ目は,「URL」タブに,先ほどコピーしたレポジトリのURLを貼り付けて,同様に「Local Path」で保存したい場所を選び,「Clone」

Cloneすると,指定した位置にちゃんとコードが落ちて来ている.

ちゃんとプロジェクトがGitHub Desktop上にも表示されている.

ここからプログラムを変更したら,先ほどと同様に「プログラムを保存して,変更をGitHub Desktopで確認してCommit→Push Origin」をすれば,GitHubに保存される.

ちなみに一度クローンしてしてGitHub Desktopにそのプロジェクトが登録されていたら,その後は「Fetch origin」もしくは「Pull origin」(GitHubのレポジトリに変更があった場合「Fetch origin」の場所に「Pull origin」と表示される)のみで同期される.「Pull Origin」と「Fetch Origin」は「GitHubサーバ上の変更を,現在作業中のコンピュータに落としてくる」ぐらいの意味で捉えておくと良い.

(正確にはPullは,GitHubのレポジトリの変更内容を取得して,現在自分が変更中の内容と統合する,の意味)

FinderやExploerで確認して,gitのデータベース「.gitattributes」や「README.md」が入っているプロジェクトフォルダがそのコンピュータの中にあるのに,GitHub Desktopに表示されない場合は,GitHub Desktopの「File」メニューから「Add a Local Repository」で,そのプロジェクトフォルダを追加してやれば良い.

南大沢のPC教室の場合は,別のコンピュータを使ったり,コンピュータ自体を再起動するとGitHub Desktopの設定が全部飛ぶので,授業の始まりの時に「Add a Local Repository」をして既存のプロジェクトフォルダをGitHub Desktopに追加し,「Pull origin」をする必要がある.

(もしくは授業ごとに全部消して,授業の始まりにcloneするとか)


[Work/Class/Java with Processing/4_SwingInProcessing]

アート系学生のためのJAVA with Processing - その4-4 JavaのStringクラスを使って文字列処理

Stringクラスの必要性と利便性

ActionCommandや,これからネットワーク越しのメッセージなどを扱う時に,JavaのStringクラスやその類似クラスによる文字列操作は避けて通れない.

が,JavaのStringは他言語の標準ライブラリに比べて異様なまでに便利であり,標準で備えていない機能はないとも言えるぐらいである.ActionCommandやネットワークメッセージに使う基本的な機能のみを紹介し,あとはJavaの公式ドキュメントを紹介する.

Java公式のStringクラスの仕様 https://docs.oracle.com/javase/jp/8/docs/api/java/lang/String.html

コンストラクタ

String myString = new String("初期化の際の文字列");で最初から「初期化の際の文字列」が入ったStringのインスタンスが生成できる.

同じ文字列かどうかを見る

myString.euqals("比較したい文字列");を実行すると,同じ文字列(同じオブジェクトインスタンスではない)ならばtrueが,そうでないならfalseが返ってくる.これを利用し,if文の中に突っ込むことで,これまでActionCommand等の判定を行ってきた.

文字列同士の連結

String firstString = new String("FirstString");
String secondString = new String("SecondString");

が予め存在する時,以下の方法で文字列連結ができる.

String newString = firstString + secondString;
String newString = firstString.concat(secondString);

が,これはfor文やイテレータなど,配列に入っている文字列をぶん回す際には使えないので,StringBufferクラスやStringBuilderクラスを使って以下の方法がある.

StringBuffer stringBuffer = new StringBuffer();
stringBuffer.append(firstString);
stringBuffer.append(secondString);
String newString = stringBuffer.toString();
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append(firstString);
stringBuilder.append(secondString);
String newString = stringBuilder.toString();

速度としてはStringBuilderクラスを使う方法が一番早く(プラス演算子の1万倍ぐらい早い),次いでStringBufferクラスを使う方法が早い(プラス演算子の5千倍ぐらい早い)に.プラス演算子やconcatは極端に遅いが,足さなければならないStringのインスタンスが少なく量が決まっている場合にはコードが短くなるという利点がある.

スプリッタ文字を指定した切り分け

String givenCommand = "OSC/Desafinado/Toalka/Pikka";

という文字列があった場合,「/」を取り除いて各要素を含んだ配列にし,その配列を用いて状態分岐ツリーを作りたい状況が,特にアクションコマンドやネットワークメッセージを利用している場合に多発する.

String[] splittedCommand = givenCommand.split("/", 0)

と書いてやると,この場合は,"OSC", "Desafinado", "Toalka", "Pikka"という文字列(String型)を要素に持つ配列splittedCommandが生成される.分割に使う文字は

2番目の引数は「最大分割数」なのだが,2番目の引数を省略,もしくは0にすることにより全ての要素の分割が行われる.

2番目の引数に「-1」を指定することにより,空白の要素を除くことができる.例えば,

String givenCommand = "OSC,,Desafinado,Talka,,";

という文字列が与えられた時,2番目の引数が0の場合,

givenCommand.split(",", 0);

配列の中身は,"OSC", "", "Desafinado", "Talka", "", ""となり,空白のStringが入ってしまう.そこで-1を第2引数に指定し,

givenCommand.split(",", -1);

とすると,出力の配列の中身は,"OSC", "Desafinado", "Talka"の3要素のみとなる.

文字列から数字型へ変換

数字から文字列への変換は,単に"文字列" + iのように+演算子で既存の文字列につなぎ合わせることで可能である他,

int number = 1356;
String value = new String(number);

のように,Stringのコンストラクタに数字を渡す方法でも可能である.

またIntegerクラスのオブジェクトインスタンスを作り,インスタンス関数toString()を実行することでも,数字の文字列を得られる.

int number = 1356;
Integer myInteger = new Integer(number);
String value = myInteger.toString();

問題は逆で,文字列として受け取った「数字」を演算可能にするために,例えば整数型などに入れる場合である.整数型ならIntegerクラスのstaticメソッドparseInt()を使う.

String commandNumberInString = "1356";
int commandNumberInInteger = Integer.parseInt(commandNumberInString);

と書くと,int型に変換される.

parseInt()staticメソッドであり,クラスのインスタンスを作っていなくても使うことができる.

StringとJTextFieldを使った実例

前項の複数のボタンでテキストフィールドの内容を書き換えるプログラムを,改造し,テキストフィールドに入力された「,」で区切られた2つの数字を足したり引いたりするプログラム.

import processing.awt.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

void setup(){
  size(640, 480);
  Canvas canvas = (Canvas)surface.getNative();
  JLayeredPane layeredPane = (JLayeredPane)canvas.getParent().getParent();
  
  JTextField textField = new JTextField("3,4");
  textField.setBounds(10, 360, 620, 20);

  MyButtonListener myButtonListener = new MyButtonListener();
  myButtonListener.setTextField(textField);

  JButton button1 = new JButton("Add");
  button1.setBounds(10, 390, 100, 20);
  
  JButton button2 = new JButton("Sub");
  button2.setBounds(120, 390, 100, 20);
  
  button1.setActionCommand("add_two_values");
  button1.addActionListener(myButtonListener);
  
  button2.setActionCommand("sub_two_values");
  button2.addActionListener(myButtonListener);
  
  layeredPane.add(textField);
  layeredPane.add(button1);
  layeredPane.add(button2);


  // ボタンリスナーのインナークラス
  // 例によって,インナークラスではなく別ファイルに分離することもできる
  class MyButtonListener implements ActionListener {
      JTextField textField;
  
      void setTextField(JTextField textField){
	  // テキストフィールドを操作するために,変数に実体を登録しておく
	  this.textField = textField;
      }
  
      @Override
      public void actionPerformed(ActionEvent e){
	  String actionCommand = e.getActionCommand();
	  
	  if(actionCommand.equals("add_two_values")){
	      // 足し算ボタンが押された時
	      
	      // JTextFieldクラスのインスタンスが持つgetText関数を使うと
	      // その時点でテキストフィールドに入力されている文字列を
	      // String型のインスタンスとして取り出すことができる
	      String givenString = textField.getText();

	      // 試しに表示してみる
	      System.out.println(givenString);

	      // テキストフィールドに入っていた2つの数字は,間を「,」で区切って入力する
	      // 一つの文字列として入って来ているので,「,」でsplitする
	      String[] givenValues = givenString.split(",", -1);

	      // Integerクラスが持つ静的関数parseInt関数に「数字の文字列」を入れると
	      // int型に変換してくれる
	      int firstValue = Integer.parseInt(givenValues[0]);
	      int secondValue = Integer.parseInt(givenValues[1]);

	      int answer = firstValue + secondValue;
	      // 足したint型の数字を,
	      // Stringクラスの静的関数valueOfに入れるとString型として出力してくれる
	      textField.setText(String.valueOf(answer));
	  }
	  else if(actionCommand.equals("sub_two_values")){
	      // 引き算の場合も,処理は足し算と同じ
	      String givenString = textField.getText();
	      System.out.println(givenString);
	      
	      String[] givenValues = givenString.split(",", -1);
	      int firstValue = Integer.parseInt(givenValues[0]);
	      int secondValue = Integer.parseInt(givenValues[1]);
	      int answer = firstValue - secondValue;
	      textField.setText(String.valueOf(answer));
	  }
      }   
  } //インナークラスここまで
}

[Work/Class/サウンドトラック制作基礎]

サウンドトラック制作基礎

このテキスト目的

映像基礎の授業の中で行われる「サウンドトラック制作基礎」の授業資料です.

コンテンツ

  1. FL Studioのダウンロードとインストール(Windows用)
  2. FL Studioのダウンロードとインストール(Mac用)
  3. Studio One Primeのダウンロードとインストール
  4. FL Studioによるリズムの打ち込みとStudioOneへの取り込み
  5. FL Studioによるメロディの打ち込み
  6. 「コード」「コードネーム」の基本
  7. FL Studioによるハーモニー,ベース,アルペジオの打ち込み
  8. アヴェイラブルノートスケールを用いたメイン旋律とオブリガート
  9. Studio Oneのオートメーション
  10. Studio Oneでマーカをつけてミックスダウン書き出し
  11. 既存のループ素材の使い方 - FL Studioでテンポ情報を加えて切り貼りする

最終課題

個人課題,グループ課題の両方で点数をつける.個人課題は最終授業の「次の日曜日24:00」,グループ課題は「正月明け」に提出.

個人課題 : オリジナル曲の制作と制作メモ

コード進行をどこからか持ってくるか,自分で作るなどして,オリジナル曲を制作する(劇伴を想定しなくても良い).効果音やループの「フリー素材」ならば使用可能.個人課題のミックスダウンをグループ課題にそのまま用いても良いとする.

制作メモには,「学修番号・名前」「コード進行」,コード進行を他から持って来た場合「オリジナルの曲の名前・作曲者」,フリー素材を用いた場合「フリー素材の出所」を,それぞれ記述すること.

StudioOneのプロジェクトフォルダと使用したサウンドファイル(FL Studioから書き出したものやフリー素材),制作メモを「サウンドトラック制作基礎_最終個人課題_学修番号_名前」という一つのフォルダにまとめた上で,zipファイルに圧縮する.(zipファイル名がサウンドトラック制作基礎_最終個人課題_学修番号_名前.zip」になる) zipファイルをGoogle Driveにアップロードし,共有をかける.

グループ課題 : サウンドトラックの制作とレポート

サウンドトラックの制作

複数のシーンがあり,シーンが移り変わりがある映像を想定して,複数の曲を繋げて構成したStudio Oneプロジェクトによるサウンドトラックを制作する.

グループ課題は明確に「劇伴」であること.つまり「劇伴として必然性がある」ならばドラムだけの曲や,逆にリズム隊が全く含まれていない曲もあって良い.

個々のシーンの曲は,グループ構成員の個人課題のミックスダウンwavファイルを取りまとめたプロジェクトでも良い.その場合事前に相談し,シーンにあった個人課題にすること.効果音やループ素材などもフリー素材ならば取り込んで良い.

レポート

(1)どのような映像を想定し,
(2)どのような心理的効果を視聴者に与えることを目的として,
(3)どのような技法を使って,
制作したかを明確に記述したレポートを作成.

レポート内部に,班名と構成員の学修番号,名前を明記すること.フリー素材を用いた場合にはその出所も書くこと.

Studio Oneのプロジェクトフォルダをzip圧縮したもの,使用したサウンドファイル(複数の曲のミックスダウンをまとめた場合,個々の曲のミックスダウン),全体をミックスダウンしたwavファイル,レポートを一つのフォルダにまとめ,「サウンドトラック制作基礎_最終グループ課題_班名」というフォルダ名にして,zip圧縮して,Google Driveにアップロードし共有をかける.

旧コンテンツ

2016年度授業まで,Studio Oneの代わりに使用していたAcidXpressとAcidProのコンテンツ.Windows環境で映像作品用5.1chサラウンドのサウンドトラックを制作するソフトウェアの中ではAcid Proが一番安価なので,映像制作の参考に残しておく.

  1. Acid Xpressのダウンロードとインストール
  2. Acid XpressのSplitとEdit
  3. Acid Xpressへのサウンドファイル・ループファイルの取り込みとプロジェクトの保存
  4. Acidでのオートメーションの作成
  5. Acid Proでの5.1chサラウンドパンニング