Rendering Gradients?

[scurtyParticipant]

Hate to be “that guy” my knowledge of rendering of no0b level.
How does one draw this kind of primitive using mojo? Or does it have to be done in GL?
To be clear without an Image if possible.
I see DrawPrimitives() though not sure how to utilize the arguments.

[EthernautParticipant]

I’m not passing texture coordinates or an image, just the vertex coordinates and the colors for each vertex.
You could turn this into a function that draws the primitive using rotation, etc.

Notice that you can have each vertex a different color to get a 4 color gradient!

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Global verts:= New Stack<Float> Global colors:= New Stack<UInt> Method New( title:String="Gradient",width:Int=800,height:Int=600,flags:WindowFlags=WindowFlags.Resizable ) Super.New( title,width,height,flags ) 'vertex pairs: top left, top right, bottom right, bottom left verts.AddAll( New Float[]( 100, 100, Width-100, 100, Width-100, Height-100, 100, Height-100 ) ) 'colors: same order as vertex pairs colors.AddAll( New UInt[]( RGBA( Color.Red ), RGBA( Color.Yellow ), RGBA( Color.Yellow ), RGBA( Color.Red ) ) ) ClearColor = Color.DarkGrey End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawPrimitives( 4, verts.Length/8, verts.Data.Data, 8, Null, 8, colors.Data.Data, 4, Null, Null ) End End Function Main() New AppInstance New MyWindow App.Run() End Function RGBA:UInt( c:Color ) Return UInt(c.a*255) Shl 24 | UInt(c.b*255) Shl 16 | UInt(c.g*255) Shl 8 | UInt(c.r*255) End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Class MyWindow Extends Window Global verts:= New Stack<Float> Global colors:= New Stack<UInt>   Method New( title:String="Gradient",width:Int=800,height:Int=600,flags:WindowFlags=WindowFlags.Resizable ) Super.New( title,width,height,flags ) 'vertex pairs: top left, top right, bottom right, bottom left verts.AddAll( New Float[]( 100, 100, Width-100, 100, Width-100, Height-100, 100, Height-100 ) ) 'colors: same order as vertex pairs colors.AddAll( New UInt[]( RGBA( Color.Red ), RGBA( Color.Yellow ), RGBA( Color.Yellow ), RGBA( Color.Red ) ) ) ClearColor = Color.DarkGrey End   Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawPrimitives( 4, verts.Length/8, verts.Data.Data, 8, Null, 8, colors.Data.Data, 4, Null, Null ) End End   Function Main() New AppInstance New MyWindow App.Run() End     Function RGBA:UInt( c:Color ) Return UInt(c.a*255) Shl 24 | UInt(c.b*255) Shl 16 | UInt(c.g*255) Shl 8 | UInt(c.r*255) End

[nerobotParticipant]

Nice!

One note about converting Color into UInt:

Monkey

Function RGBA:UInt( c:Color ) Return UInt(c.a*255) Shl 24 | UInt(c.b*255) Shl 16 | UInt(c.g*255) Shl 8 | UInt(c.r*255) End

1 2 3

Function RGBA:UInt( c:Color ) Return UInt(c.a*255) Shl 24 | UInt(c.b*255) Shl 16 | UInt(c.g*255) Shl 8 | UInt(c.r*255) End

There is an ABGR format! I suppose, it’s a native opengl format.

That’s why if you write color as $FF0000FF you’ll get Red color but you can expect Blue here.

[scurtyParticipant]

Fantastic! So much better than what I was gonna do. Thanks.

[EthernautParticipant]

There is an ABGR format

Thanks, I was wondering about that.
When I tried actual RGBA order I was getting the wrong colors and didn’t know why!

[Mark SiblyKeymaster]

Hmmm, I could possibly add a ‘GradientColors’ array or similar to canvas for this?

[nerobotParticipant]

Something like:

Monkey

DrawGradientRect( r:Rectf,startColor:Color,endColor:Color,rotation:Float=0 ) (and the same with x,y,w,h for bounds) DrawGradientCircle( origin:Vec2f,radius:Float,centerColor:Color,partsColors:Color[],partsPercentage:Float[] ) (and the same with x,y for origin)

1 2 3 4 5

DrawGradientRect( r:Rectf,startColor:Color,endColor:Color,rotation:Float=0 ) (and the same with x,y,w,h for bounds)   DrawGradientCircle( origin:Vec2f,radius:Float,centerColor:Color,partsColors:Color[],partsPercentage:Float[] ) (and the same with x,y for origin)

Don’t know how to implement Circle gradient, but maybe you know.

Or to make centerColor an usual part with percentage of 0% and to remove this parameter.

And a custom case for circle is using 2 colors – center and outer:

Monkey

DrawGradientCircle( 50,50,200,Color.Pink,New Color[](Color.Sky),New Float[](1) ) ' draws circle at 50,50 with radius 200 with colors from Pink at center to Sky at the outer radius; 1 = 100%

1 2	DrawGradientCircle( 50,50,200,Color.Pink,New Color[](Color.Sky),New Float[](1) ) ' draws circle at 50,50 with radius 200 with colors from Pink at center to Sky at the outer radius; 1 = 100%

[scurtyParticipant]

That would be cute, lovely and waay easier than accessing the raw pointer from an Array.
I picture:

Monkey

Local GradientColors = New GradientColor(points_array, colors_array) ' then on render Canvas.DrawPolyGradient(poly_points_array, GradientColors) ' or Canvas.ColorContext = GradientColors Canvas.DrawCircle(bleh)

1 2 3 4 5 6 7 8 9

Local GradientColors = New GradientColor(points_array, colors_array)   ' then on render   Canvas.DrawPolyGradient(poly_points_array, GradientColors)   ' or Canvas.ColorContext = GradientColors Canvas.DrawCircle(bleh)

 

ColorContext would be new of course. Or just use .Color and have GradientColor extend Color

[Author]

Posts