Изначальная система частиц - 2D взаимодействие частиц в JavaScript

Question

Это только моя попытка воскресения.Подробнее читайте ниже.

Я публикую это только как попытку сохранить интересный вопрос, опубликованный новым участником здесь на прошлой неделе, который он позже добровольно удалил сам;даже после того, как вопрос получил несколько положительных голосов и звезд в течение нескольких часов после публикации.

Ссылка на оригинальный / удаленный вопрос: https://stackoverflow.com/questions/54478107/2d-particle-interactions

Я не являюсь экспертом в этомполе, немного заинтересовало в данный момент, однако, я был достаточно умен, чтобы сохранить весь код и ссылки в автономном режиме для дальнейшего использования;)

Оригинальный вопрос - Реконструкция

---

Проблема

Я хочу смоделировать и визуализировать взаимодействия частиц, которые регулируются: [ источник изображения ]

С заданными настройками:

PPS = 〈r = 5, α = 180 °, β = 17 °, v = 0,67〉

Эффективно реплицирует следующие наблюдения: [ источник изображения ]

Как показано в следующем видео:

Как жизнь возникает из закона движения простых частиц

Но создатели не предоставили своиНаш код, как они заявили:

«ВЫ МОЖЕТЕ ИЗДАТЬ КОД, ПОЖАЛУЙСТА?»

«Мы вложили все необходимое в статью« Научные отчеты », которая является открытым доступом.Это не более того.Однажды мы сжали код полностью работающей модели в твит.Это было в те дни, когда твиты имели 140 символов.Модель очень простая и супер-короткая. "

Обращаясь к псевдокоду, включенному в начало этого вопроса.

ВОПРОС

важное примечание: оригинальный авторский код работы здесь не копируется

Как я могу сделать эту работу, как показано?

---

Answer 1

Уже есть несколько решений / примеров рабочего кода в JavaScript для системы PPS:

1. от пользователя nagualdesign @ github

https://github.com/nagualdesign/Primordial-Particle-System

старые / оригинальные версии @ Google Drive:

https://drive.google.com/file/d/1eX_cczNM4qfDue6j83f8T4gG4ecjSV-p

https://drive.google.com/file/d/1KoJf753p3HXPHwP4N2lW9cWLXgusTP72

Я буду публиковать здесь только какфрагмент его старой более простой версии кода.Пожалуйста, посетите его страницу GitHub для самой последней версии.

// author: user "nagualdesign" @ github
// github repository: https://github.com/nagualdesign/Primordial-Particle-System
// For more information visit: https://www.youtube.com/watch?v=makaJpLvbow
// This video focuses primarily on specific values of alpha, beta, v and r
// It goes on to show the effects of altering the values of alpha and beta
// To replicate the video it is necessary to tune the density of particles
// Density depends on the screen size, as well as particle size and number
// You can also increase/decrease density by zooming in/out and refreshing

// Global variables:
var a=180; // Alpha in degrees
var b=17; // Beta in degrees
var v=0.67; // Speed of particles
var r=5.0; // Radius of neighbourhood

// Convert to radians!
a=(a/180)*Math.PI;
b=(b/180)*Math.PI;

var canvas, context; // HTML canvas
var t=40; // Time interval in milliseconds
var s=5; // Size/scale of particles
var n=1200; // Number of particles
var p=new Array(n); // Particles

function init() {
	// Set up canvas:
	canvas=document.getElementById("canvas");
	canvas.width=window.innerWidth;
	canvas.height=window.innerHeight;
	context=canvas.getContext("2d");
	for (i=0; i<n; i++) { // Randomize position and orientation of particles:
		p[i]=new Array(4); // Each particle has 4 variables
		p[i][0]=Math.random()*window.innerWidth; // Set random x coordinate
		p[i][1]=Math.random()*window.innerHeight; // Set random y coordinate
		p[i][2]=Math.random()*2*Math.PI; // Set random orientation
	}
}

function draw() {
	context.clearRect(0,0,canvas.width,canvas.height); // Clear canvas
	for (i=0; i<n; i++) { // For each particle:
		// Set fill colour based on number of neighbours:
		let fc='#00C200'; // Green
		if (p[i][3]>35) fc='#F8E302'; // Yellow
		else if (p[i][3]>16) fc='#0064FF'; // Blue
		else if (p[i][3]>15) fc='#FF0792'; // Magenta
		else if (p[i][3]>12) fc='#A4714B'; // Brown
		// Draw particle:
		context.beginPath();
		context.arc(p[i][0],p[i][1],s,0,2*Math.PI);
		context.fillStyle=fc;
		context.fill();
	}
}

function scope(ang) { // Ensure angles are between 0 and 2*pi radians!
	while (ang>(2*Math.PI)) ang=ang-(2*Math.PI);
	while (ang<0) ang=ang+(2*Math.PI);
	return ang;
}

function loop() {
	for (i=0; i<n; i++) { // For each particle:
	// Count neighbors within radius r:
	let nLeft=0, nRight=0, nTotal=0;
	for (j=0; j<n; j++) if (i!=j) { // Compare every other particle:
	let sX=p[j][0]-p[i][0]; // X axis separation
	let sY=p[j][1]-p[i][1]; // Y axis separation
	let sD=Math.sqrt((sX*sX)+(sY*sY)); // Separation distance
	if (sD<(r*s*2)) { // Distance is within radius r
	nTotal++; // Increase count
	let sA=scope(Math.atan2(sY,sX)); // Separation angle
	if (scope(sA-p[i][2])<Math.PI) nRight++; // Neighbour on right
	else nLeft++; // Neighbour on left
	}
	}
	p[i][3]=nTotal; // Used for colouring particles

	// delta_phi = alpha + beta × N × sign(R - L)
	let deltaPhi=a+(b*nTotal*Math.sign(nRight-nLeft));

	// turn right delta_phi
	p[i][2]+=deltaPhi;
	p[i][2]=scope(p[i][2]); // Keep angles within scope!

	// Move forward v
	p[i][0]+=(v*s*2*Math.cos(p[i][2])); // X coordinate
	p[i][1]+=(v*s*2*Math.sin(p[i][2])); // Y coordinate

	// Wrap screen edges, Pac-Man style!
	if (p[i][0]<(s*-1)) p[i][0]=(canvas.width+s);
	else if (p[i][0]>(canvas.width+s)) p[i][0]=(s*-1);
	if (p[i][1]<(s*-1)) p[i][1]=(canvas.height+s);
	else if (p[i][1]>(canvas.height+s)) p[i][1]=(s*-1);
	}
	draw(); // Update canvas
}

function run() {
	init();
	run=setInterval(loop,t);
}

<body style="margin:0; background:#000; overflow:hidden;" onLoad="run();">
<canvas id="canvas" onclick="window.clearTimeout(run)"></canvas>
</body>

от пользователя elggem @ github

https://github.com/elggem/js-primordialparticles демо

---