サンテクノカレッジ オープンキャンパス 2019年7月6日実施 体験授業「メディアアートへの一歩」 矩形を使って表現

1. サンテクノカレッジ オープンキャンパス
2019年7月6日(土)
山本 芳彦 yoshi@suntech.ac.jp
Processingでプログラミングを体験
メディアアートへの一歩
矩形を使ってプログラミングで表現

2. 体験授業C の内容
１．はじめに
 テーマ
 体験内容の概要
２．体験
１．体験1, 2 矩形描画
２．体験3 ランダムに矩形描画
３．体験4 異なる大きさの描画
４．体験5 異なる色の描画
５．体験6 透明感ある矩形描画
６．体験7 回転した矩形描画
３．まとめ 1

3. はじめに
 テーマ
『矩形を使ってプログラミングで表現に挑戦!!』
 体験内容の概要
 Processingでプログラミングを体験
 Processingとは
 デジタルアートとビジュアルデザインのためのプロ
グラミング言語
 メディアアート、ジェネラティブアートが可能
 https://processing.org/
2
矩形

4. プログラムの実行方法
Processingの起動 実行
停止
void setup(){
size(400, 400);
colorMode(HSB, 360, 100, 100);
background(0);
noStroke();
smooth();
rectMode(CENTER);
}
void draw(){
省略
入力
実行結果例
3

5. 体験1 矩形描画 (その1)
void setup(){
size (400, 400); サイズの指定
colorMode(HSB, 360, 100, 100);
background(0); 背景を黒色
noStroke(); 線無し
smooth(); 境界を多少ぼかす
rectMode(CENTER); 矩形の基準を中心にする
}
void draw(){
fill(0, 100, 100);
rect(0, 0, 10, 10);
}
演習1-1
上記プログラムを入力し、実行してみよう
演習1-2 プログラムを変更
矩形の大きさを変えてみよう
矩形の色を変えてみよう
fill(色相, 明度, 彩度)
塗りつぶす 色相0～359
明度, 彩度0～99
fill(色相, 明度, 彩度, 透明度)
塗りつぶす 透明度 0～99
rect(X座標, Y座標, 幅, 高さ)
rectMode(CENTER)のときはY座標
幅
高さ
X座標
4
色の表し方には
• RGB
• 色相, 明度, 彩度
今回は、色相を使っている
(X, Y)
幅
高さ

6. 体験2 矩形描画 (その2)
void setup(){
体験1と同じまま
}
void draw(){
translate(200, 200);
fill(0, 100, 100);
rect(0, 0, 10, 10);
}
演習2-1
上記プログラムを入力し、実行してみよう
演習2-2 プログラムを変更
座標変換する座標を変えてみよう
translate(200, 200); の200, 200の箇所
translate(X座標, Y座標);
座標変換
(例) translate(200, 200);
キャンバスの(200,200)の座標を
(0,0)にする
X
5
(0, 0)
キャンバス 400x400
translate(200, 200); にて
Yrect内の位置指定を変更せず
座標変換をつかって、異なる場所に描く

7. 体験3 ランダムに矩形描画
void setup(){
体験1と同じまま
}
void draw(){
translate(random(400), random(400));
fill(0, 100, 100);
rect(0, 0, 10, 10);
}
演習3-1
上記プログラムを入力し、実行してみよう
演習3-2 プログラムを変更
random(400)の値を変えてみよう
random(値)
乱数で値を作成
(例) random(400)
0～400までの値
6
体験1,2も同じ位置に描画をしていた

8. 体験4 異なる大きさの描画
void setup(){
体験1と同じまま
}
void draw(){
translate(random(400), random(400));
scale(random(0.5, 5));
fill(0, 100, 100);
rect(0, 0, 10, 10);
}
演習4-1
上記プログラムを入力し、実行してみよう
演習4-2 プログラムを変更
scaleの値を変えてみよう
scale(値)
大きさを変える％(パーセント)
(例) random(0.5, 5)
0.5～5までの値
(例) scale(random(0.5, 5));
0.5倍～5倍の大きさ
7

9. 体験5 異なる色の描画
void setup(){
体験1と同じまま
}
void draw(){
translate(random(400), random(400));
scale(random(0.5, 5));
fill(random(0,90), 100, 100);
rect(0, 0, 10, 10);
}
演習5-1
上記プログラムを入力し、実行してみよう
演習5-2 プログラムを変更
fillの値を変えてみよう
(例) random(0, 90)
0～90までの値
8

10. 体験6 透明感ある矩形描画
void setup(){
体験1と同じまま
}
void draw(){
translate(random(400), random(400));
scale(random(0.5, 5));
fill(random(0,90), 100, 100, 50);
rect(0, 0, 10, 10);
}
演習6-1
上記プログラムを入力し、実行してみよう
演習6-2 プログラムを変更
fillの値を変えてみよう
fill(色相, 明度, 彩度, 透明度)
塗りつぶす 透明度 0～99
9

11. 体験7 回転した矩形描画
void setup(){
体験1と同じまま
}
void draw(){
translate(random(400), random(400));
rotate(random(PI/2));
scale(random(0.5, 5));
fill(random(0,90), 100, 100, 50);
rect(0, 0, 10, 10);
}
演習7-1
上記プログラムを入力し、実行してみよう
演習7-2 プログラムを変更
いろいろな値を変えて、実行してみよう
rotate(角度)
角度は、ラジアン角
PI=π(パイ)=180度
(例) PI/2
90度
10

12. メディアアート、ジェネラティブアートに
興味をもってください
まとめ
 Processingプログラミングで、簡単にアー
トの作品を作成することが可能
 本日のテーマ『矩形』のみでも、いろいろ
な表現が可能
11
矩形