Ellipse with customizable size, position, rotation, color

I really had a lot of trouble figuring ellipses out, especially with rotation – so wanted to share.
This works, but I don’t really understand it! If you know more about this stuff, please comment improvements that could be made.

Used these two things to figure it out:
https://www.shadertoy.com/view/wclGW2
https://godotshaders.com/shader/simple-ellipse-shader/

To use it, create a new ShaderMaterial on a canvas item such as a ColorRect or a TextureRect with a PlaceholderTexture2D or similar.

Have a look at my profile for further iterations such as randomized variables, and generating more than one at a time.

Shader code
shader_type canvas_item;

uniform float rotation: hint_range(0.0, 360.0) = 0.0;
uniform float posX: hint_range(0.0, 1.0) = 0.5;
uniform float posY: hint_range(0.0, 1.0) = 0.5;
uniform float height: hint_range(0.0, 1.0) = 0.5;
uniform float width: hint_range(0.0, 1.0) = 0.5;
uniform vec4 ellipseColor: source_color = vec4(1.0, 0.0, 0.0, 1.0);

void fragment() {
	// Idk the math, but it works
	float angle = 1.0 * (radians(rotation / 2.0) * 1.0);
	// This line sets the background. Delete it to make transparent or edit to make different color
	COLOR = vec4(0.0, 0.0, 0.0, 1.0);
	vec2 pos = vec2(posX, posY);
	
	// Don't even ask, took the below from - https://www.shadertoy.com/view/wclGW2
	float theta = angle * 2.0; // Ellipse orientation
	mat2 rot = mat2(vec2(cos(theta), -sin(theta)), vec2(sin(theta), cos(theta)));
	vec2 localCoord = rot * (UV - pos);
	float dist = pow(localCoord.x / (width / 2.0), 2.0) + pow(localCoord.y / (height / 2.0), 2.0);
	
	// It works
	if (floor(dist) < 0.1){
		COLOR = mix(ellipseColor, vec4(0.0, 0.0, 0.0, 1.0), floor(dist));
	}
}
Live Preview
Tags
canvas, canvas item, circle, Ellipse, rotate, rotation, shape
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from Deputy_McNuggets

Related shaders

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments