P5.js how to do 8 directional lerp color/color change?

Question

A last issue i have in this code is that i am not sure how to create color change effect as 8 directional. I can only map a mouseX to make it lerpColor horizontally or vertically. But how do i make it work through moving both mouseX and mouseY?

I had it in shift_Color method within the class. I tried to state that within a certain dist(), lerpColor. But now it only showing black color rather than the changing color effect.

 let cubes = []; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); backCol = color(243, 243, 243); //background(backCol); for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { let xPos = map(i, 0, 9, 50, width - 50); let yPos = map(j, 0, 9, 50, height - 50); cubes.push(new Cubes(xPos, yPos)); } } } function draw() { background(backCol); noFill(); for (let a = 0; a < cubes.length; a++) { cubes[a].update(); } } class Cubes { constructor(x, y) { this.x = x; this.y = y; this.size = 30; this.stroke = 70; this.gap = 110 this.shift1 = color(96); this.shift2 = color(244); } update() { this.shape(); this.shift_Color(); } shape() { push(); stroke(this.stroke); //fill(this.shift1); this.shift_Color(); translate(this.x - width / 2, this.y - height / 2, 0); this.magnetic() box(this.size); pop(); } shift_Color() { let distance = dist(mouseX, mouseY, this.x, this.y); if (distance < this.gap) { this.shift1 = color(96); this.shift2 = color(244); this.shiftX = map(mouseX - width/2,this.gap,distance,0,1.0); this.change = lerpColor(this.shift1, this.shift2, this.shiftX); fill(this.change); } else { fill(this.shift1); } } magnetic() { let distance = dist(mouseX, mouseY, this.x, this.y); if (distance < this.gap) { this.attract = atan2(mouseY - this.y, mouseX - this.x); rotateX(this.attract); rotateY(this.attract); } else { rotateX(millis() / 1000); rotateY(millis() / 1000); } } }

Answer 1

If I understood your question properly, there are two problems in your code.

The first is the fact that because you are trying to map the distance between mouse and the cube to number between 0 and 1, you should write lerpColor(this.shift2, this.shift1, this.shiftX) instead of lerpColor(this.shift1, this.shift2, this.shiftX) , since this.shift2 is the lighter color and will be the inner color.

Another problem is when mapping the change variable, change should be calculated based on the distance between mouse and the cube (which is the distance variable), not mouseX or mouseY . Solution is to simply do map(distance, 0, this.gap, 0, 1); .

 let cubes = []; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); backCol = color(243, 243, 243); for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { let xPos = map(i, 0, 9, 50, width - 50); let yPos = map(j, 0, 9, 50, height - 50); cubes.push(new Cubes(xPos, yPos)); } } } function draw() { background(backCol); noFill(); for (let cube of cubes) { cube.update(); } } class Cubes { constructor(x, y) { this.x = x; this.y = y; this.size = 30; this.stroke = 70; this.gap = 110 this.shift1 = color(96); this.shift2 = color(244); } update() { this.shape(); this.shift_Color(); } shape() { push(); stroke(this.stroke); //fill(this.shift1); this.shift_Color(); translate(this.x - width / 2, this.y - height / 2, 0); this.magnetic() box(this.size); pop(); } shift_Color() { let distance = dist(mouseX, mouseY, this.x, this.y); if (distance < this.gap) { this.shiftX = map(distance, 0, this.gap, 0, 1); // this.shiftX = map(mouseX - width/2,this.gap,distance,0,1.0); this.change = lerpColor(this.shift2, this.shift1, this.shiftX); // this.change = lerpColor(this.shift1, this.shift2, this.shiftX); fill(this.change); } else { fill(this.shift1); } } magnetic() { let distance = dist(mouseX, mouseY, this.x, this.y); if (distance < this.gap) { this.attract = atan2(mouseY - this.y, mouseX - this.x); rotateX(this.attract); rotateY(this.attract); } else { rotateX(millis() / 1000); rotateY(millis() / 1000); } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

I also modified some of your code. Like the line

this.shift1 = color(96);
this.shift2 = color(244);

which is not needed currently since neither of these variable changes during execution.