---
title: Pythonで「俺」を表現する Python + WebAssembly + Canvasでクリエイティブコーディング
tags: 
author: [Tatsuya Nibuno](https://image.docswell.com/user/nibuno)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PEXQL61VJX.jpg?width=480
description: 俺の勉強会 #6 https://ore-no-benkyoukai.connpass.com/event/394501/ の発表資料です。
published: June 21, 26
canonical: https://image.docswell.com/s/nibuno/ZX26L4-2026-06-21-115036
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PEXQL61VJX.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/3EK9L125ED.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/L73W3Q4175.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/87DK49QKJG.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJPKMZL3E8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2EVV9WQNEQ.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/57GLZDW5EL.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EQYL13LJP.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/KJ4WDR1571.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE1YZQG27G.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GEWG9MK2J2.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/47ZL9QZ4J3.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/YJ6WK6ZGJV.jpg)

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