2

Есть программа, в основе которой отрисовка разноцветных точек на экране:

function fullScreen(elem) {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullscreen) {
                elem.webkitRequestFullscreen();
            }
        }
        var ww = window.innerWidth;
        var wh = window.innerHeight;
        var myinterval = setInterval(function(){
        });
        var canvas;
        var ctx;
        var array_points = [];
        var cursor_power = 0.2;
        var arrow_power = 0.2;
        var spin_angle = 13;
        var finger = {
            val: 0.2
        }
        var lineto = false;
        var distribution = [];
        var limit_speed = 20;
        var mass = [0.5, 1.2];
        var color_a = [255, 0, 0];
        var color_b = [0, 0, 255];
        var col_r = [0, 255, false];
        var col_g = [0, 0, false];
        var col_b = [0, 255, true];
        var mouse = false;
        var arrows = [false, false, false, false];
        var spin = 0;
        var wall_decrement = 0.8;
        var speed = [-4, 4];
        var pxnpts = 700;
        var gravity_resistance = 2;
        var fps_loop = 60;
        var force_visualisation = false;
        var shuffle_distribution = true;
        var shuffle_generation = true;
        var inertion = true;
        var border = true;
        var flag = [false, false];
        function myRandom(x, y){
            return Math.floor(Math.random() * (y - x + 1)) + x;
        }
        function FRandom(min, max) {
          return Math.random() * (max - min) + min;
        }
        function getMass(percent){
            return percent*(mass[1] - mass[0]) + mass[0];
        }
        function clr_set(percent, colour){
            if(!window["col_" + colour][2]){
                return percent*(window["col_" + colour][1] - window["col_" + colour][0]) + window["col_" + colour][0];
            }
            else{
                return (1 - percent)*(window["col_" + colour][1] - window["col_" + colour][0]) + window["col_" + colour][0];
            }
        }
        function clr_create(percent){
            return 'rgb(' + (color_a[0]*percent + color_b[0]*(1 - percent)) + ', ' + (color_a[1]*percent + color_b[1]*(1 - percent)) + ', ' + (color_a[2]*percent + color_b[2]*(1 - percent)) + ')';
            //return 'rgb(' + clr_set(percent, 'r') + ', ' + clr_set(percent, 'g') + ', ' + clr_set(percent, 'b') + ')';
        }
        var lastCalledTime;
        var fps;
        function requestAnimFrame() {
            if(!lastCalledTime) {
                lastCalledTime = Date.now();
                fps = 0;
                return;
            }
            delta = (Date.now() - lastCalledTime)/1000;
            lastCalledTime = Date.now();
            fps = 1/delta;
        }
        function kut(ax, ay, bx, by){
            var at2 = Math.atan2(bx-ax, by-ay)*180/3.14159265;
            return (((at2<0) ? 360+at2 : at2) + 90 + spin)%360;
        }
        function accelerate_by_arrows(obj){
            var add_x = 0;
            var add_y = 0;
            if(arrows[0]){
                add_y -= arrow_power;
                flag[0] = true;
            }
            if(arrows[1]){
                add_x += arrow_power;
                flag[0] = true;
            }
            if(arrows[2]){
                add_y += arrow_power;
                flag[0] = true;
            }
            if(arrows[3]){
                add_x -= arrow_power;
                flag[0] = true;
            }
            if(inertion){
                obj.x.speed += add_x/obj.mass*(1 - Math.abs(obj.x.speed)/limit_speed);
                obj.y.speed += add_y/obj.mass*(1 - Math.abs(obj.y.speed)/limit_speed);
            }
            else{
                obj.x.speed = add_x/obj.mass*(1 - Math.abs(obj.x.speed)/limit_speed);
                obj.y.speed = add_y/obj.mass*(1 - Math.abs(obj.y.speed)/limit_speed);
            }
            obj.y.add += add_y;
            obj.x.add += add_x;
        }
        function accelerate_to_cursor(obj, x, y, force){
            /*var delta_x = x - obj.x.pos;
            var delta_y = y - obj.y.pos;
            var delta = Math.abs(delta_x) + Math.abs(delta_y);
            var add_x = force.val*(delta_x/delta)/obj.mass*(1 - Math.abs(obj.x.speed)/limit_speed);
            var add_y = force.val*(delta_y/delta)/obj.mass*(1 - Math.abs(obj.y.speed)/limit_speed);*/
            var angle = kut(obj.x.pos,obj.y.pos, x, y);
            var add_x = -force.val*Math.cos(angle*Math.PI/180)/obj.mass*(1 - Math.abs(obj.x.speed)/limit_speed);
            var add_y = force.val*Math.sin(angle*Math.PI/180)/obj.mass*(1 - Math.abs(obj.y.speed)/limit_speed);
            if(inertion){
                obj.x.speed += add_x*(Math.abs(obj.x.delta) < Math.abs(add_x) ? gravity_resistance : 1);
                obj.y.speed += add_y*(Math.abs(obj.y.delta) < Math.abs(add_y) ? gravity_resistance : 1);
            }
            else{
                obj.x.speed = add_x*(Math.abs(obj.x.delta) < Math.abs(add_x) ? gravity_resistance : 1);
                obj.y.speed = add_y*(Math.abs(obj.y.delta) < Math.abs(add_y) ? gravity_resistance : 1);
            }
            obj.x.delta = add_x;
            obj.y.delta = add_y;
            obj.y.add += add_y;
            obj.x.add += add_x;
        }
        function move(obj){
            obj.x.pos = obj.x.pos + obj.x.speed;
            obj.y.pos = obj.y.pos + obj.y.speed;
            if(border){
                if (obj.y.pos < 0) {
                    obj.y.pos = -obj.y.pos;
                    obj.y.speed = -obj.y.speed*wall_decrement;
                    obj.x.speed *= wall_decrement;
                }
                if (obj.y.pos > wh) {
                    obj.y.pos = wh - (obj.y.pos - wh);
                    obj.y.speed = -obj.y.speed*wall_decrement;
                    obj.x.speed *= wall_decrement;
                }
                if (obj.x.pos < 0) {
                    obj.x.pos = -obj.x.pos;
                    obj.x.speed = -obj.x.speed*wall_decrement;
                    obj.y.speed *= wall_decrement;
                }
                if (obj.x.pos > ww) {
                    obj.x.pos = ww - (obj.x.pos - ww);
                    obj.x.speed = -obj.x.speed*wall_decrement;
                    obj.y.speed *= wall_decrement;
                }
            }
            if(force_visualisation && (flag[0] || flag[1]) && (obj.y.add != 0 || obj.x.add != 0)){
                var increase = 40/((flag[0]?arrow_power:0) + (flag[1]?cursor_power:0));
                ctx.moveTo(obj.x.pos, obj.y.pos);
                ctx.lineTo(obj.x.pos + obj.x.add*increase, obj.y.pos + obj.y.add*increase);
            }
            else if(lineto){
                ctx.lineTo(obj.x.pos, obj.y.pos);
            }
            var percent = (obj.mass - mass[0])/(mass[1] - mass[0] + 0.000001);
            ctx.fillStyle = clr_create(percent);
            ctx.fillRect(obj.x.pos - 1, obj.y.pos - 1, 2, 2);
        }
        function Start(){
            inertion = true;
            var num_of_points = Math.round(ww*wh/pxnpts);
            //num_of_points = 1;
            clearInterval(myinterval);
            canvas = $('.canv').get(0);
            ctx = canvas.getContext('2d');
            array_points = [];
            for(var i = 0; i < num_of_points; i++){
                array_points[i] = {
                    x: {
                        pos: Math.random()/1*ww,
                        speed: FRandom(speed[0], speed[1]),
                        delta: 0,
                        add: 0,
                    },
                    y: {
                        pos: Math.random()/1*wh,
                        speed: FRandom(speed[0], speed[1]),
                        delta: 0,
                        add: 0,
                    },
                    mass: getMass((shuffle_generation ? (i % 2 ? i : num_of_points - i) : i)/num_of_points)
                };
            }
            myinterval = setInterval(function(){
                flag = [false, false];
                requestAnimFrame();
                ctx.clearRect(0,0,ww,wh);
                ctx.beginPath();
                ctx.strokeStyle = line;
                ctx.fillStyle = line;
                ctx.font = "22px arial";
                ctx.fillText("ctrl+h - Help", 5, 22);
                ctx.font = "17px arial";
                ctx.fillText("by Shumik", ww - 80, wh - 5);
                ctx.font = "17px arial";
                ctx.fillText(fps.toFixed(2) + " fps", 2, wh - 5);
                ctx.moveTo(array_points[0].x.pos, array_points[0].y.pos);
                for (var i = 0; i < array_points.length; i++) {
                    array_points[i].x.add = 0;
                    array_points[i].y.add = 0;
                    accelerate_by_arrows(array_points[i]);
                    if(mouse){
                        accelerate_to_cursor(array_points[i], mouse[0], mouse[1], finger);
                        flag[1] = true;
                    }
                    move(array_points[i]);
                }
                ctx.stroke();
            }, 1000/fps_loop);
        }
        function settings_realise(){
            limit_speed = +$('.limit_speed').val();
            force_visualisation = $('.force_visualisation').is(':checked');
            shuffle_distribution = $('.shuffle_distribution').is(':checked');
            shuffle_generation = $('.shuffle_generation').is(':checked');
            lineto = $('.lineto').is(':checked');
            border = $('.border').is(':checked');
            mass[0] = +$('.min_mass').val();
            mass[1] = +$('.max_mass').val();
            speed[0] = +$('.min_random_speed').val();
            speed[1] = +$('.max_random_speed').val();
            pxnpts = +$('.points_num').val();
            wall_decrement = +$('.wall_decrement').val();
            cursor_power = +$('.cursor_power').val();
            arrow_power = +$('.arrow_power').val();
            fps_loop = +$('.fps').val();
            spin_angle = +$('.spin_angle').val();
            gravity_resistance = +$('.gravity_resistance').val();
            color_a = $('.color_a').val().match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) });
            color_b = $('.color_b').val().match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) });
            line = $('.line').val();
            $('.canv').css('background', $('.background').val());
            $("#myModal").hide();
            $('.save_options').css('box-shadow', '');
            $('.save_remember').hide();
            Start();
        }
        function share(){
            var text = "https://shumik.site/archive/other/physics.php?shit=you";
            text += "&limit_speed=" + $('.limit_speed').val();
            text += "&force_visualisation=" + $('.force_visualisation').is(':checked');
            text += "&border=" + $('.border').is(':checked');
            text += "&shuffle_distribution=" + $('.shuffle_distribution').is(':checked');
            text += "&shuffle_generation=" + $('.shuffle_generation').is(':checked');
            text += "&lineto=" + $('.lineto').is(':checked');
            text += "&min_mass=" + $('.min_mass').val();
            text += "&max_mass=" + $('.max_mass').val();
            text += "&min_random_speed=" + $('.min_random_speed').val();
            text += "&max_random_speed=" + $('.max_random_speed').val();
            text += "&points_num=" + $('.points_num').val();
            text += "&wall_decrement=" + $('.wall_decrement').val();
            text += "&cursor_power=" + $('.cursor_power').val();
            text += "&arrow_power=" + $('.arrow_power').val();
            text += "&fps=" + $('.fps').val();
            text += "&spin_angle=" + $('.spin_angle').val();
            text += "&gravity_resistance=" + $('.gravity_resistance').val();
            text += "&color_a=" + encodeURIComponent($('.color_a').val());
            text += "&color_b=" + encodeURIComponent($('.color_b').val());
            text += "&background=" + encodeURIComponent($('.background').val());
            text += "&line=" + encodeURIComponent($('.line').val());
            navigator.clipboard.writeText(text);
            $('.copy').addClass('btn-success');
            $('.copy').text('Copied');
            setTimeout(function(){
                $('.copy').removeClass('btn-success');
                $('.copy').text('Share configuration ➥');
            }, 600);
        }
        function ResizeAll(){
            ww = window.innerWidth;
            wh = window.innerHeight;
            $('.canv').attr('width', ww);
            $('.canv').attr('height', wh);
        }
        function handleStart(evt) {
            evt.preventDefault();
            var el = document.getElementById("canvas");
            var touches = evt.changedTouches;
            mouse = [touches[0].pageX, touches[0].pageY];
        }
        function handleMove(evt) {
            evt.preventDefault();
            var el = document.getElementById("canvas");
            var touches = evt.changedTouches;
            mouse = [touches[0].pageX, touches[0].pageY];
        }
        function handleEnd(evt) {
            mouse = false;
        }
        function move_points_dist(one, mcursor){
            if(one){
                for (var i = 0; i < array_points.length; i++) {
                    array_points[i].x.pos = mcursor[0] + 0.001;
                    array_points[i].y.pos = mcursor[1];
                    array_points[i].x.speed = 0; 
                    array_points[i].x.delta = 0;
                    array_points[i].y.speed = 0; 
                    array_points[i].y.delta = 0;
                }
            }
            else{
                distribution.push([mcursor[0], mcursor[1]]);
                for (var i = 0; i < array_points.length; i++) {
                    var it = shuffle_distribution ? i%(distribution.length) : (Math.round(i/array_points.length*(distribution.length - 1)));
                    array_points[i].x.pos = distribution[it][0] + 0.001;
                    array_points[i].y.pos = distribution[it][1];
                    array_points[i].x.speed = 0; 
                    array_points[i].x.delta = 0;
                    array_points[i].y.speed = 0; 
                    array_points[i].y.delta = 0;
                }
            }
        }
        $(document).ready(function(){
            ResizeAll();
            settings_realise();
            $('body').dblclick(function(){
                fullScreen(this);
            });
            $(window).resize(function(){
                ResizeAll();
            });
            var el = document.getElementById("canvas");
              el.addEventListener("touchstart", handleStart, false);
              el.addEventListener("touchend", handleEnd, false);
              el.addEventListener("touchmove", handleMove, false);
            $("body").on("contextmenu", false);

            $(window).on('keydown', function (e) {
                //console.log(e.which);
                if (e.which == 32) {
                    e.preventDefault();
                    inertion = !inertion;
                }
                else if (e.which == 82) {
                    for (var i = 0; i < array_points.length; i++) {
                        array_points[i].x.speed = -array_points[i].x.speed;
                        array_points[i].y.speed = -array_points[i].y.speed;
                    }
                }
                else if (e.which == 71 && e.ctrlKey) {
                    e.preventDefault();
                    Start();
                }
                else if (e.which == 83 && e.ctrlKey) {
                    e.preventDefault();
                    $("#myModal").show();
                }
                else if(e.which == 72 && e.ctrlKey){
                    e.preventDefault();
                    alert('Mouse Left - pull'
                        +'\nMouce Right - push'
                        +'\nR - reverce speed'
                        +'\nSpace - inertion on/on'
                        +'\nMousewheel click - stop and move to cursor'
                        +'\nctrl(hold) + Mousewheel click/+move - distribute to multiplie points'
                        +'\nctrl + G - randomise'
                        +'\nctrl + S - settings'
                        +'\nDbl click - fullscreen'
                        +'\n↑ → ↓ ← /WASD - Move'
                        +'\nQ/E + Mouce - spin'
                        +'\nctrl + B - border off/on'
                        +'\nctrl + F - force visualisation off/on'
                        +'\nctrl + L - line connecting off/on'
                    );
                }
                else if(e.which == 66 && e.ctrlKey) {
                    e.preventDefault();
                    $('.border').prop('checked', !$('.border').is(':checked'));
                    $('.border').change();
                }
                else if(e.which == 70 && e.ctrlKey) {
                    e.preventDefault();
                    $('.force_visualisation').prop('checked', !$('.force_visualisation').is(':checked'));
                    $('.force_visualisation').change();
                }
                else if(e.which == 76 && e.ctrlKey) {
                    e.preventDefault();
                    $('.lineto').prop('checked', !$('.lineto').is(':checked'));
                    $('.lineto').change();
                }
                else if (e.which == 38 || e.which == 87) {
                    arrows[0] = true;
                }
                else if (e.which == 39 || e.which == 68) {
                    arrows[1] = true;
                }
                else if (e.which == 40 || e.which == 83) {
                    arrows[2] = true;
                }
                else if (e.which == 37 || e.which == 65) {
                    arrows[3] = true;
                }
                else if(e.which == 81) {
                    spin = -spin_angle;
                }
                else if(e.which == 69) {
                    spin = spin_angle;
                }
            });
            $(window).on('keyup', function (e) {
                if (e.which == 38 || e.which == 87) {
                    arrows[0] = false;
                }
                else if (e.which == 39 || e.which == 68) {
                    arrows[1] = false;
                }
                else if (e.which == 40 || e.which == 83) {
                    arrows[2] = false;
                }
                else if (e.which == 37 || e.which == 65) {
                    arrows[3] = false;
                }
                else if(e.which == 81 && spin == -spin_angle) {
                    spin = 0;
                }
                else if(e.which == 69 && spin == spin_angle) {
                    spin = 0;
                }
                else if(e.which == 17){
                    e.preventDefault();
                    distribution = [];
                }
            });
            $('[data-dismiss=modal]').click(function(){
                $("#myModal").hide();
            });
            $('.canv').on('mousedown', function(event){
                //console.log(event);
                switch (event.which) {
                    case 1:
                        finger.val = cursor_power;
                        $('.canv').on('mousemove', function(event){
                            mouse = [event.offsetX, event.offsetY];
                        });
                        break;
                    case 2:
                        event.preventDefault();
                        if(event.ctrlKey){
                            move_points_dist(false, [event.offsetX, event.offsetY]);
                            $('.canv').on('mousemove', function(e2){
                                if(e2.ctrlKey){
                                    move_points_dist(false, [e2.offsetX, e2.offsetY]);
                                }
                            });
                            $('.canv').on('mouseup', function(){
                                $('.canv').off('mousemove');
                            });
                        }
                        else{
                            move_points_dist(true, [event.offsetX, event.offsetY]);
                        }
                        return;
                    case 3:
                        $('.canv').on('mousemove', function(event){
                            mouse = [event.offsetX, event.offsetY];
                        });
                        finger.val = -cursor_power;
                        break;
                    default:
                        return;
                }
                mouse = [event.offsetX, event.offsetY];
                $('.canv').on('mouseup', function(event){
                    //console.log(event.which);
                    switch (event.which) {
                        case 1:
                            if(finger.val == cursor_power){
                                mouse = false;
                                $('.canv').off('mousemove');
                            }
                            break;
                        case 3:
                            if(finger.val == -cursor_power){
                                mouse = false;
                                $('.canv').off('mousemove');
                                for (var i = 0; i < array_points.length; i++) {
                                    array_points[i].x.delta = 0;
                                    array_points[i].y.delta = 0;
                                }
                            }
                            break;
                        default:
                            return;
                    }
                });
            });
            $('.color_a').on('input', function(){
                color_a = $('.color_a').val().match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) });
            });
            $('.color_b').on('input', function(){
                color_b = $('.color_b').val().match(/[A-Za-z0-9]{2}/g).map(function(v) { return parseInt(v, 16) });
            });
            $('.line').on('input', function(){
                line = $('.line').val();
            });
            $('.background').on('input', function(){
                $('.canv').css('background', $('.background').val());
            });
            $('.force_visualisation').change(function(){
                force_visualisation = $(this).is(':checked');
            });
            $('.border').change(function(){
                border = $(this).is(':checked');
            });
            $('.lineto').change(function(){
                lineto = $(this).is(':checked');
            });
            $('.shuffle_distribution').change(function(){
                shuffle_distribution = $(this).is(':checked');
            });
            $('.wall_decrement').change(function(){
                wall_decrement = +$(this).val();
            });
            $('.cursor_power').change(function(){
                cursor_power = +$(this).val();
            });
            $('.arrow_power').change(function(){
                arrow_power = +$(this).val();
            });
            $('.gravity_resistance').change(function(){
                gravity_resistance = +$(this).val();
            });
            $('.spin_angle').change(function(){
                spin_angle = +$(this).val();
            });
            $('.limit_speed').change(function(){
                limit_speed = +$(this).val();
            });
            $('input').on('input', function(){
                if (!$(this).is('[no-save]')){
                    $('.save_options').css('box-shadow', '0 0 0 0.2rem rgba(225,83,97,.5)');
                    $('.save_remember').show();
                }
            });
            $('[data-toggle="tooltip"]').tooltip();
        });
body{
            margin: 0;
            overflow: hidden;
        }
        *[unselectable=on] { 
            -moz-user-select: none; 
            -o-user-select:none; 
            -khtml-user-select: none; 
            -webkit-user-select: none; 
            -ms-user-select: none; 
            user-select: none; 
        }
        @media (min-width: 576px){
            .modal-dialog {
                max-width: 550px;
            }
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TS | Gravity</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</head>
<body>
    <canvas class="canv" id="canvas" style="width: 100%; height: 100%; margin: auto; background-color: black; cursor: crosshair;" width="ww" height="wh"></canvas>
    <div class="modal" id="myModal" style="background: rgb(0, 0, 0, 0.7);">
        <div class="modal-dialog" style="max-width: 700px;">
            <div class="modal-content">
                <div class="modal-header" style="border: none;">
                    <h4 class="modal-title">Settings: <span class="btn-warning">be carefull</span> <span class="btn-danger save_remember" style="display: none;">Click "Save" to see changes</span></h4> 
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body row" style="padding: 0px; margin: 5px; max-height: 50vh; overflow-x: auto;">
                    <div class="col-md-4">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" no-save class="form-check-input force_visualisation" >Force visualisation
                            </label>
                            <br>
                            <label class="form-check-label">
                                <input type="checkbox" no-save class="form-check-input border" checked>Border
                            </label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" no-save class="form-check-input shuffle_distribution" checked>Shuffle distribution
                            </label>
                            <br>
                            <label class="form-check-label">
                                <input type="checkbox" no-save class="form-check-input lineto" >Line connecting
                            </label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input shuffle_generation" checked>Shuffle generation
                            </label>
                        </div>
                    </div>
                    <div class="col-md-12"><hr></div>
                    <div class="form-group col-md-4">
                      <label>◦ Min mass:</label>
                      <input type="number" value="0.5" class="form-control min_mass">
                    </div>
                    <div class="form-group col-md-4">
                      <label>⦿ Max mass:</label>
                      <input type="number" value="1.2" class="form-control max_mass">
                    </div>
                    <div class="form-group col-md-4">
                      <label>⥇Limit speed:</label>
                      <input type="number" no-save value="20" class="form-control limit_speed">
                    </div>
                    <div class="form-group col-md-4">
                      <label>➧ Min start speed:</label>
                      <input type="number" value="-4" class="form-control min_random_speed">
                    </div>
                    <div class="form-group col-md-4">
                      <label>➠ Max start speed:</label>
                      <input type="number" value="4" class="form-control max_random_speed">
                    </div>
                    <div class="form-group col-md-4">
                      <label>░ Screen px/point:</label>
                      <input type="number" value="700" class="form-control points_num">
                    </div>
                    <div class="form-group col-md-4">
                      <label>↸ Wall decrement:</label>
                      <input type="number" no-save value="0.8" class="form-control wall_decrement">
                    </div>
                    <div class="form-group col-md-4">
                      <label>✺ Cursor/Arrows power:</label>
                      <div class="input-group">
                        <input type="number" no-save value="0.2" class="form-control cursor_power">
                        <input type="number" no-save value="0.2" class="form-control arrow_power">
                      </div>
                    </div>
                    <div class="form-group col-md-4">
                      <label>⫷ Gravity resistance:</label>
                      <input type="number" no-save value="2" class="form-control gravity_resistance">
                    </div>
                    <div class="form-group col-md-4">
                      <label>⚠️ FPS:</label>
                      <input type="number" value="60" class="form-control fps">
                    </div>
                    <div class="form-group col-md-4">
                      <label>✏ Min/Max/Back/Line:</label>
                      <div class="input-group">
                        <input type="color" no-save value="#0000ff" class="form-control color_b">
                        <input type="color" no-save value="#ff0000" class="form-control color_a">
                        <input type="color" no-save value="#000000" class="form-control background">
                        <input type="color" no-save value="#1c1c1c" class="form-control line">
                      </div>
                    </div>
                    <div class="form-group col-md-4">
                      <label>∠ Spin angle:</label>
                      <input type="number" no-save value="13" class="form-control spin_angle">
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary copy" onclick="share()">Share configuration ➥</button>
                    <button type="button" class="btn btn-success save_options" onclick="settings_realise()">Save</button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

кол-во точек можно задать в настройках (ctrl + S) в поле px/point чем меньше число тем больше точек.

Но проблема в том, что нельзя задать их большое количество, резко падает fps. Это странно, так как в браузере нормально работают даже 3d игры с +- нормальной графикой, а тут просто много точек отрисовать не может. Провел опыты, фпс зависит ТОЛЬКО от одной строчки ctx.fillRect(...), которая больше не вызывает никаких функций внутри. Подозреваю что проблема в том что отрисовка делается процессором а не видеокартой, но я в этом не специалист. Подскажите пожалуйста, какие еще могут быть способ повторить такой эффект, но чтобы работал более оптимизировано.

4
  • В играх 100500 различных оптимизаций, что выходит за рамки ответа - написаны целые книги и движки. 8 дек 2020 в 15:19
  • @StepanKasyanenko я не об полигонах, освещении и расчетах, а только о точке и одной функции 8 дек 2020 в 16:11
  • Попробуйте использовать подходящие для этого библиотеки, например pixi.js
    – mego4iter
    8 дек 2020 в 21:40
  • Даже для точки есть оптимизации, почитайте например про двойную буферизацию. 9 дек 2020 в 3:58

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.