1 year ago
#388634
magui
Can I control the blob function with mouseX and mouseY?
I'm a newbie with p5.js, but I want to create a blob that follows my cursor across the screen. I saw that you could do it with the mouseX and mouseY variables. Here is my code:
let kMax;
let step;
let n = 100; // number of blobs
let radius = -50; // diameter of the circle
let inter = 0.1; // difference between the sizes of two blobs
let maxNoise = 1100;
let lapse = 0; 10 // timer
let mouseX;
let mouseY;
let noiseProg = (x) => (x);
function setup() {
createCanvas(windowWidth, windowHeight);
//colorMode(HSB, 1);
angleMode(DEGREES);
noFill();
//noLoop();
kMax = random(0.6, 1.0);
step = 0.01;
noStroke();
mouseX
mouseY
}
function draw() {
blendMode(BLEND);
background(5,4,0);
blendMode(LIGHTEST);
let t = frameCount/100;
for (let i = n; i > 0; i--) {
let alpha = pow(1 - noiseProg(i / n), 3);
let size = radius + i * inter;
let k = kMax * sqrt(i/n);
let noisiness = maxNoise * noiseProg(i / n);
fill(142, 0, 255, alpha*255);
blob(size, width/2, height/2, k, t - i * step, noisiness, mouseX, mouseY, pmouseX, pmouseY);
fill (255,0,255, alpha*255);
blob(size, width/2, height/2, k, t - i * step + 1, noisiness, mouseX, mouseY, pmouseX, pmouseY);
fill (171, 126, 255, alpha*255);
blob(size, width/2, height/2, k, t - i * step + 2, noisiness, mouseX, mouseY, pmouseX, pmouseY);
//fill (03, 25, 250, alpha*255); aqua blue
//blob(size, width/2, height/2, k, t - i * step + 1, noisiness);
// fill(150, 0, 255, alpha*255);
// blob(size, width/2, height/2, k, t - i * step + 2, noisiness);
}
}
function blob(size, xCenter, yCenter, k, t, noisiness) {
beginShape();
let angleStep = 360 / 12;
for (let theta = 0; theta <= 360 + 14 * angleStep; theta += angleStep) {
let r1, r2;
/*
if (theta < PI / 2) {
r1 = cos(theta);
r2 = 1;
} else if (theta < PI) {
r1 = 0;
r2 = sin(theta);
} else if (theta < 3 * PI / 2) {
r1 = sin(theta);
r2 = 0;
} else {
r1 = 1;
r2 = cos(theta);
}
*/
r1 = cos(theta)+1;
r2 = sin(theta)+1;
let r = size + noise(k * r1, k * r2, t) * noisiness;
let x = xCenter + r * cos(theta);
let y = yCenter + r * sin(theta);
curveVertex(x, y);
}
endShape();
}
I've been trying different options, but currently, it is not working, and I cannot figuring why. When I try with the ellipse function it seems to work ok. Can you help me? :(
javascript
p5.js
0 Answers
Your Answer