Posts

Showing posts from June, 2022

step and smoothstep functions, drawing a line

float f =step(0.3, uv.x); this will return 0 where uv.x is less than 0.3 and will return 1 where uv.x is greater than 0.3 graphically this would produce a black rectangle taking up 30% of the horizontal. (or a white rectangle taking up 70% of it on the other side) The smoothstep function provides a nice blend between two values. float g=smoothstep (0.2,0.8,uv.x); now if you assign this to a colour output, you'll see a nice gradient, starting black from roughly 20% to white at 80% along the horizontal. With this in mind, it is possible to plot a line using smoothsteps. float plot(vec2 uv, float line){   return  smoothstep( line-0.02, line, uv.y) -           smoothstep( line, line+0.02, uv.y); } looking at the code you might be able to guess that we're just taking the areas slightly above and below the line's function and subtracting. The 0.02 would define the thickness of said line. In the main function of our shader, we'd call plot like this -  float f=plot(uv,g); then

kodelife/glsl drawing a circle (sdf)

 Below is the main function for drawing a circle. Let's go through the important parts of the code. Firstly vec2 uv =inData.v_texcoord-0.5; we subtract 0.5 from the uv vector so that we get the 0 value in the centre. (by default 0 is at the bottom left corner) vec2 gv=fract(uv*5)-0.5; We copy the pattern across by multiplying the uv. By using fract we get the fractional values that exist within each smaller uv space. The 0.5 subtraction is to shift the 0 point back to the centre - the fract values will run from 0 to 1 otherwise. Next up, the circle float d=length(gv); float r=0.3; float m=smoothstep(r,r*0.4,d); Here we calculate the distance a pixel is from the centre (now set correctly because of the -0.5 above), by using the length function. We then define our desired circle radius as "r" & give it a value. Next, we use a smoothstep of r & a slightly smaller r, testing against the pixel's distance, to see if it is within the circle or not. This value is stor

kodelife/glsl noise

I had been cluttering up my Unity notes blog with GLSL/Kodelife stuff, so I've made this new page here... Below is some code that generates some smooth looking noise. It isn't very complex, but it's probably good enough to get you going. Using code from The Art of Code youtube channel. Let's break down the important functions and see how they feed into one another. float N21(vec2 p){     return fract(sin(p.x*1000.0+p.y*6832.0)*5224.0); } This function takes a vector 2 "p", which is actually going to be our uv coordinate & multiplies each component(x and y) by two arbitrary large numbers , before getting the sine value. This small value is then multiplied by another large number, and then only the fractional part of that value is returned. On it's own, this will return nice static tv/white noise kinda values. You might call it in the main function like this - float c= N21(uv*4.0)   Next up, is  float smoothNoise(vec2 uv){     vec2 lv=fract(uv)