​

​

let tile1;

​

DEBUG = 1

​

var SCALE = 0.5;

​

const canvases = []

​

// absolute pos

var x; 

var y;

​

// translated pos on current canv

// we want to make the first canvas with 0,0 

var tx

var ty;

​

function preload() {

  tile1 = loadImage('tile1.png');

}

​

function mouseWheel(event) {

  if (event.delta>0) {

    SCALE -=0.1

  } else {

    if(SCALE > 0 ) SCALE +=0.1

  }

}

​

function setup() {

  createCanvas(468, 408);

  for (var dy = -2; dy < 3; dy++){

    canvases.push([])

    for (var dx = -2; dx < 3; dx++){

      canvases[dy+2].push({

        cg:createGraphics(width,height),

        cx: dx*width-(width),

        cy: dy*height-(height)

        }

        )

    }

  }

​

x = 0 

y = 0 

tx = (width/2)

ty = (height/2)

​

  createButton('toggle annoying drift').mousePressed(

  function(e) {

    dt = (dt) ? 0 : 0.1

  })

  SHOW_TERRAIN = createCheckbox('show terrain')

  DEBUG_TOGGLE = createCheckbox('toggle debug (this permanently burns the coords in each canvas)')

}

​

// this is just used to cause some drift for now

dt = 0.1

​

​

function changeCanvasPositions(shiftx,shifty) {

  // since i just re-use the same canvases, use this function

  // to edit their x/y (topleft) positions

  for (var dy = -2; dy < 3; dy++){

    for (var dx = -2; dx < 3; dx++){

      // canvas graphics, x, y of canvas

      canvases[dy+2][dx+2].cx += shiftx

      canvases[dy+2][dx+2].cy += shifty

    }

  }

}

function checkCanvases() {

  // ok this should check whether the player

  // x or y values are outside the middle canvas bounds

  // and then it should swap all other canvases accordingly

  const H = height;

  const W = width;

  const {cx: xm , cy: ym} = canvases[2][2] // middle

  // if x gets over the right boundary, shift everything left and clear

  // the most-right canvases

  if (x > xm+W){

    for (var i = 0; i < 5; i++){

      canvases[i][0].cg.clear().image(canvases[i][1].cg,0,0)

      canvases[i][1].cg.clear().image(canvases[i][2].cg,0,0)

      canvases[i][2].cg.clear().image(canvases[i][3].cg,0,0)

      canvases[i][3].cg.clear().image(canvases[i][4].cg,0,0)

      canvases[i][4].cg.clear()

    }

    // all canvases now have their previous W + W

    print(canvases[2][2].cx, canvases[2][2].cy)

    changeCanvasPositions(W,0)

    print(canvases[2][2].cx, canvases[2][2].cy)

    print('went right')

  }

  if (x < xm){

    for (var i = 0; i < 5; i++){

    canvases[i][4].cg.clear().image(canvases[i][3].cg,0,0)

    canvases[i][3].cg.clear().image(canvases[i][2].cg,0,0)

    canvases[i][2].cg.clear().image(canvases[i][1].cg,0,0)

    canvases[i][1].cg.clear().image(canvases[i][0].cg,0,0)

    canvases[i][0].cg.clear()

    }

    changeCanvasPositions(-W,0)

    print('went left')

  }

  if (y > (ym+H)){

    for (var i = 0; i < 5; i++){

    canvases[0][i].cg.clear().image(canvases[1][i].cg,0,0)

    canvases[1][i].cg.clear().image(canvases[2][i].cg,0,0)

    canvases[2][i].cg.clear().image(canvases[3][i].cg,0,0)

    canvases[3][i].cg.clear().image(canvases[4][i].cg,0,0)

    canvases[4][i].cg.clear()

    }

    changeCanvasPositions(0,H)

    print('swapped to -H')

  }

  if (y < ym){

    for (var i = 0; i < 5; i++){

    canvases[4][i].cg.clear().image(canvases[3][i].cg,0,0)

    canvases[3][i].cg.clear().image(canvases[2][i].cg,0,0)

    canvases[2][i].cg.clear().image(canvases[1][i].cg,0,0)

    canvases[1][i].cg.clear().image(canvases[0][i].cg,0,0)

    canvases[0][i].cg.clear()

    }

    changeCanvasPositions(0,-H)

    print('swapped to +H')

  }

  // if topleft is atleast  -H higher than mid, shift everything up

​

}

​

​

​

function draw() {

  background(220);

  const H = height;

  const W = width;

  // some drift to lower right corner

  y+=dt;

  x+=dt

​

  const spd = 5;

  if (/*w*/ keyIsDown(87)) {py =y  ;y -=spd;}

  if (/*a*/ keyIsDown(65)) {px =x  ;x -=spd;}

  if (/*s*/ keyIsDown(83)) {py =y  ;y +=spd;}

  if (/*d*/ keyIsDown(68)) {px =x  ;x +=spd;}

  // wtf javascript

  tmpx = (x)%W

  tmpy = (y)%H

  tx = (tmpx < 0) ? (W-tmpx) : tmpx

  ty = (tmpy < 0) ? (H-tmpy) : tmpy

  // idk how to reason about this 

  const camOffsetY = -y + H/2;

  const camOffsetX = -x + W/2;

  // what we add to each canvas x/y

  const bgy = camOffsetY + round(y/H)*H

  const bgx = camOffsetX + round(x/W)*W

  push();

  scale(SCALE)

  // WHERE DO WE TRANSLATE TO? 'player'(AKA THE CIRCLE) HAS TO STAY IN CENTER :C

  translate((width/2/SCALE )-x , (height/2/SCALE )-y)

  /*

  attempt #43 at reasoning 

  x, y is absolute player position

  let cx, cy is topleft corner of center canvas

  then where should we draw the canvases and player such that

  player in center

  so center is W/2, H/2

  canvases have width W and height H

  so uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

  canvas should be offset ???

  try to solve for X first, maybe

  mhmmhm let Z = (W/2)

  Z = x

  */

​

  // translate(canvases[2][2].cx, canvases[2][2].cy)

  // translate((width/2/SCALE )-x , (height/2/SCALE )-y)

  canvases[2][2].cg.push()

  // canvases[2][2].cg.translate()

  canvases[2][2].cg.circle(tx,ty, 15)

  canvases[2][2].cg.pop()

​

  for (var dx = -2; dx < 3; dx++){

    for (var dy = -2; dy < 3; dy++){

      SHOW_TERRAIN.checked() ? image(tile1, bgx+dx*W, bgy+dy*H) : rect(bgx+dx*W, bgy+dy*H, W,H)

      const {cg, cx, cy} = canvases[dy+2][dx+2];

​

      // draw the canvas at the offset

      image(cg,  bgx+dx*W, bgy+dy*H)

      if (DEBUG_TOGGLE.checked()) {

        // burns coords into canvas 

        cg.push()

        cg.rect(0,0, 60, 45)

        for (const [i, texti] of [`x:${cx.toFixed(2)}`,

        `y:${cy.toFixed(2)}`,].entries()) {

          cg.text(texti, 0, 15+i*15)

        }    

        cg.pop()

  }

    }

  }

  pop()

  checkCanvases()

​

  if (DEBUG_TOGGLE.checked()) {

    push()

    translate(0,0)

    rect(0,0, 100, 45)

    for (const [i, texti] of [`x:${x.toFixed(2)}`,

    `y:${y.toFixed(2)}`,].entries()) {

      text(texti, 5, 15+i*15)

    }

    pop()

  }

​

​

}