見出し画像

無茶苦茶な数式でも美しい？

deconbatch

テキトーに書いた数式で図を描いてみたら、工夫次第で意外とイケたというお話しです。

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

画像1

数式のグラフって美しい

数式のグラフって美しいですよね。

p5.js でサインカーブ。

画像5

const w = 640;
const h = 480;

function setup() {
	createCanvas(w, h);
	colorMode(HSB, 360, 100, 100, 100);
	noLoop();
}

function draw() {

	background(0, 0, 90, 100);
	noFill();
	stroke(0, 0, 0, 100);
	strokeWeight(1);

	translate(0, h * 0.5);
	beginShape();
	for (let radians = 0; radians < TWO_PI; radians += PI * 0.01) {
		let ratio = map(radians, 0, TWO_PI, 0.0, 1.0);

		// ご存知サインカーブ
		let fX = w * ratio;
		let fY = h * 0.5 * sin(radians);
		vertex(fX, fY);

	}
	endShape();

}

２次関数

画像6

	translate(w * 0.5, 0);
	beginShape();
	for (let ratio = -1.0; ratio < 1.0; ratio += 0.01) {

		// 2次関数
		let fX = w * ratio * 0.5;
		let fY = h * pow(ratio, 2);
		vertex(fX, fY);

	}
	endShape();

シグモイド関数

画像7

		// シグモイド関数
		let fX = w * ratio;
		let fY = h * 1.0 / (1.0 + exp(-ratio * 15.0));

テキトーに書いてみた数式をグラフにするのも面白いです。

画像8

	translate(0, h * 0.5);
	beginShape();
	for (let radians = 0; radians < TWO_PI; radians += PI * 0.01) {
		let ratio = map(radians, 0, TWO_PI, 0.0, 1.0);

		// 変なカーブ
		let fX = w * ratio;
		let fY = h * 0.5 * cos(PI * (ratio + sin(radians)));
		vertex(fX, fY);

	}
	endShape();


画像2

極座標を使ってみる

さらにこれを極座標扱いにしても面白いんです。

極座標は半径と角度で座標を表したもので、円を描くこの式見覚えあるでしょう。

		// こうすれば円
		let fX = h * 0.5 * cos(radians);
		let fY = h * 0.5 * sin(radians);

画像9

この円を描く数式では h * 0.5 が半径、radians が角度となっています。

これを使って、さっきの変なカーブを描くときに導き出した x を半径、 y を角度に見立てるというわけのわからないことをしてみます。

	translate(w * 0.5, h * 0.5);
	beginShape();
	for (let radians = 0; radians < TWO_PI; radians += PI * 0.01) {
		let ratio = map(radians, 0, TWO_PI, 0.0, 1.0);

		// 変なカーブ
		let fX = w * ratio;
		let fY = h * 0.5 * cos(PI * (ratio + sin(radians)));

		// 極座標に！
		let pX = fX * cos(fY);
		let pY = fX * sin(fY);
		vertex(pX, pY);

	}
	endShape();

画像10

これだとちょっとキツすぎるので、もうちょっと緩やかに。

		let fX = w * 0.25 * ratio;
		let fY = h * 0.01 * cos(PI * (ratio + sin(radians)));

画像11

さっきの円を描く式で同じようにやってみると…

		// こうすれば円
		let fX = h * 0.5 * cos(radians);
		let fY = h * 0.5 * sin(radians);

		// それを極座標に
		let pX = fX * cos(fY * 0.03);
		let pY = fX * sin(fY * 0.02);
		vertex(pX, pY);

画像12

ね？なかなか面白いでしょう？

余談：円を描画するコードを書き換えるときに間違って vertex(fX, fY); を消し忘れたのがこちら。間違った方が面白いというのも面白い！😆

画像13


さて、この極座標に変換するという考えで作った Processing 作例の一つがこちらです。


画像3

一度思いついたアイディアは使い倒す！

一度思いついた方法は出し殻になるまで絞り尽くします。

例えばこちらは直行座標から極座標へのモーフィングをアニメーションにしたもの。

※モーフィングの考え方はこちら


y 座標だけでなく、x 座標も別のテキトー数式で計算してみたのがこちら。

		// x, y どちらもテキトーな関数
		let fX = w * 0.5 * cos(ratio * radians) * sin(ratio * ratio * TWO_PI);
		let fY = PI * cos(PI * (ratio + sin(radians)));

		// それを極座標に
		let pX = fX * cos(fY); // * 0.03);
		let pY = fX * sin(fY); // * 0.02);
		vertex(pX, pY);

画像14

角度をちょっとずつ変えてアニメーションに。


x 座標と y 座標を別々の数式で計算したものを、直行座標から極座標へモーフィングさせて、その様子を一枚の静止画として描画した作例

数式を複数用意することで、その組み合わせでいろんな形のバリエーションが楽しめます。

画像15

画像16

画像17

さらに z座標もテキトーな数式にして 3D の造形も面白そう。式を漸化式にしても面白いかも。
今回描画は vertex() で線を引く形でしたが、描画の方法もいろいろ工夫の余地ありです。

画像4

これってクリエイティブ？

こんな感じで何も考えずにテキトーに書いた数式を基に図を描いてみましたが、ところでこれってクリエイティブと言えるのでしょうか？

私は最初のきっかけ、とっかかりは何でもいいと思っています。それをどう発展させていくかのところにもクリエイティビティは十分に発揮されるものだと思いますので。

それにこのコードに『全く意味の無い数式からいかにも意味有りげな図が描かれる様を見ていると、人類が長年意味を見出そうとしてきた人生というものも実は無意味なものから織り上げられた単なる”形”に過ぎないのではないかという疑問が湧いてくる』なんて解説を付けたら、数式が無意味であること自体に意味が出てくることになりません？

これが私のクリエイティビティ！🤣


画像18

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


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


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

ここでこの記事はおしまいです。もしこの記事がお気に召しましたら投げ銭お願いします。😉✨

ここから先は

0字

¥ 100

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