Scroll over Background Image

let bgImg;

let xOffset;

let yOffset;

let xOffsetMax;

let yOffsetMax;

​

//array for the squares

let recties = [];

​

​

function preload() {

  bgImg = loadImage('https://raw.githubusercontent.com/games-and-stuff/assets/main/ScrollBackTest.png');

}

​

function setup() {

  createCanvas(int(random(300,800)), int(random(300,800)));

  background(0);

  xOffsetMax = bgImg.width - width;

  yOffsetMax = bgImg.height - height;

  xOffset = 0;

  yOffset = yOffsetMax;

  //make the array of spinning squares with x and y positions over the dimensions of background image

  let indexr=0;

  for (let i=0; i < bgImg.width; i+=random(75,100)) {

    for (let j=0; j < bgImg.height; j+=random(75,100)) {

      recties[indexr] = new squarey(i,j,30,5);

      indexr++;

    }

  }

}

​

function draw() {

  //keys

  if (keyIsDown(65)) {xOffset -= 10;}

  if (keyIsDown(68)) {xOffset += 10;}

  if (xOffset<0){xOffset = 0;}

  if (xOffset>xOffsetMax){xOffset = xOffsetMax;}

  if (keyIsDown(87)) {yOffset -= 10;}

  if (keyIsDown(83)) {yOffset += 10;}

  if (yOffset<0){yOffset = 0;}

  if (yOffset>yOffsetMax){yOffset = yOffsetMax;}

  //draw background

  image(bgImg, 0-xOffset,0-yOffset);

  fill(0);

  //update and draw shapes

    for (let i = 0;i<recties.length;i++){

      recties[i].update();

      recties[i].display();

      } 

  //draw debug text

  text("xOffset " + xOffset,10,200);

  text("yOffset " + yOffset,10,220);

  text("xOffsetMax " + xOffsetMax,10,260);

  text("yOffsetMax " + yOffsetMax,10,280);

}

​

​

class squarey {

constructor(xin,yin,sizein, cornerin){

    this.x = xin;

    this.y = yin;

    this.size = sizein;

    this.corner = cornerin;

    this.turny = 0;

    this.turnyAmt = random(45);

    this.col = color(random(255));

    }

  update(){

  this.turny = radians((millis()/this.turnyAmt));

    this.x += random(-0.1,0.1);

  }

  display() {

    fill(this.col);

    push();

    translate(this.x-xOffset,this.y-yOffset);

    rotate(this.turny);

    rectMode(CENTER);

    rect(0,0,this.size,this.size,this.corner);

    pop();

  } 

​

​

}