原始粒子系统-JavaScript中的二维粒子交互

原始粒子系统-JavaScript中的二维粒子交互,javascript,particles,Javascript,Particles,这只是我的复活尝试。阅读下面的更多内容。 我发布这篇文章只是为了保留一位新成员上周在这里发布的一个有趣的问题,他后来自愿删除了这个问题;即使是在这个问题发布后的几个小时内,他也获得了好几票和好几颗星 链接到原始/现在已删除的问题: 我不是这个领域的专家,目前有点感兴趣,但是,我足够聪明,将所有代码和链接离线保存以备将来使用;) 原始问题-重建 问题 我想模拟和可视化由以下项控制的粒子相互作用:[] 在给定设置下: PPS = 〈R = 5, α = 180°, β = 17°v = 0.67

这只是我的复活尝试。阅读下面的更多内容。

我发布这篇文章只是为了保留一位新成员上周在这里发布的一个有趣的问题,他后来自愿删除了这个问题;即使是在这个问题发布后的几个小时内,他也获得了好几票和好几颗星

链接到原始/现在已删除的问题:

我不是这个领域的专家,目前有点感兴趣,但是,我足够聪明,将所有代码和链接离线保存以备将来使用;)

原始问题-重建


问题

我想模拟和可视化由以下项控制的粒子相互作用:[]

在给定设置下:

PPS = 〈R = 5, α = 180°, β = 17°v = 0.67>

有效地复制以下观察结果:[]

如以下视频所示:

但是创建者没有提供他们所说的源代码:

“你能发布代码吗?”

“我们把所有需要的东西都写进了科学报告中,这是 开放访问。没有更多了。我们曾经压缩了 将完全运行的模型放到推特上。这是在 推文有140个字符,模型非常简单,非常简短。”

参考本问题开头包含的伪代码

问题

重要提示:此处不复制原作者的代码作品

我如何才能使这项工作如图所示



针对PPS系统的JavaScript中已经有几个解决方案/工作代码示例:

  • 按用户nagualdesign@github
  • 旧版/原始版本@Google Drive:

    我将只在这里发布他的旧的更简单的代码版本的一个片段。 请访问他的GitHub页面以获取最新版本

    //作者:用户“nagualdesign”@github
    //github存储库:https://github.com/nagualdesign/Primordial-Particle-System
    //有关更多信息,请访问:https://www.youtube.com/watch?v=makaJpLvbow
    //本视频主要关注alpha、beta、v和r的特定值
    //它接着显示了改变alpha和beta值的效果
    //要复制视频,必须调整粒子的密度
    //密度取决于筛网尺寸,以及颗粒大小和数量
    //还可以通过放大/缩小和刷新来增加/减少密度
    //全局变量:
    变量a=180;//α度
    var b=17;//贝塔度
    var v=0.67;//粒子速度
    var r=5.0;//邻域半径
    //转换成弧度!
    a=(a/180)*Math.PI;
    b=(b/180)*Math.PI;
    变量画布,上下文;//HTML画布
    var t=40;//时间间隔(毫秒)
    var s=5;//颗粒的大小/比例
    变量n=1200;//粒子数
    var p=新数组(n);//粒子
    函数init(){
    //设置画布:
    canvas=document.getElementById(“canvas”);
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    context=canvas.getContext(“2d”);
    对于(i=0;i16)fc='#0064FF';//蓝色
    如果(p[i][3]>15)fc='#FF0792';//洋红
    else如果(p[i][3]>12)fc='#A4714B'//Brown
    //绘制粒子:
    context.beginPath();
    弧(p[i][0],p[i][1],s,0,2*Math.PI);
    context.fillStyle=fc;
    context.fill();
    }
    }
    函数范围(ang){//确保角度在0到2*pi弧度之间!
    而(ang>(2*Math.PI))ang=ang-(2*Math.PI);
    而