ProcessingでGLSLを実行してみた

はじめに

ritocoです。
今回はProcessingでGLSLを実行してみました！

自分がまとめるにあたって
以下のサイトを参考にさせていただきました。

https://solo-p5.tumblr.com/post/126177663372/processing%E3%81%A7%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%E6%9B%B8%E3%81%8F%E3%81%9E

solo-p5.tumblr.com
thebookofshaders.com

画像はすべて2019年1月1日のものです。

早速やってみる

到達目標はこんな感じです。

１　Processingに以下のソースコードをコピー

PShader shader;

void setup() {
  size(640, 360, OPENGL);                              //Open_GL対応した横640px * 縦360pxのカンバスを生成
  noStroke();                                            
}

void draw() {
 
  shader = loadShader("shader.frag");             //shader.frag（シェーダーファイル）を読み込む。
  shader.set("resolution", float(width), float(height));
  shader.set("mouse", float(mouseX), float(mouseY));
  shader.set("time", millis() / 10000.0);                    //shaderの速度
  shader(shader);
  rect(0,0,width,height);                                 
}

貼り付けたらこんな感じになると思います。



やってて気づいたのですが

  shader.set("resolution", float(width), float(height));
  shader.set("mouse", float(mouseX), float(mouseY));
  shader.set("time", millis() / 10000.0);

The Book of Shadersからそのままコピーしてしまうと
この３行の"resolution"、"mouse"、"time"が原因で動かない…みたいなことがありました。
u_mouseなどになっているので"u_"の部分を消しました。

２　Processingファイルを名前つけて保存する

コピーしたProcessingのスケッチ（ソースコード）をそのままの名前で、必ず自分がわかる場所に保存。

３　GLSL Sandboxにアクセス

４　タイトルのすぐ下の「creative new effect」をクリック

５　デモ画面のソースコードをすべて選択してコピー

全部しっかりコピーしないとエラー出るので注意です。
私は一番最後のカッコをコピーせずにやらかしました。確認大事。

６　テキストエディタにコピー

私は今回Atomを使用しています。

７　「shader.frag」で２で作ったProcessingフォルダに名前を付けて保存

８　Processingを開いて実行（再生ボタン）を押す

ドキドキ。

９　できた！

おわりに

自分での覚書でもあるので、ざっくりまとめてみました。
このshader.fragのファイルの中に自分で制作したGLSLを書くと、それがProcessingでも動きます。

閲覧ありがとうございました！