We Keep Coding

Divert background color choosing in p5js

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;
}

Can I use JavaScript to copy an existing colour in css to a gradient background?

I work for a company that provides software for management, in the back end, you can configure the colour schemes to make the pages it creates suit the branding and images better.
Buttons have a gradient applied to them, consisting of a lighter and darker colour, the button CSS is below.
.btn-default {
linear-gradient(to bottom,#9c8400 0%,#5f5000 100%)
}
What I would like to do is take the above gradient and keep the lighter colour the same but change the darker color to white, the lighter color is always the first color in the gradient, and then apply the resulting gradient to the body.
linear-gradient(to bottom,#ffffff 0%,#9c8400 100%);
A previous response provided an answer that almost works but I need to flip the colors (light and dark colours need to be in each other's positions) and change the darker color to white.
const buttonStyle = window.getComputedStyle(button);
console.log(buttonStyle.backgroundImage);
document.body.style.backgroundImage = buttonStyle.backgroundImage;

You can fetch the style of your button and re-apply it like that:
const button = document.querySelector('.btn-default');
const buttonStyle = window.getComputedStyle(button);
console.log(buttonStyle.backgroundImage);
document.body.style.backgroundImage = buttonStyle.backgroundImage;
.btn-default {
background: linear-gradient(to bottom,#9c8400 0%,#5f5000 100%)
}
<button class="btn-default">Hello</button>
If you need, you can parse buttonStyle.backgroundImage to extract the first color, then apply it wherever you want!

I think the way you should handle this is to have your css property from JS, with the value #9c8400 coming from a variable, and then you'd apply it on your DOM. Every time you want to update the style, you'd just have to change the content of your variable and re-apply the custom CSS to your DOM element
Hope this helps you, I tried to not write direct answer like you asked :p

How can I change a games background when controlled object runs into the border of canvas?

I'm somewhat new to coding. I currently have a code that creates a canvas for a controlled character to move around. So far I have it where if the character runs into the right border of the canvas, it will move the character to the left of the canvas. However I want to have the background change as well, showing the character has entered a new area. How would I go about doing this? The background is currently made with the use of CSS.

First you need to get your canvas into a variable. If it has an ID, you can use that:
var canvas = document.getElementById("YOUR_CANVAS_ID_HERE");
Then use this code to set the canvas' background color:
canvas.style.backgroundColor = "red";
That should be all you need!

Changing Background Color, CreateJS/Javascript

I want to change the background color of the stage/canvas upon a certain input, to enunciate a change in the mode that the program is in. Therefore I would like to change the canvas to black when in the different mode and then back to white when the mode is inactive. The background defaults to white.
<canvas id="canvas" width="1500" height="1500">Alternative Content</canvas>
but I imagine I would want to change it with respect to what is in my init function.
var canvas = document.getElementsByTagName('canvas')[0];
canvas.setAttribute('tabindex','0');
canvas.focus();
stage = new createjs.Stage(canvas);
Any ideas how I can change the background color with regards to an input?

You can change the color using JavaScript to set the CSS style.
// Change it to red
canvas.style.backgroundColor = "#ff0000";
// Change it to the value of a text input
canvas.style.backgroundColor = document.getElementById("myTextInput").value;
There is currently no way to do this directly with EaselJS or the Stage.
Hope that helps.

Javascript rotating banner - Initial BG Colour change

I'm currently using the Dynamic drive java script code for a rotating banner on one of our company websites.
The problem I'm having is that the initial background colour for the banner when loading into the page is pure black, and I'm struggling to find where I can change that.
example website: http://www.sakawater.com
You'll notice the initial BG is black, going to white - which does not look great.
The javascript comes from : http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
I've not modified much apart from the scale of the banner and fade speed, can someone point me in the right direction on how to fix/change the initial loading background colour please? Or how to remove having a BG for that at all.
Thank you,
Navson

in fadeslideshow.js Try to search gallerylayer and you will see this line:
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
Here you will see the color black, change it accordingly.