1 year ago

#388634

test-img

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

Accepted video resources