时间戳

首页 > 解决方案 > p5js for loop 编程问：如何让鼠标指针附近的圆圈变大变亮

javascript - p5js for loop 编程问：如何让鼠标指针附近的圆圈变大变亮

问题描述

我在 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>

标签： javascriptfor-loopprocessingp5.jsellipse

解决方案

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

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>

推荐阅读