## How to rotate graphics at any angle?

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

### How to rotate graphics at any angle?

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.

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

### Re: How to rotate graphics at any angle?

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: 4111
Joined: Sun Aug 05, 2012 3:12 pm

### Re: How to rotate graphics at any angle?

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.
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?

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.

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

### Re: How to rotate graphics at any angle?

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

1) Render the bitmap font into a texture
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?

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?

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.

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

### Re: How to rotate graphics at any angle?

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

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

### Re: How to rotate graphics at any angle?

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?

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

1) Render the bitmap font into a texture
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.

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

### Re: How to rotate graphics at any angle?

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)
myfont = pi3d.Font('fonts/FreeMonoBoldOblique.ttf')
mystring = pi3d.String(camera=CAMERA, font=myfont, is_3d=False, string='Rotating')
while DISPLAY.loop_running():
mystring.draw()
mystring.rotateIncZ(1)
``````