SPH流体 - 踏得网

交互媒体作业二

h5, p5.js

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1199
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var POOL_WIDTH = 1.0;
var POOL_HEIGHT = 1.0;
var INITIAL_FLUID_WIDTH = 1.0;
var INITIAL_FLUID_HEIGHT = 0.5;

//重力
var GRAVITY = -9.8;
//流动密度
var FLUID_DENSITY = 1000.0;
//粒子间距
var PARTICLE_SPACING = 0.02;
//声速（计算压力要用）
var SOUND_SPEED = 1482.0;
//粘度多项式系数
var VISCOSITY_COEFF = 0.07;
//迭代时间间隔
var TIME_STEP = 0.002;
//核半径
var KERNEL_RADIUS = 0.07;
//粒子团
var PARTICLE_MASS;

//还原比例（碰撞函数要用）
var RESTITUTION_SCALE = 0.8;
//摩擦力比例（碰撞函数要用）
var FRICTION_SCALE = 0.5;

//KPoly6系数
var KERNEL_POLY6_COEF;
//核函数压力梯度系数
var KERNEL_SPIKY_GRAD_COEF;
//核函数粘滞力系数
var KERNEL_VISCO_LAP_COEF;

//外部力直径
var EXTERNAL_FORCE_RADIUS = 0.2;
//外部力大小
var EXTERNAL_FORCE_SCALE = 700.0;

//粒子数量
var N;
//粒子位置
var posX, posY;
//粒子速度
var velX, velY;
//加速度
var accX, accY;
//粒子密度
var dens;
//粒子压强
var press;
//周围粒子
var neighbor;

function setup() {
    createCanvas(650, 650);
    // noLoop();
    initialize();
}

function initialize() {
    //产生粒子
    makeParticles();
    //初始化粒子数组
    initializeArrays();
    //初始化参数
    initializeParams();
}

function initializeArrays() {
    velX = new Array(N);
    velY = new Array(N);
    accX = new Array(N);
    accY = new Array(N);
    dens = new Array(N);
    press = new Array(N);
    neighbor = new Array(N);
    for (var i = 0; i < N; i++) {
        velX[i] = 0.0;
        velY[i] = 0.0;
        accX[i] = 0.0;
        accY[i] = 0.0;
        dens[i] = 0.0;
        press[i] = 0.0;
        neighbor[i] = [];
    }
}

function initializeParams() {
    KERNEL_POLY6_COEF = 4.0 / (PI * sq(KERNEL_RADIUS));
    KERNEL_SPIKY_GRAD_COEF = -30.0 / (PI * pow(KERNEL_RADIUS, 3.0));
    KERNEL_VISCO_LAP_COEF = 20.0 / (3.0 * PI * pow(KERNEL_RADIUS, 4.0));
    //KERNEL_POLY6_COEF = 4.0 / (PI * pow(KERNEL_RADIUS, 8.0));
    //KERNEL_SPIKY_GRAD_COEF = -30.0 / (PI * pow(KERNEL_RADIUS, 3.0));
    //KERNEL_VISCO_LAP_COEF = 15.0 / (2.0 * PI * pow(KERNEL_RADIUS, 3.0));

calcParticleMass();
}

function mousePressed() {
    draw();
}

function draw() {
    //console.log('frameCount: ' + frameCount)
    render();
    update();
}

function renderDebug() {
    background(255);
    var xScale = width / POOL_WIDTH;
    var yScale = height / POOL_HEIGHT;

var kRadX = KERNEL_RADIUS * xScale;
    var kRadY = KERNEL_RADIUS * yScale;

noStroke();
    for (var i = 0; i < N; i++) {
        var x = posX[i] * xScale;
        var y = height - posY[i] * yScale;
        //fill(100, 100, 255, 50);
        fill(107, 142, 35, 50);
        ellipse(x, y, kRadX, kRadY);
        fill(255 * press[i] * 50.0, 0, 0);
        ellipse(x, y, 5, 5);
    }
}

function render() {
    background(0);
    var xScale = width / POOL_WIDTH;
    var yScale = height / POOL_HEIGHT;

var kRadX = KERNEL_RADIUS * xScale;
    var kRadY = KERNEL_RADIUS * yScale;

noStroke();
    for (var i = 0; i < N; i++) {
        var x = posX[i] * xScale;
        var y = height - posY[i] * yScale;
        //fill(100, 100, 255, 50);
        fill(150, 10, i / 5, 60);
        ellipse(x, y, kRadX, kRadY);
    }
    for (var i = 0; i < N; i++) {
        var x = posX[i] * xScale;
        var y = height - posY[i] * yScale;
        fill(255, 255, i / 5, 90);
        ellipse(x, y, 5, 5);
    }
}

//更新粒子位置并计算各个属性
function update() {
    calcNeighbors(); //周围粒子
    calcDensity(); //密度
    calcExternalForce(); //外力
    calcGravity(); //重力
    calcViscosity(); //粘滞力
    calcPressure(); //压力
    calcPressureGradient(); //梯度压力
    updateParticles(); //更新粒子
    calcCollision(); //碰撞
}

// function display(v) {
//   for (var i = 0; i < N; i++) {
//     console.log(i + ": " + v[i]);
//   }
// }

function kernelPoly6(d) {
    return KERNEL_POLY6_COEF * pow(1.0 - sq(d) / sq(KERNEL_RADIUS), 3.0);
}

function calcGravity() {
    for (var i = 0; i < N; i++) {
        accY[i] += GRAVITY;
    }
}

function calcExternalForce() {
    if (!mouseIsPressed) return;
    var mx = mouseX / width * POOL_WIDTH;
    var my = (1.0 - mouseY / height) * POOL_HEIGHT;
    var pmx = pmouseX / width * POOL_WIDTH;
    var pmy = (1.0 - pmouseY / height) * POOL_HEIGHT;
    var mlength = sqrt(sq(mx - pmx) + sq(my - pmy));
    if (mlength < 0.0000001) return;
    // var dirX = (mx - pmx);
    // var dirY = (my - pmy);
    var dirX = (mx - pmx) / mlength;
    var dirY = (my - pmy) / mlength;
    for (var i = 0; i < N; i++) {
        var d = sqrt(sq(posX[i] - mx) + sq(posY[i] - my));
        if (d > EXTERNAL_FORCE_RADIUS) continue;
        var decay = 1.0 - d / EXTERNAL_FORCE_RADIUS;
        accX[i] += PARTICLE_MASS * dirX * decay * EXTERNAL_FORCE_SCALE;
        accY[i] += PARTICLE_MASS * dirY * decay * EXTERNAL_FORCE_SCALE;
    }
}

function kernelVicosityLaplacian(d) {
    return KERNEL_VISCO_LAP_COEF * (1.0 - d / KERNEL_RADIUS);
}

function calcPressure() {
    var k = FLUID_DENSITY * SOUND_SPEED / 7.0;
    for (var i = 0; i < N; i++) {
        press[i] = k / 7.0 * pow(dens[i] / FLUID_DENSITY - 1.0, 7.0);
        press[i] = press[i] < 0.0 ? 0.0 : press[i];
    }
}

function kernelSpikyGradient(d) {
    return KERNEL_SPIKY_GRAD_COEF * sq(1.0 - d / KERNEL_RADIUS);
}

function updateParticles() {
    for (var i = 0; i < N; i++) {
        velX[i] += accX[i] * TIME_STEP;
        velY[i] += accY[i] * TIME_STEP;
        posX[i] += velX[i] * TIME_STEP;
        posY[i] += velY[i] * TIME_STEP;
        accX[i] = 0.0;
        accY[i] = 0.0;
        neighbor[i] = [];
    }
}

编译

CSS

HTML

交互媒体作业二

h5, p5.js

编辑器支持Emmet

快捷键

交互媒体作业二

h5, p5.js

HTML5 GSAP 很酷的彩色光束粒子流

一款很棒的HTML5+GSAP实现的日夜切换开关控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：