javascript - p5js for 循环编程 Q : how to make circles bigger and brighter near mouse pointer

Question

我在 p5js 中写了这个函数，圆圈在指针附近变小了。我希望它做相反的事情。我想让指针附近的圆圈更大。我还希望它们在鼠标附近变得更亮。但是我一直没能想出解决办法!这是代码:

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 400);
}

function draw() {
    background(220);
    noFill();
    noStroke();
    for(var y=10;y<400; y+=40){
        for(var x=10; x<400; x+=40){

            var myHue = map(y,0,400,230,320);
            fill(myHue,400-x,400);

            var rad = dist(x,y,mouseX, mouseY)/4;
            ellipse(x,y,rad);
        }
    }
}

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

Answer 1

您必须定义最小和最大半径。例如:

var max_rad = 40;
var min_rad = 5;

半径是min_rad的最大值与max_rad的差值与鼠标的距离。例如:

var rad = max(min_rad, max_rad - dist(x, y, mouseX, mouseY)/4);

看例子:

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 400);
}

function draw() {
    background(220);
    noFill();
    noStroke();
    var max_rad = 40;
    var min_rad = 5;
    for(var y=10;y<400; y+=40){
        for(var x=10; x<400; x+=40){

            var myHue = map(y,0,400,230,320);
            fill(myHue,400-x,400);

            var rad = max(min_rad, max_rad - dist(x, y, mouseX, mouseY)/4);
            ellipse(x,y,rad);
        }
    }
}

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