We Keep Coding

How to strech / repeat a small png image according to the screen size in cocos2d-js?

I am trying to strech/scale/repeat a small image based on the screen size, but I couldnot find a proper solution. Could someone help?
dmm.director = cc.director;
dmm.origin = dmm.director.getVisibleOrigin();
dmm.size = dmm.director.getVisibleSize();
dmm.midpoint = cc.p(
dmm.origin.x + dmm.size.width * 0.5,
dmm.origin.y + dmm.size.height * 0.5
);
this.bg_sprite = new cc.Sprite('#bg.png');
this.bg_sprite.setPosition(cc.p(dmm.midpoint.x,
origin.y + size.height * 0.65));
this.addChild(this.bg_sprite);

Adding additional hex colors to RGB color mixing algorithm

I already have a decent algorithm that is able to combine and mix CMYK colors together. However it is unable to combine additional hex colors without failing. I would like some help in figuring out how I can edit the algorithm to accept other colors. I know its possible to color mix several colors as I've seen it being done in other online free apps.
Another modification I'd like to make is to have the overall mixture at 100%. Currently you can max out all colors at 100% but I'd like to have it where you can only have a percentage of each color to make up to 100%.
Full code can be found here:
https://jsfiddle.net/5dsgbne9/30/
Heres the main color mixing algorithm which needs to be modified
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value;
}
});
var colorPercentages = {};
var colors = document.getElementsByClassName("colors");
for (let i = 0; i < colors.length; i++) {
if (!(colors[i].getAttribute("id") in colorPercentages)) {
colorPercentages[colors[i].getAttribute("id")] = 0;
}
colors[i].addEventListener("click", function() {
colorPercentages[colors[i].getAttribute("id")] = $("#ex1").val();
colors[i].innerHTML = colors[i].getAttribute("id") + " " + $("#ex1").val() + "%";
console.log(colorPercentages)
//formula here!!
let r = 255 * (1 - colorPercentages.Cyan / 100) * (1 - colorPercentages.Black / 100);
let g = 255 * (1 - colorPercentages.Magenta / 100) * (1 - colorPercentages.Black / 100);
let b = 255 * (1 - colorPercentages.Yellow / 100) * (1 - colorPercentages.Black / 100);
$("body").css('background-color', 'rgb(' + r + ', ' + g + ', ' + b + ')');
});
}

Give my fiddle a try:
EDIT: New fiddle
https://jsfiddle.net/wg6bp210/15/
My solution requries the rgb information to be present in the element, so:
<button class="colors" id="Yellow" hexa="#ffff00">Yellow</button>
becomes
<button class="colors" id="Yellow" hexa="#ffff00" r="254" g="221" b="0">Yellow</button>
Had to basically rewrite the whole code but the fiddle does everything requested:
1) Adds selected colors and updates background color accordingly;
2) Updates percentages on buttons accordingly to a total of 100%;
3) Implemented a deactivate behavior, to deactivate the color on
click, in case it was already activated.

Color Change of stacked menu and social media based on background color

Im trying to replicate this sites color change of the hamburger and social media based on the the background of the div https://pithworks.com/
As you scroll you can see that it changes color based on a light and darker background. I've tried several options such as colourBrightness.js and background-check.js and have no success.
Any ideas on how to get his to work.
Thanks

Here is a possible solution :
var cursor = 0;
var direction = -1;
var fps = 15; // frames per second
// -0.25 ... 0 ... 0.25
// ^
// cursor
setInterval(function () {
cursor += direction * 0.01;
if (Math.abs(cursor) > 0.25) direction *= -1;
document.body.style.background = makeGradient(cursor);
}, 1000 / fps);
function makeGradient (cursor) {
var p1 = Math.round(cursor * 100);
var p2 = Math.round((cursor + 1) * 100);
return "linear-gradient(45deg, "
+ "#ff2200 " + p1 + "%, "
+ "#23548b " + p2 + "%"
+ ")";
}
html,body{padding:0;margin:0;height:100%;}
See http://www.colorzilla.com/gradient-editor.

IF: Opacity is 50% or Less Draw Circle

For one of my classes, we need to create an
if (...){
then draw something!
}
statement. However, I am super new to JavaScrip and whenever I try to create the if statement, I don't have much success.
What I am trying to do is only have a circle (by using the canvas) show if the opacity is 50% (I may change this value at a later time) or less. I have it so that the colour and opacity is randomised. I do have other shapes with this design, however, just for the purpose of this I have excluded them from the below example and JSFiddle.
Here's what I have so far: JSFiddle
var draw_optional = true;
if (ran_colours < "(0.5)"){
draw_optional = true;
context.stroke();
}
I was wondering am I doing something wrong? If you click on the JSFiddle link you can see my full code!
Thanks in advance!

ran_colours looks like this: "rgba(29,251,218,0.5617056562158282)".
what do you think, is "rgba(29,251,218,0.5617056562158282)" smaller than "(0.5)"? Right, you can't tell (I hope). You need to get the alpha value string, or precalculate the alpha-value and store it in its own variable. Second approach is much nicer, so here is how it's done:
Before you assign the rgba-color to ran_colours, add this line:
var alpha = Math.random();
In the ran_colours assignment, replace the last random-call with the alpha-variable
var ran_colours =
"rgba("
+ Math.floor(Math.random() * 256) + ","
+ Math.floor(Math.random() * 256) + ","
+ Math.floor(Math.random() * 256) + ","
+ alpha + ")";
Since alpha is just a number, you can easily write your if-statement:
if (alpha < 0.5){
draw_optional = true;
context.stroke();
}

Using javascript to change rgb value of background onclick

I'm trying to implement a very simple JavaScript program: every time you click the button, the RGB values of the background color are randomized.
Here's the Javascript:
function change() {
var x = Math.floor(Math.random() * 256); // range is 0-255
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var thergb = "'rgb(" + x + "," + y + "," + z + ")'";
console.log(thergb);
document.body.style.background=thergb;
}
I'm pretty sure the problem is in how I hack together the thergb variable, but there are no errors in the console so I'm not quite sure. I log the console just to make sure it's giving me an actual random rgb, which it is.
Here's the full JSFiddle: http://jsfiddle.net/L92bY/

You have wrapped it in ' .. why ?
If you remove that it works..
var thergb = "rgb(" + x + "," + y + "," + z + ")";
Demo at http://jsfiddle.net/gaby/L92bY/9/
(you also needed to define the change function in the head tag and not in the onLoad event..)

The CSS syntax for an rgb() value does not include single quotes.
Change 'rgb(x,y,z)' to rgb(x,y,z).

Two things:
You need to choose one of the "nowrap" options for where the fiddle server puts your code.
You need to get rid of the single-quote characters around your "rgb()" expression.
var thergb = "rgb(" + x + "," + y + "," + z + ")";
Personally I'd set "backgroundColor" instead of just "background", but it works (in Firefox at least) to set "background".
Fixed fiddle.

Working fiddle (just corrected your code): http://jsfiddle.net/L92bY/18/
The syntax for the CSS color as rgb is rgb(r,g,b) (no extra apostrophe "'") = not 'rgb(r,g,b)'
function change() {
var x = Math.floor(Math.random() * 256); // range is 0-255
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var thergb = "rgb(" + x + "," + y + "," + z + ")";
console.log(thergb);
document.body.style.background=thergb;
}
PS: If this is not working for you you are calling this javascript function BEFORE it was declared.

You could probably also just simplify where your code went wrong by using string template literals.
var thergb = `rgb(${x}, ${y}, ${z})`