How do we set color with opacity ?
I tried something like rgba(255, 0, 0, 50);
even if i change to 100 , there is still opacity ?
What is the range ? for example 0.1 to 1.0 in CSS ,, like that what is the range from low opacity to high opacity in lightningchart ??
Also for please tell the range for colorHEX
line.setStrokeStyle(
new SolidLine({
thickness: t,
fillStyle: new SolidFill({
color: ColorHEX(color).setA(100)
})
})
)
sometimes even 100 is transparent.
You can use ColorRGBA(r, g, b, a) or ColorHEX('#RGBA') to create a Color instance with opacity.
const semiTransparentRed = ColorRGBA(255, 0, 0, 125)
const opaqueRed = ColorRGBA(255, 0, 0, 255)
ColorRGBA alpha definition is expecting a number in range 0 - 255. ColorRGBA(255, 0, 0, 0) would be fully transparent and ColorRGBA(255, 0, 0, 255) would be fully opaque.
You can specify the alpha for ColorHEX by providing it in the color hex code in #RRGGBBAA format e.g. #ff0000aa where aa is the alpha. Other variations of the format are also accepted, #RGBA, 0xRRGGBBAA and 0xRGBA. The alpha definition is always optional for ColorHEX.
All of the color factories return a Color instance. You can edit the transparency of a Color instance with color.setA method which expects the value to be in range 0 - 255.
const semiTransparentRed = ColorRGBA(255, 0, 0).setA(125)
Related
I am making a mod for project Zomboid and I cant seem to figure out a math problem, so the value I am getting ranges from 0 to 1 and I want my progress bar to start at the max width and then descend as the value is increasing.
The first one was easy I got a value between a 100 and 0 so how do this with a value starting at 0?
I tried searching this on google but I am really bad at math and could not find an answer.
function panel:render()
self:drawRectBorder(30, 30, self:getWidth() - 1, 50, 1.0, 1.0, 1.0, 1.0);
--print((bt_core.player:getBodyDamage():getOverallBodyHealth() / 100) * self:getWidth());
self:drawRect(31, 31, (bt_core.player:getBodyDamage():getOverallBodyHealth() / 100) * self:getWidth() - 3, 48, 1, 0, 0, 1);
self:drawRectBorder(30, 110, self:getWidth() - 1, 50, 1.0, 1.0, 1.0, 1.0);
print(bt_core.player:getStats():getFatigue());
if bt_core.player:getStats():getFatigue() == 0 then
self:drawRect(31, 111, self:getWidth() - 3 , 48, 1, 0, 0, 1);
else
self:drawRect(32, 111,bt_core.player:getStats():getFatigue() / (self:getWidth() - 3) , 48, 1, 0, 0, 1);
end
end
To get variable in range 100..0 from variable in range 0..1, you can use y = 100 - x*100
So you have a value 0..1 and you want to map it to 100..0.
Multiplying your value with 100 gives you 0..100.
To invert this you subtract that from 100. 100-0 is 100, 100-100 is 0...
local newVal = 100 - val * 100
or
local newVal = 100 * (1-val)
Using Three.js, (although I believe this is more math related) I have a set of 2D points that can create a 2D geometry. such as square, rectangle, pentagon, or custom 2D shape. Based of the original 2D shape, I would like to create a method to offset the points inward or outward uniformly in such a way like the attached image.
I don't know if there is a simple way to offset/grow/shrink all the points (vector3) uniformly on the 2D shape inward or outward. And if so, it'll be cool if I can offset the points by X distance? Kinda of like saying offset the points on the 2D shape outward or inward by X distance.
And no, I'm not referring to scaling from a center point. While scaling may work for symmetrical shapes, it won't work when it comes to non-symmetrical shapes.
see image for example
Thanks in advance.
You can read that forum thread.
I've made some changes with ProfiledContourGeometry and got OffsetContour, so I leave it here, just in case, what if it helps :)
function OffsetContour(offset, contour) {
let result = [];
offset = new THREE.BufferAttribute(new Float32Array([offset, 0, 0]), 3);
console.log("offset", offset);
for (let i = 0; i < contour.length; i++) {
let v1 = new THREE.Vector2().subVectors(contour[i - 1 < 0 ? contour.length - 1 : i - 1], contour[i]);
let v2 = new THREE.Vector2().subVectors(contour[i + 1 == contour.length ? 0 : i + 1], contour[i]);
let angle = v2.angle() - v1.angle();
let halfAngle = angle * 0.5;
let hA = halfAngle;
let tA = v2.angle() + Math.PI * 0.5;
let shift = Math.tan(hA - Math.PI * 0.5);
let shiftMatrix = new THREE.Matrix4().set(
1, 0, 0, 0,
-shift, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
let tempAngle = tA;
let rotationMatrix = new THREE.Matrix4().set(
Math.cos(tempAngle), -Math.sin(tempAngle), 0, 0,
Math.sin(tempAngle), Math.cos(tempAngle), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
);
let translationMatrix = new THREE.Matrix4().set(
1, 0, 0, contour[i].x,
0, 1, 0, contour[i].y,
0, 0, 1, 0,
0, 0, 0, 1,
);
let cloneOffset = offset.clone();
console.log("cloneOffset", cloneOffset);
shiftMatrix.applyToBufferAttribute(cloneOffset);
rotationMatrix.applyToBufferAttribute(cloneOffset);
translationMatrix.applyToBufferAttribute(cloneOffset);
result.push(new THREE.Vector2(cloneOffset.getX(0), cloneOffset.getY(0)));
}
return result;
}
Feel free to modify it :)
I have some doubts about solutions that do not include number of edges modification.
I faced the same issue in this project where I wanted to ensure a known distance between voronoi cells, and I quickly figured out that scale does not fulfill the use case. But one complication I faced was the disappearance of some edges that I had to handle in a while loop. It was so difficult to debug that I had to create a debug mode that helps see the points and lines, that I also left available. It's possible to activate this debug mode with a checkbox:
Note for the images, I have them as links not embedded as I'm still new contributor (might improve that later).
The edges that shall disappear are shown in red
retraction snapshot1
retraction with edges discard 1
retraction with edges discard 2
Here a link to the function in action, you might have to modify it to have another points format though :
https://github.com/WebSVG/voronoi/blob/8893768e3929ea713a47dba2c4d273b775e0bd82/src/voronoi_diag.js#L278
And here a link to the complete project integrating this function, it has link to a live demo too
https://github.com/WebSVG/voronoi
Seems like it's not as simple as RGB1*A1 + RGB2*A2...how are values clipped? Weighted? Etc.
And is this a context-dependent question? Are there different algorithms, that produce different results? Or one standard implementation?
I'm particularly interested in OpenGL-specific answers, but context from other environments is useful too.
I don't know about OpenGL, but one pixel of opacity A is usually drawn on another pixel like so:
result.r = background.r * (1 - A) + foreground.r * A
result.g = background.g * (1 - A) + foreground.g * A
result.b = background.b * (1 - A) + foreground.b * A
Repeat this operation for multiple pixels.
The above answer works if the image isn't premultiplied alpha. However if you use that type of blending with a premultiplied alpha image, there will be a black border.
Premultiplied Alpha:
When the image is created, the color values are multiplied by the alpha channel. Take a look at this one pixel example:
Pixel: r = 1, g = 0, b = 0, a = 0.5
When it's saved, the rgb vales will be multiplied by the alpha value giving:
Pixel: r = 0.5, g = 0, b = 0, a = 0.5
To blend this kind of image you need to use the following formula:
result.r = background.r * (1 - A) + foreground.r
result.g = background.g * (1 - A) + foreground.g
result.b = background.b * (1 - A) + foreground.b
Non-premultiplied Alpha
In this example, the alpha channel is completely separate to the color channels.
Pixel: r = 1, g = 0, b = 0, a = 0.5
When it's saved:
Pixel: r = 1, g = 0, b = 0, a = 0.5
It's the same. In this case the answer provided by minitech is correct.
More details can be found here: Premultiplied alpha
rgb wrong number of arguments issue in rails:
I saw that rgb in css file takes 3 arguments as mentioned here
http://www.w3schools.com/cssref/css_colors.asp
But in my project abc.css.scss file have code like this
border: 1px solid rgb(100, 100, 100, 2);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
-moz-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
So what is happening here. Am I missing something?
Thanks in Advance!
The short and sweet answer is when you use rgb you can't pass an alpha property. Use rgba to use alpha
The 4th parameter is for alpha
So for example rgba(0, 0, 0, .1);
Here .1 is alpha/opacity
Why he is declaring the proper twice?
border: 1px solid rgb(100, 100, 100, 2);
/* This is fall back if browser doesn't support `rgba` but
here the 4th parameter shouldn't be there, it's making the proerty useless.. */
border: 1px solid rgba(0, 0, 0, 0.2);
/* Here he is having black color with an alpha of .2 */
So having rgb with 4 parameters makes the property value invalid, hence you need to remove the last parameter from rgb in your first property
The answer is quite self explanatory. rgb expects 3 arguments, so you need to give it 3, not 4.
This is what you want:
border: 1px solid rgb(100, 100, 100);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
-moz-box-shadow: 0px 3px 2px rgba(67, 67, 67, 0.1);
Notice that the first line has changed
If you keep the 4th parameter, that first line of code will not work. It will simply be ignored and have no effect.
See this example: You will notice the square is black, because the rgb with the 4th parameter is invalid and is therefore not applied
According to MDN here, browsers that support CSS Colors Level 4 do act exactly as the OP intended. The 4th argument is optional, and apparently defaults to 1, though I don't see the default value specifically documented anywhere at this time.
So what browsers support this?
caniuse.com has an indirect indicator, RGBA hex notation, here. It looks pretty positive at >75% as of today, but my limited testing shows that support for the CSS rgb function's 4th arg is less than that. I have created a codepen here, which works in the latest Firefox and Chrome on Windows, and in Chrome for Android 7. It also verifies that the default value for the 4th arg is 1. This is the CSS:
body {
background:linear-gradient(90deg, rgb(255, 0, 153.6, 0), rgb(255, 0, 153.6) 100%);
}
If you see the opacity change from 0 to 1, left to right, then it's working.
It does not work on Chrome or Safari on iOS 11. But this codepen, using hex notation does work in all 5 environments I've tested. Here is the CSS:
body {
background:linear-gradient(90deg, #FF009900, #FF0099 100%);
}
Does anyone have more specific information about this aspect of CSS Colors Level 4 and its support? I've added two codepens to separate tests for the 4th arg and numbers with decimals. The 2 browsers on iOS 11 don't support either.
In Sass, rgb() and rgba() are functions that create a variable with the type color. When compiled to CSS, it looks identical to the function syntax. The color type is necessary to make it eligible to be used with the color manipulating functions (lighten(), darken(), etc.).
https://github.com/nex3/sass/blob/ab4b3b918bfa1fc77a9c4378e199ca1ed6f1704c/lib/sass/script/functions.rb#L366
# Creates a {Color} object from red, green, and blue values.
#
# #param red [Number]
# A number between 0 and 255 inclusive,
# or between 0% and 100% inclusive
# #param green [Number]
# A number between 0 and 255 inclusive,
# or between 0% and 100% inclusive
# #param blue [Number]
# A number between 0 and 255 inclusive,
# or between 0% and 100% inclusive
# #see #rgba
# #return [Color]
def rgb(red, green, blue)
assert_type red, :Number
assert_type green, :Number
assert_type blue, :Number
Color.new([red, green, blue].map do |c|
v = c.value
if c.numerator_units == ["%"] && c.denominator_units.empty?
v = Sass::Util.check_range("Color value", 0..100, c, '%')
v * 255 / 100.0
else
Sass::Util.check_range("Color value", 0..255, c)
end
end)
end
declare :rgb, [:red, :green, :blue]
# #see #rgb
# #overload rgba(red, green, blue, alpha)
# Creates a {Color} object from red, green, and blue values,
# as well as an alpha channel indicating opacity.
#
# #param red [Number]
# A number between 0 and 255 inclusive
# #param green [Number]
# A number between 0 and 255 inclusive
# #param blue [Number]
# A number between 0 and 255 inclusive
# #param alpha [Number]
# A number between 0 and 1
# #return [Color]
#
# #overload rgba(color, alpha)
# Sets the opacity of a color.
#
# #example
# rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
# rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)
#
# #param color [Color]
# #param alpha [Number]
# A number between 0 and 1
# #return [Color]
def rgba(*args)
case args.size
when 2
color, alpha = args
assert_type color, :Color
assert_type alpha, :Number
Sass::Util.check_range('Alpha channel', 0..1, alpha)
color.with(:alpha => alpha.value)
when 4
red, green, blue, alpha = args
rgba(rgb(red, green, blue), alpha)
else
raise ArgumentError.new("wrong number of arguments (#{args.size} for 4)")
end
end
declare :rgba, [:red, :green, :blue, :alpha]
declare :rgba, [:color, :alpha]
The rgb() function must have exactly 3 arguments. The rgba() function must have exactly 2 or 4 arguments with the last argument being a value between 0 and 1.
Seems like it's not as simple as RGB1*A1 + RGB2*A2...how are values clipped? Weighted? Etc.
And is this a context-dependent question? Are there different algorithms, that produce different results? Or one standard implementation?
I'm particularly interested in OpenGL-specific answers, but context from other environments is useful too.
I don't know about OpenGL, but one pixel of opacity A is usually drawn on another pixel like so:
result.r = background.r * (1 - A) + foreground.r * A
result.g = background.g * (1 - A) + foreground.g * A
result.b = background.b * (1 - A) + foreground.b * A
Repeat this operation for multiple pixels.
The above answer works if the image isn't premultiplied alpha. However if you use that type of blending with a premultiplied alpha image, there will be a black border.
Premultiplied Alpha:
When the image is created, the color values are multiplied by the alpha channel. Take a look at this one pixel example:
Pixel: r = 1, g = 0, b = 0, a = 0.5
When it's saved, the rgb vales will be multiplied by the alpha value giving:
Pixel: r = 0.5, g = 0, b = 0, a = 0.5
To blend this kind of image you need to use the following formula:
result.r = background.r * (1 - A) + foreground.r
result.g = background.g * (1 - A) + foreground.g
result.b = background.b * (1 - A) + foreground.b
Non-premultiplied Alpha
In this example, the alpha channel is completely separate to the color channels.
Pixel: r = 1, g = 0, b = 0, a = 0.5
When it's saved:
Pixel: r = 1, g = 0, b = 0, a = 0.5
It's the same. In this case the answer provided by minitech is correct.
More details can be found here: Premultiplied alpha