NatureOfCode2/part4.1.html at master · brlebtag/NatureOfCode2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html>
    <head>
        <title>Particles 4.1: Particle Systems with Image Textures</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>

            class Emitter {
                constructor (x, y) {
                    this.pos = createVector(x, y);
                    this.particles = [];
                }

                emit(num) {
                    for (let i = 0; i < num; i++) {
                        this.particles.push(new Particle(this.pos.x, this.pos.y));
                    }
                }

                applyForce(force) {
                    for (const p of this.particles) {
                        p.applyForce(force);
                    }
                }

                update() {
                    for (const p of this.particles) {
                        p.update();
                    }

                    for (let i = this.particles.length - 1; i >= 0; i--) {
                        if (this.particles[i].finished()) {
                            this.particles.splice(i, 1);
                        }
                    }
                }

                show() {
                    for (const p of this.particles) {
                        p.show();
                    }
                }
            }

            class Particle {
                constructor(x, y) {
                    this.pos = createVector(x, y);
                    this.velocity = p5.Vector.random2D().mult(random(1, 5));
                    this.acceleration = createVector();
                    this.mass = 1;
                    this.radius = 64;
                    this.lifetime = 255;
                }

                edges() {
                    if (this.pos.y >= (height - this.radius)) {
                        this.pos.y = height - this.radius;
                        this.velocity.y *= -1;
                    }

                    if (this.pos.x >= (width - this.radius)) {
                        this.pos.x = width - this.radius;
                        this.velocity.x *= - 1;
                    } else if (this.pos.x <= 0) {
                        this.pos.x = this.radius;
                        this.velocity.x *= -1;
                    }
                }

                applyForce(force) {
                    this.acceleration.add(force); // F = m * a => a = F / m (1) => a = F;
                }

                update() {
                    this.velocity.add(this.acceleration);
                    this.pos.add(this.velocity);
                    this.acceleration.set(0, 0);
                    this.lifetime -= 10;
                }

                finished() {
                    return this.lifetime < 0;
                }

                show() {
                    tint(255, 40, 80, this.lifetime);
                    imageMode(CENTER);
                    image(img, this.pos.x, this.pos.y, this.radius, this.radius);
                }
            }

            let emitters = [];
            const TotalParticles = 100;
            let img;

            function preload() {
                img = loadImage('texture32.png');
            }

            function setup() {
                createCanvas(800, 600);
                emitters[0] = new Emitter(width / 2, height);
            }

            // Challenge: https://www.youtube.com/watch?v=CKeyIbT3vXI&ab_channel=TheCodingTrain

            function draw() {
                clear();
                background(0);
                blendMode(ADD);

                let gravity = createVector(0, -0.1);
                let intensity = map(mouseY, 0, height, 0, 10);
                let wind = createVector(map(mouseX, 0, width, -intensity, intensity) / 2, 0);

                for (const emitter of emitters) {
                    emitter.emit(2);
                    emitter.show();
                    emitter.applyForce(gravity.add(wind));
                    emitter.update();
                }
            }
        </script>
    </head>
</html>