Пользовательская карта прокрутки

Question

Предположим, что у меня 2-й самолет. 2d-плоскость, 10000 * 10000 единиц.

Теперь этот самолет имеет множество объектов, рассеянных вокруг него. Предположим, что эти объекты являются прямоугольниками. Я хочу показать пользователю только область 500 * 500 любой части карты с включенными прямоугольниками.

Мой вопрос: Как я могу показать часть области карты пользователю?

Если вы не понимаете, вопрос, который я могу показать вам, что я имею в виду на изображении ниже:

Этот код является то, что я пытался до сих пор:

var socket = io("localhost:8000"); 
var data = {}; 
var init = false; 
var screenPos = { 
    x:0,y:0 
}; 
var setup = function(){ 
    createCanvas(500,500); 
    background(255); 
    socket.on("init",function(d){ // This just gets the position of the building relative to the 10000 * 10000 square 
     data = d; 
     screenPos = { 
      x: data.building.x - width/2, // building.x - screenwidth/2 this line is supposed to theoretically center the drawing on the rectangle :| 
      y: data.building.y - height/2 //building.y - screenheight/2 
     }; 
     loop(); 
    }) 
    socket.on("update",function(d){ 
     data = d; 
    }); 
noLoop(); 
}; 

var draw = function(){ 
    rect(data.building.x,data.building.y,50,50); // In this example, the rectangle is the building 
}; 

Прямоугольник может быть от 0,0 до 1000010000. Если вам нужно, чтобы я подробно разбирался, НЕ бойтесь запрашивать дополнительную информацию.

Предположим, что данные, поступающие с сервера, действительны.

Answer 1

Вы можете использовать встроенный в camera() функции:

function setup(){ 
 
    createCanvas(100, 100); 
 
} 
 
function draw(){ 
 
    background(0); 
 
camera(mouseX, mouseY); 
 
fill(255, 0, 0); 
 
rect(50, 50, 50, 50); 
 
}

<script src="https://github.com/processing/p5.js/releases/download/0.5.4/p5.js"></script> 
 
<p>Mouse over this:</p>

Более подробную информацию можно найти в the reference.