Processingコードをp5.jsで書き換えているのですが、うまくいきません。

こんにちは。現在Processingの参考書に載っているサンプルコードをp5.jsに書き換えようと試みているのですがうまくいきません。どうすればいいでしょうか？

本来のProcessingコード↓

Processing
1int NUM = 1000;
2Particle[] myParticle = new Particle[NUM];
3
4void setup() {
5    size(800, 600, P2D);
6    frameRate(60);
7    blendMode(ADD);
8    noStroke();
9    for (int i = 0; i < NUM; i++) {
10        myParticle[i] = new Particle(random(8, 32));
11    }
12}
13
14void draw() {
15    background(0);
16    for (int i = 0; i < NUM; i++) {
17        myParticle[i].drawMe();
18    }
19}
20
21class Particle { 
22    color col;
23    float diameter;
24    PVector location, velocity;
25    
26    Particle(float _diameter) {
27        diameter = _diameter;
28        location = new PVector(random(0, width), random(0, height));
29        velocity = new PVector(random(-4, 4), random(-4, 4));
30        col = color(random(255), random(255), random(255));
31    }
32    
33    void drawMe() {
34        fill(col);
35        ellipse(location.x, location.y, diameter, diameter);
36        location.add(velocity);
37        if ((location.x < 0) || (location.x > width)) {
38            velocity.x *= -1;
39        }
40        if ((location.y < 0) || (location.y > height)) {
41            velocity.y *= -1;
42        }
43    }
44}

自分で書き換えてみたp5.jsコード↓

JavaScript
1var NUM = 1000;
2var myParticle = new Array(NUM);
3
4function setup() {
5    createCanvas(800, 600, P2D);
6    frameRate(60);
7    blendMode(ADD);
8    noStroke();
9    for (var i = 0; i < NUM; i++) {
10        myParticle[i] = new Particle(random(8, 32));
11    }
12}
13
14function draw() {
15    background(0);
16    for (var i = 0; i < NUM; i++) {
17        myParticle[i].drawMe();
18    }
19}
20
21function Particle(diameter) { 
22    this.diameter = diameter;
23    this.location = new createVector(random(0, width), random(0, height));
24    this.velocity = new createVector(random(-4, 4), random(-4, 4));
25    this.col = color(random(255), random(255), random(255));
26}
27
28Particle.prototype.drawMe = function() {
29    fill(this.col);
30    ellipse(this.location.x, this.location.y, this.diameter, this.diameter);
31    this.location.add(this.velocity);
32    if ((this.location.x < 0) || (this.location.x > width)) {
33        this.velocity.x *= -1;
34    }
35    if ((this.location.y < 0) || (this.location.y > height)) {
36        this.velocity.y *= -1;
37    }
38}
39

HTML5
1<html>
2<head>
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
6  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
7  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
8  <script language="javascript" type="text/javascript" src="p5js-temp-sketch_200410a4033322112349622833.js"></script>
9  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
10
11  <!-- This line removes any default padding and style.
12       You might only need one of these values set. -->
13  <style> body { padding: 0; margin: 0; } </style>
14</head>
15
16<body>
17</body>
18</html>

元のProcessingコードはランダムな色、大きさ、位置、速度の円を生成するもので、複雑な処理はParticleクラスにまとめています。

これをp5.jsで表現したいです。

p5.jsに移す際、コードの見た目があまり変わらないようにしているのですが、両方のコードを比較してもどこが悪いのかわかりませんでした。

親切な方、回答よろしくお願いしますm(__)m

実行環境：Windows10, Processing 3.5.4, Google Chrome 81

参考書：Processingクリエイティブ・コーディング入門(リスト5.1)

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptは全然わかっていませんが、そのまま移植するとこうですかね？

JavaScript
1const NUM = 1000;
2const myParticle = [];
3
4function setup() {
5  createCanvas(800, 600, P2D);
6  frameRate(60);
7  // blendMode(ADD);
8  noStroke();
9  for (let i = 0; i < NUM; i++) {
10    myParticle[i] = new Particle(random(8, 32));
11  }
12}
13
14function draw() {
15  blendMode(NORMAL);
16  background(0);
17  blendMode(ADD);
18  
19  for (let i = 0; i < NUM; i++) {
20    myParticle[i].drawMe();
21  }
22}
23
24class Particle {
25  constructor(_diameter) {
26    this.diameter = _diameter;
27    this.location = createVector(random(0, width), random(0, height));
28    this.velocity = createVector(random(-4, 4), random(-4, 4));
29    this.col = color(random(255), random(255), random(255));
30  }
31  
32  drawMe() {
33    fill(this.col);
34    ellipse(this.location.x, this.location.y, this.diameter, this.diameter);
35    this.location.add(this.velocity);
36    if ((this.location.x < 0) || (this.location.x > width)) {
37      this.velocity.x *= -1;
38    }
39    if ((this.location.y < 0) || (this.location.y > height)) {
40      this.velocity.y *= -1;
41    }
42  }
43}