メニュー 閉じる

162. p5.jsでシェーダーを使ってみる02

シェーダーでは線を引くことはできません。線が引かれているかのように色を塗ります。
黒背景に緑の横線を引きたいときは、1ピクセルの隙間ができるように上と下に黒を塗ります。
そして、隙間の1ピクセルに緑を塗っていきます。

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

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);
	var my = map (mouseY, 0, height, 0, 1);

	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;

float plotx (vec2 st, float fx) {

	float stroke = abs (u_mouse.y - 0.5) * 0.1;

	return smoothstep (fx - stroke, fx, st.x) - smoothstep (fx, fx + stroke, st.x);

}

float ploty (vec2 st, float fy) {

	float stroke = abs (u_mouse.x - 0.5) * 0.1;

	return smoothstep (fy - stroke, fy, st.y) - smoothstep (fy, fy + stroke, st.y);

}

void main () {

	vec2 st = gl_FragCoord.xy / (u_resolution * 2.0);

	float fx = u_mouse.x;
	float fy = 1.0 - u_mouse.y;

	vec3 color01 = vec3 (st.x * 0.5);
	vec3 color02 = vec3 (st.y * 0.5);
	// vec3 color = vec3 (step (fy, st.x));
	// vec3 color = vec3 (step (fy, st.y));

	float pctx = plotx (st, fx);
	float pcty = ploty (st, fy);

	vec3 color = (1.0 - pctx) * color01 + (1.0 - pcty) * color02 + pctx * vec3 (1.0, 0.0, 0.0) + pcty * vec3 (0.0, 1.0, 0.0);

	gl_FragColor = vec4 (color, 1.0);

}
Posted in javascript , p5.js , processing