NatureOfCode2/vet5.2.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
<html>
    <head>
        <title>Vector 5 - Unity Vector (Normalize), Subtraction</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            function setup() {
                createCanvas(400, 400);
            }

            function draw() {
                background(0);
                translate(width/2, height / 2);

                // Normalization in vector is the process of turn any vector into the unit vector but keeping the original direction (just changing its magnitude to 1 )
                let pos = createVector(width / 2, height / 2);
                let mouse = createVector(mouseX, mouseY);
                let v = p5.Vector.sub(mouse, pos);

                // var m = v.mag(); // Magnitude formula = mag = sqrt(x^2 + y^2)
                // v.div(m); // Normalize(v) = (x / mag(v), y / mag(v))

                // Or
                // v.normalize();
                // v.mult(50);

                // or even
                v.setMag(50);


                strokeWeight(4);
                stroke(255);
                line(0, 0, v.x, v.y);


            }
        </script>
    </head>
</html>