To master the shape generation in shader you need to understand how shader programs run for each pixel and shade them. This tutorial gives you the basic understanding of how you can visualize and draw any shape.
Imagine a texture(Image) with a bunch of blank pixels as shown in the below image, and you have to shade each pixel one by one in order to generate the shape. Where uv denote the axes of 2D texture, as x, y and z are already used to denote the axes of the 3d object in model space. These uv are in Normalised Device Coordinate (NDC) space i.e (0.0 to 1.0).

Observed above image carefully how your screen coordinate are plot, these coordinate are on NDC (Normalize Device Coordinate). Assume you have the above screen with uv, Let’s take some examples to understand how we can shade these pixels.

Ex1. Can we shade half of the screen with red and the other half with green?

CODE HERE

{"attributes":{"post_id":228,"defaultIndex":1,"editorSize":[500,300]},"isServer":false,"root_url":"https:\/\/programmerbuddy.com","nonce":"59beb196f8"}

Ex2. Shade the middle pixel of the screen with green square?

{"attributes":{"post_id":230,"defaultIndex":1,"editorSize":[500,300]},"isServer":false,"root_url":"https:\/\/programmerbuddy.com","nonce":"59beb196f8"}

Ex 3. Move the square using sin movement.

{"attributes":{"post_id":231,"defaultIndex":1,"editorSize":[500,300]},"isServer":false,"root_url":"https:\/\/programmerbuddy.com","nonce":"59beb196f8"}