How to learn graphics?


How do you recommend learning how to draw graphics, or how did you learn? Are there any good books/tutorials on this?

I'd really like to learn how to draw simple graphics, like displays for filters/EQs, oscilloscopes, analyzers, XY pads, and other common graphics you see in audio apps/plugins. Maybe something more complex in the future, but things like that are important to me now. 

The widgets in this synth, which uses JUCE, are exactly the kind of thing I want to make. I can look at the code for this synth, but that wouldn't really help me learn without knowing the basics.

Right now I really have no idea where to even start. I found a book and some tutorials on using OpenGL, but I'm not sure if that's a good place to start. I'd really appreciate any tips/guidance anyone could give me on this. 


Edit: I also have a couple months left on my Lynda subscription and there's an OpenGL course on there that I'd really like to do. Do you think I could easily follow along with that course while using JUCE instead of however they're doing it? If so, is there anything I should be aware of? Like do I need to set anything up and before hand and are there any differences when using OpenGL with JUCE. I'd love to get something from that course before my subscription runs out. 

Hi Jordan,

Drawing is very simple and you do not need OpenGL.

Create a class that extends Component and override the paint method.

Then inside the paint method do your drawing using the Graphics object.


for(int i=0; i<lines; i++){
g.drawLine(0,yi, getWidth(), yi);

That would draw lines across the component.

For interaction you can override any mouse handling methods.

My code doesn’t post properly for some reason, but anyway override paint and use methods on the Graphics object.

How to delete duplicate posts?

That's alright. Hmm... it doesn't seem like you can delete posts, or I don't see any way too at least. That sucks.

Anyways, thanks for the reply. I know I don't need to learn OpenGL. I was just wondering if it would be an easy way to learn graphics. I tried a little from that course and while I could get it working in JUCE, I don't think it's best to start with. I can at least come to it later when I'm more experienced. 

One of the things I'm really wondering is how shapes get drawn. I'm sure I can find ways to draw primitive shapes, but what about ones that aren't defined shapes, like a display for a filter. Would I find the magnitude response and draw it with something like a path or something? If so, how would I draw it? These are some of the questions I have. I'm trying to understand the app in that link I posted earlier, but it's a bit too complicated for me. It uses things from all over the project and it's just too hard to understand, or even use it.

My goal is to at least make a display for a filter, but I guess I should start with much simpler drawing tasks. Can anyone think of any simple exercises I could try to accomplish? Maybe some with solutions somewhere. I really just don't know where to start with this stuff. I should probably try to find a good book and see if I can follow along. 

Complex 2D shapes can be drawn as a combinaison of bezier curves.

For efficiency you could also import and cache png images.

1 Like