खींचने योग्य बैकग्राउंड

Question

मैं एक अनंत ड्रैग की तरह कुछ हासिल करना चाहता हूं जैसे कि कोंवा जेएस में कोई भी मेरी मदद कर सकता है। मैं चीजों की कोशिश करता हूं, लेकिन उनमें से कुछ ठीक था। P5js और जावास्क्रिप्ट में Im नया। कृपया किसी संकेत के लिए। केवल यह तत्व मुझे पूरी परियोजना को पूरा करने से रोकता है।

var grid;
var current_img;
var BgCat1 = [];
var layerOne;
let show_grid = false;

Comments

मैं उलझन में हूं कि आप क्या करने की कोशिश कर रहे हैं। क्या आप चाहते हैं कि ग्रिड को उदाहरण की तरह खींचा जा सके, असीम रूप से?

— क्विलबर्ट क्यू।

हां .. मैं चाहता हूं कि ग्रिड उदाहरण की तरह घसीटा जा सके

— माइकेल एम आई

Answer 1

अधिक सुरुचिपूर्ण समाधान हो सकता है, लेकिन यहां मैं रैपराउंड को संभालने के लिए ग्रिड के प्रत्येक तरफ एक अतिरिक्त सेल खींचता हूं, इसलिए 10x10 के साथ 12x12 ग्रिड दिखाई देता है। इसे यहां देखें: https://editor.p5js.org/rednoyz/full/uJCADfZXv

let dim = 10, sz;
let xoff = 0, yoff = 0;

function setup() {
  createCanvas(400, 400);
  sz = width/ dim;
}

function mouseDragged() {
  xoff += mouseX - pmouseX;
  yoff += mouseY - pmouseY;
}

function draw() {
  background(255);

  for (let i = 0; i < dim+2; i++) {
    for (let j = 0; j < dim+2; j++) {

      let x = ((xoff + j * sz) % (width+sz)) - sz;
      if (x < -sz) x += width+sz;

      let y = ((yoff + i * sz) % (height+sz)) - sz;
      if (y < -sz) y += height+sz;

      rect(x, y, sz, sz);
      text(i * 10 + j, x + sz/2, y + sz/2);
    }
  }
}

Comments

तुम भी रख सकते हैं if((mouseX < width && mouseX > 0)&&(mouseY < height && mouseY > 0))पर mouseDragged()समारोह काम करने के लिए केवल पर कैनवास खींच

— darcane

इस जवाब के लिए आप कुछ और खोज रहे हैं, @ मिशाल-मील?

— rednoyz

मैं अतिरिक्त कोड के लिए प्रश्नकर्ता के अनुरोध का जवाब दे रहा था, जिसे बाद में हटा दिया गया था

— rednoyz