Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
EnTerr
Level 8

How to draw a triangle?

I'd like to draw a solid triangle either to screen or a bitmap that i can later use - how is this simple task to be accomplished?
Triangle will be a simple color (no pattern), partially transparent (yes alpha). I am looking at ifDraw2D and see no means for that. Graphic libraries usually have a polygon-fill primitive, which i's even better - but i could live with a mere triangle (any polygon can be broken down to triangles anyway). No flood-fill either.

Drawing it with line segments, one end pinned at vertex A while the other end loops from B to C won't work - color intensity near A will be higher than near BC due to alpha blending/addition of the lines. Don't want to use pre-rasterized images in consideration of different screen resolutions (don't want diagonal lines jagged by scaling) - also the number of images needed will be too big to package with channel.
0 Kudos
18 Replies
TheEndless
Level 7

Re: How to draw a triangle?

You can't draw a filled triangle (or a circle, or a polygon, or...) with the 2D API. If you want to hack it, you could potentially draw a rectangle, rotate it to the desired angle, clip it and then rotate it back. Or, you could carve it out of a rectangle with a fully transparent rectangle rotated to the desired angles and drawn on top with alpha blending disabled.
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
squirreltown
Level 9

Re: How to draw a triangle?

Endless beat me to it but it seems the only way is to hack it with squares and rectangles. Pretty glaring omission from a 2D API. IMO.

Library "v30/bslDefender.brs"
Sub Main()
font_registry = CreateObject("roFontRegistry")
font = font_registry.GetDefaultFont()
codes = bslUniversalControlEventCodes()
m.screen=CreateObject("roScreen", true)
m.msgport=CreateObject("roMessagePort")
m.screen.SetPort(m.msgport)
m.screen.Clear(&h394837FF)
m.screen.SetAlphaEnable(true)
m.screen.DrawText("background", 530, 250, &hebebebFF, font)

square = CreateObject("roBitmap", {width: 400, height: 400, AlphaEnable: true})
square.Clear(&h25344399)
rect = CreateObject("roBitmap", {width: 565, height: 280, AlphaEnable: false})
rect.drawRotatedobject( 0, 285, 45, square)
m.screen.drawobject(357, 220, rect)
m.screen.Swapbuffers()
rowrow = 0

while true
m.screen.Clear(&h394837FF)
m.screen.DrawText("background", 530, 250, &hebebebFF, font)
msg = m.msgport.getmessage()
if type(msg) = "roUniversalControlEvent"
button = msg.getint()
if button=codes.BUTTON_RIGHT_PRESSED
rowrow = rowrow + 45
m.screen.drawRotatedobject(357, 220, rowrow, rect)
m.screen.Swapbuffers()
end if
end if
end while
End Sub
Kinetics Screensavers
0 Kudos
EnTerr
Level 8

Re: How to draw a triangle?

"TheEndless" wrote:
If you want to hack it, you could potentially draw a rectangle, rotate it to the desired angle, clip it and then rotate it back. Or, you could carve it out of a rectangle with a fully transparent rectangle rotated to the desired angles and drawn on top with alpha blending disabled.

That surely is an evil hack but i am interested in trying it. I understand it conceptually but for now the 2D mechanics (esp. roRegions) are way over my head. Can you sketch the two approaches - as sequence of steps/components used to form triangle in a new bitmap? Broad strokes, no need code to work or make actual triangle - i can RTFM and try for the rest.
0 Kudos
TheEndless
Level 7

Re: How to draw a triangle?

Actually, nevermind. It seems that DrawRotatedObject() only supports arbitrary angles on devices with OpenGL support. I guess that's why they never updated the documentation.

The only other way I can think to do it would be something like this, but it's likely to produce jaggies. It does run faster than I expected, though...
' This will create a right triangle lying on its long side
' Create a bitmap the size of the outer bounds of the triangle
' Make sure alpha enable is false, so the lines cut through the bitmap
triangle = CreateObject("roBitmap", { Width: 400, Height: 200, AlphaEnable: False })
' Clear the bitmap to the color you want
triangle.Clear(&HFFFFFFFF)
' Clear out the left slope
For x = 0 To 200
triangle.DrawLine(x, 0, x - 200, 200, &H00000000)
Next
' Clear out the right slope
For x = 200 To 400
triangle.DrawLine(x, 0, x + 200, 200, &H00000000)
Next
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
EnTerr
Level 8

Re: How to draw a triangle?

"TheEndless" wrote:
It seems that DrawRotatedObject() only supports arbitrary angles on devices with OpenGL support. I guess that's why they never updated the documentation.


What! :shock:
You mean the 27x0 line (RokuLT/Roku1/Roku2) - the joy and pride of RokuCo from Sep 2013 - cannot rotate to angles <> 90*n ?
What about Roku3, can it?

This shatters my belief, which was based on viewtopic.php?f=34&t=56314&p=432102#p432100
The suspicious silence of Roku* on the question suddenly seems to speak volumes. Smiley Surprisedops:
0 Kudos
TheEndless
Level 7

Re: How to draw a triangle?

"EnTerr" wrote:
"TheEndless" wrote:
It seems that DrawRotatedObject() only supports arbitrary angles on devices with OpenGL support. I guess that's why they never updated the documentation.


What! :shock:
You mean the 27x0 line (RokuLT/Roku1/Roku2) - the joy and pride of RokuCo from Sep 2013 - cannot rotate to angles <> 90*n ?
What about Roku3, can it?

This shatters my belief, which was based on viewtopic.php?f=34&t=56314&p=432102#p432100
The suspicious silence of Roku* on the question suddenly seems to speak volumes. Smiley Surprisedops:

I'm guessing at the "OpenGL" support being required, but if it is, then it should work on Roku 3. I have my dev Roku 3 disconnected at the moment, to avoid the temptation to use it while I work on a 2D API channel, so I can't test it right now...
My Channels: http://roku.permanence.com - Twitter: @TheEndlessDev
Instant Watch Browser (NetflixIWB), Aquarium Screensaver (AQUARIUM), Clever Clocks Screensaver (CLEVERCLOCKS), iTunes Podcasts (ITPC), My Channels (MYCHANNELS)
0 Kudos
NewManLiving
Level 7

Re: How to draw a triangle?

Here is a quick ROKU 3 example, since I don't have your will power. I unplugged my 2XD

 
Screen = CreateObject( "roScreen", True )
Screen.Clear( &hFFFFFFFF )
Screen.SwapBuffers()

bitmap = CreateObject( "roBitmap", { width: 200, height: 200 , AlphaEnable: False } )
bitmap.Clear( &h911820FF )
width = bitmap.GetWidth()
height = bitmap.GetHeight()
region = CreateObject( "roRegion", bitmap, 0, 0, width, height )

x = int( width / 2 )
y = int( height / 2 )
region.SetPretranslation( -x, -y )

for theta = 360 to 0 step -1
Screen.Clear( &hFFFFFFFF )
Screen.DrawRotatedObject( 100 + x, 100 + y, theta, region )
Screen.SwapBuffers()
end for
My Channels: 2D API Framework Presentation: https://owner.roku.com/add/2M9LCVC
Updated: 11-11-2015 - Completed Keyboard interface
The Joel Channel ( Final Beta )
0 Kudos
EnTerr
Level 8

A Universe of Triangles

If an "Ode to the triangle" were needed, this video would do:
https://www.youtube.com/watch?v=KdyvizaygyY
0 Kudos
MazeWizzard
Level 7

Re: How to draw a triangle?

I know this thread is a bit old, but since triangles are so common I thought I'd relay what I think is an important point...

You CAN draw solid-color triangles with any arbitrary 3 points as corners. You won't be able to draw them quickly though, and you'll need to do a lot of computation in B.Script.
Google/Bing/Search for "triangle rasterizer" and also maybe "Graphics Gems". There's even logic for triangle rasterization published in that Graphics Gems book (Maybe vol III...I don't remember) if you can find it.

Basically, you decide which side (left/top or right/bottom) will get it's end-points included, and then draw horizontal lines at the proper starting points and ending points moving from top to bottom. Think TV scan lines as the horizontal lines you're drawing where they "fit" the triangle.

This type of stuff was common in "the old days" before GPUs.

This can be extended to other shapes also...polygons and even circles. Convex shapes or concave shapes where no horizontal line crosses multiple start/end points. You basically do the computations for the edges of the "scan line overlap" (AKA rasterize the shape) and pass an array of points to a rasterizer-drawing routine that draws the horizontal lines in a given color.

It's slow in B.Script though. I wrote a simple one a year or two ago, but it wasn't fast enough for my needs so I abandoned it. Maybe you'll do better. Once you have the shape, you can always put it in a texture and blit it quickly...until you need to "reshape" it. Then you re-compute.
0 Kudos