Back to shaders

Shader test bench

Bordered Box.fs

vidvox-isf-files utility glsl runnable fragment MIT
Source
runnable fragment

Complete GLSL fragment shader. Stronghold runs it directly when the browser can compile it.

Code

uniform float box_width;
uniform float box_height;
uniform float border_thickness;
uniform vec2 box_position;
uniform vec4 box_color;
uniform vec4 border_color;
precision mediump float;
/*{
    "CATEGORIES": [
        "Geometry"
    ],
    "CREDIT": "VIDVOX",
    "DESCRIPTION": "Draws a simple box with a border over a transparent background.",
    "INPUTS": [
		{
		  "NAME" : "box_width",
		  "TYPE" : "float",
		  "MAX" : 1.0,
		  "DEFAULT" : 0.2,
		  "MIN" : 0.0,
		  "LABEL" : "Box Width"
		},
		{
		  "NAME" : "box_height",
		  "TYPE" : "float",
		  "MAX" : 1.0,
		  "DEFAULT" : 0.2,
		  "MIN" : 0.0,
		  "LABEL" : "Box Height"
		},
		{
		  "NAME" : "border_thickness",
		  "TYPE" : "float",
		  "MAX" : 1.0,
		  "DEFAULT" : 0.5,
		  "MIN" : 0.0,
		  "LABEL" : "Border Size"
		},
        {
            "DEFAULT": [
                0.5,
                0.5
            ],
            "MAX": [
                1,
                1
            ],
            "MIN": [
                0,
                0
            ],
            "NAME": "box_position",
            "TYPE": "point2D",
            "LABEL" : "Box Center"
        },
		{
			"NAME" : "box_color",
			"LABEL" : "Fill Color",
			"TYPE" : "color",
			"DEFAULT" : [
				1,
				1,
				0,
				0.25]
		},
		{
			"NAME" : "border_color",
			"LABEL" : "Border Color",
			"TYPE" : "color",
			"DEFAULT" : [
				1,
				1,
				0,
				0.5]
		}
    ],
    "ISFVSN": "2"
}
*/


bool pointInRect(vec2 pt, vec4 r)
{
	bool	returnMe = false;
	if ((pt.x >= r.x)&&(pt.y >= r.y)&&(pt.x <= r.x + r.z)&&(pt.y <= r.y + r.w))
		returnMe = true;
	return returnMe;
}

vec4 insetRect(vec2 inset, vec4 r)
{
	vec4	returnMe = r;
	vec2	aspectInset = inset;
	aspectInset.x *= u_resolution.y / u_resolution.x;
	
	returnMe.xy += aspectInset.xy / 2.0;
	returnMe.zw -= aspectInset.xy;
	
	return returnMe;
}



void main() {	
	//	default to showing the pixel being passed in
	vec4	this_pixel = vec4(0.0);
	vec4	out_color = this_pixel;
	
	//	only do this if our scale is greater than 0.0 (otherwise we'd get a divide by 0)
	if (box_width > 0.0 && box_height > 0)	{
	
		//	get the image size and multiply it by our scale
		vec2		img_size = vec2(box_width, box_height);
		//	get the normalized pixel location of this pixel
		vec2		loc = (gl_FragCoord.xy / u_resolution.xy).xy;
		//	make a vec4 that describes the rectangle that we need to do our extra drawing in
		vec2		box_origin = box_position.xy - img_size / 2.0;
		vec4		box_bounds;
		box_bounds.xy = box_origin;
		box_bounds.zw = img_size;
		
		//	determine if we are in that rectangle
		bool	isInShape = pointInRect(loc,box_bounds);
		
		//	if we are, draw the cursor over our image
		if (isInShape)	{
			vec4	fill_bounds = insetRect(vec2(border_thickness / 100.0), box_bounds);
			bool	isInFillBounds = pointInRect(loc, fill_bounds);
			vec4	tmpColor = (isInFillBounds) ? box_color : border_color;
			//	figure out the coordinate from cursor image we should read from
			out_color.rgb = mix(this_pixel.rgb, tmpColor.rgb, tmpColor.a);
		}
	}
	
	gl_FragColor = out_color;
}