【JavaScript/エフェクト】窓拭き

私が初めてプログラミングに出会ったのは2019年。
p5.jsというライブラリを用いた学習教材に触れたのが最初でした。

公式サイトは日本語対応ではありませんが「非常に詳細に解説した」
日本語書籍「p5.jsプログラミングガイド」があります。
(公式サイトは中国語、韓国語があり、向こうでは比較的主流なのかも知れません。)

ライブラリは手順を簡略化する為のもので、
JavaScript自体の仕組みを知っておいた方が、より理解が深まるのですが、
その書籍では、JavaScriptに触れた事がない初心者でも理解する事が出来ます。

p5.jsはグラフィック描画に特化したライブラリで、
何となくプログラミングを始めたい人は、具体的に何をしたいか、
用途を調べてみると良いでしょう。

以下は、ネット上で拾ったコードを改変したものです。

作ったもの

HTML

<div class="picture"></div>

CSS

.cn-j-j-19 .picture{
	height: 400px;
	width: 600px;
	background-size: cover;
	background-position: center center;
	background-image: url("https://mf-ken.com/note/wp-content/uploads/2023/12/28412123_m.jpg");
}

JavaScript(p5.js)

function setup() {
    const picture = select(".picture");
    let canvas = createCanvas(600, 400);
    /* width,height */
    canvas.parent(picture);
	
	noStroke();
	background(0, 255, 255);
    /* reg,green,blue */
	erase();
}

function draw() {
	if (mouseIsPressed) {
		circle(mouseX, mouseY,60);
        /* X位置,Y位置,直径 */
	}
}