p5js for loop programming Q: how to make circles bigger and brighter near mouse pointer

Question

I wrote this function in p5js, where the circles get smaller near the pointer. I want it to do the opposite through. I want to make the circles bigger near the pointer. I also want them to get brighter near the mouse. But I haven't been able to figure out the solution! Here's the code:

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>

score 1 · Accepted Answer · answered Oct 03 '19 at 14:23

You've to define a minimum and a maximum radius. e.g.:

var max_rad = 40;
var min_rad = 5;

The radius is the maximum of the min_rad and the difference of max_rad and the distance to the mouse. e.g.:

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

See the example:

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>

p5js for loop programming Q: how to make circles bigger and brighter near mouse pointer

1 Answers1