11. ProcessingとP5.js
増井俊之
慶應義塾大学 環境情報学部
masui@pitecan.com
2021年12月23日
https://www.youtube.com/watch?v=0rgw_JKAxMM
本日の話題
簡単なプログラミングで情報視覚化
Processing
P5.js
Processing
https://processing.org/ https://gyazo.com/92902dcd7193e28f8cebfaf3c542108b https://gyazo.com/09b4ff8b27e8550514862e6a700cdbd6
Ben Fryの開発したお手軽ビジュアリゼーション言語
Javaの面倒なところをなくす
すぐに開発はじめられるようにする
HTML記法採用
#ff1234
簡略記述
setup(), draw()
Javaの面倒なところ
前提知識が多量
システムの用意が大変
エディタ, コンパイラ, ライブラリ, ...
code:hello.java
public class HelloWorld {
public static void main(String[] args){
System.out.println("Hello World!!");
}
}
public? class? static? void? main? String? System? println?
Cの場合
code:hello.c
main(){
printf("Hello, World!\n");
}
main? printf?
Ruby
code:hello.rb
puts "Hello, World"
puts?
JavaScript
code:hello.js
console.log("Hello, World");
console? log?
Processing
code:hello.pde
line(0,0,100,100);
Ben Fry
https://Gyazo.com/4b14e7234b823d503091bf4f158af271.png
https://gyazo.com/9c0cb783d3d06476640f117d5e361941
ビジュアライジング・データ
https://www.amazon.co.jp/dp/4873113784 https://gyazo.com/e790872de8e005ab88db95109e885c76
Built with Processing
田中孝太郎 , 前川峻志
http://gyazo.com/7b7a39436c6e83ac61d4f5d3f302a990.png
Let's start Processing
by Casey Reas, Ben Fry
http://gyazo.com/1057a6aae7a755267cc43c4141eb6787.png
Generative Art: A Practical Guide Using Processing
https://www.amazon.co.jp/dp/4861008565 http://gyazo.com/8f12608e7f7b529520c07acc51fdb4f3.png https://gyazo.com/0e91dfb13f9dbf9c403cbc410ff96c04 https://www.amazon.co.jp/dp/1935182625
Processing: A Programming Handbook for Visual Designers and Artists
とても分厚い
https://www.amazon.co.jp/dp/4861009502 http://gyazo.com/dc250960bfa3d5cc606a754b74c6c614.png https://gyazo.com/69cb44cc8355c120dfa19d2cdb058cf0 https://www.amazon.co.jp/dp/026202828X
Openprocessing.org
Processingのコードとアイデアを共有
https://gyazo.com/b6d9ab4384d962de6677f5cb9960e9aa
Processingって知ってますか？
Note記事 by 山辺真幸
山辺真幸氏の講義 (2017)
https://www.openprocessing.org/sketch/423314 https://gyazo.com/0f86aad2c6be7650ad8a4ceea95b5d7f
山辺真幸氏 @ Facebook
山辺氏によるCovid視覚化
https://www.masakiyamabe.com/portfolio/covid-19-space-time-visualization-of-infection-risks-in-japan/
https://gyazo.com/885e136789367652f3e3824cd0947f1f
ゲノム系統樹の3次元可視化
https://vimeo.com/572948294
伊藤ガビン氏の動画
https://gyazo.com/4858d700a9950ed6ac2ae630ba67ab91 https://www.youtube.com/watch?v=ZwGpF9hOdSQ
伊藤ガビン、林洋介、宮本拓馬
Processingの入手
processing.org からダウンロード
Windows, Mac, Linux, Chromebookで動く
線の描画
line(0,0,100,100);
Playボタンで実行
$ (0,0) は左上
http://gyazo.com/64c3253194bc9688b5dfe08b49ddc756.png
(0, 0)の座標
何故か左上のシステムが多い
1行目は画面のトップだというのが普通だから?
色の利用
描画の前に色を指定
fill(#ffff00); など
文字の描画
フォント設定
Tools⇒CreateFont
loadFont(); textFont(); text();
http://gyazo.com/9cdffe98a74776c405d3670551e6992e.png
繰り返し処理
for statement, if statement
...
Same syntax as C, Java
setup() と draw()
setup() プログラム実行前に一度だけ呼ばれる
draw() 1フレームごとに呼ばれる
http://gyazo.com/27d7717830a6fb80f910b4835aa781d7.png
フレーム
動画表示のために描かれる静止画
テレビの場合1秒に60回静止画が描かれる
映画の場合は24回
マウス座標の取得
mouseX, mouseYという決め打ち変数を使う
http://gyazo.com/c58665ec399f87734b80f764407e6450.png
マウスクリック取得
mousePressed()という関数が呼ばれる
http://gyazo.com/a1845bc33d5483162db2b79b93efa36b.png
関数/変数リファレンス
http://gyazo.com/03e0b31830653be29ed0f628b7af6d9d.png
Webで公開
HTMLとアプレットが生成される
Webサーバに転送して公開
http://pitecan.com/Puzzle/honeycomb/index.html http://gyazo.com/099c531208467217a89ec228856171a6.png
Processingの問題
Javaの利用
ブラウザ上で動かしにくい
Javaが動かないことが多い
P5.js
ProcessingのJavaScript版
https://p5js.org/ https://gyazo.com/42aa53c84d93659034f52370ca11e427
P5の例
https://p5js.org/examples/simulate-particle-system.html https://gyazo.com/dc35c16d9d72708a3500035661777339.png
P5本
松田晃一
https://www.amazon.co.jp/dp/4877833811 https://gyazo.com/71090411f34432c059d00eb2438b416e
サンプルプログラム
Creative Coding and Data Visualization with p5.js
https://images-na.ssl-images-amazon.com/images/I/61wLQ8X0G-L._SX379_BO1,204,203,200_.jpg
ScrapboxでP5を使う
Scrapbox内にコードを書く
例: /prog-exercises
https://masui.github.io/runp5/?code=https://scrapbox.io/api/code/sfc-vis2020/11._P5.jsとD3.js/プログラム名
runp5
GitHubのP5実行環境を用意
https://github.com/masui/runp5
https://masui.github.io/runp5/
JSファイルを指定して実行
https://masui.github.io/runp5/?code=JSのURL
直線を描く
https://masui.github.io/runp5/?code=https://scrapbox.io/api/code/sfc-vis2021/11._ProcessingとP5.js/line.js
code:line.js
function setup(){
createCanvas(400,400)
line(0,0,300,300)
}
ランダムに点を表示
https://masui.github.io/runp5/?code=https://scrapbox.io/api/code/sfc-vis2021/11._ProcessingとP5.js/random.js
code:random.js
function setup(){
createCanvas(400,400)
fill('#eee')
strokeWeight(0)
rect(0,0,400,400)
}
function draw(){
fill('blue')
rect(random(400),random(400),2,2)
}
正規分布
https://gyazo.com/edbeca3c66ed7606e6fcc27dbf9b5bc8
実行
code:normal.js
function setup(){
createCanvas(200,200)
histogram = []
for(i=0;i<100;i++) histogrami = 0
strokeWeight(0)
}
function draw(){
val = 0
for(i=0;i<10;i++) val += random(1/10)
histogramMath.floor(val * 100) += 1
fill('#ff0')
rect(0,0,200,200)
fill('blue')
for(i=0;i<100;i++)
rect(i*2,200-histogrami,2,histogrami)
}
ドラッグ
https://gyazo.com/0ec9a6ad4dc1f39c260d34439bf827a8
実行
code:drag.js
// MouseDragged
function setup() {
createCanvas(320, 240);
fill(0);
}
function mouseDragged(){
ellipse(mouseX, mouseY, 20, 20);
}
Follow
実行
code:follow.js
var x = 0,0,
y = 0,0,
segLength = 50;
function setup() {
createCanvas(710, 400);
strokeWeight(20.0);
stroke(255, 100);
}
function draw() {
background(0);
dragSegment(0, mouseX, mouseY);
dragSegment(1, x0, y0);
}
function dragSegment(i, xin, yin) {
var dx = xin - xi;
var dy = yin - yi;
var angle = atan2(dy, dx);
xi = xin - cos(angle) * segLength;
yi = yin - sin(angle) * segLength;
segment(xi, yi, angle);
}
function segment(x, y, a) {
push();
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
pop();
}
エスカレータ
実行
code:escalator.js
STRATEGY1 = 0; // 左優先
STRATEGY2 = 1; // 右優先
lspeedfactor = 1.0;
lgapfactor = 1.0;
rspeedfactor = 2.0;
rgapfactor = 3.0;
strategy = STRATEGY2;
var pair = location.search.substring(1).split('&');
for(var i=0; pairi; i++){
var kv = pairi.split('=');
if(kv0 == 'ls') lspeedfactor = kv1;
if(kv0 == 'lg') lgapfactor = kv1;
if(kv0 == 'rs') rspeedfactor = kv1;
if(kv0 == 'rg') rgapfactor = kv1;
}
MOVING_LOWER = 0;
WAITING_LOWER = 1;
ASCENDING = 2;
UPPER = 3;
LEFT = 0;
RIGHT = 1;
llane = 220.0;
rlane = 250.0;
escheight = 460.0;
WINWIDTH = 500;
WINHEIGHT = 500;
NPERSONS = 50;
NSTAIRS = 15;
STAIRHEIGHT = 60;
STEPUNIT = 1;
steppos = 0;
waiting_l = 0;
waiting_r = 0;
done = false;
xspeed = 1.0;
persons = [];;
loops = 0;
var Person = function(){
this.x = 0.0;
this.y = 0.0;
this.status = MOVING_LOWER;
this.lr = LEFT;
};
function setup(){
createCanvas(WINWIDTH,WINHEIGHT);
frameRate(60);
for(var i=0;i<NPERSONS;i++){
personsi = new Person();
}
}
function can_ascend_l(n){
var result = true;
for(var i=0;i<n;i++){
if(personsi.status == ASCENDING &&
personsi.lr == LEFT &&
personsi.y - personsn.y < STAIRHEIGHT * lgapfactor){
return false;
}
}
return true;
}
function can_ascend_r(n){
for(var i=0;i<n;i++){
if(personsi.status == ASCENDING &&
personsi.lr == RIGHT &&
personsi.y - personsn.y < STAIRHEIGHT * rgapfactor){
return false;
}
}
return true;
}
function can_forward_lower(n){
for(var i=0;i<n;i++){
if(personsi.status == MOVING_LOWER &&
personsi.x - personsn.y < 30.0){
return false;
}
}
return true;
}
function can_forward_upper(n){
for(var i=0;i<NPERSONS;i++){
if(personsi.status == UPPER &&
personsi.x - personsn.x > 0.0 &&
personsi.x - personsn.x < 30.0){
return false;
}
}
return true;
}
function all_upper(){
for(var i=0;i<NPERSONS;i++){
if(personsi.status != UPPER) return false;
}
return true;
}
function draw(){
if(done) return;
background(213,200,255);
for(var i=0;i<NSTAIRS;i++){
y = i * STAIRHEIGHT + steppos;
//line(llane-10+10,WINHEIGHT-y,rlane+10+20+10,WINHEIGHT-y);
fill(200,200,200);
strokeWeight(0);
rect(llane-10+10,WINHEIGHT-y,rlane-llane+40,STAIRHEIGHT/2);
}
steppos += STEPUNIT;
if(steppos >= STAIRHEIGHT){
steppos = 0;
}
for(var i=0;i<NPERSONS;i++){ // 駒をひとつずつ進める。
switch(personsi.status){
case MOVING_LOWER: // 下で移動中
if(personsi.x >= llane && // 左レーンまでたどりついたとき
personsi.lr == LEFT){
if(strategy == STRATEGY1){
if(waiting_l == 0 || waiting_l < waiting_r){
personsi.status = WAITING_LOWER;
personsi.x = llane;
waiting_l++;
}
else {
personsi.lr = RIGHT; // 右で待つことにする
}
}
else if(strategy == STRATEGY2){
if(waiting_l < waiting_r){
personsi.status = WAITING_LOWER;
personsi.x = llane;
waiting_l++;
}
else {
personsi.lr = RIGHT; // 右で待つことにする
}
}
}
else if(personsi.x >= rlane && // 右レーンまでたどりついたとき
personsi.lr == RIGHT){
personsi.status = WAITING_LOWER;
personsi.x = rlane;
waiting_r++;
}
if(can_forward_lower(i)){ // 前に進める場合は一歩前に移動する
personsi.x += xspeed;
}
break;
case UPPER: // エスカレータからおりていて
if(can_forward_upper(i)){ // 前に進める場合は一歩前に移動する
personsi.x += xspeed;
}
break;
case WAITING_LOWER: // エスカレータ待ち状態で、
if(personsi.lr == LEFT && // 左で待っていて
can_ascend_l(i) // 上に余地がある
){
personsi.status = ASCENDING;
waiting_l--;
}
else if(personsi.lr == RIGHT && // 右で待っていて
can_ascend_r(i) // 上に余地がある
){
personsi.status = ASCENDING;
waiting_r--;
}
break;
case ASCENDING: //エスカレータに乗っていたら
if(personsi.y >= escheight){ // エスカレータで上まで到達していればおりる
personsi.status = UPPER;
personsi.y = escheight;
}
else {
if(personsi.lr == LEFT){
personsi.y += STEPUNIT * lspeedfactor; // 1段上に移動する
}
else {
personsi.y += STEPUNIT * rspeedfactor; // 1段上に移動する
}
}
break;
}
}
strokeWeight(1);
for(var i=NPERSONS-1;i>=0;i--){
fill(255,255,0);
rect(personsi.x+10,WINHEIGHT-30-personsi.y,20,20);
fill(0,0,0);
text(i+1,personsi.x+10+3,WINHEIGHT-30-personsi.y+14);
}
if(! all_upper()){
loops++;
}
else {
done = true;
}
fill(0,0,0);
// text(millis(),20,20);
text(loops,20,20);
}
Example: Yuki-san
https://gyazo.com/86adfa800b4f9976fdfe65613c54593c
実行
code:yuki.js
T=0
function setup(){
createCanvas(600,600)
noStroke()
}
function draw() {
fill('#000')
rect(0,0,600,600);
N=100
S=300
for (n=1; n<N; n++) {
r=n*2
fill('#fff')
R=(N-n)/10
t=T*n
ellipse(S+r*cos(t),S-r*sin(t),R,R)
T+=0.00001
console.log(T)
}
}
EXPO2025
https://gyazo.com/0410138451c15db9e410aae7d0ce9da1
大久保康平氏の作品
実行
code:osaka.js
const spots = []
function newSpot(deg, r) {
return {
deg,
dx: random(-10, 10),
dy: random(-10, 10),
r,
r2: r*random(0.5,1.5),
vx: random(-20, 20) / 10,
vy: random(-20, 20) / 10,
}
}
function setup() {
createCanvas(640, 640);
colorMode(RGB)
angleMode(DEGREES)
noStroke()
for (i = 0; i < 360;) {
const r = random(30, 150)
spots.push(newSpot(i, r))
i += r / 4
}
}
function move(spot) {
spot.vx = random(-40, 40) / 10 - spot.dx / 2
spot.vy = random(-40, 40) / 10 - spot.dy / 2
spot.dx += spot.vx
spot.dy += spot.vy
spot.deg += .3
}
function origin(spot) {
return {
ox: width / 2 + cos(spot.deg) * width / 3,
oy: height / 2 + sin(spot.deg) * height / 3,
}
}
function drawSpot(spot) {
fill(color(255, 0, 0))
const {
ox,
oy
} = origin(spot)
ellipse(ox + spot.dx, oy + spot.dy, spot.r,spot.r2);
}
function drawEye(spot) {
const {
ox,
oy
} = origin(spot)
const {
r
} = spot
const dx = norm(mouseX - ox, 0, width) * r
const dy = norm(mouseY - oy, 0, height) * r
fill('white')
ellipse(ox + dx / 3, oy + dy / 3, r / 2);
fill('black')
ellipse(ox + dx / 2, oy + dy / 2, r / 4);
}
function draw() {
background(0)
spots.forEach(spot => {
drawSpot(spot)
move(spot)
});
0, 3, 7, 12.forEach(i => {
drawEye(spotsi)
})
}
unicodeアート
https://twitter.com/nagayama/status/1320916731603210240 https://gyazo.com/ad1538c2a9ff8e44546d5c711fb6e143
@nagayama氏の作品
実行
code:unicode.js
t=0//#つぶやきProcessing
draw=_=>{createCanvas(W=600,W)
t++
textAlign(CENTER, CENTER)
textSize(25)
for(y=0;y<30;y++)for(x=0;x<30;x++)text(String.fromCodePoint(9632+int(noise(x/20,y/20,t/200)*30)),x*20+10,y*20+10)}
つぶやきProcessing
Twitterの140文字制限内でProcessingプログラムを書く
プログラミング練習問題集
https://gyazo.com/8be935c389367ac3fcf143fc1a6e505b