p5js/demo_particle.js

let particles = [];

function setup() {
    createCanvas(600, 600);
    angleMode(DEGREES);
    frameRate(60);
    noStroke();
    noCursor();
}

function draw() {
    火把();
    // 落珠();
}

function 火把() {
    background(0);
    drawGrid();
    const x = mouseIsPressed ? mouseX : 300;
    const y = mouseIsPressed ? mouseY : 500;
    // 添加新粒子
    for (let i = 0; i < 5; i++) {
        const p = new Particle(x, y);
        p.velocity.x = random(-1, 1) * 30;
        p.velocity.y = random(-5, -1) * 50;
        p.life = 1;
        particles.push(p);
    }
    // 绘制火把
    fill("lightgray");
    rect(x - 5, y - 10, 10, 80);
    fill("gray");
    rect(x - 7, y - 10, 14, 20);
    // 更新并绘制所有粒子
    push();
    for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        noiseDetail(2, 0.5);
        let windForce = map(noise(frameCount / 1000), 0, 1, -500, 500);
        // let windForce = map(mouseX, 0, width,-1000,1000)
        p.applyForce(createVector(windForce, 0));
        p.applyForce(createVector(0, -100));
        p.move();
        if (p.finished) {
            particles.splice(i, 1);
        } else {
            const alpha = map(p.duration, 0, p.life, 255, 0);
            const size = map(p.duration, 0, p.life, 8, 32);
            fill(255, alpha);
            circle(p.position.x, p.position.y, size);
        }
    }
    pop();
    textInfo("火把", "2022/12/11");
}

function 落珠() {
    background(0);
    drawGrid();
    const x = mouseIsPressed ? mouseX : 300;
    const y = mouseIsPressed ? mouseY : 50;
    // 添加新粒子
    if (particles.length < 1) {
        for (let i = 0; i < 1; i++) {
            const p = new Particle(x, y);
            p.velocity.x = random(-50, 50);
            p.life = 5;
            particles.push(p);
        }
    }
    push();
    for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.applyForce(createVector(0, 100));
        p.move(true);
        if (p.finished) {
            particles.splice(i, 1);
        } else {
            const alpha = map(p.duration, 0, p.life, 255, 0);
            stroke(255, alpha);
            fill(128, alpha);
            circle(p.position.x, p.position.y, 4);
        }
    }
    pop();
    textInfo("落珠", "2022/12/12");
}

function drawGrid() {
    push();
    stroke(255, 64);
    strokeWeight(1);
    for (let x = 0; x < width; x += 10) line(x, 0, x, height);
    for (let y = 0; y < height; y += 10) line(0, y, width, y);
    pop();
}

function textInfo(title, date, name = "赵海洋爸爸") {
    push();
    noStroke();
    fill(255);
    text(`作品：${title}`, 30, height - 70);
    text(`作者：${name}`, 30, height - 50);
    text(`日期：${date}`, 30, height - 30);
    pop();
}