9
I am creating a scenario with Parallax and wanted to simulate color change in the mountains, for that, the color will be chosen by the user. I have 3 buttons for the effect.
My problem is I don’t know how I’m gonna make the mountains change color since they start with a fixed color.
HTML is practically done:
<div id="game">
<button class="user" data-name="red">Red</button>
<button class="user" data-name="green">Green</button>
<button class="user" data-name="blue">Blue</button>
<button id="test">Change Color</button>
My question is how I’m going to get the mountains to start with the color selected, I don’t even know if it makes sense to have the button "Change Color".
The Javascript code of the setup is as follows:
id="rendered-js">
(function () {
var Montanha, MontanhaRange, dt, MontanhaRanges, janela;
janela = Sketch.create();
janela.mouse.x = janela.width / 10;
janela.mouse.y = janela.height;
MontanhaRanges = [];
dt = 1;
p = 90;
Montanha = function (config) {
return this.reset(config);
};
$(document).ready(function() {
var user = "none";
$(".user").click(function() {
user = $(this).attr("data-name");
});
$("#test").click(function() {
window.location.reload();
p = 240
});
});
// Montanhas
Montanha.prototype.reset = function (config) {
this.layer = config.layer;
this.x = config.x;
this.y = config.y;
this.width = config.width;
this.height = config.height;
return this.color = config.color;
};
// Montanha tamanho
MontanhaRange = function (config) {
this.x = 0;
this.Montanhas = [];
this.layer = config.layer;
this.width = {
min: config.width.min,
max: config.width.max };
this.height = {
min: config.height.min,
max: config.height.max };
this.speed = config.speed;
this.color = config.color;
this.populate();
return this;
};
MontanhaRange.prototype.populate = function () {
var newHeight, newWidth, results, totalWidth;
totalWidth = 0;
results = [];
while (totalWidth <= janela.width + this.width.max * 4) {if (window.CP.shouldStopExecution(0)) break;
newWidth = round(random(this.width.min, this.width.max));
newHeight = round(random(this.height.min, this.height.max));
this.Montanhas.push(new Montanha({
layer: this.layer,
x: this.Montanhas.length === 0 ? 0 : this.Montanhas[this.Montanhas.length - 1].x + this.Montanhas[this.Montanhas.length - 1].width,
y: janela.height - newHeight,
width: newWidth,
height: newHeight,
color: this.color }));
results.push(totalWidth += newWidth);
}window.CP.exitedLoop(0);
return results;
};
MontanhaRange.prototype.update = function () {
var firstMontanha, lastMontanha, newHeight, newWidth;
this.x -= janela.mouse.x * this.speed * dt;
firstMontanha = this.Montanhas[0];
if (firstMontanha.width + firstMontanha.x + this.x < -this.width.max) {
newWidth = round(random(this.width.min, this.width.max));
newHeight = round(random(this.height.min, this.height.max));
lastMontanha = this.Montanhas[this.Montanhas.length - 1];
firstMontanha.reset({
layer: this.layer,
x: lastMontanha.x + lastMontanha.width,
y: janela.height - newHeight,
width: newWidth,
height: newHeight,
color: this.color });
return this.Montanhas.push(this.Montanhas.shift());
}
};
MontanhaRange.prototype.render = function () {
var c, d, i, j, pointCount, ref;
janela.save();
janela.translate(this.x, (janela.height - janela.mouse.y) / 20 * this.layer);
janela.beginPath();
pointCount = this.Montanhas.length;
janela.moveTo(this.Montanhas[0].x, this.Montanhas[0].y);
for (i = j = 0, ref = pointCount - 2; j <= ref; i = j += 1) {if (window.CP.shouldStopExecution(1)) break;
c = (this.Montanhas[i].x + this.Montanhas[i + 1].x) / 2;
d = (this.Montanhas[i].y + this.Montanhas[i + 1].y) / 2;
janela.quadraticCurveTo(this.Montanhas[i].x, this.Montanhas[i].y, c, d);
}window.CP.exitedLoop(1);
janela.lineTo(janela.width - this.x, janela.height);
janela.lineTo(0 - this.x, janela.height);
janela.closePath();
janela.fillStyle = this.color;
janela.fill();
return janela.restore();
};
// SETUP
janela.setup = function () {
var i, results;
i = 5;
results = [];
while (i--) {if (window.CP.shouldStopExecution(2)) break;
results.push(MontanhaRanges.push(new MontanhaRange({
layer: i + 1,
width: {
min: (i + 1) * 50,
max: (i + 1) * 70 },
height: {
min: 200 - i * 40,
max: 300 - i * 40 },
speed: (i + 1) * .003,
color: 'hsl(' + p + ', ' + ((i + 1) * 1 + 10) + '%, ' + (75 - i * 13) + '% )' })));
console.log("Hello world!");
}window.CP.exitedLoop(2);
return results;
};
// CLEAR
janela.clear = function () {
return janela.clearRect(0, 0, janela.width, janela.height);
};
// UPDATE
janela.update = function () {
var i, results;
dt = janela.dt < .1 ? .1 : janela.dt / 16;
dt = dt > 5 ? 5 : dt;
i = MontanhaRanges.length;
results = [];
while (i--) {if (window.CP.shouldStopExecution(3)) break;
results.push(MontanhaRanges[i].update(i));
}window.CP.exitedLoop(3);
return results;
};
// DRAW
janela.draw = function () {
var i, results;
i = MontanhaRanges.length;
results = [];
while (i--) {if (window.CP.shouldStopExecution(4)) break;
results.push(MontanhaRanges[i].render(i));
}window.CP.exitedLoop(4);
return results;
};
// Mousemove Fix
$(window).on('mousemove', function (e) {
janela.mouse.x = e.pageX;
return janela.mouse.y = e.pageY;
});
}).call(this);
and where I define the color is in the variable p:
color: 'hsl(' + p + ', ' + ((i + 1) * 1 + 10) + '%, ' + (75 - i * 13) + '% )' })));
that I start with 120 because it’s green:
As I can choose and change the following color, I’m using this code but it doesn’t work because it re-loads the page and reloads the green 120:
$(document).ready(function() {
var user = "none";
$(".user").click(function() {
user = $(this).attr("data-name");
});
$("#test").click(function() {
window.location.reload();
p = 240
});
});
I think you’re complicating something you could do with just CSS.... Put in your question a full example, or at least a link where to test the template. The way it is is complicated to answer you, until pq can not know if the image is a canvas, svg, or png for example....
– hugocsl
Thanks for the repair, I’ve put the full JS code,
– SaPires