NSGradient looks ugly - why ?

Hi,

Does anyone know why the NSGradient doesn’t look nice when drawing it to from top to bottom
with using a small height. (see image). I tried to draw it directly and in an NSImage. No change. Can you see the cascading ?

Did you try to create a higher gradient and scale it down unproportionally in the view? In my experiments with NSGradients I had found some kind of oversampling useful – I create them at factor X and then let NSImage’s smooth scaling polish the visible steps.

All gradients look ugly - they are sooooo 1990’s :slight_smile:

The German version of this is: Hat der Grafiker nichts drauf, macht er schnell einen Verlauf.

I speak german, but am not familiar with the translation, as that phrase means nothing when converted to english??
What would the english equivalent be?
:slight_smile:

A bad graphic designer makes a gradient.

@Ulrich

seems reasonable as the gradient works ok if you double or tripple the size but it’s strange though. If so I would rather
opt for drawing a selfmade gradient line by line

@Richard

what do you suggest as substitute?

If performance is ok for you, why not? I haven’t tried CGGradient yet which should even be a bit faster to call and Core Graphics seems to be fairly optimized, so it wouldn’t surprise me if creating and scaling a gradient by API calls would still be faster.

@Rob,
If you like gradients, then there is no reason not to use them.

Everyone is different, and what one person likes, another person dislikes.

As I run my own design business, I am heavily into image design, and have never been asked to make any images with gradients for a very long time. Another problem with gradients, is if they are not created perfectly, or if the user’s screen is not fantastic - gradients look very liney (is that an actual word?)

Smooth gradients can look ok, but I am sure you have seen gradients which have horizontal or radial lines of varying shades, and which look terrible.

However, you should remain true to yourself and do whatever you personally are happy with. I personally however, and most people I know, steer clear of them.

[quote=172234:@Rob Egal]Hi,
Does anyone know why the NSGradient doesn’t look nice when drawing it to from top to bottom
with using a small height. (see image). I tried to draw it directly and in an NSImage. No change. Can you see the cascading ?
[/quote]

When you say top down, are you altering the context to get top-down co-ordinates? Or just swapping the colors? I don’t use any NSGradients, but I do use CGGradients and they appear to draw fine for my eyes…

I can see the banding, but also I can see JPEG artifacts, so I don’t know how much of the banding is the gradient or from the JPEG.

Have you set any interpolation on the target context?

I could glean, that if I define the gradient in the Open event of a Window like:
self.gradient = new NSGradient(new NSColor(&c3F3F3F00), new NSColor(&cBFBFBF00))
and using it as a property in a canvas paint event it works:
gradient.drawInRect( NSMakeRect(0,0,g.width,g.Height), NSGradient.AngleUpperLeft)

But if I dimming the gradient in class or subclass Open/Paint it has got the cascading effect:
dim gradient as new NSGradient(new NSColor(&c3F3F3F00), new NSColor(&cBFBFBF00))
gradient.drawInRect( NSMakeRect(0,0,g.width,g.Height), NSGradient.AngleUpperLeft)

It seems like Sam could be correct that I may need to flip coordinates.

Sorry, I wasn’t very clear, I actually meant that if you’re flipping co-ordinates, stop.

Are you using any code on that window to adjust the interpolation of a canvas?

[quote=172714:@Sam Rowlands]Sorry, I wasn’t very clear, I actually meant that if you’re flipping co-ordinates, stop.

Are you using any code on that window to adjust the interpolation of a canvas?[/quote]

I’m not using any interpolation actively nor I am aware of any function which set some sort of interpolation.
if you’re dimming the gradient within a canvas or container you get a cascading effect but if you define the gradient in the Open event of the window and use it somewhere in the Paint event it works like it should.

maybe it’s context depended ?!?

See example code. Did I f*** up ?

I thought debugDescription would help, but NSGradient isn’t one of the talkative controls …
It really looks like the context the gradient is created in changes the resolution / steps.

I have found this old thread here: https://forum.xojo.com/15579-is-it-possible-to-redirect-a-nsgradient-drawinrect-method-to-a-/0

Have you tried to use Sam’s method via NSImage? I think this what what I took to oversample the gradient by pinning it to an NSImage scaled 2 or 3 times the control size and then rescaling it before drawing it to the control’s background.

I’ve had a quick look at the code and it made me think about how I use gradients in my own applications.

I declare gradients either as a shared property on my window class or as regular property. The ‘Paint’ event should be used for painting only, to keep redraw time as low as possible.

I don’t know why you’re getting the banding and I can’t see anything that might cause it, I can only conclude that for some reason the gradient isn’t optimized when it’s created and draw in the same run loop, but this doesn’t make much sense as Apple’s Objective-C code does this.

If you change the following line in the Canvas’ Paint event, you will see that the constant recreation of the two colors and the gradient is the problem:

Dim gradient as new NSGradient(new NSColor(&c3F3F3F00), new NSColor(&cBFBFBF00)) // looks bad Static gradient as new NSGradient(new NSColor(&c3F3F3F00), new NSColor(&cBFBFBF00)) // looks good

@Ulrich

The NSImage didn’t work too.

@All
Thanks a lot for you help. I remember having no problems in an earlier version where I’ve used statics (to save the constant dimming) but then I cleaned/optimized the code and removed some static ref. and ended up having an ugly gradients. :slight_smile:
I really don’t know why that but the workaround Eli described above works perfectly.

I’ll look into some UI guides (how to make a modern UI) to think again about using gradients at all. Do you guys
have anything on hand ?

Do you think this “front” UI is Ok or is it old school ?


[quote=173026:@Rob Egal]I’ll look into some UI guides (how to make a modern UI) to think again about using gradients at all. Do you guys
have anything on hand ?[/quote]

This could be a good start : https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/

Yosemite like iOS 8 (and Windows 10 https://dev.windows.com/en-us/design/modern-design?logged_in=1, and Android Lollypop http://www.google.com/design/spec/material-design/introduction.html#) is notoriously flat, so no gradients at all there.

Very old school. Gradients are out of fashion and a-no-go for modern GUIs.