ball_apply_force_and_mass_mult.html

<!DOCTYPE html>
<html>

<head>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            margin: 4.15px 0;
        }

        input[type=range]:focus {
            outline: none;
        }

        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 6.7px;
            cursor: pointer;
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            background: #ffffff;
            border-radius: 1.3px;
            border: 0.2px solid #010101;
        }

        input[type=range]::-webkit-slider-thumb {
            box-shadow: 0.9px 0.9px 1px #000000, 0px 0px 0.9px #0d0d0d;
            border: 1.1px solid #000000;
            height: 15px;
            width: 40px;
            border-radius: 50px;
            background: red;
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -4.35px;
        }

        input[type=range]:focus::-webkit-slider-runnable-track {
            background: #ffffff;
        }

    </style>
</head>

<body>
    <script>
        let balls = [];
        let path = [];
        let numBalls = 1;

        var sliderG;
        var sliderW;

        var G;
        var W;

        function setup() {
            createCanvas(700, 500);

            sliderG = createSlider(0, 1, 0.1, 0.01);
            sliderG.position(425, 30);
            sliderG.style('width', '250px');

            sliderW = createSlider(0, 1, 0.01, 0.01);
            sliderW.position(425, 80);
            sliderW.style('width', '250px');

            for (let i = 0; i < numBalls; i++) {
                balls[i] = new Ball(i * width / numBalls + 30, 50, random(1, 5));
            }
        }

        function draw() {
            background(0);

            noStroke();
            textSize(16);
            fill('#ffffff');

            G = sliderG.value();
            text('gravity: ' + G, 430, 20);

            W = sliderW.value();
            text('wind: ' + W, 430, 70);

            let wind = createVector(W, 0);
            let gravity = createVector(0, G);

            for (let b of balls) {
                b.update();
                b.edges();
                b.paths();
                b.show();

                if (mouseIsPressed) {
                    b.applyWind(wind);
                }

                let weight = p5.Vector.mult(gravity, b.mass);
                b.applyGravity(weight);

                let diffHeight = height - (b.pos.y + b.r);
                let diffWidth = width - (b.pos.x + b.r);
                if ((diffHeight < 1 || diffWidth < 1 || b.pos.x < b.r || b.pos.y < b.r) && (b.vel.x != 0 || b.vel.y != 0)) {
                    // Direction of Friction
                    let friction = b.vel.copy();
                    friction.normalize();
                    friction.mult(-1);

                    // Magnitude of Friction
                    let mu = 0.7;
                    let normal = b.mass;
                    friction.setMag(mu * normal);
                    b.applyFriction(friction);
                }
            }

            for (let i = 0; i < path.length; i++) {
                if (path.length > 1500) {
                    path.splice(0, 1);
                }

                noFill();
                stroke(255);
                point(path[i].x, path[i].y);
            }
        }

        class Ball {
            constructor(x, y, m) {
                this.pos = createVector(x, y);
                this.vel = createVector(0, 0);
                this.acc = createVector(0, 0);
                this.mass = m;
                this.r = sqrt(this.mass) * 10;
            }

            applyGravity(force, m) {
                let f = p5.Vector.div(force, this.mass);

                this.drawArrow('#ff1a1a', 40, f);

                this.acc.add(f);
            }

            applyFriction(force, m) {
                let f = p5.Vector.div(force, this.mass);

                this.drawArrow('#4da6ff', 100, f);

                this.acc.add(f);
            }

            applyWind(force, m) {
                let f = p5.Vector.div(force, this.mass);

                this.drawArrow('#66ff33', 100, f);

                this.acc.add(f);
            }

            drawArrow(showColor, size, f) {
                if (f.x != 0 || f.y != 0) {
                    push();
                    stroke(color(showColor));
                    fill(color(showColor));
                    translate(this.pos.x, this.pos.y);
                    line(0, 0, f.x * size, f.y * size);
                    rotate(f.heading());
                    translate(f.mag() * size, 0);
                    let arrowSize = 7;
                    triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
                    pop();
                }
            }

            update() {
                this.vel.add(this.acc);
                this.pos.add(this.vel);
                this.acc.set(0, 0);

                if (this.vel.x !== 0 || this.vel.y !== 0 && this.vel.y !== 1) {
                    this.drawArrow('#ffff33', 5, this.vel);
                }
            }

            edges() {
                if (this.pos.x <= this.r || this.pos.x >= width - this.r) {
                    this.vel.x = -this.vel.x
                }

                if (this.pos.y <= this.r || this.pos.y >= height - this.r) {
                    this.vel.y = -this.vel.y
                }
                
                

                if (this.pos.x > width - this.r) {
                    this.pos.x = width - this.r;
                }

                if (this.pos.x < this.r) {
                    this.pos.x = this.r;
                }

                if (this.pos.y > height - this.r) {
                    this.pos.y = height - this.r;
                }

                if (this.pos.y < this.r) {
                    this.pos.y = this.r;
                }
            }

            paths() {
                if (path.length > 100 && path[path.length - 10].y == this.pos.y && path[path.length - 11].y == this.pos.y && path[path.length - 12].y == this.pos.y) {
                    this.acc.y = 0;
                    this.acc.x = 0;
                    this.vel.y = 0;
                    this.vel.x = 0;
                } else {
                    path.push({
                        x: this.pos.x,
                        y: this.pos.y
                    });
                }
            }

            show() {
                stroke(255);
                strokeWeight(2);
                fill(color(200, 200, 200, 80));
                ellipse(this.pos.x, this.pos.y, this.r * 2);
            }
        }

    </script>

</body>

</html>