第1回の「とりあえず遊んじゃおう！完成版コード」を覚えていますか？
これは、世界のクリエイターを熱狂させた Kishimisuさん の魔法です。
これまでの第1回〜第4回を通ってきた今のキミなら、もう読み解けるはず！
これまでの第1回〜第4回を通ってきた今のキミなら、もう読み解けるはず！
今日は、今まで準備してきた「色のバケツ」と「コピー機」を組み合わせて、
「光を輪っかにする魔法」と「奥行きを出す魔法」をトッピングします。
光を「輪っか」にする（波の魔法）
なぜ「輪っか」になるの？（波の折り返し術）
「かける」と「わる」のコンビネーション魔法
最初は、コピーを1回だけfor (float i = 0.0; i < 1.0; i++) で、輪っかを作ってみよう！
void main() {
vec2 uv = vTexCoord * 2.0 - 1.0;
uv.x *= u_resolution.x / u_resolution.y;
vec2 uv0 = uv;
vec3 finalColor = vec3(0.0);
// ループを1回だけに変更
for (float i = 0.0; i < 1.0; i++) {
vec3 col = palette(length(uv0) + i * 0.4 - u_time);
uv = fract(uv * 3.0) - 0.5;
vec2 q = uv + i * 0.1;
float d = length(q);
// この２行を追加
d = sin(d * 8.0 + u_time) / 8.0;
d = abs(d);
float strength = 0.01 / d;
strength *= abs(sin(u_time + i));
finalColor += col * strength;
}
gl_FragColor = vec4(finalColor, 1.0);
}expマシンで奥行きを出そう
exp（イー・エックス・ピー）は、数学の世界では「指数関数」と呼ばれる、ちょっと強そうな名前の持ち主。 でも難しく考えなくてOK！シェーダーの世界では、「数字をものすごい勢いで大きくしたり、小さくしたりするマシン」だと思ってね
今回は、画面の真ん中をライトで照らすイメージだよ。
真ん中はまぶしいけど、ちょっと離れると暗くするんだ。
マイナス（➖）は「爆発」を「消滅」にかえるスイッチ
expマシンをつかってみよう
👨🔬実験：万華鏡のカスタマイズ！
「なんかゴチャついてる？」と思ったらよね😅
☝️最後の仕上げ：ここを変更するのがポイント
「なんかゴチャついてる？」と思ったら、この魔法の出番だよ。
「pow」のヤスリがけで光をみがく
const vert = `
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;
void main() {
vTexCoord = aTexCoord;
vec4 positionVec4 = vec4(aPosition, 1.0);
positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
gl_Position = positionVec4;
}
`;
const frag = `
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
varying vec2 vTexCoord;
vec3 palette(float t) {
vec3 a = vec3(0.5, 0.5, 0.5);
vec3 b = vec3(0.5, 0.5, 0.5);
vec3 c = vec3(1.0, 1.0, 1.0);
vec3 d = vec3(0.000, 0.333, 0.667);
return a + b * cos(6.28318 * (c * t + d));
}
void main() {
vec2 uv = vTexCoord * 2.0 - 1.0;
uv.x *= u_resolution.x / u_resolution.y;
vec2 uv0 = uv;
vec3 finalColor = vec3(0.0);
for (float i = 0.0; i < 3.0; i++) {
uv = fract(uv * 1.5) - 0.5;
vec3 col = palette(length(uv0) + i*0.4 + u_time*0.4);
float d = length(uv) * exp(-length(uv0));
d = sin(d * 8.0 + u_time) / 8.0;
d = abs(d);
d = pow(0.01 / d, 1.2);
finalColor += col * d;
}
gl_FragColor = vec4(finalColor, 1.0);
}
`;
let myShader;
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
myShader = createShader(vert, frag);
}
function draw() {
shader(myShader);
myShader.setUniform("u_time", millis() / 1000.0);
myShader.setUniform("u_resolution", [width, height]);
rect(-width / 2, -height / 2, width, height);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}おまけ：Palette（パレット）関数のカスタマイズ
👨👩👧 保護者の方へ：作品の公開について
OpenProcessingは世界中のクリエイターが集まる安全なコミュニティですが、海外サイトのため、13歳未満のお子様が利用される際は保護者の方によるアカウントの作成・管理を推奨しています。
ぜひ、本名ではなくニックネームを使うなどのSNSマナーを一緒に確認しながら、親子でクリエイティブな世界を楽しんでみてください！
【夏休みの自由研究・シェーダー】シリーズ一覧