11. ProcessingとP5.js
増井俊之
慶應義塾大学 環境情報学部
masui@pitecan.com
2021年12月23日


本日の話題
簡単なプログラミングで情報視覚化
Processing
P5.js

Processing
Gyazo

Ben Fryの開発したお手軽ビジュアリゼーション言語
Javaの面倒なところをなくす
すぐに開発はじめられるようにする
HTML記法採用
#ff1234
簡略記述
setup() , draw()

Javaの面倒なところ
前提知識が多量
システムの用意が大変
エディタ, コンパイラ, ライブラリ, ...
public class HelloWorld {
public static void main(String[] args){
System.out.println("Hello World!!");
}
}
public ? class ? static ? void ? main ? String ? System ? println ?

Cの場合
main(){
printf("Hello, World!\n");
}
main ? printf ?

Ruby
puts "Hello, World"
puts ?

JavaScript
console.log("Hello, World");
console ? log ?

Processing
line(0,0,100,100);

Ben Fry

ビジュアライジング・データ
Gyazo

田中孝太郎 , 前川峻志

Let's start Processing
by Casey Reas, Ben Fry

Gyazo Gyazo

とても分厚い
Gyazo Gyazo

Processingのコードとアイデアを共有

Processingって知ってますか？
Note記事 by 山辺真幸

Gyazo
山辺真幸氏 @ Facebook

山辺氏によるCovid視覚化

ゲノム系統樹の3次元可視化

伊藤ガビン氏の動画
Gyazo
伊藤ガビン、林洋介、宮本拓馬

Processingの入手
processing.org からダウンロード
Windows, Mac, Linux, Chromebookで動く

線の描画
line(0,0,100,100);
Playボタンで実行
(0,0)(0,0) は左上

(0, 0)の座標
何故か左上のシステムが多い
1行目は画面のトップだというのが普通だから?

色の利用
描画の前に色を指定
fill(#ffff00); など

文字の描画
フォント設定
Tools⇒CreateFont
loadFont(); textFont(); text();

繰り返し処理
for statement, if statement
...
Same syntax as C, Java

setup() と draw()
setup() プログラム実行前に一度だけ呼ばれる
draw() 1フレームごとに呼ばれる

フレーム
動画表示のために描かれる静止画
テレビの場合1秒に60回静止画が描かれる
映画の場合は24回

マウス座標の取得
mouseX , mouseY という決め打ち変数を使う

マウスクリック取得
mousePressed() という関数が呼ばれる

関数/変数リファレンス

Webで公開
HTMLとアプレットが生成される
Webサーバに転送して公開
Gyazo

Processingの問題
Javaの利用
ブラウザ上で動かしにくい
Javaが動かないことが多い

ProcessingのJavaScript版
Gyazo

P5の例
Gyazo

P5本
松田晃一
Gyazo

ScrapboxでP5を使う
Scrapbox内にコードを書く
https://masui.github.io/runp5/?code=https://scrapbox.io/api/code/sfc-vis2020/11._P5.jsとD3.js/プログラム名

runp5
GitHubのP5実行環境を用意
JSファイルを指定して実行
https://masui.github.io/runp5/?code=JSのURL

直線を描く
function setup(){
createCanvas(400,400)
line(0,0,300,300)
}

ランダムに点を表示
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)
}

正規分布
function setup(){
createCanvas(200,200)
histogram = []
for(i=0;i<100;i++) histogram[i] = 0
strokeWeight(0)
}
function draw(){
val = 0
for(i=0;i<10;i++) val += random(1/10)
histogram[Math.floor(val * 100)] += 1
fill('#ff0')
rect(0,0,200,200)
fill('blue')
for(i=0;i<100;i++)
rect(i*2,200-histogram[i],2,histogram[i])
}

ドラッグ
// MouseDragged
function setup() {
createCanvas(320, 240);
fill(0);
}
function mouseDragged(){
ellipse(mouseX, mouseY, 20, 20);
}

Follow
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, x[0], y[0]);
}
function dragSegment(i, xin, yin) {
var dx = xin - x[i];
var dy = yin - y[i];
var angle = atan2(dy, dx);
x[i] = xin - cos(angle) * segLength;
y[i] = yin - sin(angle) * segLength;
segment(x[i], y[i], angle);
}
function segment(x, y, a) {
push();
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
pop();
}

エスカレータ
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; pair[i]; i++){
var kv = pair[i].split('=');
if(kv[0] == 'ls') lspeedfactor = kv[1];
if(kv[0] == 'lg') lgapfactor = kv[1];
if(kv[0] == 'rs') rspeedfactor = kv[1];
if(kv[0] == 'rg') rgapfactor = kv[1];
}
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++){
persons[i] = new Person();
}
}
function can_ascend_l(n){
var result = true;
for(var i=0;i<n;i++){
if(persons[i].status == ASCENDING &&
persons[i].lr == LEFT &&
persons[i].y - persons[n].y < STAIRHEIGHT * lgapfactor){
return false;
}
}
return true;
}
function can_ascend_r(n){
for(var i=0;i<n;i++){
if(persons[i].status == ASCENDING &&
persons[i].lr == RIGHT &&
persons[i].y - persons[n].y < STAIRHEIGHT * rgapfactor){
return false;
}
}
return true;
}
function can_forward_lower(n){
for(var i=0;i<n;i++){
if(persons[i].status == MOVING_LOWER &&
persons[i].x - persons[n].y < 30.0){
return false;
}
}
return true;
}
function can_forward_upper(n){
for(var i=0;i<NPERSONS;i++){
if(persons[i].status == UPPER &&
persons[i].x - persons[n].x > 0.0 &&
persons[i].x - persons[n].x < 30.0){
return false;
}
}
return true;
}
function all_upper(){
for(var i=0;i<NPERSONS;i++){
if(persons[i].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(persons[i].status){
case MOVING_LOWER: // 下で移動中
if(persons[i].x >= llane && // 左レーンまでたどりついたとき
persons[i].lr == LEFT){
if(strategy == STRATEGY1){
if(waiting_l == 0 || waiting_l < waiting_r){
persons[i].status = WAITING_LOWER;
persons[i].x = llane;
waiting_l++;
}
else {
persons[i].lr = RIGHT; // 右で待つことにする
}
}
else if(strategy == STRATEGY2){
if(waiting_l < waiting_r){
persons[i].status = WAITING_LOWER;
persons[i].x = llane;
waiting_l++;
}
else {
persons[i].lr = RIGHT; // 右で待つことにする
}
}
}
else if(persons[i].x >= rlane && // 右レーンまでたどりついたとき
persons[i].lr == RIGHT){
persons[i].status = WAITING_LOWER;
persons[i].x = rlane;
waiting_r++;
}
if(can_forward_lower(i)){ // 前に進める場合は一歩前に移動する
persons[i].x += xspeed;
}
break;
case UPPER: // エスカレータからおりていて
if(can_forward_upper(i)){ // 前に進める場合は一歩前に移動する
persons[i].x += xspeed;
}
break;
case WAITING_LOWER: // エスカレータ待ち状態で、
if(persons[i].lr == LEFT && // 左で待っていて
can_ascend_l(i) // 上に余地がある
){
persons[i].status = ASCENDING;
waiting_l--;
}
else if(persons[i].lr == RIGHT && // 右で待っていて
can_ascend_r(i) // 上に余地がある
){
persons[i].status = ASCENDING;
waiting_r--;
}
break;
case ASCENDING: //エスカレータに乗っていたら
if(persons[i].y >= escheight){ // エスカレータで上まで到達していればおりる
persons[i].status = UPPER;
persons[i].y = escheight;
}
else {
if(persons[i].lr == LEFT){
persons[i].y += STEPUNIT * lspeedfactor; // 1段上に移動する
}
else {
persons[i].y += STEPUNIT * rspeedfactor; // 1段上に移動する
}
}
break;
}
}
strokeWeight(1);
for(var i=NPERSONS-1;i>=0;i--){
fill(255,255,0);
rect(persons[i].x+10,WINHEIGHT-30-persons[i].y,20,20);
fill(0,0,0);
text(i+1,persons[i].x+10+3,WINHEIGHT-30-persons[i].y+14);
}
if(! all_upper()){
loops++;
}
else {
done = true;
}
fill(0,0,0);
// text(millis(),20,20);
text(loops,20,20);
}

Example: Yuki-san
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
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(spots[i])
})
}

unicodeアート
Gyazo
@nagayama氏の作品
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プログラムを書く



Related