What are the mathematics behind UI aesthetics like color harmony? - color-scheme

I have to develop a little tool inside my project like the "Harmony color" palette in Adobe Illustrator or Kuler -- the user can select one or two color and the tool suggests a 4 or 5 "harmonized" palette based on that.
Where can i find some documents, math rules or other background on this?

This generally known as "colo(u)r theory" - there's a pretty good explanation of the various approaches at: http://www.colormatters.com/colortheory.html (If you're after more, simply Google "color theory".)
In general it's reasonably easy to create your own palettes using the above theory, although you'll make your life easier if you create your own HSB/V to RGB colo(u)r conversation function. (Then again, your language/framework of choice may already have such a thing.)

Related

Is there a way to get a good looking starry skybox to use in Apple's SceneKit?

I'm writing an astronomy application using Apple's SceneKit and want to provide a skybox of stars to surround a planet.
I have found a large JPEG (8192x4096) with suitable content but my "camera" field of view (10 degrees) magnifies the skybox image background enough to cause serious loss of resolution. In short, it doesn't look good .. here's a screenshot showing blurry stars:
https://ramsaycons.com/screenshots/SkyBoxRes.png
One solution for greater fidelity would be, I imagine, to use a resolution independent 'material' image like a PDF, but SceneKit doesn't support PDF 'materials'.
Or, I could find, or build, a better or bigger image for the skybox material. For example, a (32768x16384) would look better, at the cost of a massive image ~ the 'small' one I'm using now is nearly 8MB already.
Another option would be to move closer to the planet and widen the field of view, but I don't want to move the camera so close (specifically, because I want it 'above' geosynchronous objects in my model).
This code-less question feels not quite appropriate for StackOverflow, but my reading of related Q&A's here reveals a knowledge of clever SceneKit tricks I wouldn't have thought off .. maybe there's a trick for me out there!

Display percentage value as a fill in a custom shape

I'm looking at some new options for displaying a percentage value as a fill in a custom shape. Consider the effect to be similar to a "progress thermometer" in a traditional dashboard UI sense.
Considerations
Goal - a graphic element showing a percentage value for a custom report.
Format - Either a full graphic (or infographic) itself, or part of a PDF via Photoshop/InDesign or even iBooks (as an excuse to use it).
Usage - I'd like the process to be programmatic, for re-use. It needs to be accurate, and I'd like the solution to be somewhat object oriented to apply to other datasets and graphical containers. This rules out hand-drawn charting.
Source data - currently a pivot table in Excel, but I can work with any other host as required.
Shape - is a custom vector shape that will originate from Illustrator/Inkscape. final format as best fits resolution and rendering of the report. I would also be interested in any other generative shape ideas (such as java/javascript).
Fill - I'd like to be able to represent the fill as both an actual percentage of total area (true up), and as a percentage of the vertical scale. I'd imagine this flexibility would also help reuse of the method as a fill value against selected object variables (height, area, whatever).
I know I'm being slightly vague in the programming languages or hosts side of things, but this gives me an opportunity to break out of the usual analytic toolchain and scope out some innovative or new solutions. I'm specifically interested in open source solutions, but I'm very keen to review other current methods you might suggest.
This might be a little open ended for you, but d3.js is very powerful. There might be some useful templates on the site, or you can build your own from the library.
If you limit yourself to shapes where the percentage can be easily converted into a new shape by varying one of the dimensions, then the display part can be covered by creating a second shape based on the first one, and filling in 100% of the second shape.
This obviously works best with simple shapes like squares, rectangles, circles, etc, where it is simple to convert "50% of the area" or "75% of the height" into manipulation of vector nodes.
However, things gets significantly more difficult if you want to support genuinely arbitrary custom shapes. One way to handle that would be to break up a complex "progress bar" into "progress pieces" (e.g. a thermometer bulb that represents 10% of total progress, then a simple bar for the remaining 90%).
As has been mentioned, D3 seems like it would meet your needs - here are some simple examples of what I think you are asking:
Changing the fill color of a distinct shape: http://jsfiddle.net/jsl6906/YCMb8/
Changing the 'fill amount' of a simple shape: http://jsfiddle.net/jsl6906/YCMb8/1/

Image processing..back ground subtraction

I have a sequence of images taken from a camera. The images consists of hand and surroundings. I need to remove everything except the hand.
I am new to Image processing. Would anyone help me in regard with the above Question. I am comfortable using C and Matlab.
A really simple approach if you have a stationary background and a moving hand (and quite a few images!) is simply to take the average of the set of images away from each image. If nothing else, it's a gentle introduction to Matlab.
The name of the problem you are trying to solve is "Image Segmentation". The Wikipedia page here: wiki is a good start.
If lighting consistency isn't a problem for you, I'd suggest starting with simple RGB thresholding and see how far that gets you before trying anything more complicated.
Have a look at OpenCV, a FOSS library for computer vision applications. Specifically, see the Video Surveillance module. For a walk through of background subtraction in MATLAB, see this EETimes article.
Can you specify what kind of images you have. Is the background moving or static? For a static background it is a bit straightforward. You simply need to subtract the incoming image from the background image. You can use some morphological operations to make it look better. They all depend on the quality of images that you have. If you have moving background I would suggest you go for color based segmentation. Convert the image to YCbCr then threshold appropriately. I know there are some papers available on it(However I dont have time to locate them). I suggest reading them first. Here is one link which might help you. Read the skin segmentation part.
http://www.stanford.edu/class/ee368/Project_03/Project/reports/ee368group08.pdf
background subtraction is simple to implement (estimate background as average of all frames, then subtract each frame from background and threshold resulting absolute difference) but unfortunately only works well if 1. camera has manual gain and exposure 2. lighting conditions do not change 3.background is stationary. 4. the background is visible for much longer than the foreground.
given your description i assume these are not the case - so what you can use - as already pointed out - is colour as a means of segmenting foreground from background. as it's a hand you are trying to isolate best bet is to learn the hand colour. opencv provides some means of doing this. if you want to do this yourself you just get the colour of some of the hand pixels (you would need to specify this manually for at least one frame) and convert them to HUE (which encapsulates the colour in a brightness independen way. skin colour has a very constant hue) and then make a HUE histogram. compare this to the rest of the pixels and then decided if the hue is simmilar enough.

What is the best easing function to simulate a GUI item dropping?

There are so many easing functions available in Expression Blend, and so many settings on each, it is often hard to know instinctively what easing function to choose. Trying all the options would take quite a long time.
In this instance, I want to give the impression that the item has fallen forward and down. I am using a projection rotation about X and currently using one of the circular easing functions, but it does not feel quite right. A subtle bounce would probably help.
What would be the best option (and specific settings) to give the impression of falling a short distance?
As always, thanks in advance.
Follow-up: After the comments below and as a potential long-term solution to the general problem posed here (choosing easing functions and settings by keyword), we have now setup www.easing.co. We will be seeking contributions from the community, so if you are interested in helping with the project, drop us a line via that website only.
I came across this post whilst looking for an answer to the same question.
I Used a 'BounceOut' ease with 2 bounces, and a bounciness of 10.
Pete

Windows Forms resolution problem

I have developed a 1024 *780 resolution screen in Windows Forms, but some say that it does not fit properly at higher resolutions. Is there any way to handle this?
Is there a way to make Windows Forms applications look the same at ALL resolutions?
My recommendation is not so much to "make it look the same" on all screens, but rather to design the GUI so it scales up and down more gracefully. Layout managers, docking, and anchors are your friends in Winforms. The TableLayoutPanel is quite useful for this sort of thing. Splitters also help...
Finally, this is one of those problems that WPF sets out to solve. WPF makes extensive use of layout managers. It feels much more like Java or GTK than Winforms or even VB (old school VB).
This is the sort of thing that makes you say "there's got to be a better way."
My solution for this one time was to declare a global ScalingFactor variable that was tied to the current screen resolution. Then, the sizes of every visual element were multiplied by that factor.
So, if I designed my form for resolution A, and resolution B is 1.2x larger, the width of window A will be with * 1.2, the fonts will be fontSize * 1.2, the textbox dimensions will be dimensions * 1.2.
Not fun.
There may be 3rd party tools that you can buy and will perform this scaling.
One other thing to check before you run down any of these roads is whether it is actually the screen resolution or the dpi settings that are causing it to look bad. Usually a higher resolution will only make it look smaller, but an atypical dpi, such as when the user selects "large fonts" will wreak havoc.
You can use anchor property of item, and autoScaleMode property of form set it equals 'None'.

Resources