I have a gradient color scale that I want to define a set of classes for.
To break it down I have a value that can span between 0 and 8.5 with a step of 0.25. I have a total of 34 different colors (8.5/0.25 = 34) that I want to span within this gradient color scale. So I need to define 34 different classes each a tad more down the scale depending value that I have in my database. So if I find a value of 2.25 I want to get the color 29.4% ((2.25 * 100 /) 8.5 = 29.4) within my gradient scale. How can I do this by using css classes?
My reason for doing this is to add color to icons that I place on my map. The values are speed and based on the speed I need to add a class to my icon on the map that contains a background (color) that matches the "value" of the speed?
I have tried googling for the past 30 minutes, but I have found my self unable to find anything that I can use.
If this seems quite intuitive I am willing to try other solutions that can assist me in achieving what I need.
If it is of any importance I am using MapBox as my map solution.
Try using SCSS. In SCSS you can use variables and math.
Related
For example, imagine, I want to create a rectangle in SVG where the height is equal to (3*width)^2+width and add, at the bottom, a circle of radius width/2 (cx,cy, r = f( width)). Everything depends only of one parameter : the rectangle width.
I know it is possible to do it with javascript but I would like something more direct. Is it ccs variable, the only alternative ?
Thanks for answer.
Rq : I read this post (How do I define or reference a variable in SVG?) but it is rather old (from 2015) and it seems the situation has not so much evolved or I googled poorly.
I'm going to draw a bunch of areas on the map. Each area should be of different color, preferably clearly different from the others. Of course, as the number of areas grows, I'm ducked. But until then I wonder where I could find or how I could generate a set of, say 15 colors that are "vastly" apart.
The first few were easy, because I used the defaults from Bootstrap:
blue
yellow
red
green
pink
But I can't stop wondering if there's a trick, tool or algorithm for generating a next, deviating color.
Googling gave me ways to generate similar schemas or colors that go well together. That's not what I'm looking for, though. Also, I discovered that there's much, muuuuch more to colors than mixing RGB, so I feel like a total looser noob.
You should indeed use the hsl 360 degrees to generate a well spread color spectrum. To have something like that in typescript/js you could do:
const length = 15;
const colors = Array.from({ length }, (_, i) => `hsl(${360 / length * i}, 50%, 50%)`);
Here you can see a working example:
stack
Result:
I'm starting to practice with sass and I want to set any color with the percentage of red, green and blue in the class. So, the class name color-50-10-60 means 50% red, 10% green and 60% blue, the numbers can only vary in quantities of 10 in 10, so there can only be numbers like 10, 20, 30, 40... up to 100, if I change the numbers that have the name of the class must change color, I know that I must use mixin to get it but I just do not understand how to do to achieve the goal. Any help?
I think it's impossible (technically possible, but useless) to create a specific class for every single RGB color.
We have to start from words. SASS is a PREPROCESSOR, i.e. occurs before everything: before your CSS, your HTML, your JAVASCRIPT... and he (SASS) can't logically know what you'll write in your HTML, but only imagine (CSS attr() has potential, but also big limitations https://caniuse.com/#search=attr() ...).
If you write something like this <div class="color-50-10-60">, in your CSS there must already be the definition of that class. So, when you write your SCSS before you create that <div>, you have to imagine you'll use that class.
But, you know, you can create a limited range of colours (10-20 color's classes with a specific mixin, if you really want). Certainly you can not create them all, because RGB have 16,777,216 possible color values and...
it's crazy to think about creating 16 million classes (^_^;)
You have then to create first your <div class="color-50-10-60">, and then read those values creating a CSS class to manage them: to do this, you can use javascript. This is your way to achieve the goal. :)
But, I know, you want a CSS solution. Then... use <div style="color:rgb(50,10,60);">: it's cross-browser and it works very well! ;)
EDIT 1
After your edit, this is a possible solution for you: that works with a range of colours (as I said in the comments, it works with loops with 3 variables... but for me it is crazy! :-) ):
#for $i from 1 through 10 {
#for $j from 1 through 10 {
#for $k from 1 through 10 {
.color-#{$i*10}-#{$j*10}-#{$k*10}{
color:rgb($i*10,$j*10,$k*10);
}
}
}
}
I created a sassmeister for you:
I´d like to know, how, through actionscript 3, to get an array of ARGB (hexadecimal) colors, that is close to a given color.
Example:
0xFF00FF00
A green.
How to get variations of green?
I´m trying to get some green colors of a bitmapdata.
I´ve tried to get it by making a loop getting the colors using getPixels32.
The problem is, I think the bits colors of each position are different from the bits of the bitmap rendered.
It´s for a pathfinder.
Each green bit sets a node in a map, as walkable.
So I need to know what are these colors to set it as walkable for the pathfinder.
Any suggestions?
RGB space is terrible for interpreting whether colors are similar to one another. A different color space that matches closer to human perception of color is HSV (hue saturation and value). Here are the steps you should follow:
Convert your value from RGB space to HSV (http://www.cs.rit.edu/~ncs/color/t_convert.html)
Modify the saturation and value to obtain different shades of the same green hue.
You can even modify the hue a little with a defined tolerance level you specify
Reconvert back to HSV to RGB
I believe technically..one color space is smaller than the other, meaning it is not always a 1:1 conversion - but it should serve your purpose.
Basically i have x circles represented as MovieClips.
They are all assigned the same base color (for example red).
They should all have a brightness property ranging from 0 to 1 (0 would be completely white and 1 completely red).
I would like the following properties for representing these circles on stage:
When the circles dont overlap they are represented as stated above.
When the circles overlap the overlapping region should have the same base color as the original circles but the brightness of that area should be the sum of the brightnesses of all the circles that define the overlap.
The brightness saturates at 1. So the overlap of 2 circles with brightness 0.8 is 1 (the maximum value) instead of 1.6.
I am wondering if there is some kind of BitmapFilter i could use on the circles to achieve these properties? Or am I looking in the wrong place?
I am relatively new to Actionscript so any pointers are welcome!
Hi and welcome to SO and AS3!
I'll take each point separately:
1) Quite simple, you've probably already figured out that "addChild()" will add MovieClip objects to the Display List, meaning Flash will render them every frame.
2) The easiest way to do this is through "Blend Modes", which is Adobe's way of handling overlapping display objects.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode
Try setting the .blendMode property of each circle to BlendMode.ADD:
var circle:MovieClip = new MovieClip();
circle.blendMode = BlendMode.ADD;
3) If BlendMode.ADD doesn't give you the results you want, try creating a custom shader to do the job.
http://help.adobe.com/en_US/as3/dev/WSB19E965E-CCD2-4174-8077-8E5D0141A4A8.html
IMHO Blendmode is the easiest way of achieving the desired effect, and blendShader if you want precise customization. Please comment if you have further questions!
Some tutorials and examples:
http://www.learningactionscript3.com/2007/11/03/more-properties-blendmodes-filters/
http://active.tutsplus.com/tutorials/games/introducing-blend-modes-in-flash/
Cheers,
J