Есть программа, в основе которой отрисовка разноцветных точек на экране:
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">×</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(...), которая больше не вызывает никаких функций внутри. Подозреваю что проблема в том что отрисовка делается процессором а не видеокартой, но я в этом не специалист. Подскажите пожалуйста, какие еще могут быть способ повторить такой эффект, но чтобы работал более оптимизировано.