見出し画像

noise() 関数を用いてドット絵風のアニメーション

deconbatch

2次元ノイズで遊んでいたら思いがけずドット絵風のアニメーションが出来たのでご紹介。💁‍♀️

この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨

画像1

ノイズの使い方のコツ

Processing/p5.js の noise() 関数は「パーリン・ノイズ」を生成してくれる楽しい関数。
与えるパラメータの個数によって 1次元から 3次元のノイズを生成できます。

これはノイズ値を角度に変換して 2次元ノイズを図に表したもの。
x軸方向を見ても y軸方向を見ても角度が少しずつ滑らかに変化しているのがわかりますね。

画像5

名著「ジェネラティブ・アート - Processing による実践ガイド」でもノイズの章で同じような図が出てきます。

これを noise() ではなく random() にしてみるとこうなりました。
全くバラバラですね。

画像6

noise() のパラメータ値の変化量を大きくするとこう。

画像7

random() ほどじゃないにせよバラバラで滑らかな変化が見られなくなりました。

このように noise() を使う時はパラメータ値の変化量をどれぐらいにするかがキモになります。

画像2

2次元ノイズを用いた作例

2次元ノイズといえばベクター・フィールド（ノイズ・フィールドとも）も面白いです。

例えばこんなのが作れます。

Processing のコード例はこちら。


画像3

アニメーションも

先程の 2次元ノイズの静止画をアニメーションにするには、時間という次元を加えた 3次元ノイズを使うと簡単です。

// 静止画の場合
let theta = noise(x, y);
// アニメーションの場合
let theta = noise(x, y, t);

色付けするとこういうものも作れます。

Processing のコード例


画像4

ドット絵風に

ここまでの作例は線描ではなく、計算結果の座標上に小さな点を描画していくことで作成していました。
この点を大きくして、配置を格子状にすればドット絵風になるのでは？

ということで作ってみたのがこちらです。

作例のコードは 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;

パラメータをいろいろ弄ると他にも面白いものができそうです。

お楽しみあれ！😀


画像8

📘 他にも note でいろんな記事書いています。

🎨 こちらのブログはソースコード付きの作品集になってます。

🐦 Twitter でもいろいろ面白いの上げてるのでぜひフォローしてください。


この先には何もありません。もしこの記事がお気に召しましたら投げ銭お願いします。😉✨

ここから先は

0字

¥ 100

この記事が面白かったらサポートしていただけませんか？ ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕