pg11

先週の補足

Pythonで嫁を見つけた話 - みんなのPython第四版に寄せて http://coreblog.org/ats/thinking-about-minpy-4th/

Pythonで仕事をされている方のBlogで、Pythonやっててよかったという記事を見つけたので紹介します。

みんなのPython は大学の図書館にも第３版があります。Webアプリ編の関連書もあります。興味がある受講生は借りて勉強してみましょう。

Blender+Pythonによるdemo動画

テーマアートとプログラム

ジェネラティブアート

映像・サウンド・画像などを生成するルールを決め、主にコンピュータでプログラムを実行して制作される作品

規則的で幾何学的な図形

プログラム＋数式など

自然界にみられる動植物の縞模様・地形・樹木の形など複雑な形体

基本的な手法として、規則的な操作の積み重ねにより表現する

フラクタル図形・カオス理論を応用

※演習の注意

ブラウザは、 Google Chrome を使用してください。

インターネットエクスプローラー（IE）では、課題プログラムが動作しない、作成したプログラムが消えるなどの不具合が発生します。

Viscuit でパターン生成

PC版(Flash使用)

http://www.viscuit.com

ぜんぶいりのやってみるから制作開始

iPad版Viscuitアプリ

NBUWiFiに接続してから、アプリを起動する。

魚アイコン → CS（コンピュータサイエンス）3桁数字アイコン → 鉛筆アイコンから制作開始

課題１

・生成（分裂・増殖）

・移動

・消滅（合体・衝突）

以上、３つのルールを組み合わせ、バターン（模様）を作成する。

※パターンをスクリーンショットで記録

課題2

・生成ルール本体 → 本体＋弾

↑ ・回転ルール追加

・弾のルール弾 → 直進

※パターンをスクリーンショットで記録

↑直進する点のルール＋回転発射

↓カーブする線のルール＋回転発射

課題３

・音の生成ルール

・図形の生成（弾の発射）

・移動する図形 → 衝突 → 音発生＋図形消滅

※パターンをスクリーンショットで記録

p5.js によるアニメーションとサウンド作成

p5.js

メニューの start → Examples を開く

解説）

Interactivity 1 マウスに反応するプログラムの例。クリックで丸い図形を表示

Animation アニメーション処理の基本形

Animation のリンク↑をChromeで開き、 ↓ のマウスをクリックした位置に丸を移動するコードを追加する。

// When the user clicks the mouse

function mousePressed() {

  x = mouseX;

  y = mouseY;

Points and Lines

↓の赤い部分の追加修正により、緑のドットを弾として発射する丸に変更する。

// Where is the circle

var x, y;

var mx, my;

function setup() {

  createCanvas(720, 400);

  noSmooth();

  // Starts in the middle

  x = width / 2;

  y = height;

function draw() {

  background(0);

  // Draw a circle

  stroke(50);

  fill(100);

  ellipse(mx,my, 24, 24);

  // Jiggling randomly on the horizontal axis

  x = x + random(-1, 1);

  // Moving up at a constant speed

  y = y - 1;

  // Reset to the bottom

  if (y < 0) {

    y = height;

  // Draw white points

  stroke(0,255,0);

  strokeWeight(4);

  point(x, y);

// When the user clicks the mouse

function mousePressed() {

  mx = mouseX;

  my = mouseY;

  x = mx;

  y = my;

Oscillator Frequency

三角波の音源(osc)を追加する。

音の高さ（周波数 freq）を緑のドットの x座標に対応させる。

音の大きさ(amp)を同じく y 座標に対応させる。

// Where is the circle

var x, y;

var mx, my;

var osc;

function setup() {

  createCanvas(720, 400);

  noSmooth();

  // Starts in the middle

  x = width / 2;

  y = height;

  osc = new p5.TriOsc(); // set frequency and type

  osc.amp(.5);

  osc.start();

function draw() {

  background(0);

  // Draw a circle

  stroke(50);

  fill(100);

  ellipse(mx,my, 24, 24);

  // Jiggling randomly on the horizontal axis

  x = x + random(-1, 1);

  // Moving up at a constant speed

  y = y - 1;

  // Reset to the bottom

  if (y < 0) {

    y = height;

  // Draw white points

  stroke(0,255,0);

  point(x, y);

  // change oscillator frequency based on mouseX

  var freq = map(x, 0, width, 40, 880);

  osc.freq(freq);

  var amp = map(y, 0, height, 1, .01);

  osc.amp(amp);

// When the user clicks the mouse

function mousePressed() {

  mx = mouseX;

  my = mouseY;

  x = mx;

  y = my;

Random

・音の触れ幅を変化させてみよう random(-1,1) を random(-10,10) に修正

・音の触れ幅を偏らせてみよう random(-1,1) を random(-4, 5) に修正

・音の周波数（高さ） freq を y に対応 var freq = map(x, 0, width, 40, 880);

音の大きさ amp を x に対応 var amp = map(y, 0, height, 1, .01);

に対応するように、x と y を入れ替えてみよう。

・弾のスピード（yの変化量)を -1 から別の値に変えて速度を上げてみよう（例 -3）。

・弾の数を増やしてみよう

例）

多数の弾を表示する座標を記録するため、配列(Array)で、1000個のメモリを準備。

マウスを押したときに、マウスのxy座標を弾の位置として記録。

記録された全ての弾を移動させ、表示するための for ループの追加。

// Where is the circle

var x, y;

var mx, my;

var osc;

var ax = new Array(1000);

var ay = new Array(1000);

function setup() {

  createCanvas(720, 400);

  noSmooth();

  // Starts in the middle

  x = width / 2;

  y = height;

  osc = new p5.TriOsc(); // set frequency and type

  osc.amp(.5);

  osc.start();

function draw() {

  background(0);

  // Draw a circle

  stroke(50);

  fill(100);

  ellipse(mx,my, 24, 24);

  // Jiggling randomly on the horizontal axis

  x = x + random(-10, 10);

  // Moving up at a constant speed

  y = y - 1;

  // Reset to the bottom

  if (y < 0) {

    y = height;

  // Draw white points

  stroke(0,255,0);

  strokeWeight(4);

  point(x, y);

  // change oscillator frequency based on mouseX

  var freq = map(y, 0, width, 40, 880);

  osc.freq(freq);

  var amp = map(x, 0, height, 1, .01);

  osc.amp(amp);

if (mouseIsPressed) {

ax.pop();

ay.pop();

ax.unshift(mx);

ay.unshift(my);

}

for(var i=0; i<ax.length; i++) {

ax[i] = ax[i] + random(-1, 1);

ay[i] = ay[i] - 1;

point(ax[i], ay[i]);

}

// When the user clicks the mouse

function mousePressed() {

  mx = mouseX;

  my = mouseY;

  x = mx;

  y = my;

課題４

p5.js で作成したプログラムが動いている様子が分かるタイミングで、スクリーンショットを撮る。

※ 弾の動きが早いので、キーボードの PrintScreen キーを押してメモリーにスクショを記録

→ ペイントブラシ（スタート→検索→pbrush）に貼り付け

を利用するとよい。

いろいろと工夫してみた↓

自身のy座標を３で割り、３０で割った余りを求め、-3 ～ +3 の範囲に割り当てる。その値分、ｘ座標をずらす。

課題１～４の４つのスクリーンショットを WebClass にアップロードする。

弾幕アニメーション生成 → 今回はパス。

次回予告

テーマ Swift Playground でプログラム学習

準備：

iPad を iOS10 にアップデート

Swit Playgroud をapp store からダウンロード

iPad を持参