I'm a noobie, so please be kind to me :)
I'm putting together a p5js script. Background color is random, choosing from an array with values for black or white background. Drawing color is also random.
It works fine most of the times, but from now and then I get a color that can't really be appreciated from the background, so the question is, is there a way in which I can vary the background resulting color depending on the color of the draw? How would I go about discerning what combination is "perceivable" and which one isn't?
You could just round the background value so they differentiate more:
background(roundTo(random(250),10));
function roundTo(val, num){
return round(val / num) * num;
}
Related
Hope this is ok. Asked a similar question the other day but I wasn't as clear as I could have been so trying again!
I am trying to produce an elearning course where the browser background colour changes as the user moves through it. So far I can set the background to a solid colour eg:
document.body.style.background = "#7BC4CC";
If I then use the same code as above but replace the colour with a new colour, when the new JS is executed the colour changes but is very abrupt. I would like a short fade transition between the two
So, JS would start on one background colour, short fade, into new colour. Pretty sure it has to be JS due to limitations with the elearning software I am using.
thanks in advance!
You could set the transition property along with the background color to enable a smooth transition.
document.body.style.background = "#7BC4CC";
document.addEventListener('click', () => transitionTo('#edaf44'));
function transitionTo(color){
document.body.style.transition = 'background-color 300ms';
document.body.style.background = color;
}
<button>transition to other color</button>
Okay so let's say I have a group-chat and the owner is able to change the background color of the chat-bubbles. The usernames on top of the bubble have different colors which are assigned to them from a list with 10 colors when the group chat gets generated. That means some of the 10 colors in the list would fit with the background, some wouldn't and would need an adjustment so the readability is good again. And since the background color is not always the same, the text color of the usernames sometimes don't have a good readability.
What I'm doing now is to calculate the contrast ratio of the background- and the username text color and if it's below a certain value I generate a new random text color for that user until the contrast ratio reaches the threshhold again. This is for sure not really efficient since I have to run a loop to generate a random color and calculate the contrast ratio again until it fits.
I've also looked into just adjusting the brightness of the color depending on the background but that mostly leads to having the same text color for multiple users because the brightness got changed so much that the original color is not really recognizable anymore.
Does anyone have an idea how to or adjust the current text-color or calculate a new color which fits a specific contrast ratio out of two colors directly?
Since you have some colors declared already, why not create an array of objects mapping a background color and a text color instead? Like
const colors = [{
bgColor: "some hex value",
txtColor: "some adequately contrasting color"
},
{
bgColor: "some hex value",
txtColor: "some adequately contrasting color"
}];
When the user opts to change background color and you've taken hold of an object at a particular index of the above array, you set the background color and text color
const finalColors = colors[index];
wrapperBoxElement.style.backgroundColor = finalColor.bgColor;
wrapperBoxElement.querySelector('#username').style.color = finalColors.txtColor;
So I am currently learning JavaScript and I am doing an exercise in uploading an image to a website and applying different sorts of filters on the image.
I am dane so I am trying to make a filter that applies a danish flag on the image, in the same way that we saw people applying french flags to their Facebook profile image a while back.
When I apply the red parts of the danish flag, it looks something like this:
function danish(){
for (var pixel of image2.values()){
var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue()) / 3;
if(pixel.getX()<0.3*image2.getWidth() && pixel.getY()<0.4*image2.getHeight()){
if(avg < 128){
pixel.setRed(2*avg);
pixel.setGreen(0);
pixel.setBlue(0);
}
else if(avg >= 128){
pixel.setRed(255);
pixel.setGreen(2*avg-255);
pixel.setBlue(2*avg-255);
}
}
...
This part of the code works brilliantly as well as applying the remaining 3 squares of red. I also know how to address the specific pixels where the white color should go, but how do I make it whiter without making it a solid white?
Thanks in advance!
In my javascript file, i have a set of couples eache constituted by a letter and a number, for exemple : {(A,5), (B,7), ..., (Z,3)}.
For every couple (A,x) I have x divs in my html with a style = "background-color: {{object.color}}".
I'd like to write a method that randomly computes x colors for each couple (A,x) such that :
each color is enough different from the others to distinguish all of them.
every colors of a same couple are enough close to identify this couple.
For exemple : I have this couples : {(A,5), (B,4), (C,10)} so I have 19 divs in my html. For all 5 divs of set A I compute a color of blue tint, for all 4 divs of set B I compute a color of green tint, and for all 10 divs of set C I compute a color of red tint.
Of course you don't know the couples by advance :)
Is there a way to do that maybe using the RGB value of each color on css or something like this ?
for the moment I have only made a method where I pick each color completly randomly only avoiding colors that are too much dark or too much white and with a loop to garantee a color already taken can't be taken twice :
function(){
var cb=0;
var cr=0;
var cg=0;
var minEcart=40;
var testB=true;
var cptI=0;
while(testB){
testB=false;
cr=Math.round(Math.random()*170) + 85;
cb=Math.round(Math.random()*170) + 85;
cg=Math.round(Math.random()*170) + 85;
for(var j=0; j<$scope.colorAlreadyGiven.length;j++){
if(($scope.colorAlreadyGiven[j][0]-cb>=-minEcart)&&
($scope.colorAlreadyGiven[j][0]-cb<=minEcart)&&
($scope.colorAlreadyGiven[j][1]-cg>=-minEcart)&&
($scope.colorAlreadyGiven[j][1]-cg<=minEcart)&&
($scope.colorAlreadyGiven[j][2]-cr>=-minEcart)&&
($scope.colorAlreadyGiven[j][2]-cr<=minEcart)){
testB=true;
cptI++;
if(cptI>=50){
testB=false;
}
}
}
}
$scope.colorAlreadyGiven.push([cb,cg,cr]);
return "#"+(cb+cg*256+cr*65536).toString(16);
}
Thanks for your attention.
Check out this article on lightening and darkening color with javascript https://css-tricks.com/snippets/javascript/lighten-darken-color/
You can pick a base shade, and then lighten or darken it to a random degree
Another method would be to generate a color palette using a CSS pre-processor (SASS or LESS) first, and then use javascript to randomly assign one of those pre-generated colors via either classnames or an attribute ( .red1 .red2 .red3 or [data-red-shade=1] [data-red-shade=2] [data-red-shade=3] )
You're better off using lab colour space for that, since the calculations will be easier. Find colour conversion functions here: Colour conversion in javascript.
The most basic Lab logic would look something like this:
Count the number of pairs into x;
Split A and B colour space into x sections (you can treat it as a 2D graph);
Use midpoint of each section for each pair;
For each pair, find the number of points equidistant on L scale.
Now you have for each pair a set of coordinates {((a1,b1),[L1, L2, L3...]),((a1,b1),[L1, L2, L3...]), ((a1,b1),[L1, L2, L3...]), ...}
As you go on, you will find better ways to arrange these.
I have to display a number whose color changes from Red to Green uniformly as the value of the number decreases.
Is there any way to generate the font color of that number according to the value ?
Decreasing number equals red to green, I'd guess?
Why not make it simple, start out with your all red #FF0000, and work yourself down
to green at #00FF00?
Between the two there are FF*FF (256*256 = 65536) steps; adapt this to your needs and the JavaScript needed to get color should be simple.
ColorCalc - Nice tool for playing with/understanding hex v colors
I would approach this using CSS. I would create a set of styles, in the gradients of the colours that you need. Then using javascript I would apply the style which matched the number.
This way you can seperate your presentation, structure and js logic from each other, whilst keeping your js simple :)