I want to achieve something like an infinite drag like the one in Konva js https://jsfiddle.net/kiksy/jqo2h3dx/2/. Can anyone help me with this. I try varius things but non of them were ok. Im new in p5js and javascript. Please for any hints. Only this element prevents me from completing the entire project.
var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;
function preload() {
img1 = loadImage(
"https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/fish64.png"
);
}
function setup() {
let cnv = createCanvas(1000, 1000);
colorMode(HSB, 255);
layerOne = createGraphics(1000, 1000);
layerOne.grid = new Grid(40);
const background_btn1 = select("#BgCategory1-btn1");
background_btn1.mousePressed(a);
}
function draw() {
background(0);
if (show_grid == true) {
layerOne.grid.display();
}
}
function a() {
show_grid = true;
current_img = img1;
}
class Grid {
constructor(cellSize) {
this.cellSize = cellSize;
this.numberOfColumns = floor(width / this.cellSize);
this.numberOfRows = floor(height / this.cellSize);
this.cells = new Array(this.numberOfColumns);
for (var column = 0; column < this.numberOfColumns; column++) {
this.cells[column] = new Array(this.numberOfRows);
}
for (var column = 0; column < this.numberOfColumns; column++) {
for (var row = 0; row < this.numberOfRows; row++) {
this.cells[column][row] = new Cell(column, row, cellSize);
}
}
}
display() {
for (var column = 0; column < this.numberOfColumns; column++) {
for (var row = 0; row < this.numberOfRows; row++) {
this.cells[column][row].show_cell();
}
}
}
}
class Cell {
constructor(column, row, size) {
this.x = column;
this.y = row;
this.w = size;
}
show_cell() {
image(current_img, this.x * this.w, this.y * this.w, this.w, this.w);
}
}
<html>
<button onclick="a()" id="BgCategory1-btn1">image 1</button>
</html>
from Infinite pan of tiles in p5js
No comments:
Post a Comment