メニュー 閉じる

161. p5.jsでシェーダーを使ってみる01

p5.jsでシェーダーを使ってみました。シェーダーに関しては、まだまだわからないこと
だらけですが、GLSLの処理速度を早く体験したい。
以下の例はマウスで画面の色が変化します。

https://www.velvet-number.com/p5_test/test118/

sketch.js

var basic_shader;

function preload (){

	basic_shader = loadShader ('shader.vert', 'shader.frag');

}

function setup () {

	createCanvas (windowWidth, windowHeight, WEBGL);

}

function draw () {  

	shader (basic_shader);

	var mx = map (mouseX, 0, width, 0, 1.0);
	var my = map (mouseY, 0, height, 0, 1.0);

	basic_shader.setUniform ('u_resolution', [width, height]);
	basic_shader.setUniform ('u_mouse', [mx, my]);
	basic_shader.setUniform ('u_time', frameCount / 40.0);

	rect (0, 0, width, height);

}

shader.vert

attribute vec3 aPosition;

void main () {

	vec4 positionVec4 = vec4 (aPosition, 1.0);

	positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

	gl_Position = positionVec4;

}

shader.frag

precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main () {

	gl_FragColor = vec4 (u_mouse.x, u_mouse.y, 0.0, 1.0);

}
Posted in javascript , p5.js , processing