p5js для циклического программирования Q: как сделать круги больше и ярче рядом с указателем мыши - PullRequest
Новая
       23

p5js для циклического программирования Q: как сделать круги больше и ярче рядом с указателем мыши

1 голос
/ 03 октября 2019

Я написал эту функцию в 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>

1 Ответ

1 голос
/ 03 октября 2019

Вы должны определить минимальный и максимальный радиус. Например: 

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>
...