Pythonで「俺」を表現する Python + WebAssembly + Canvasでクリエイティブコーディング

Pythonで「俺」を表現する Python + WebAssembly + Canvasでクリエイティブコーディング 俺の勉強会 #6 nibu 1

Pythonで「俺」を表現する？？？ デモをご覧ください 2

デモで見てもらったもの 最初は一つの「俺」から始まる クリックで「俺」粒子が増える 「俺」粒子が集まって「俺」になる 周囲に「俺」オーラが漂う カーソルも「俺」 3

きっかけ 関ケ原Ruby会議01でクリエイティブコーディングの話を聞いた 気づいたらRubyで100作品 ー クリエイティブコーディングが生活 の一部になるまで Rubyを使って書いたとのこと Pythonでも同じようにできるだろう、やってみよう 4

• https://speakerdeck.com/chobishiba/100-ruby-sketches-later-how-creative-coding-became-part-of-my-life

PythonでCanvasを動かす const pyodide = await loadPyodide(); const code = await fetch("./src/sketch.py").then(r => r.text()); await pyodide.runPythonAsync(code); Pyodide でブラウザ上の Python を起動 Python から Canvas API を呼んで描画 WebAssembly は Pyodide の実行基盤 5

全体の流れ 1. 見えない Canvas に大きな「俺」を描く 2. 黒いピクセルを座標（目的地）にする 3. 俺粒子を目的地へ近づける 4. 毎フレーム描画させる 6

1. 見えないCanvasに「俺」を描く mask_ctx.fillStyle = "black" mask_ctx.font = glyph_font mask_ctx.fillText( "俺", W / 2, H / 2, ) 俺 mask_canvas（見えないCanvas） 7

2. 黒いピクセルを座標（目的地）にする image = mask_ctx.getImageData( 0, 0, W, H ) data = image.data i = (y * W + x) * 4 if data[i] < 90: targets.append((x, y)) 黒いピクセル → (12, 35) (13, 35) (14, 35) ... (x, y) 8

3. 俺粒子を目的地へ動かす # 目的地との差分 = 引っ張る方向 dx = p["tx"] - p["x"] dy = p["ty"] - p["y"] 目的地 (tx, ty) # 目的地へ少しずつ加速 p["vx"] += dx * 0.014 p["vy"] += dy * 0.014 # 減衰させて、ふわっと止める p["vx"] *= 0.85 p["vy"] *= 0.85 俺 現在位置 (x, y) 加速 + 減衰 p["x"] += p["vx"] p["y"] += p["vy"] 9

4. 毎フレーム描画させる 〜俺粒子〜 ctx.fillText("俺", p["x"], p["y"]) 粒子は丸ではなく「俺」 1つ1つの「俺」が移動する 集まると大きな「俺」になる 10

毎フレーム描画させる 〜俺オーラ〜 ctx.fillText("俺", p["x"] + ox, p["y"] + oy) オーラも「俺」で描いている カーソルに少し反応する 11

まとめ 〜全部「俺」にするために〜 大きな「俺」をピクセルとして読む ピクセルの座標へ俺粒子を動かす 粒子もオーラもカーソルも「俺」で描く 文字を素材にして、動く作品にした Python でもクリエイティブコーディングできる！ 12

自己紹介 nibu x: @YumihikiDev 株式会社ビープラウド / Software Engineer ボルダリング / サイクリング・ポタリング カレー / お酒（ビール・日本酒） 13

• https://x.com/YumihikiDev