Draw Half Circle Mapbox Gl

Shapes

Finally! Nosotros have been edifice skills for this moment! You have learned most of the GLSL foundations, types and functions. Yous accept expert your shaping equations over and over. At present is the time to put it all together. You are upwards for this challenge! In this chapter you'll learn how to draw uncomplicated shapes in a parallel procedural fashion.

Rectangle

Imagine nosotros have grid paper like nosotros used in math classes and our homework is to describe a square. The paper size is 10x10 and the square is supposed to be 8x8. What will you practise?

You lot'd paint everything except the outset and last rows and the first and concluding cavalcade, right?

How does this relate to shaders? Each little foursquare of our filigree paper is a thread (a pixel). Each little foursquare knows its position, like the coordinates of a chess board. In previous chapters nosotros mapped 10 and y to the red and green color channels, and we learned how to utilise the narrow ii dimensional territory betwixt 0.0 and 1.0. How can we use this to draw a centered square in the middle of our billboard?

Let's get-go past sketching pseudocode that uses if statements over the spatial field. The principles to do this are remarkably similar to how we think of the filigree paper scenario.

          if ( (X GREATER THAN ane) AND (Y GREATER THAN ane) )     pigment white else     paint black        

At present that we accept a better idea of how this will work, permit's replace the if statement with step(), and instead of using 10x10 allow'southward utilize normalized values between 0.0 and ane.0:

          compatible vec2 u_resolution;  void chief(){     vec2 st = gl_FragCoord.xy/u_resolution.xy;     vec3 color = vec3(0.0);      // Each result will return i.0 (white) or 0.0 (blackness).     float left = stride(0.1,st.x);   // Similar to ( 10 greater than 0.1 )     float bottom = pace(0.i,st.y); // Like to ( Y greater than 0.1 )      // The multiplication of left*lesser will be like to the logical AND.     color = vec3( left * lesser );      gl_FragColor = vec4(color,1.0); }        

The step() office will plough every pixel beneath 0.ane to black (vec3(0.0)) and the remainder to white (vec3(1.0)) . The multiplication between left and lesser works as a logical AND operation, where both must be 1.0 to return 1.0 . This draws two blackness lines, i on the bottom and the other on the left side of the canvas.

In the previous code nosotros repeat the structure for each axis (left and bottom). We can save some lines of code by passing two values directly to stride() instead of ane. That looks like this:

          vec2 borders = step(vec2(0.1),st); bladder pct = borders.x * borders.y;        

So far, nosotros've only drawn ii borders (bottom-left) of our rectangle. Allow's do the other ii (top-correct). Check out the following lawmaking:

Uncomment lines 21-22 and see how nosotros invert the st coordinates and repeat the aforementioned step() function. That mode the vec2(0.0,0.0) will exist in the tiptop right corner. This is the digital equivalent of flipping the folio and repeating the previous procedure.

Take note that in lines xviii and 22 all of the sides are being multiplied together. This is equivalent to writing:

          vec2 bl = step(vec2(0.one),st);       // bottom-left vec2 tr = pace(vec2(0.one),1.0-st);   // top-right color = vec3(bl.x * bl.y * tr.x * tr.y);        

Interesting right? This technique is all about using step() and multiplication for logical operations and flipping the coordinates.

Before going forward, endeavour the following exercises:

• Change the size and proportions of the rectangle.

• Experiment with the same code but using smoothstep() instead of step(). Note that by irresolute values, you can go from blurred edges to elegant smooth borders.

• Practice some other implementation that uses floor().

• Cull the implementation you lot similar the near and make a office of it that you lot can reuse in the future. Make your function flexible and efficient.

• Make another role that just draws the outline of a rectangle.

• How do yous think you can motion and place dissimilar rectangles in the same billboard? If you figure out how, show off your skills by making a composition of rectangles and colors that resembles a Piet Mondrian painting.

Circles

It's piece of cake to draw squares on grid paper and rectangles on cartesian coordinates, but circles crave another approach, especially since we need a "per-pixel" algorithm. One solution is to re-map the spatial coordinates so that nosotros can use a step() function to draw a circle.

How? Let's start by going back to math grade and the grid paper, where we opened a compass to the radius of a circle, pressed one of the compass points at the center of the circle and and so traced the edge of the circle with a simple spin.

Translating this to a shader where each square on the grid paper is a pixel implies asking each pixel (or thread) if information technology is inside the area of the circle. We do this by computing the distance from the pixel to the centre of the circle.

In that location are several ways to calculate that distance. The easiest one uses the altitude() function, which internally computes the length() of the divergence betwixt two points (in our instance the pixel coordinate and the center of the sheet). The length() function is nil just a shortcut of the hypotenuse equation that uses foursquare root (sqrt()) internally.

You lot can utilise distance(), length() or sqrt() to calculate the distance to the center of the billboard. The following lawmaking contains these three functions and the not-surprising fact that each one returns exactly aforementioned result.

• Comment and uncomment lines to endeavor the different means to go the same outcome.

In the previous case nosotros map the altitude to the eye of the billboard to the color brightness of the pixel. The closer a pixel is to the centre, the lower (darker) value information technology has. Notice that the values don't get too high considering from the eye ( vec2(0.v, 0.5) ) the maximum distance barely goes over 0.5. Contemplate this map and call back:

• What you lot can infer from information technology?

• How we can use this to draw a circumvolve?

• Alter the in a higher place code in society to contain the entire round gradient inside the canvas.

Distance field

Nosotros tin also recall of the above example as an distance map, where darker implies taller. The gradient shows us something similar to the design fabricated past a cone. Imagine yourself on the top of that cone. The horizontal distance to the edge of the cone is 0.5. This will be constant in all directions. By choosing where to "cutting" the cone you will become a bigger or smaller circular surface.

Basically we are using a re-interpretation of the space (based on the distance to the center) to brand shapes. This technique is known as a "altitude field" and is used in different ways from font outlines to 3D graphics.

Try the following exercises:

• Use step() to turn everything above 0.five to white and everything below to 0.0.

• Changed the colors of the background and foreground.

• Using smoothstep(), experiment with dissimilar values to get prissy smooth borders on your circle.

• In one case you are happy with an implementation, make a role of it that you can reuse in the futurity.

• Add together colour to the circumvolve.

• Can y'all animate your circle to grow and shrink, simulating a beating center? (You tin can go some inspiration from the animation in the previous chapter.)

• What virtually moving this circumvolve? Can y'all motility it and identify different circles in a single billboard?

• What happens if you lot combine distances fields together using different functions and operations?

          percent = altitude(st,vec2(0.four)) + altitude(st,vec2(0.6)); pct = altitude(st,vec2(0.4)) * distance(st,vec2(0.6)); pct = min(distance(st,vec2(0.iv)),altitude(st,vec2(0.half dozen))); percent = max(distance(st,vec2(0.4)),distance(st,vec2(0.half dozen))); pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));        

• Make iii compositions using this technique. If they are animated, fifty-fifty better!

For your tool box

In terms of computational power the sqrt() office - and all the functions that depend on it - can exist expensive. Here is another way to create a round distance field by using dot() product.

Useful properties of a Distance Field

Distance fields tin can be used to describe most everything. Obviously the more complex a shape is, the more complicated its equation will be, but once you have the formula to make altitude fields of a particular shape it is very easy to combine and/or utilise effects to it, like shine edges and multiple outlines. Because of this, distance fields are popular in font rendering, like Mapbox GL Labels, Matt DesLauriers Textile Design Fonts and as is described on Chapter 7 of iPhone 3D Programming, O'Reilly.

Have a look at the following code.

We get-go by moving the coordinate arrangement to the center and shrinking it in half in order to remap the position values betwixt -ane and 1. Also on line 24 we are visualizing the distance field values using a fract() function making information technology piece of cake to run across the design they create. The distance field pattern repeats over and over similar rings in a Zen garden.

Let's take a wait at the distance field formula on line 19. There we are calculating the distance to the position on (.3,.3) or vec3(.3) in all iv quadrants (that's what abs() is doing there).

If you uncomment line 20, you will note that we are combining the distances to these iv points using the min() to goose egg. The result produces an interesting new pattern.

Now effort uncommenting line 21; we are doing the same but using the max() function. The effect is a rectangle with rounded corners. Notation how the rings of the distance field become smoother the further away they get from the middle.

Finish uncommenting lines 27 to 29 one by one to sympathize the different uses of a distance field design.

Polar shapes

In the affiliate well-nigh colour we map the cartesian coordinates to polar coordinates by computing the radius and angles of each pixel with the following formula:

          vec2 pos = vec2(0.5)-st; float r = length(pos)*2.0; float a = atan(pos.y,pos.ten);        

We utilise office of this formula at the showtime of the affiliate to depict a circle. We calculated the altitude to the center using length(). Now that we know near distance fields nosotros tin can acquire another fashion of drawing shapes using polar coordinates.

This technique is a fiddling restrictive but very unproblematic. It consists of changing the radius of a circumvolve depending on the angle to attain dissimilar shapes. How does the modulation work? Yeah, using shaping functions!

Below you lot will find the aforementioned functions in the cartesian graph and in a polar coordinates shader example (between lines 21 and 25). Uncomment the functions one-by-one, paying attention the relationship between one coordinate organisation and the other.

Effort to:

• Animate these shapes.
• Combine different shaping functions to cut holes in the shape to make flowers, snowflakes and gears.
• Apply the plot() function we were using in the Shaping Functions Chapter to describe merely the contour.

Combining powers

At present that we've learned how to modulate the radius of a circle co-ordinate to the bending using the atan() to draw different shapes, we can larn how use atan() with distance fields and apply all the tricks and effects possible with distance fields.

The trick will use the number of edges of a polygon to construct the distance field using polar coordinates. Check out the following lawmaking from Andrew Baldwin.

• Using this instance, make a function that inputs the position and number of corners of a desired shape and returns a altitude field value.

• Mix distance fields together using min() and max().

• Choose a geometric logo to replicate using distance fields.

Congratulations! You have made it through the rough office! Take a break and let these concepts settle - drawing elementary shapes in Processing is easy but non here. In shader-land drawing shapes is twisted, and it tin exist exhausting to accommodate to this new paradigm of coding.

Down at the cease of this chapter you will find a link to PixelSpirit Deck this deck of cards will aid you learn new SDF functions, compose them into your designs and use on your shaders. The deck has a progressive learning curve, then taking one card a day and working on it will button and claiming your skills for months.

Now that y'all know how to depict shapes I'one thousand sure new ideas will pop into your heed. In the post-obit chapter you lot volition learn how to move, rotate and scale shapes. This will allow y'all to brand compositions!

owenlondied1962.blogspot.com

Source: https://thebookofshaders.com/07/

Share this post