前橋工科大学 – デザイン演習 II 2021
「家具の映像」制作チュートリアル (1)
今回は「家具の映像」制作のための技術的な制作チュートリアルの1回目です。p5.jsを用いて単純なプログラムから徐々に高度な内容へと発展させていきます。
制作に必要なもの
- ノートPC
- p5.jsの制作環境
- 下記のページを参考に
- p5.js プログラミング環境の構築
「家具の映像」をどう実現するか
- 再生方法 → フルスクリーンで
- 方法は直接レクチャー
- 生活を遮らないもの
- ゆっくりとした変化
- 絶えず変化しつづける
- 同じパターンの繰り返しは避ける → ランダム
- 色合いの工夫 : HSBによる指定
p5.jsの基本の確認
- setup() 初期設定 : 最初に1度だけ実行される
- draw() 描画 : 一定間隔でくりかえし実行、繰り返す速さ : fps (frame per second)
code_01 : シンプルなアニメーションのサンプル
//変数
let x, y;
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
//変数の初期化
x = 0;
y = height / 2;
}
function draw() {
background(0);
fill(31, 127, 255);
circle(x, y, width/10);
//変数を更新してアニメーション
x = x + 5;
}
http://openprocessing.org/sketch/1296680/
ランダム
- ランダム : 規則性の無い数、範囲を指定して使用する
- random(100) : 0 ～ 100のランダムな数
- random(100, 200) : 100 ～ 200のランダムな数
code_02 : ランダムな場所にランダムな大きさの円を描く
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
//最初に背景を1度だけ塗る
background(0);
}
function draw() {
//ランダムな座標と大きさを生成
let x = random(width);
let y = random(height);
let diameter = random(width/100, width/10);
//円を描く
noStroke();
fill(31, 127, 255, 128);
circle(x, y, diameter);
}
https://openprocessing.org/sketch/1296691/
色彩について
- RGBで色彩をコントロールするのは難しい
code_03 : RGBのランダム
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
//最初に背景を1度だけ塗る
background(0);
}
function draw() {
//ランダムな座標と大きさを生成
let x = random(width);
let y = random(height);
let diameter = random(width/100, width/10);
//円を描く
noStroke();
//RGBのランダム
fill(random(256), random(256), random(256), 128);
ellipse(x, y, diameter, diameter);
}
https://openprocessing.org/sketch/1296700/
- RGBではなくHSBカラーモードを使用する、HSB = Hue(色相)、Saturation(彩度)、Brightness(明度)
code_04 : HSBのランダム
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
//カラーをHSBモードに
colorMode(HSB, 360, 100, 100, 100);
//最初に背景を1度だけ塗る
background(0);
}
function draw() {
//ランダムな座標と大きさを生成
let x = random(width);
let y = random(height);
let diameter = random(width/100, width/10);
//円を描く
noStroke();
//HSBでランダムな色彩を生成
fill(random(100, 200), 80, 90, 70);
ellipse(x, y, diameter, diameter);
}
https://openprocessing.org/sketch/1296707/
物体の数を制限する : 繰り返しと配列の操作
- 現状では永遠に円が増殖してしまう
- 一定の数で制限することはできないだろうか?
- 繰り返し (for文) と配列を利用する
- x, y, diameter をそれぞれ配列(Array)に
- 配列の末尾に要素を加える
- 配列.push(要素);
- 指定した数を超えたらリストの先頭の要素を消去する
- 配列.shift();
code_05 : 繰り返しと配列の操作で最大数を制限
//空の配列生成
let x = [];
let y = [];
let diameter = [];
let hue = [];
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(30);
//カラーをHSBモードに
colorMode(HSB, 360, 100, 100, 100);
}
function draw() {
background(0);
//ランダムな値をリストに追加
x.push(random(width));
y.push(random(height));
diameter.push(random(width/100, width/10));
hue.push(random(100, 200));
//最大数を100に限定
if (x.length > 100) {
//先頭の要素を消去
x.shift();
y.shift();
diameter.shift();
hue.shift();
}
//リストの数だけ繰り返し
for (let i = 0; i < x.length; i++) {
//円を描く
noStroke();
//HSBでランダムな色彩を生成
fill(hue[i], 80, 90, 50);
circle(x[i], y[i], diameter[i]);
}
}
https://openprocessing.org/sketch/1296714/
個別のオブジェクトを動かす
- 円をクラス化すれば、個別にアニメーションさせることも簡単にできる
- 例えばゆっくりと膨張しながら薄くなっていく円
code_07 : 膨張しながらフェードアウトする円
let dots = [];
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
//カラーをHSBモードに
colorMode(HSB, 360, 100, 100, 100);
}
function draw() {
background(0);
//1秒に1回追加
if (frameCount % 60 == 0) {
//Dotをリストに追加
dots.push(new Dot());
}
//リストの数だけ繰り返し
for (let i = 0; i < dots.length; i++) {
//もし透明度が0より小さかったら消去
if (dots[i].alpha < 0) {
dots.splice(i, 1);
}
//円を描く
dots[i].draw();
}
}
//拡がる円のクラス
class Dot {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = 0;
this.hue = random(width/100, width/10);
this.alpha = 100;
this.speed = random(0.2, 0.8);
this.alphaSpeed = random(0.05, 0.1);
}
draw() {
noStroke();
fill(this.hue, 80, 90, this.alpha);
circle(this.x, this.y, this.diameter);
this.diameter += this.speed;
this.alpha -= this.alphaSpeed;
}
}
https://openprocessing.org/sketch/1296775/
応用1 : 色相をシフトさせる
- それぞれの円の色相を少しずつ変化させてみる
code_08 : 色相のシフト
let dots = [];
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
//カラーをHSBモードに
colorMode(HSB, 360, 100, 100, 100);
}
function draw() {
background(0);
//1秒に1回追加
if (frameCount % 60 == 0) {
//Dotをリストに追加
dots.push(new Dot());
}
//リストの数だけ繰り返し
for (let i = 0; i < dots.length; i++) {
//もし透明度が0より小さかったら消去
if (dots[i].alpha < 0) {
dots.splice(i, 1);
}
//円を描く
dots[i].draw();
}
}
//拡がる円のクラス
class Dot {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = 0;
this.hue = (random(100, 200) + (frameCount / 10.0)) % 360;
this.alpha = 100;
this.speed = random(0.2, 0.8);
this.alphaSpeed = random(0.05, 0.1);
}
draw() {
noStroke();
fill(this.hue, 80, 90, this.alpha);
circle(this.x, this.y, this.diameter);
this.diameter += this.speed;
this.alpha -= this.alphaSpeed;
}
}
https://openprocessing.org/sketch/1296811/
応用2 形を変化させる
code_09 : 円から矩形に
let dots = [];
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
//カラーをHSBモードに
colorMode(HSB, 360, 100, 100, 100);
}
function draw() {
background(0);
//1秒に1回追加
if (frameCount % 60 == 0) {
//Dotをリストに追加
dots.push(new Dot());
}
//リストの数だけ繰り返し
for (let i = 0; i < dots.length; i++) {
//もし透明度が0より小さかったら消去
if (dots[i].alpha < 0) {
dots.splice(i, 1);
}
//円を描く
dots[i].draw();
}
}
//拡がる円のクラス
class Dot {
constructor() {
this.x = random(width);
this.y = random(height);
this.diameter = 0;
this.hue = (random(100, 200) + (frameCount / 10.0)) % 360;
this.alpha = 100;
this.speed = random(0.2, 0.8);
this.alphaSpeed = random(0.05, 0.1);
}
draw() {
noStroke();
fill(this.hue, 80, 90, this.alpha);
rectMode(CENTER);
rect(this.x, this.y, this.diameter);
this.diameter += this.speed;
this.alpha -= this.alphaSpeed;
}
}
https://openprocessing.org/sketch/1296818/
本日はここまで!!