noise() 関数を用いてドット絵風のアニメーション
2次元ノイズで遊んでいたら思いがけずドット絵風のアニメーションが出来たのでご紹介。💁♀️
この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨
ノイズの使い方のコツ
Processing/p5.js の noise() 関数は「パーリン・ノイズ」を生成してくれる楽しい関数。
与えるパラメータの個数によって 1次元から 3次元のノイズを生成できます。
これはノイズ値を角度に変換して 2次元ノイズを図に表したもの。
x軸方向を見ても y軸方向を見ても角度が少しずつ滑らかに変化しているのがわかりますね。
名著「ジェネラティブ・アート - Processing による実践ガイド」でもノイズの章で同じような図が出てきます。
これを noise() ではなく random() にしてみるとこうなりました。
全くバラバラですね。
noise() のパラメータ値の変化量を大きくするとこう。
random() ほどじゃないにせよバラバラで滑らかな変化が見られなくなりました。
このように noise() を使う時はパラメータ値の変化量をどれぐらいにするかがキモになります。
2次元ノイズを用いた作例
2次元ノイズといえばベクター・フィールド(ノイズ・フィールドとも)も面白いです。
例えばこんなのが作れます。
Processing のコード例はこちら。
アニメーションも
先程の 2次元ノイズの静止画をアニメーションにするには、時間という次元を加えた 3次元ノイズを使うと簡単です。
// 静止画の場合
let theta = noise(x, y);
// アニメーションの場合
let theta = noise(x, y, t);
色付けするとこういうものも作れます。
Processing のコード例
ドット絵風に
ここまでの作例は線描ではなく、計算結果の座標上に小さな点を描画していくことで作成していました。
この点を大きくして、配置を格子状にすればドット絵風になるのでは?
ということで作ってみたのがこちらです。
作例のコードは p5.js です。
const w = 640;
const h = 640;
const plotMax = 2; // 2個ずつ点を描画
const xyStep = 6;
const noiseStep = 0.005;
const timeStep = 0.02;
function setup() {
createCanvas(w, h);
colorMode(HSB, 360, 100, 100, 100);
frameRate(15);
}
function draw() {
background(0, 0, 90, 100);
translate(w * 0.5, h * 0.5);
noStroke();
fill(250, 90, 30, 100);
for (let ox = -w * 0.5; ox <= w * 0.5; ox += xyStep * plotMax) {
for (let oy = -h * 0.5; oy <= h * 0.5; oy += xyStep * plotMax) {
let x = ox;
let y = oy;
for (let plotCnt = 0; plotCnt < plotMax; plotCnt++) {
// 角度を 8方向に限定
let theta = floor(8 * noise(w + x * noiseStep, h + y * noiseStep, frameCount * timeStep)) * TWO_PI / 8;
x += xyStep * cos(theta);
y += xyStep * sin(theta);
ellipse(x, y, xyStep, xyStep);
}
}
}
// 円形に切り抜いたように
fill(0, 0, 0, 0);
stroke(0, 0, 90, 100);
strokeWeight(200);
ellipse(0, 0, w + 100, h + 100);
}
※正確には格子状になってません
ポイントはノイズを使った角度の計算式。
// 角度を 8方向に限定
let theta = floor(8 * noise(w + x * noiseStep, h + y * noiseStep, frameCount * timeStep)) * TWO_PI / 8;
上下斜めの 8方向への変化に限定することでカクカク感を出し、ドット絵風味を醸し出しています。
ここで 8方向に限定しつつ変化を激しくするとこんな感じ。
let theta = floor(50 * noise(w + x * noiseStep, h + y * noiseStep, frameCount * timeStep)) * TWO_PI / 8;
パラメータをいろいろ弄ると他にも面白いものができそうです。
お楽しみあれ!😀
📘 他にも note でいろんな記事書いています。
🎨 こちらのブログはソースコード付きの作品集になってます。
🐦 Twitter でもいろいろ面白いの上げてるのでぜひフォローしてください。
この先には何もありません。もしこの記事がお気に召しましたら投げ銭お願いします。😉✨
ここから先は
¥ 100
この記事が面白かったらサポートしていただけませんか? ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕