Processingで文字の雨を降らせる

はじめに

先週、電子アートに使われるProcessingでホームページの背景動画を作成したので、そのときの記録を残しておく

よく分からなかったら、ChatGPTにコードを書いてもらうといい。僕も最初、書いてもらってから感じをつかんで改造した

結果

実装

sample.pde

// 落下する文字
int NUM = 20;
char[] c = new char[NUM];
float[] x_position = new float[NUM];
float[] y_position = new float[NUM];

// 色
color[] colors = new color[NUM];

// 速度
float[] s = new float[NUM];

//frame
int f = 1;
int value=30;

void setup() {
  //size(1280, 670); // noteの記事見出し画像のサイズを設定
  size(640, 480);
  for(int i = 0; i< NUM; i++){
    c[i]=char(int(random(32, 127)));
    x_position[i]=random(width);
    colors[i] = color(random(255), random(255), random(255), 128);
    s[i]=random(2,5);
  }
  frameRate(value); // 秒間24フレーム
}

void draw() {
  
  // +1秒で終了
  if (f>=value*5+value){
    
    exit();
    
  // 5秒
  }else if(f>=value*5){
    
    background(0);
  
  }else{
    
    background(0); // 背景を黒に設定 255→白
    textSize(64); // テキストサイズを設定
    fill(50,128); // 色とα値

    // 表示
    for(int i = 0; i< NUM; i++){
      text(c[i], x_position[i], y_position[i]);
    }
    
    // 落下速度
    for(int i = 0; i< NUM; i++){
       y_position[i] = y_position[i] + s[i] * s[i];//random(5,10) * random(1,3);
    }
    
    // 画面の下端に達したら再度ランダムな位置に配置する
      for(int i = 0; i< NUM; i++){
  
      if (y_position[i] > height) {
        x_position[i] = random(width);
        y_position[i] = 0;
        text(c[i], x_position[i], y_position[i]);
        c[i]=char(int(random(32, 127)));
     }
    }
    
  }
  
  // frame DIRにpngを保存する
  saveFrame("frames/#####.png");
  //fpsで秒数をカウント
  f = f + 1;
  
}

他にもカラーにしてみたり

少し、コードを変更してあげるだけで印象が変わるのは面白い

for(int i = 0; i< NUM; i++){
      text(c[i], x_position[i], y_position[i]);/
      // 追加
      fill(colors[i]);
}

// 表示
    for(int i = 0; i< NUM; i++){
      text(c[i], random(width), random(height));
      fill(colors[i]);
}

/*
 // 表示
for(int i = 0; i< NUM; i++){
      text(c[i], x_position[i], y_position[i]);
      fill(colors[i]);
}

// 落下速度
for(int i = 0; i< NUM; i++){
      y_position[i] = y_position[i] + s[i] * s[i];//random(5,10) * random(1,3);
}
*/

恐らく、数学的な考え方と想像力で色々と楽しいデモが作れるかと。僕はあまり、その手の思考力がないため、アートぽいものは作れないが、楽しいので時間があるときに取り組んではいかがだろうか？

また、p5.jsというJavaScriptで表示できるツールもあるのだが、Webサイトに貼ろうとしたらCSSで配置など処理する方法が、腑に落ちなかったのでgifを読み込ませるようにした。ちなみにChatGPTにProcessingのソースコードから、p5.jsのコードにマイグレーションしてくれといったら、意外にも動作するコードがアウトプットされた。少し、手直しは必要だったがコードを変換することは得意なのかもしれない

a キーを押すと、gifを読み込み、cキーで解除するようにした

おわり！