We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › Drawing GUI elements and "web graphics"
Page Index Toggle Pages: 1
Drawing GUI elements and "web graphics" (Read 671 times)
Drawing GUI elements and "web graphics"
Jun 22nd, 2008, 7:27pm
 
I'm a professional programmer with no graphics or artistic experience to speak of. Still, I can't and don't want to avoid graphics design entirely. Dabbling in programs such as Gimp (Linux equivalent to Photoshop) is not really to my taste, particularly in cases when my programmer instincts immediately point out that the image in question ought to be generalized and parameterized.

As such, I'm looking at Processing as a programmable drawing tool, not as a means for artistic expression. To get my feet wet, I tried to draw a button like presented there

http://technomono.com/blog/make-a-button-with-rounded-corners/#more-105

I didn't get very far, but along the way it occurred to me that all the tutorials I've seen so far take a lot of artistic latitude when placing color gradients and highlights. The engineering way, I take it, would be to model the button in 3D and add light sources. So much for the theory.

With my little understanding, I can't decide if that idea is at all sensible and if Processing would be a good tool to approach it. I'd appreciate your suggestions and pointers to relevant examples.
Re: Drawing GUI elements and "web graphics&qu
Reply #1 - Jun 22nd, 2008, 8:36pm
 
Well, you can also play with Gimp, using some script-fu (Scheme, Python, Lua or whatever). Should be fine for static images, basically.
One strong point of Processing is to do animations, but it is fine too to make static images too.
Buttons like the one you point to is totally within the realm of possibilities of Processing.
There is a recent thread on making rounded rectangles: The best way to draw a rounded rectangle
Gradients like this one can be easily done by drawing lines with variations on color, either in RGB or HSV modes.
Etc.
Re: Drawing GUI elements and "web graphics&qu
Reply #2 - Jun 22nd, 2008, 9:29pm
 
I've already tried curves (curveVortex) and lines + arcs for rounded rectangles myself. Can't decide which one I like better.

For the gradient my first idea was to draw lines, too. I take it, in order not to overshoot the rounded corners I'd have to use a mask or alternatively calculate the exact width for each line. However, when I was thinking of these details, the idea struck of doing it in 3D with a light source causing the gradient. Unfortunately, I don't see how to do this, or if it is a good idea to start with.
Re: Drawing GUI elements and "web graphics&qu
Reply #3 - Jun 24th, 2008, 7:12am
 
I have little experience in 3D (except when I player with POV-Ray...) but I think it will give a different kind of buttons. Perhaps nice ones, perhaps bland ones, depending if you find the right settings, light number/color/positions, right material/texture (does it works fine in OpenGL? Not sure if it manages diffraction like POV-Ray does) and so on.
The tuto you point to isn't made to produce realistic buttons but good looking ones, symmetrical, etc.
Two different approaches to the problem, probably different results, interesting results in both cases.
Page Index Toggle Pages: 1