---
title: クリエイティブコーディングのはなし
tags:  #数学 #日曜数学会  
author: [USAMI Kosuke](https://convert.docswell.com/user/usami-k)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8JDDMPK4JG.jpg?width=480
description: クリエイティブコーディングのはなし　＠第28回日曜数学会 - ニコニコ動画 https://www.nicovideo.jp/watch/sm43015808  第28回日曜数学会 https://live.nicovideo.jp/watch/lv343166006  クリエイティブコーディングのはなしをしました #日曜数学会 - usami-k 数学日記 https://usami-k.hatenadiary.jp/entry/2023/10/29/232231  （スライドのソース） https://github.com/usami-k/mathematics/blob/master/2023/creative-coding/creative-coding.md
published: October 29, 23
canonical: https://convert.docswell.com/s/usami-k/5RXMW9-creative-coding
---
# Page. 1

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

クリエイティブコーディングのはなし
宇佐見公輔
第28回日曜数学会（2023年10月29日）


# Page. 2

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

自己紹介
・宇佐見公輔（うさみこうすけ）
・職業：プログラマ
・趣味：数学
近況
・ソリトンとリー代数（第26回日曜数学会／2月）
・Onsager代数とその周辺（第4回すうがく徒のつどい／9月）
クリエイティブコーディングのはなし / 宇佐見公輔
2


# Page. 3

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

クリエイティブコーディングとは
・何らかの表現を創造することを目的としたプログラミングのこと
・何らかの機能を実現することを目的としたものではない
・ビジュアルアートやサウンドアートなどの作品を制作する活動が行われている
・アルゴリズムや数学的なルールに基づいて作品を生成するジェネラティブアート
クリエイティブコーディングのはなし / 宇佐見公輔
3


# Page. 4

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

ビジュアライズのツール
次のものが優れたツールとして存在している
・Desmos
・GeoGebra
これらはプログラミング言語を必要とせず、機能も強力
プログラミング好きなら、クリエイティブコーディングという選択肢もある
クリエイティブコーディングのはなし / 宇佐見公輔
4


# Page. 5

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

クリエイティブコーディング向けツールキット
・Processing（Java or Python）
・p5.js（JavaScript）
・openFrameworks（C++）
これらは情報も多めで学習コストも低い。
クリエイティブコーディングのはなし / 宇佐見公輔
5


# Page. 6

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

Nannou
Rust言語のクリエイティブコーディング向けツールキット
・Rust言語はモダンなプログラミング言語のひとつ
・開発環境が整備されているが、学習コストはやや高い
個人的な好みでこれを使っている。
（本業がプログラマなのが影響している）
クリエイティブコーディングのはなし / 宇佐見公輔
6


# Page. 7

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

座標系の違い
クリエイティブコーディングのはなし / 宇佐見公輔
7


# Page. 8

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

座標系の違い
コンピューター画面の座標系：
・画面に横書きの文章がある場合、左から右、
上から下に向かっていくのが自然。
数学の座標系：
・地面にXY平面があって自分が原点に立って
いる場合、Y軸が自分から前に向かっていくの
が自然。
※ Processingやp5.jsは左の座標系を採用。
Nannouは右の座標系を採用。
クリエイティブコーディングのはなし / 宇佐見公輔
8


# Page. 9

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

例1
ランダムウォーク
・一歩の長さは一定
・進む方向はランダム
・方向で色を変える
・端に着いたら反射する
GitHub / Threads
クリエイティブコーディングのはなし / 宇佐見公輔
9


# Page. 10

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

例1のコード抜粋
前回の終点を始点にする
//
model.start = model.end;
一歩進んだ先の点を求める
//
let angle = model.rng.gen_range(0.0..2.0 * PI);
let vec = vec2(angle.cos(), angle.sin()) * model.step_length;
model.end = model.start + vec;
角度から色相環を使って色を決める
//
model.fg_color = hsl(angle as f32 / (2.0 * PI), 0.5, 0.5);
draw.line()
.color(model.fg_color)
.start(model.start)
.end(model.end);
クリエイティブコーディングのはなし / 宇佐見公輔
10


# Page. 11

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

例2
格子から模様をつくる
・
の格子分割
・各マスに斜線を描く
・一定時間経過で、ランダ
ムに一箇所の向きを変える
GitHub / Threads
クリエイティブコーディングのはなし / 宇佐見公輔
11


# Page. 12

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

例2のコード抜粋
model.row = model.rng.gen_range(0..10);
model.col = model.rng.gen_range(0..10);
model.grid[model.row][model.col] += 1;
for row in 0..10 {
for col in 0..10 {
let direction = model.grid[row][col] % 2;
let left = -200.0 + row as f32 * 40.0;
let bottom = -200.0 + col as f32 * 40.0;
draw.line()
.start(pt2(left, bottom + 40.0 - 40.0 * direction as f32))
.end(pt2(left + 40.0, bottom + 40.0 * direction as f32))
.color(STEELBLUE)
.weight(10.0)
.caps(LineCap::Round);
}
}
クリエイティブコーディングのはなし / 宇佐見公輔
12


# Page. 13

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

例3
ユークリッドの互除法
と の最大公約数
GitHub / Threads
クリエイティブコーディングのはなし / 宇佐見公輔
13


# Page. 14

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

例3のアルゴリズム
一定時間経過のたびに、次の処理を行う。
・ と のどちらかが なら何もしない。
・
なら、一辺 の正方形を描いて から を引く。
・
なら、一辺 の正方形を描いて から を引く。
一定時間ごとに1ステップ進めることでアニメーションとして見せる。
クリエイティブコーディングのはなし / 宇佐見公輔
14


# Page. 15

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

参考文献
クリエイティブコーディングのはなし / 宇佐見公輔
15


