# Scaling Images on a Custom Axis

**URL:** <https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801>\
**Category:** Coding Questions\
**Created:** [March 17, 2022, 5:26pm UTC](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801 "2022-03-17T17:26:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmethystMoon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/amethystmoon/32/15919_2.png) [@AmethystMoon](https://discourse.processing.org/u/AmethystMoon)\
**Post date:** [March 17, 2022, 5:26pm UTC](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801/1 "2022-03-17T17:26:46Z")

</div>

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-

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6c8a08d4fa71a3cd19901787f70d8297c840273a.png)

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!

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [March 17, 2022, 9:23pm UTC](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801/2 "2022-03-17T21:23:25Z")

</div>

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

```auto
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)
    }
  }
}

```