Multiple colored line of text on canvas - text

This is more of a solution than a question. I figured this out and thought others like me might want to know.
I did find "Can I do by character text color in HTML5 Canvas?" when searching but I didn't want to use a "round about way" function.
That led me to gradients e.g. createLinearGradient. And I figured out how to hard block the colors so there was no gradient just two blocks of color. This is what I did:
var gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "red");
gradient.addColorStop(0.5, "blue");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
This code allows text to look like this and also allows for multiple colors of text on one line of text. Check out this example: w3school example. Hope this helps.
Also, sorry if I'm not supposed to post solutions as questions.

Related

change color for only one Console.WriteLine

I know, this is a beginner question, but I want to change the background colour only for this sentence but it colours all the text.
Console.WriteLine("healing spell:", Console. BackgroundColor = ConsoleColor.Green);
This is what I tried but doesn't work.
Try it
Console.ForegroundColor=ConsoleColor.Cyan;

How do I tint an svg in processing and preserve brightness?

I've been trying to figure this out for 2 days now, so I hope somebody can help.
I need to load in svg files that have multiple values of gray within them and tint them with colors. So for example, say the svg file is an image of a rock and has 4 values of gray. I need to be able to display the rock as red and keep the differences between values in the different child shapes. In other words, I would like it to work just like PImage.tint().
I see there are tint() and setTint() methods to PShape but I can't seem to get them to work. I also though about recursing through the child shapes and reading each color individually and recoloring appropriately, but I couldn't even figure out how to read the color out in a way I understand.
Help, anyone?
If you have it as an <img> you can use the CSS filter property with hue-rotate https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate
Or you add the svg directly to the html and add classes to your elements. Then you could change the colors in your script.
If this is a flat colour then you could use the alpha value in RGB colour value. See 'color transparency' in the following link: https://processing.org/tutorials/color/
The fill value is fill(red, green, blue, transparency)
I hope this helps. If you want to share code and have a reason for using PImage I'd be happy to have a look.

How does one add an outline to text in Matlab?

I have added a textbox annotation to an image, but it is difficult to read the text if I don't use a background. If I do use a background, I obscure the image. I have examined one possible solution which is inelegant:
Add transparency to the annotation background. This is not built-in and requires a kluge.
One possible alternative which I would like to try is to add an outline to the text. Anyone know how to do that?
EDIT
I should have been more specific by what I had meant by "add an outline to the text". I meant Microsoft Word's definition of an outline.
Based on your edit, you don't just want a text box. I am not sure how to fix the text but based on the answer to my question here, you can set the box transparency.
plot(sin(rand(10)))
a = annotation('textbox', [0.5 0.5 0.1 0.1], 'String', 'Some Random Text');
b = annotation('textbox', get(a,'Position'));
set(b, 'BackgroundColor', [0 0.5 0]);
set(b, 'FaceAlpha', 0.5);
uistack(a,'top')
Here is an example:
For future readers, the textborder function on MATLAB file exchange attempts to solve this problem.
http://au.mathworks.com/matlabcentral/fileexchange/27383-textborder-higher-contrast-text-using-a-1-pixel-thick-border

Color Space Inversion for contrasting grid

I have a randomly colored background that is split into solid colored rectangles. I want to draw a grid over the rectangles (this is not the problem). The issue is because of the random colors I cannot hard-code the grid color because it may not show up.
Another way to think about this is plotting a grid on a plot of a surface f(x,y). If the grid color happens to be the same color of the function (however it is defined) then it won't be visible.
I would like to take the background color and compute a new color (either grayscale or similar to the background color) that is contrasted with the color so it can easily be seen (but not distracting such as pure white on pure black).
I've tried using the luminance and weighted luminance but it doesn't work well for all colors. I've also tried gamma correcting the colors but it also does not work well.
I would also like the grid color to be as uniform as possible (I could possibly compute the adjacent grid colors to blend in). It is not that important but would be nice to have some uniformity.
The code I'm working with is based around
//byte I = (byte)(0.2*R + 0.7*G + 0.1*B);
//byte I = (byte)(R + G + B)/3.0);
byte I = (byte)(Math.Max(Bar.Background.R, Math.Max(Bar.Background.G, Bar.Background.B)));
if (I < 120)
I = (byte)(I + 30);
else
I = (byte)(I - 30);
//I = (byte)(Math.Pow(I/255.0, 1/2.0)*255);
I've also tried gamma correcting the rgb's first.
Anyone have any ideas?
The colors that offer the most contrast are colors that are fully saturated. This offers you a way to find color that may work(but not necessarily for many reasons). Essentially you pick the color the furthest away along the line connecting color and the fully saturated color.

Find most readable colour of text that is drawn on a coloured surface

I'm not sure how to ask this but here goes.
I draw a filled coloured rectangle on screen. The colour is in form of R,G,B
I then want to draw text on top of the rectangle, however the colour of the text has to be such that it provides the best contrast, meaning it's readable.
Example:
If I draw a black rectangle, the obvious colour for text would be white.
What I tried right now is this. I pass this function the colour of the rectangle and it returns an inverted colour that I then use for my text.
It works, but it's not the best way.
Any suggestions?
// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));
return Color.FromArgb(greyscale, greyscale, greyscale);
}
One simple approach that is guaranteed to give a significantly different color is to toggle the top bit of each component of the RGB triple.
Color inverse(Color c)
{
return new Color(c.R ^ 0x80, c.G ^ 0x80, c.B ^ 0x80);
}
If the original color was #1AF283, the "inverse" will be #9A7203.
The contrast will be significant. I make no guarantees about the aesthetics.
Update, 2009/4/3: I experimented with this and other schemes. Results at my blog.
The most readable color is going to be either white or black. The most 'soothing' color will be something that is not white nor black, it will be a color that lightly contrasts your background color. There is no way to programmatically do this because it is subjective. You will not find the most readable color for everyone because everyone sees things differently.
Some tips about color, particularly concerning foreground and background juxtaposition, such as with text.
The human eye is essentially a simple lens, and therefore can only effectively focus on one color at a time. The lenses used in most modern cameras work around this problem by using multiple lenses of different refractive indexes (chromatic lenses) so that all colors are in focus at one time, but the human eye is not that advanced.
For that reason, your users should only have to focus on one color at a time to read the text. This means that either the foreground is in color, or the background, but never both. This leads to a condition typically called vibration, in which the eye rapidly shifts focus between foreground and background colors, trying to resolve the shape, but it never resolves, the shape is never in focus, and it leads to eyestrain.
Your function won't work if you supply it with RGB(127,127,127), because it will return the exact same colour. (modifying your function to return either black or white would slightly improve things)
The best way to always have things readable is to have white text with black around it, or the other way around.
It's oftenly achieved by first drawing black text at (x-1,y-1),(x+1,y-1),(x+1,y-1),(x+1,x+1), and then white text at (x,y).
Alternatively, you could first draw a semi-transparent black block, and then non-transparent white text over it. That ensures that there will always be a certain amount of contrast between your background and your text.
why grey? either black or white would be best. white on dark colors, black on light colors. just see if luminance is above a threshold and pick one or the other
(you don't need the .net, c# or asp.net tags, by the way)
You need to study some color theory. A program called "Color Wheel Pro" is fun to play around with and will give you the general idea.
Essentially, you're looking for complimentary colors for a given color.
That said, I think you will find that while color theory helps, you still need a human eye to fine tune.

Resources