Scaling Images on a Custom Axis

p5.js Coding Questions
1

I’m working on a cell-based game where the player walks around a world made of cells. I’m trying to give it an isometric perspective, so instead of just plain squares I rotate the canvas by 45 degrees, then draw the cells. Here’s my code-

let widthOfCell,offset
function setup() {
  grassIMG = loadImage('https://i.ibb.co/XjfmbDh/Grass.png')
  createCanvas(400,400)
  widthOfCell = 60;
  offset = 500
}
function draw() {
  rotate(QUARTER_PI)
  for(var x = 0; x<50; x++) {
    for(var y = 0; y<50; y++) {    
      image(grassIMG,x*widthOfCell-offset,y*widthOfCell-offset,widthOfCell,widthOfCell)
    }
  }
}

When you run it, you’ll probably see squares that are rotated 45 degrees, but I’m trying to get them closer to a diamond shape, like this-

Screenshot 2022-03-17 13.13.01

However, any kind of image-scaling I’ve tried, I haven’t been able to get the squares to shrink exactly like that, they always shrink on their original x- or y-axes instead of the new vertical axis after rotating. Does anyone know if this is possible? Thanks!

2

This is somewhat counterintuitive, but to do this you need to scale before you rotate.

let widthOfCell,offset
function setup() {
  grassIMG = loadImage('https://i.ibb.co/XjfmbDh/Grass.png')
  createCanvas(400,400)
  widthOfCell = 60;
  offset = 500
}
function draw() {
  scale(1, 0.4);
  rotate(QUARTER_PI);
  for(var x = 0; x<50; x++) {
    for(var y = 0; y<50; y++) {    
      image(grassIMG,x*widthOfCell-offset,y*widthOfCell-offset,widthOfCell,widthOfCell)
    }
  }
}
1 Like