見出し画像

白の上に白で描く？

deconbatch

白の背景に白で描いても見えませんよね？黒の背景に白で描いたら見えますね？
今回はそんな当たり前のことを使ったちょっとしたトリックを紹介します。

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

画像1

白背景に白で描く？

まずは、p5.js のコードで白の背景に黒い四角形を描いてみます。

const w = 640;
const h = 480;
function setup() {
	createCanvas(w, h);
	colorMode(HSB, 360, 100, 100, 100);
	rectMode(CENTER);
	noLoop();
}
function draw() {
	// 白い背景
	background(0, 0, 100, 100);
	// 座標軸の原点をキャンバス中央へ
	translate(w * 0.5, h * 0.5);
	// 黒い線で四角形
	noFill();
	stroke(0, 0, 0, 100);
	strokeWeight(25);
	rotate(PI * 0.25);
	rect(0, 0, w * 0.25, w * 0.25);
}

画像5

格好つけて斜めにしました。🙂

さて、この四角形を白で描いたらどうなるでしょう？

	stroke(0, 0, 100, 100);
	strokeWeight(25);
	rotate(PI * 0.25);
	rect(0, 0, w * 0.25, w * 0.25);

画像6

（マレーヴィチ！）

当然見えませんよね。もしかしたら何も描いてないのかも…？
ではキャンバスの下半分を黒で塗って、それから四角形を描いてみましょう。

	// 座標軸の原点をキャンバス中央へ
	translate(w * 0.5, h * 0.5);
	// 下半分を黒で塗る
	fill(0, 0, 0, 100);
	noStroke();
	rect(0, h * 0.5, w, h);

画像7

白い四角形を描いているのに、なんだか黒い三角形を描いているようにも見えますね。
複数描くとちょっとカッコいいかも！

	for (let i = 0.25; i <= 1.0; i += 0.25) {
		//	rect(0, 0, w * 0.25, w * 0.25);
		rect(0, 0, w * i, w * i);
	}

画像8


画像2

ちょっとしたトリック

この「背景によって見えたり見えなかったり」を使ってこんなアニメーションを描いてみました。

p5.js のサンプルコードはこちら。

const w = 640;
const h = 480;
const frmRate = 15;
const interval = 30;
function setup() {
	createCanvas(w, h);
	colorMode(HSB, 360, 100, 100, 100);
	frameRate(frmRate);
}
function draw() {
	background(0, 0, 50, 100);
	translate(0, h * 0.5);
	noFill();
	let lineCnt = 0;
	let time = (frameCount % interval) * 0.05;
	for (let lines = 0.0; lines < 1.0; lines += 0.05) {
		beginShape();
		for (let theta = 0.0; theta < 1.0; theta += 0.1) {
			let x = w * theta;
			let y = h * theta * 0.5 * sin(TWO_PI * (theta + lines) * time);
			// 白と黒の線を交互に描く
			if (lineCnt % 2 == 0) {
				stroke(0, 0, 100, 100);
				curveVertex(x, y);
			} else {
				stroke(0, 0, 0, 100);
				curveVertex(w - x, -y);
			}
		}
		endShape();
		lineCnt++;
	}
}

左右で異なる曲線を描いているように見えますが、白と黒でそれぞれの曲線を単純にキャンバス全体に描いているだけです。
背景に色をつけてみるとよくわかりますね。


これを使った Processing の作例がこちらです。

画像9

一見マス目毎に描いているように見えて、実は白と黒で 6本ずつカーブを描いているだけという作例です。

画像3

blendMode() のブレンド

blendMode() を使っても似たようなことができます。
先程の白背景と黒背景の上に青色で線を描くとこんな感じ。

	// 普通に描画
	stroke(220, 80, 80, 100);
	strokeWeight(15);
	for (let i = 1; i < 10; i++) {
		rect(0, 0, w * i * 0.1, w * i * 0.1, 50);
	}

画像10

これを blendMode(ADD); で描くと…

	// 加算合成で描画
	blendMode(ADD);
	stroke(220, 80, 80, 100);

画像11

色が加算されるので白背景の上に何色で描いても白のままになります。


これを使って、 blendMode() を交互に変えてみるとこうなります。

	// blendMode を交互に変える
	stroke(220, 80, 80, 100);
	strokeWeight(15);
	for (let i = 1; i < 10; i++) {
		if (i % 2 == 0.0) {
			blendMode(ADD);
		} else {
			blendMode(BLEND);
		}
		rect(0, 0, w * i * 0.1, w * i * 0.1, 50);
	}

画像12


こんな装飾も blendMode() を変えながら単に四角形を描画することで比較的簡単に描くことができます。

画像13


この Processing 作例も 2つの blendMode() を使ったものです。


ちょっとしたトリックですが、単純な仕掛けで「ん！？」というものを作れたりするのでなかなか楽しいですよ。😉


画像4

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


🎨 こちらのブログはソースコード付きの作品集。


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


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

ここから先は

0字

¥ 100

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