見出し画像

p5.jsでマガジンのカバーを作った

yusaku

マガジンのカバー（ヘッダー？）に何もないと寂しいので作りました。

こちら↓

カバーのサイズは

カバーのサイズは、ヘルプページにありました。
1600×568pxのようです。

ヘルプページ↓

6月からサイズが変わるようです↓

p5.jsで作りました

コードを見られるのは恥ずかしいけど、その恥ずかしさで「次はちゃんとしたコードを書けるようにしよう！」となるんじゃないかと思ったでの、載せます。初心者だし、恥ずかしがるのも自意識過剰だし。

let w;

function setup() {
	createCanvas(windowWidth, windowHeight, P2D);

	colorMode(HSB, 360, 100, 100, 100);
	background(204, 77, 100, 100);

	// 泡
	noStroke();
	for (let i = 0; i < 1000; i++) {
		w = random(5, 60);
		fill(0, 0, 100, random(5, 25));
		ellipse(random(0, width), random(0, height), w, w);
	}
}

難しいことは何もないです。
コードに知性がないので、ちょっと恥ずかしいです。。

OpenProcessingにもアップしてみました↓

Live Server

しかし、初心者の方はフォントを使ったらブラウザで表示されなくるので慌てるかも。私は慌てました。

見れなくなった場合、もしVisual Studio Codeを使っているのなら、機能拡張に「Live Server」を入れましょう。

Live Serverをインストールすると、ステータスバー（画面の一番下）に「Go Live」と出るので、クリックするとブラウザが立ち上がって見れるようになります。

サウンドファイルをリンクした時も同じように「Live Server」で解決できます。

いいなと思ったら応援しよう！