border radius for quads

cudoku.c

@@ -58,17 +58,19 @@ void draw_win() {
   /* set_width_constraint(&constraints, window.width, UI_CONSTRAINT_FIXED); */
   /* set_height_constraint(&constraints, window.height, UI_CONSTRAINT_FIXED); */
 
-  Alignment align = ALIGN_TOP_RIGHT;
+  Alignment align = ALIGN_CENTER;
   int font_size = 72.0f;
 
   Sizef text_size = calculate_text_size(win_text, font_size);
 
   set_x_constraint(&constraints, 0, UI_CONSTRAINT_FIXED);
   set_y_constraint(&constraints, 0, UI_CONSTRAINT_FIXED);
-  set_width_constraint(&constraints, text_size.width, UI_CONSTRAINT_FIXED);
-  set_height_constraint(&constraints, text_size.height, UI_CONSTRAINT_FIXED);
+  set_width_constraint(&constraints, 200, UI_CONSTRAINT_FIXED);
+  set_height_constraint(&constraints, 200, UI_CONSTRAINT_FIXED);
 
-  draw_quad(constraints, &bg_color, align);
+  draw_quad(constraints, &bg_color, 100.00, ALIGN_TOP_LEFT);
+  draw_quad(constraints, &bg_color, 0.50, ALIGN_BOTTOM_RIGHT);
+  draw_quad(constraints, &bg_color, 0.0, align);
 
   draw_text(win_text, font_size, (Vec2f){0.0, 0.0}, &text_color, align);
 }

shaders/font.frag

@@ -1,11 +1,11 @@
 #version 330 core
-in vec2 TexCoords;
+in vec2 v_TexCoords;
 out vec4 FragColor;
 
 uniform sampler2D text;
 uniform vec4 textColor;
 
 void main() {
-  vec4 sampled = vec4(1.0, 1.0, 1.0, texture(text, TexCoords).r);
+  vec4 sampled = vec4(1.0, 1.0, 1.0, texture(text, v_TexCoords).r);
   FragColor = textColor * sampled;
 }

shaders/font.vert

@@ -1,11 +0,0 @@
-#version 330 core
-layout (location = 0) in vec4 vertex;
-
-out vec2 TexCoords;
-uniform mat4 projection;
-uniform mat4 model;
-
-void main() {
-  gl_Position = projection * model * vec4(vertex.xy, 0.0, 1.0);
-  TexCoords = vertex.zw;
-}

shaders/ui.frag

@@ -1,9 +1,33 @@
 #version 330 core
 
-in vec2 texCoords;
+in vec2 v_TexCoords;
 out vec4 FragColor;
+
 uniform vec4 aColor;
+uniform float borderRadius;
+uniform float uiWidth;
+uniform float uiHeight;
+
+const float smoothness = 1.0;
 
 void main() {
-  FragColor = vec4(aColor);
+  float alpha = aColor.a;
+
+  if (borderRadius > 0.0) {
+    vec2 dimensions = v_TexCoords * vec2(uiWidth, uiHeight);
+    float xMax = uiWidth - borderRadius;
+    float yMax = uiHeight - borderRadius;
+
+    if (dimensions.x < borderRadius && dimensions.y < borderRadius) {
+      alpha *= 1.0 - smoothstep(borderRadius - smoothness, borderRadius + smoothness, length(dimensions - vec2(borderRadius)));
+    } else if (dimensions.x < borderRadius && dimensions.y > yMax) {
+      alpha *= 1.0 - smoothstep(borderRadius - smoothness, borderRadius + smoothness, length(dimensions - vec2(borderRadius, yMax)));
+    } else if (dimensions.x > xMax && dimensions.y < borderRadius) {
+      alpha *= 1.0 - smoothstep(borderRadius - smoothness, borderRadius + smoothness, length(dimensions - vec2(xMax, borderRadius)));
+    } else if (dimensions.x > xMax && dimensions.y > yMax) {
+      alpha *= 1.0 - smoothstep(borderRadius - smoothness, borderRadius + smoothness, length(dimensions - vec2(xMax, yMax)));
+    }
+  }
+
+  FragColor = vec4(aColor.rgb, alpha);
 }

shaders/ui.vert

@@ -1,11 +1,11 @@
 #version 330 core
-layout (location = 0) in vec3 aPos;
-layout (location = 1) in vec2 aTexCoords;
-out vec2 texCoords;
+layout (location = 0) in vec4 vertex;
 
+out vec2 v_TexCoords;
 uniform mat4 projection;
+uniform mat4 model;
 
 void main() {
-  gl_Position = projection * vec4(aPos, 1.0f);
-  texCoords = aTexCoords;
+  gl_Position = projection * model * vec4(vertex.xy, 0.0, 1.0);
+  v_TexCoords = vertex.zw;
 }

todo.txt

@@ -0,0 +1,4 @@
+- draw functions for other primitive shapes (circle, triangle?)
+- border decorations for shapes
+- look into SDF/vector text
+- unicode support?

ui.c

@@ -96,10 +96,9 @@ int init_ui(const char* font_path, Size window_size) {
     return 1;
   }
 
-  font_shader = create_shader("shaders/font.vert", "shaders/font.frag");
+  font_shader = create_shader("shaders/ui.vert", "shaders/font.frag");
   ui_shader = create_shader("shaders/ui.vert", "shaders/ui.frag");
 
-
   glGenVertexArrays(1, &font_vao);
   glGenVertexArrays(1, &ui_vao);
   glGenBuffers(1, &font_vbo);
@@ -359,7 +358,7 @@ void apply_alignment(Alignment align, Vec2f *pos, Sizef size) {
   }
 }
 
-void draw_quad(UIConstraints constraints, Color *color, Alignment align) {
+void draw_quad(UIConstraints constraints, Color *color, float border_radius, Alignment align) {
   use_shader(ui_shader);
 
   if (color) {
@@ -368,7 +367,14 @@ void draw_quad(UIConstraints constraints, Color *color, Alignment align) {
     set_vec4f(ui_shader, "aColor", 0.f, 0.f, 0.f, 1.f);
   }
 
+  printf("width: %f, height: %f\n", constraints.width, constraints.height);
+  set_float(ui_shader, "uiWidth", constraints.width);
+  set_float(ui_shader, "uiHeight", constraints.height);
+  set_float(ui_shader, "borderRadius", border_radius);
   set_mat4f(ui_shader, "projection", (float *)zephr_context.projection.m);
+  Matrix4x4 model = identity();
+
+  set_mat4f(font_shader, "model", (float *)model.m);
 
   glBindVertexArray(ui_vao);
 
@@ -379,10 +385,12 @@ void draw_quad(UIConstraints constraints, Color *color, Alignment align) {
   apply_alignment(align, &pos, size);
 
   float vertices[6][4] = {
+    // bottom left tri
     {pos.x,              pos.y + size.height, 0.0, 1.0},
     {pos.x,              pos.y,               0.0, 0.0},
     {pos.x + size.width, pos.y,               1.0, 0.0},
 
+    // top right tri
     {pos.x,              pos.y + size.height, 0.0, 1.0},
     {pos.x + size.width, pos.y,               1.0, 0.0},
     {pos.x + size.width, pos.y + size.height, 1.0, 1.0},
@@ -443,12 +451,12 @@ void draw_text(const char* text, int font_size, Vec2f pos, Color *color, Alignme
     apply_alignment(alignment, &final_pos, (Sizef){ text_size.width * font_scale, text_size.height * font_scale });
 
     float vertices[6][4] = {
-      // top left tri
+      // bottom left tri
       {final_pos.x,     final_pos.y + h, 0.0, 1.0},
       {final_pos.x,     final_pos.y,     0.0, 0.0},
       {final_pos.x + w, final_pos.y,     1.0, 0.0},
 
-      // bottom right tri
+      // top right tri
       {final_pos.x,     final_pos.y + h, 0.0, 1.0},
       {final_pos.x + w, final_pos.y,     1.0, 0.0},
       {final_pos.x + w, final_pos.y + h, 1.0, 1.0},

ui.h

@@ -81,6 +81,6 @@ void set_x_constraint(UIConstraints *constraints, float value, UIConstraint type
 void set_y_constraint(UIConstraints *constraints, float value, UIConstraint type);
 void set_width_constraint(UIConstraints *constraints, float value, UIConstraint type);
 void set_height_constraint(UIConstraints *constraints, float value, UIConstraint type);
-void draw_quad(UIConstraints constraints, Color *color, Alignment align);
+void draw_quad(UIConstraints constraints, Color *color, float border_radius, Alignment align);
 void draw_text(const char* text, int font_size, Vec2f pos, Color *color, Alignment align);
 Sizef calculate_text_size(const char *text, int font_size);