#つぶやきProcessing で気になった作品を p5.js Web Editor で動かそうとしてみる【 #GWアドベントカレンダー 2021/5/2 】

この記事は、2021年の GWアドベントカレンダー 5/2の分の記事です。

はじめに

先日、「#つぶやきProcessing」という Twitter のハッシュタグを知り、そのタグがついたツイートを見ていて気になるものがいくつもありました。

ハッシュタグでの検索をした結果を見ていくだけでも楽しい。

●#つぶやきProcessing - Twitter検索 / Twitter
　https://t.co/OMpfhMD43x

— you (@youtoy) April 28, 2021

そして、「そこで気になった作品を p5.js で書いて、JavaScript の別の処理と組み合わせたりできないかな」と思いました。それで、このゴールデンウィーク中に試し始めてみようかと思い、今回の記事を書きました。

※ 【追記】 第二弾もやってみました
⇒ #つぶやきProcessing で気になった作品を p5.js Web Editor で動かしてみる 【その2】 - Qiita

今回の対象： 1つ目（※ コメントをいただき、内容を修正）

あらためて「#つぶやきProcessing」のタグがついたツイートを最新のものから見ていって、まずは気になるものを 1つピックアップしました。それがこちらです。

#つぶやきProcessing 「カラーパレット」

float n,f=9e3,r;
void setup(){
size(500,500);noFill();strokeWeight(5);blendMode(ADD);colorMode(HSB,2);
}
void draw(){
clear();
f+=2;
for(n=f%40;n<500;n+=40){
stroke((f-n)/99%2,2,2,(500-n)/250);
circle(500*noise(n-f),500*noise(n-f,9),n);
}
} pic.twitter.com/Z1vw1yxEEc

— Snow Esamosc (@SnowEsamosc) April 28, 2021

これを、p5.js で動かしてみます。
その際、オンラインで p5.js を実行することが可能な「p5.js Web Editor」を使います。

p5.js で書き直してみる

まずは、Processing と p5.js の差異を考慮した単純な書きかえを行い、その後に修正が追加で必要そうな部分があったらさらに見直そうと思います。

【後から追記・修正した部分】

1つ目の内容の元になるソースコードについて、この記事のコメント欄で修正版の情報をいただいたので、これを参照元にします（当初、ツイートに掲載されていたコードをベースに動かしたらうまく意図通りにならず、その流れを記事に書いていたら修正版の内容に関するコメントをいただけました）。

float n,f=9e3,r;
void setup(){
size(500,500);
blendMode(ADD);
colorMode(HSB,2);
}
void draw(){
clear();
f+=2;
for(n=f%40;n<500;n+=40){
fill((f-n)/99%2,2,2,(500-n)/250);
circle(500*noise(n-f),500*noise(n-f,9),n);
}
}

以下に書きかえ後のソースコード（書きかえを行った部分を示したコメント付）を掲載します。

// float を let に
let n, f = 9e3, r;

// size を createCanvas に
function setup() {
  createCanvas(500, 500);
  noFill();
  strokeWeight(5);
  blendMode(ADD);
  colorMode(HSB, 2);
}

function draw() {
  clear();
  // background(0) を追加
  background(0);
  f += 2;
  for (n = f % 40; n < 500; n += 40) {
    fill((f - n) / 99 % 2, 2, 2, (500 - n) / 250);
    circle(500 * noise(n - f), 500 * noise(n - f, 9), n);
  }
}

当初、記事に書いていた時点では試しに実行してみたものが元と同じにならず、さらに元のソースコードの内容を Processing で実行してみても元の出力と同じにならないという状況で、その流れを書いていました。

その後、上記のとおり修正版のソースコードの情報をコメント欄でいただくことができ、以下のとおり元のツイートにあったのと同じような結果が得られました。

綺麗な描画が行われて、とても良い感じに！

今回の対象： 2つ目

次は、こちらを試してみます。

【2021/8/1 修正】
ツイートをされていたご本人から削除要望のコメントをもらい、元ツイートを削除しました。
ソースコード自体の利用は可、との話だったため、以下の内容は記事投稿時のコード等を残す形にしています。

元のソースコードを Processing で実行してみる

まずは元のソースコードを Processing で実行してみます。
試してみたところ、想定した動作が行われるのを確認できました。

p5.js で書き直してみる

まずは、Processing と p5.js の際を考慮した、単純な書きかえを行い、その後はエラー等のメッセージを見て、さらなる書きかえを行っていきます。
以下に書きかえ後のソースコード（書きかえを行った部分を示したコメント付）を掲載します。

// float を let に、t の初期値を 0 に
let t=0, r = 1;

// void setup() を function setup() に
function setup() {
  // size を createCanvas に
  createCanvas(640, 640);
  noFill();
  // createFont は利用不可
  // textFont(createFont("游ゴシック", 7));
}

// void draw() を function draw() に
function draw() {
  clear();
  // background（0） を追加
  background(0);
  scale(5);
  text(nf(int((t += r) / 3.6), 2) + '%', 58, 66);
  stroke(90);
  circle(64, 64, 70);
  // #FFFF00 を "" で囲う
  stroke("#FFFF00");
  // 最後の部分の 1 を OPEN に
  arc(64, 64, 70, 70, -PI / 2, PI / 180 * t - PI / 2, OPEN);
  if (t < 0 || t > 358) r = -r;
}

上記を実行した結果を、以下に掲載します。
少し違いはある状態ですが、おおよそ同じ見た目・動きとなりました。

数字とその周りの部分が連動して変化するのが良い感じです！

おわりに

今回、Processing で書かれた 2つのプログラムを p5.js で動くように書きかえようとしてみました。
1つ目は最終的にうまく動き、2つ目のほうは元のものと差異が少し残る結果ではあるものの、基本的な部分はそのままの形で動かすこともできました。

この後も、他の気になる作品をピックアップして p5.js で書きかえてみることで、Processing と p5.js の差を学びつつ、色々な作例を知っていくためのきっかけにできればと思います。
それと、以下のツイートにあるような、何らか自分の動作と描画とを結びつけた仕組みを作れたら良いかな、と思っています。

Googleさんの MediaPipe Hands と p5.js の描画とを組み合わせた仕組みを試していた件の続き。

描画周りを p5.js にしたのを活かして、簡単なものですが立方体の描画・回転など、WebGL による 3D表現を試しに組み込んでみました。 pic.twitter.com/WQvvCCJLPa

— you (@youtoy) February 17, 2021

Googleさんの MediaPipe Hands のサンプルにちょっと手を加えて、両手の動きや指の距離に合わせて位置・大きさが変わる矩形を重畳させる形で描画してみた！ pic.twitter.com/XGbuOKP0IU

— you (@youtoy) January 26, 2021