Axes for glsl coordinate systems, based on tutorials https://www.shadertoy.com/view/Md23DV

coordinate-system-axes.glsl

//uniform vec2 resolution

void main() {
  //coordinate systems
  vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0; // Is [-1, 1] coordinate system
  vec2 p = vec2(gl_FragCoord.xy/resolution.xy); //[0,1] coordinate system
  
  //Set background color
  vec3 bgCol = vec3(0.0); // black
  vec3 pixel = bgCol;
  
  vec3 rAxesColor = vec3(0.537, 1.0, 0.364);
  float rAxesThickness = 0.006;
  
  vec3 pAxesColor = vec3(1.0, 0.412, 0.635);
  float pAxesThickness = 0.008;
  
  //Grid tick size
  const float tickWidth = 0.1;
  const float tickLineThickness = 0.002;
  vec3 gridColor = vec3(0.5);   
  
  // --------------------------------------
  // --------------------------------------
  // -------- Start Fancy Code ------------
  // --------   "Code Here"   -------------
  // -------- End Fancy Code---------------
  // --------------------------------------
  // --------------------------------------
  
  //Draw r grid lines
  for(float i = -1.0; i < 1.0; i +=tickWidth) {
  	//i is the line coordinate;
    if(abs(r.x - i)< tickLineThickness) pixel = gridColor;
    if(abs(r.y - i)< tickLineThickness) pixel = gridColor;
  }
  
  //Draw p grid lines
  for(float i = -1.0; i < 1.0; i +=tickWidth) {
  	//i is the line coordinate;
    if(abs(p.x - i)< tickLineThickness) pixel = gridColor;
    if(abs(p.y - i)< tickLineThickness) pixel = gridColor;
  }
  
  //[0,1] coordinat system axes
  if(abs(p.x) < pAxesThickness) pixel = pAxesColor;
  if(abs(p.y) < pAxesThickness) pixel = pAxesColor;
  
  //[-1,1] coordinat system axes
  if(abs(r.x) < rAxesThickness) pixel = rAxesColor;
  if(abs(r.y) < rAxesThickness) pixel = rAxesColor;
  
  //Final output
  gl_FragColor = vec4(pixel, 1.0);
}

TODO

• Turn into function(s)? But need to render the grid and axes last or they will be overwritten. 🤔
  • output coordinate system
  • output pixel color
  • can you output both?
• optimize