Processing
ならびにProcessing による作品の話@KojiSaito

Processing って、どんな言語？

https://processing.org/

Processing is a flexible
software sketchbook anda language for learning
how to code within thecontext of the visual arts.

ここにコードを書くsize(800,400);
background(20,120,220);
noFill();// スクリーンサイズを 800 x 400 に// 背景色 (R,G,B)=(20,120,220) で// 塗りつぶし// 描画する図形は塗りつぶし無し

stroke(255,255,255);
for(int i=0; i<200; i++) {// 輪郭線の色は白（R=G=B=255）

float x=random(width);
float y=random(height);
float r=random(100);// x に 0〜800 までの乱数を格納// y に 0〜400 までの乱数を格納// r に 0〜100 までの乱数を格納

float t=random(2)+1;
strokeWeight(t);// t に 1〜3 までの乱数を格納// 輪郭線の太さを指定

circle(x,y,r);// 乱数を使って円を描く}

size(800,400);
background(20,120,220);
noFill();// スクリーンサイズを 800 x 400 に// 背景色 (R,G,B)=(20,120,220) で// 塗りつぶし// 描画する図形は塗りつぶし無し

stroke(255,255,255);
for(int i=0; i<200; i++) {// 輪郭線の色は白（R=G=B=255）

float x=random(width);
float y=random(height);
float r=random(100);// x に 0〜800 までの乱数を格納// y に 0〜400 までの乱数を格納// r に 0〜100 までの乱数を格納

float t=random(2)+1;
strokeWeight(t);// t に 1〜3 までの乱数を格納// 輪郭線の太さを指定

circle(x,y,r);// 乱数を使って円を描く}

size(800,400)
background(20,120,220)
noFill()stroke(255,255,255)
for i in range(200):
x=random(width)y=random(height)
r=random(100)t=random(2)+1
strokeWeight(t)circle(x,y,r)

size(800,400)
background(20,120,220)
noFill()stroke(255,255,255)
for i in range(200):
x=random(width)y=random(height)
r=random(100)t=random(2)+1
strokeWeight(t)circle(x,y,r)size(800,400);
background(20,120,220);
noFill();stroke(255,255,255);
for(int i=0; i<200; i++) {float x=random(width);
float y=random(height);
float r=random(100);
float t=random(2)+1;
strokeWeight(t);circle(x,y,r);}

Python modeJava mode

p5js = JavaScript mode

proce55ing.org
processing.org

void setup() {// 最初に一度だけ呼ばれる関数// size 関数の実行＝画面サイズの指定はここに書く}
void draw() {// 描画のために何度も呼ばれる関数// この関数内に記述された処理が画面を作る}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定circle(x,y,40);}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定
circle(x,y,40);}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

グローバル変数

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定
circle(x,y,40);}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

グローバル変数

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定
circle(x,y,40);}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

グローバル変数

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定
circle(x,y,40);}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

グローバル変数

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定
circle(x,y,40);}

void setup() {size(800,500);
colorMode(HSB);}// (H,S,B)=(色相, 彩度, 輝度)

グローバル変数

float x=250, y=250; // ボールの位置
float dx=-10, dy=-5; // ボールの変位量
void draw() {clear();// 画面クリア（黒で塗る）
x += dx; y += dy;// 位置の更新
if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255); // H,S,B で指定
circle(x,y,40);}

mouseXmouseY// 現在のマウスカーソルの X 座標// 現在のマウスカーソルの Y 座標

pmouseXpmouseY// ひとつ前のフレームにおけるマウスカーソルの X 座標// ひとつ前のフレームにおけるマウスカーソルの Y 座標

mousePressed // マウスのボタンが押されているか否か
mouseClicked()mouseMoved()…等など// マウスのボタンが押されたら１度だけ呼ばれる関数// マウスが動いたら呼ばれる関数

作品を制作した後の楽しみ方について

はぅ君（@Hau_kun）さん発案の#つぶやきProcessing

つぶやきProcessing ポータル
https://tweetprocessing.projectroom.jp
2022.05.31 時点

参加者： ３５０ 名以上
作品数： ７,６００ 以上
8,100 以上となっている（2022.08.15 時点）

https://garoa.net.br/wiki/Noite_de_Processing
Alexandre B A Villares(@villares)

背景画像は @ntsutae さんの作品void setup() {size(800,500);
colorMode(HSB);}

def setup():size(800,500)
colorMode(HSB)

x=250; y=250
float x=250, y=250;
float dx=-10, dy=-5;void draw() {clear();x += dx; y += dy;if(x<0) { x=0; dx=-dx; }if(width<=x) { x=width; dx=-dx; }if(y<0) { y=0; dy=-dy; }if(height<=y) { y=height; dy=-dy; }fill(frameCount%256, 255, 255);
circle(x,y,40);}dx=-10;dy=-5

def draw():
global x,y,dx,dyclear()x+=dx; y+=dy
if x<0: x=0; dx=-dx
if width<=x: x=width; dx=-dx
if y<0: y=0; dy=-dy
if height<=y: y=height; dy=-dy
fill(frameCount%256,255,255)
circle(x,y,40)

def setup():size(800,500)
colorMode(HSB)
x=250; y=250
dx=-10;dy=-5
def draw():
global x,y,dx,dyclear()
x+=dx; y+=dy
if x<0: x=0; dx=-dx
if width<=x: x=width; dx=-dx
if y<0: y=0; dy=-dy
if height<=y: y=height; dy=-dy
fill(frameCount%256,255,255)
circle(x,y,40)

x を 0 から width の範囲に収める
y を 0 から height の範囲に収める
範囲から外れたら方向転換def setup():size(800,500)
colorMode(HSB)
x=250; y=250
dx=-10;dy=-5
def draw():
global x,y,dx,dyclear()
x+=dx; y+=dy
if x<0: x=0; dx=-dx
if width<=x: x=width; dx=-dx
if y<0: y=0; dy=-dy
if height<=y: y=height; dy=-dy
fill(frameCount%256,255,255)
circle(x,y,40)

newX=min(max(x,0),width)
newY=min(max(y,0),height)
if newX!=x: dx=-dx
if newY!=y: dy=-dyつぶやきProcessing でどの程度の表現ができるのか？

t=noise(x*.01+f,y*.02,f);
S=square;F=fill;K=240
def setup():size(550,K);noStroke()def draw():
background(99,150,K);f=frameCount*.003
for i in range(4**7):x=i%150;y=99-i/150;t=noise(x*.01+f,y*.02,f);x*=4;y*=3;t=pow(t,8)*8;F(20,t*10);S(x,y,15);F(K,t*K);S(x-25,y-30,15)
filter(BLUR,3)

def setup():size(192,157);noStroke();blendMode(ADD)
H=lambda x,y:noise(x/200.,y/200.,frameCount*.1)
def draw():
background(50,80,150);fill(2)for i in range(8**5):
y=i/200;x=i%200;h=H(x,y)
square(x+(H(x+1,y)-h)*5000,y+(H(x,y+1)-h)*5000,4)
filter(BLUR,2)

ぼかしW=500
def setup():size(W,250)
def draw():
clear();f=frameCount;u=0;c=(noise(f*.01)-.5)*.2;p=0;q=W;v=300
for t in range(300):u+=(noise((t+f)*.01)-.3)*.2;z=t*.1+1;s=1/z;y=100+150*s;x=W*(u-c)*s-30;w=x+W/z+30;stroke(v);fill(v);quad(p,v,x,y,w,y,q,v);p=x;q=w;v=y

W=500
def setup():size(W,250)
def draw():clear();f=frameCount;u=0;
c=(noise(f*.01)-.5)*.2;
p=0;q=W;v=300
for t in range(300):
u+=(noise((t+f)*.01)-.3)*.2;
z=t*.1+1;
s=1/z;
y=100+150*s;
x=W*(u-c)*s-30;
w=x+W/z+30;
stroke(v);fill(v);quad(p,v,x,y,w,y,q,v);
p=x;q=w;v=yR=random;N=noise
F=lambda r,t:[r*cos(t)+250,r*sin(t)+125]
def setup():size(500,250);clear();stroke(-1)
def draw():
f=frameCount*.1;x,y=F(N(f,f)*50,f);copy(get(),20,10,460,230,0,0,500,250)
for i in range(628):t=i*.01+f;u,v=F(N(t,f)*40,t);line(x,y,u,v);x,y=u,v

R=random
C=circle
def setup():size(500,700);noStroke();
F=lambda:[R(3),R(.1)*.01+.01,R(250)]
P=[]
def draw():fill(-1,5);C(0,0,3000);fill(10,120,255)
for e in P:
e[0]+=e[1];t=e[0];r=e[2]/(1+t*t*.01)
C(r*cos(t)+250,r*sin(t)+t*100,.2+r*.01)
P[:]+=[F()]P=[0]*256;C=[0];K=20
def setup():size(321,321);stroke(-1);colorMode(HSB,8)
def draw():
for i in range(256):x=i%16;y=i/16;fill(P[i]);square(x*K,y*K,K)
def mouseClicked(e):i=e.x/K+e.y/K*16;P[i]=C[0]def keyTyped():t=ord(key);C[0]=color(t-48,(t!=57)*8,8)*(t!=48)

まとめ
前半：Processing の紹介
・Java モード、Python モード、p5js
・関数名などは同じ
・静止画の生成例
・動画の生成方法
後半：Processing による作品の話
・#つぶやきProcessing について
・作品例
その他：質問などあれば @KojiSaito まで連絡を下さい

まとめ
前半：Processing の紹介
・Java モード、Python モード、p5js
・関数名などは同じ
・静止画の生成例
・動画の生成方法
後半：Processing による作品の話
・#つぶやきProcessing について
・作品例
その他：質問などあれば @KojiSaito まで連絡を下さい

終