javascript - 需要帮助将我的处理代码转换为 p5.js(ArrayList + 其他!)
问题描述
我是 Processing 和 p5.js 的新手,我试图将这段代码从 Processing 转换为 p5,但没有成功。我遇到的主要问题是第 21 行和第 26 行的 ArrayList,以及 ParticleSystem 类中的函数。注意:我知道这可能是一个非常菜鸟的问题,但是我一直在尝试很多方法,但似乎没有任何效果,因此我请求你们的帮助。
这是工作处理代码:
ParticleSystem ps;
void setup() {
size(1200, 800);
ps = new ParticleSystem(new PVector(width/2, 50));
for (int i=0; i<1200; i++) {
ps.addParticle();
}
}
void draw() {
background(255);
ps.move_away_from(mouseX, mouseY);
ps.run();
}
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}
void addParticle() {
particles.add(new Particle(origin));
}
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 move_away_from( float x, float y){
for(Particle p : particles){
float d = dist(x,y,p.position.x, p.position.y);
if( d < 200 ){
p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
}
}
}
}
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
PVector home;
Particle(PVector l) {
acceleration = new PVector(0, 0);
velocity = new PVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));
l=new PVector(random(0, 1200), random(0, 800));
position = l.copy();
home = position.copy();
}
void run() {
update();
display();
}
// Method to update position
void update() {
acceleration.x = -0.01*(position.x - home.x);
acceleration.y = -0.01*(position.y - home.y);
velocity.add(acceleration);
velocity.mult(0.9);
position.add(velocity);
// lifespan -= 1.0;
}
// Method to display
void display() {
noStroke();//stroke(255, lifespan);
//fill(255, lifespan);
fill(0);
ellipse(position.x, position.y, 25, 25);
}
}
这是我在将代码弄得一团糟之前使用 p5.js 的早期版本:
var ps;
function setup() {
size(1200, 800);
ps = new ParticleSystem(new PVector(width/2, 50));
for (var i=0; i<1200; i++)
{
ps.addParticle();
}
}
function draw() {
background(255);
ps.move_away_from(mouseX, mouseY);
ps.run();
}
class ParticleSystem {
ArrayList<Particle> particles;
PVector origin;
ParticleSystem(PVector position) {
origin = position.copy();
particles = new ArrayList<Particle>();
}
function addParticle() {
particles.add(new Particle(origin));
}
function run() {
for (float i = particles.size()-1; i >= 0; i--) {
Particle p = particles.get(i);
p.run();
// if (p.isDead()) {
// particles.remove(i);
// }
}
}
function move_away_from( var x, var y){
for(Particle p : particles){
var d = dist(x,y,p.position.x, p.position.y);
if( d < 200 ){
p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
}
}
}
}
class Particle {
PVector position;
PVector velocity;
PVector acceleration;
PVector home;
Particle(PVector l) {
acceleration = new PVector(0, 0);
velocity = new PVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));
l=new PVector(random(0, 1200), random(0, 800));
position = l.copy();
home = position.copy();
}
function run() {
update();
display();
}
// Method to update position
function update() {
acceleration.x = -0.01*(position.x - home.x);
acceleration.y = -0.01*(position.y - home.y);
velocity.add(acceleration);
velocity.mult(0.9);
position.add(velocity);
// lifespan -= 1.0;
}
// Method to display
function display() {
noStroke();//stroke(255, lifespan);
//fill(255, lifespan);
fill(0);
ellipse(position.x, position.y, 25, 25);
}
}
因此,如果有人有解决方案或可以告诉我需要采取的步骤,请告诉我!
解决方案
在 JavaScript 中,你根本不需要像 an 这样的东西ArrayList
。JavaScript 数组是动态的。此外,没有必要声明属性。分配某些内容时会自动“创建”属性。
PVector
您可以使用 uss而不是对象p5.Vector
。Ap5.Vector
由createVector
. 此外,阅读 JavaScript 中的类。
请参阅示例:
class Particle {
constructor(l) {
this.acceleration = createVector(0, 0);
this.velocity = createVector(0,0);//random(-0.0001, 0.00001), random(-0.001, 0.0001));
this.position = l ? l.copy() : createVector(Math.random()*1200, Math.random()*1200,);
this.home = this.position.copy();
}
run() {
this.update();
this.display();
}
// Method to update position
update() {
this.acceleration.x = -0.01*(this.position.x - this.home.x);
this.acceleration.y = -0.01*(this.position.y - this.home.y);
this.velocity.add(this.acceleration);
this.velocity.mult(0.9);
this.position.add(this.velocity);
// lifespan -= 1.0;
}
// Method to display
display() {
noStroke();//stroke(255, lifespan);
//fill(255, lifespan);
fill(0);
ellipse(this.position.x, this.position.y, 25, 25);
}
}
class ParticleSystem {
constructor(position) {
this.origin = position.copy();
this.particles = [];
}
addParticle() {
//this.particles.push(new Particle(this.origin));
this.particles.push(new Particle());
}
run() {
for (let i = this.particles.length-1; i >= 0; i--) {
this.particles[i].run();
// if (p.isDead()) {
// particles.remove(i);
// }
}
}
move_away_from(x, y){
for (let i = 0; i < this.particles.length; i++) {
let p = this.particles[i];
let d = dist(x,y, p.position.x, p.position.y);
if( d < 200 ){
p.velocity.x += map(d,0,200,0.5,0.1)*(p.position.x - x);
p.velocity.y += map(d,0,200,0.5,0.1)*(p.position.y - y);
}
}
}
}
var ps;
function setup() {
createCanvas(1200, 800);
ps = new ParticleSystem(createVector(width/2, 50));
for (var i=0; i<1200; i++) {
ps.addParticle();
}
}
function draw() {
background(255);
ps.move_away_from(mouseX, mouseY);
ps.run();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
推荐阅读
- python - 如何找到波兰语 Unicode 字符的 ASCII 等价物?
- delphi - TListView Livebinding 搜索功能仅在 Firemonkey Delphi Rio 10.3 中限制前 20 名搜索
- python - 更改定义模式的字符串(Python)
- javascript - 尝试添加返回功能。(上一个)使用 Javascript 的多步骤表单按钮
- c++ - 为什么我的代码偶尔会在自由存储(堆)上显示内存并向上和向下增长?(C++)
- unix - 递归删除与模式匹配的文件名部分
- node.js - 如何从服务器 nodejs 捕获错误消息?
- c# - 试图让敌人每设定秒造成伤害(团结)
- linux-kernel - 无法让 gdb 在 Qemu 下运行的 Linux 内核的断点处停止
- javascript - 以更改的对象属性为目标