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

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

こちら↓

プログラミング｜yusakuhamajima｜note

カバーのサイズは

カバーのサイズは、ヘルプページにありました。
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にもアップしてみました↓

cc-012 - OpenProcessing

Live Server

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

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

Live Server - Visual Studio Marketplace

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

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