Processing:Примеры/Дым при помощи системы частиц (Дэниэл Шиффман) - История изменений

Myagkij в 04:00, 27 августа 2023

2023-08-27T04:00:07Z

@@ Строка 1: / Строка 1: @@
 {{Processing панель перехода}}
 {{Перевод от Сubewriter}}
 {{Myagkij-редактор}}
 =Описание<ref>[https://processing.org/examples/smokeparticlesystem.html processing.org - Smoke Particle System by Daniel Shiffman.]</ref>=
@@ Строка 334: / Строка 331: @@
 <references />
 {{Навигационная таблица/Портал/Processing}}

EducationBot в 07:59, 20 мая 2023

2023-05-20T07:59:42Z

← Предыдущая версия		Версия от 11:59, 20 мая 2023
Строка 4:		Строка 4:
	{{Myagkij-редактор}}		{{Myagkij-редактор}}

	~~{{Черновик}}~~

	=Описание<ref>[https://processing.org/examples/smokeparticlesystem.html processing.org - Smoke Particle System by Daniel Shiffman.]</ref>=		=Описание<ref>[https://processing.org/examples/smokeparticlesystem.html processing.org - Smoke Particle System by Daniel Shiffman.]</ref>=
Строка 350:		Строка 350:
	\|Высота логотипа издателя для schemaNewsArticle=45		\|Высота логотипа издателя для schemaNewsArticle=45
	}}		}}
	{{Навигационная таблица/~~Справочник языка Processing}}~~		{{Навигационная таблица/Портал/Processing}}
	~~{{Навигационная таблица~~/Processing~~/Примеры}}~~
	~~{{Навигационная таблица/Телепорт~~}}

EducationBot в 14:21, 14 мая 2023

2023-05-14T14:21:43Z

← Предыдущая версия		Версия от 18:21, 14 мая 2023
Строка 167:		Строка 167:
	}}		}}

	<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS~~" enclose="div~~">		<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS">
	ParticleSystem ps;		ParticleSystem ps;

Myagkij: /* Внешние ссылки */

2022-05-07T04:22:23Z

Внешние ссылки

← Предыдущая версия		Версия от 08:22, 7 мая 2022
Строка 352:		Строка 352:
	{{Навигационная таблица/Справочник языка Processing}}		{{Навигационная таблица/Справочник языка Processing}}
	{{Навигационная таблица/Processing/Примеры}}		{{Навигационная таблица/Processing/Примеры}}
			{{Навигационная таблица/Телепорт}}

Myagkij: /* Пример */

2018-08-03T15:18:31Z

Пример

Новая страница

{{Processing панель перехода}}

{{Перевод от Сubewriter}}
{{Myagkij-редактор}}

{{Черновик}}

=Описание<ref>[https://processing.org/examples/smokeparticlesystem.html processing.org - Smoke Particle System by Daniel Shiffman.]</ref>=

Простой эффект дыма при помощи системы частиц. Каждая частица рендерится как изображение с наложенной на нее альфа-маской.

==Пример==

{{5pjs
|Код=
<html>
/**
* Smoke Particle System
* by Daniel Shiffman.
*
* A basic smoke effect using a particle system. Each particle
* is rendered as an alpha masked image.
*/

// @pjs preload must be used to preload media if the program is
// running with Processing.js
/* @pjs preload="texture.png"; */

var ps;

function preload() {
img = loadImage("texture.png");
}

function setup() {
var canvas = createCanvas(640, 360);
canvas.parent("p5container");
ps = new ParticleSystem(0,createVector(width/2,height-60),img);
}

function draw() {
background(0);

// Calculate a "wind" force based on mouse horizontal position
var dx = map(mouseX,0,width,-0.2,0.2);
var wind = createVector(dx,0);
ps.applyForce(wind);
ps.run();
for (var i = 0; i < 2; i++) {
ps.addParticle();
}

// Draw an arrow representing the wind force
drawVector(wind, createVector(width/2,50,0),500);

}

// Renders a vector object 'v' as an arrow and a location 'loc'
function drawVector(v, loc, scayl) {
push();
var arrowsize = 4;
// Translate to location to render vector
translate(loc.x,loc.y);
stroke(255);
// Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
rotate(v.heading());
// Calculate length of vector & scale it to be bigger or smaller if necessary
var len = v.mag()*scayl;
// Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
line(0,0,len,0);
line(len,0,len-arrowsize,+arrowsize/2);
line(len,0,len-arrowsize,-arrowsize/2);
pop();
}

// A simple Particle class, renders the particle as an image
var Particle = function(l, img_) {
this.acc = createVector(0, 0.05);
var vx = randomGaussian()*0.3;
var vy = randomGaussian()*0.3 - 1.0;
this.vel = createVector(vx, vy);
this.pos = l.copy();
this.lifespan = 100.0;
this.img = img_;

this.run = function() {
this.update();
this.render();
};

// Method to apply a force vector to the Particle object
// Note we are ignoring "mass" here
this.applyForce = function(f) {
this.acc.add(f);
}

// Method to update location
this.update = function() {
this.vel.add(this.acc);
this.pos.add(this.vel);
this.lifespan -= 2.5;
this.acc.mult(0); // clear Acceleration
}

// Method to display
this.render = function() {
imageMode(CENTER);
tint(255,this.lifespan);
image(this.img,this.pos.x,this.pos.y);
// Drawing a circle instead
// fill(255,lifespan);
// noStroke();
// ellipse(loc.x,loc.y,img.width,img.height);
}

// Is the particle still useful?
this.isDead = function() {
if (this.lifespan <= 0.0) {
return true;
} else {
return false;
}
}
}

// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles

var ParticleSystem = function(num, v, img_) {
this.origin = v.copy();
this.img = img_;
this.particles = [];
for (var i = 0; i < num; i++) {
particles.add(new Particle(this.origin, this.img)); // Add "num" amount of particles to the arraylist
}

this.addParticle = function() {
this.particles.push(new Particle(this.origin, this.img));
};

this.run = function() {
for (var i = this.particles.length-1; i >= 0; i--) {
var p = this.particles[i];
p.run();
if (p.isDead()) {
this.particles.splice(i, 1);
}
}
};

// Method to add a force vector to all particles currently in the system
this.applyForce = function(dir) {
// Enhanced loop!!!
for (var i = 0; i < this.particles.length; i++) {
var p = this.particles[i];
p.applyForce(dir);
}

}
}
</html>
}}

<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
ParticleSystem ps;

void setup() {
size(640, 360);
PImage img = loadImage("texture.png");
ps = new ParticleSystem(0, new PVector(width/2, height-60), img);
}

void draw() {
background(0);

// рассчитываем силу «ветра» на основе
// движения курсора мыши по оси X:
float dx = map(mouseX, 0, width, -0.2, 0.2);
PVector wind = new PVector(dx, 0);
ps.applyForce(wind);
ps.run();
for (int i = 0; i < 2; i++) {
ps.addParticle();
}

// рисуем стрелку, демонстрирующую силу «ветра»:
drawVector(wind, new PVector(width/2, 50, 0), 500);
}

// рисуем векторный объект «v» как стрелку на позиции «loc»:
void drawVector(PVector v, PVector loc, float scayl) {
pushMatrix();
float arrowsize = 4;
// перемещаем стрелку на позицию, где ее нужно отрисовать:
translate(loc.x, loc.y);
stroke(255);
// вызываем метод heading(),
// чтобы извлечь угол вращения вектора («0» - это верх):
rotate(v.heading());
// считываем длину вектора и, если необходимо,
// масштабируем его к какому-либо диапазону (scayl):
float len = v.mag()*scayl;
// рисуем три линии, чтобы создать стрелку
// (она будет смотреть вверх,
// но мы повернем ее в нужном направлении):
line(0, 0, len, 0);
line(len, 0, len-arrowsize, +arrowsize/2);
line(len, 0, len-arrowsize, -arrowsize/2);
popMatrix();
}

// класс для управления группой объектов Particle;
// для хранения объектов Particle будет использован ArrayList

class ParticleSystem {

ArrayList<Particle> particles; // объект ArrayList
// для хранения всех частиц
PVector origin; // точка, из которой
// будут извергаться частицы
PImage img;

ParticleSystem(int num, PVector v, PImage img_) {
particles = new ArrayList<Particle>(); // инициализируем
// ArrayList
origin = v.copy(); // сохраняем точку,
// из которой будут
// извергаться частицы
img = img_;
for (int i = 0; i < num; i++) {
particles.add(new Particle(origin, img)); // добавляем в
// ArrayList
// количество частиц,
// заданное в «num»
}
}

void run() {
for (int i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
if (p.isDead()) {
particles.remove(i);
}
}
}

// метод для применения вектора силы
// на все частицы, в данный момент находящиеся в системе:
void applyForce(PVector dir) {
// продвинутая версия цикла for() !!!
for (Particle p : particles) {
p.applyForce(dir);
}
}

void addParticle() {
particles.add(new Particle(origin, img));
}
}

// простой класс Particle, рендерит частицу в виде изображения

class Particle {
PVector loc;
PVector vel;
PVector acc;
float lifespan;
PImage img;

Particle(PVector l, PImage img_) {
acc = new PVector(0, 0);
float vx = randomGaussian()*0.3;
float vy = randomGaussian()*0.3 - 1.0;
vel = new PVector(vx, vy);
loc = l.copy();
lifespan = 100.0;
img = img_;
}

void run() {
update();
render();
}

// метод для применения вектора силы к объекту Particle;
// обратите внимание, что мы здесь игнорируем «массу»:
void applyForce(PVector f) {
acc.add(f);
}

// метод для обновления позиции:
void update() {
vel.add(acc);
loc.add(vel);
lifespan -= 2.5;
acc.mult(0); // стираем данные об ускорении
}

// метод для отрисовки:
void render() {
imageMode(CENTER);
tint(255, lifespan);
image(img, loc.x, loc.y);
// вместо изображения можно воспользоваться эллипсом:
// fill(255,lifespan);
// noStroke();
// ellipse(loc.x,loc.y,img.width,img.height);
}

// частица еще видна?
boolean isDead() {
if (lifespan <= 0.0) {
return true;
} else {
return false;
}
}
}
</syntaxhighlight>

=См.также=

=Внешние ссылки=

<references />

{{SEO
|Заголовок статьи=Processing: Дым при помощи системы частиц (Дэниэл Шиффман) / Онлайн справочник - wikihandbk.com
|Ключевые слова=processing, Дым при помощи системы частиц (Дэниэл Шиффман) в processing, Дым при помощи системы частиц (Дэниэл Шиффман) пример , пример Дым при помощи системы частиц (Дэниэл Шиффман) в ArrayList в processing
|Описание статьи=
|Изображение статьи для Open Graph=
|Адрес страницы для schemaNewsArticle=<nowiki>http://wikihandbk.com/wiki/Processing:Примеры/Дым при помощи системы частиц (Дэниэл Шиффман)</nowiki>
|Изображение статьи для schemaNewsArticle=<nowiki></nowiki>
|Высота изображения статьи для schemaNewsArticle=
|Ширина изображения статьи для schemaNewsArticle=
|Дата публикации для schemaNewsArticle=2018-08-03
|Автор=Мякишев Е.А.
|Издатель=myagkij
|Логотип издателя для schemaNewsArticle=<nowiki>http://wikihandbk.com/ruwiki/images/6/61/Tech_geek_logo_1x.jpg</nowiki>
|Ширина логотипа издателя для schemaNewsArticle=60
|Высота логотипа издателя для schemaNewsArticle=45
}}
{{Навигационная таблица/Справочник языка Processing}}
{{Навигационная таблица/Processing/Примеры}}