bluenic
Posts: 3
Joined: Sat Nov 01, 2014 6:37 pm

How to rotate graphics at any angle?

Sat Nov 01, 2014 6:58 pm

Hi,
I'm searching for a method, to rotate graphics by a deliberate angle, or, at least, printing text to the screen at an angle of my choice. Preferably in Python, but C won't hurt too much, if there's no other option.
To give an example of what I intend to do, have a look at this stunning project http://www.youtube.com/watch?v=EFukhFujWuY
Unfortunately, the author seems to be unreachable. On his project page http://amrhein.eu/Radio2 he claims having used SDL for the UI, but I can't find any method to do a smooth rotation.
I would greatly appreciate any help on this.
Many thanks in advance, Klaus

User avatar
mahjongg
Forum Moderator
Forum Moderator
Posts: 12123
Joined: Sun Mar 11, 2012 12:19 am
Location: South Holland, The Netherlands

Re: How to rotate graphics at any angle?

Sat Nov 01, 2014 8:52 pm

if you are talking about bit map graphics, it a question of a large array transformation, from a source image to a destination image, in the course of it a large bit of image information will get lost, so you must keep the original image if you want to do another angle. Algorithms do do the array transformation are probably just a google search away.

If you are talking about vector graphics, matters are much simpler, text is mostly vector graphics.

https://en.wikipedia.org/wiki/Rotation_(mathematics)

gordon77
Posts: 4116
Joined: Sun Aug 05, 2012 3:12 pm

Re: How to rotate graphics at any angle?

Sat Nov 01, 2014 9:31 pm

bluenic wrote:Hi,
I'm searching for a method, to rotate graphics by a deliberate angle, or, at least, printing text to the screen at an angle of my choice. Preferably in Python, but C won't hurt too much, if there's no other option.
To give an example of what I intend to do, have a look at this stunning project http://www.youtube.com/watch?v=EFukhFujWuY
Unfortunately, the author seems to be unreachable. On his project page http://amrhein.eu/Radio2 he claims having used SDL for the UI, but I can't find any method to do a smooth rotation.
I would greatly appreciate any help on this.
Many thanks in advance, Klaus
Any use?
http://stackoverflow.com/questions/2454 ... ythons-pil

Or
http://stackoverflow.com/questions/1327 ... ooth-edges

bluenic
Posts: 3
Joined: Sat Nov 01, 2014 6:37 pm

Re: How to rotate graphics at any angle?

Sun Nov 02, 2014 6:37 am

Many thanks to both of you for taking the trouble!
You put me on the right way. Though using pygame myself, I wasn't aware of the rotate function, and of the existance of the PIL neither. Must have had a serious blackout or was too much stuck with the SDL mentioned in the project.
Thanks again, Klaus.

User avatar
PeterO
Posts: 4942
Joined: Sun Jul 22, 2012 4:14 pm

Re: How to rotate graphics at any angle?

Sun Nov 02, 2014 7:50 am

You could use the GPU via openGL ES to do all the hard stuff.

1) Render the bitmap font into a texture
2) Load texture into GPU.
3) Load a vertex shader that will transform the area of the texture containing a letter into a position along the curve for the tuning dial.
3)For each letter to be displayed use the shader to render it into the correct position.
4) Read back completed image from gpu into cpu and then output the pixels to a small LCD.

PeterO
Discoverer of the PI2 XENON DEATH FLASH!
Interests: C,Python,PIC,Electronics,Ham Radio (G0DZB),1960s British Computers.
"The primary requirement (as we've always seen in your examples) is that the code is readable. " Dougie Lawson

toxibunny
Posts: 1382
Joined: Thu Aug 18, 2011 9:21 pm

Re: How to rotate graphics at any angle?

Sun Nov 02, 2014 9:51 am

what would you do if there wasn't enough space on a circle to fit all the channels?
note: I may or may not know what I'm talking about...

bluenic
Posts: 3
Joined: Sat Nov 01, 2014 6:37 pm

Re: How to rotate graphics at any angle?

Sun Nov 02, 2014 10:56 am

toxibunny wrote:what would you do if there wasn't enough space on a circle to fit all the channels?
Yes, I already thought this issue certainly would come up.
I think, I would update the invisible part of the disc accordingly on the fly, so while turning the knob the next channel will show up, regardless how many there are in the queue.

User avatar
PeterO
Posts: 4942
Joined: Sun Jul 22, 2012 4:14 pm

Re: How to rotate graphics at any angle?

Sun Nov 02, 2014 11:27 am

toxibunny wrote:what would you do if there wasn't enough space on a circle to fit all the channels?
It's not a real dial bluenic is making, so all that matters is that the stations appear in the right order when the knob is turned either way.

PeterO
Discoverer of the PI2 XENON DEATH FLASH!
Interests: C,Python,PIC,Electronics,Ham Radio (G0DZB),1960s British Computers.
"The primary requirement (as we've always seen in your examples) is that the code is readable. " Dougie Lawson

User avatar
dividuum
Posts: 164
Joined: Sun Jun 16, 2013 1:18 pm
Location: Germany
Contact: Website

Re: How to rotate graphics at any angle?

Sun Nov 02, 2014 10:23 pm

I just threw together a quick proof of concept based on my tool info-beamer. I put the source code for the analog dial on github.

To use it, first get info-beamer for the pi then put the analog-dial source into any directory and run info-beamer inside this directory:

Code: Select all

[email protected]:/path/to/analog-dial $ info-beamer .
This should create a visualization similar to the one you asked for. To control it, use the script I included:

Code: Select all

[email protected]:/path/to/analog-dial $ ./set_item 0.5
The value is an (float) index into the list of items defined in items.json. So 0.5 centers on the first item in the list. The script simply sends control commands to info-beamer using UDP, so you can use any programming language you like to do this. I just wrote a blog post about this subject if you want to learn more.

Enjoy.
info-beamer hosted - A user and programmer friendly digital signage platform for the Pi: https://info-beamer.com/hosted

blackshard83
Posts: 91
Joined: Fri Jan 10, 2014 8:31 am

Re: How to rotate graphics at any angle?

Mon Nov 03, 2014 10:12 am

PeterO wrote:You could use the GPU via openGL ES to do all the hard stuff.

1) Render the bitmap font into a texture
2) Load texture into GPU.
3) Load a vertex shader that will transform the area of the texture containing a letter into a position along the curve for the tuning dial.
3)For each letter to be displayed use the shader to render it into the correct position.
4) Read back completed image from gpu into cpu and then output the pixels to a small LCD.

PeterO
You could use OpenVG instead of OpenGL ES, as long as you just need 2D graphics. OpenVG both handle bitmap and vector fonts and various basic transformations like rotation, scaling, translation, shearing, etc...
OpenVG anyway doesn't renders the TTF font into bitmap/vector glyphs. In a nutsheel you have to render the glyphs using an external library (freetype2 is the most viable option), then load the bitmap or vector path in GPU memory and blit using OpenVG.

Maybe other graphic libraries, like SDL, already offers a simpler way to do this without bothering with glyph rendering and loading, which is indeed a way to learn how fonts work.

User avatar
paddyg
Posts: 2337
Joined: Sat Jan 28, 2012 11:57 am
Location: UK

Re: How to rotate graphics at any angle?

Thu Nov 06, 2014 5:12 pm

You've probably solved this one way or the other, but for the record this is a bare bones python version using pi3d

Code: Select all

import pi3d
DISPLAY = pi3d.Display.create()
CAMERA = pi3d.Camera(is_3d=False)
myshader = pi3d.Shader('uv_flat')
myfont = pi3d.Font('fonts/FreeMonoBoldOblique.ttf')
mystring = pi3d.String(camera=CAMERA, font=myfont, is_3d=False, string='Rotating')
mystring.set_shader(myshader)
while DISPLAY.loop_running():
  mystring.draw()
  mystring.rotateIncZ(1)
also https://groups.google.com/forum/?hl=en-GB&fromgroups=#!forum/pi3d

User avatar
ajstarks
Posts: 129
Joined: Fri Jun 22, 2012 2:14 am

Re: How to rotate graphics at any angle?

Fri Dec 05, 2014 2:15 am

My OpenVG library may work for you: https://github.com/ajstarks/openvg (see the rotated text image in the README.

Return to “Graphics programming”