Change the values of the colors in their relative position to each other at the start on the individual sliders in the dom.
Use value: slider1.value(), slider2.value(),slider3.value()
I want to get the colors to change in proportion to their initial ratio of rgb. But I can’t wrap my head around the logic at the moment.
Code:
var text;
var canvas;
var slider1;
var slider2;
var slider3;
var offsetRotate = 50;
var squares = [];
var square;
var square2;
var square3;
square = {
x: 55,
y: 55,
a: 255,
r: 0,
g: 0,
b: 0,
move: function() {
this.x++;
this.y++;
},
fillnew: function() {
fill(this.r += 1, this.g += .1759787, this.b += .5);
},
rotate: function() {
push();
translate(width * 0.2, height * 0.25);
this.fillnew
rotate(frameCount * 30) + offsetRotate;
rect(this.x – 50, this.y – 50, 30, 30);
pop();
}
};
offsetRotate += 35;
squares.push(square)
square2 = {
x: 55,
y: 55,
a: 255,
r: 0,
g: 0,
b: 0,
move: function() {
this.x++;
this.y++;
},
fillnew: function() {
fill(this.r + .001, this.g + 0.1759787, this.b += .555, this.a += 15);
},
rotate: function() {
push();
translate(width * 0.2, height * 0.25);
this.fillnew
rotate(frameCount * 30);
rect(this.x – 25, this.y – 25, 30, 30);
pop();
}
};
offsetRotate += 35;
squares.push(square2)
square3 = {
x: 55,
y: 55,
a: 255,
r: 0,
g: 0,
b: 0,
move: function() {
this.x++;
this.y++;
},
fillnew: function() {
fill(slider1.value());
},
rotate: function() {
push();
translate(width * 0.2, height * 0.25);
this.fillnew
rotate(frameCount * 30);
rect(this.x – 220, this.y – 220, 30, 30);
pop();
}
}
offsetRotate += 150;
squares.push(square3);
function setup() {
slider1 = createSlider(0, 255, 0);
slider2 = createSlider(0, 255, 0);
slider3 = createSlider(0, 255, 0);
slider1.changed(function() {
print(slider1.value(r + .001, g + 0.15, b += .555, a += 15));
});
slider2.changed(function() {
print(slider2.value());
});
slider3.changed(function() {
print(slider3.value());
});
canvas = createCanvas(1080, 600);
canvas.position(50, 100);
background(0);
}
function draw() {
for (var i = 0; i < squares.length; i++) {
squares[i].move();
squares[i].fillnew();
squares[i].rotate();
}
}