CODEWITHSUNDEEP
javascriptprocessingp5.js
user1843376
user1843376

Reputation: 585

Flip image Y axis on p5js

I need to flip a image over the Y axis in P5js

I'm aware that for the flip over the X axis the following code works

push();
scale(-1, 1)
image(pg,-width/2,0, width/2, height);
pop();

But I can't found the way to do it over the Y axis.

Upvotes: 1

Views: 931

Answers (1)

Rabbid76
Rabbid76

Reputation: 210909

Scale the y axis by -1:

scale(1, -1);

And draw the image with a y-coordinate of -height:

image(..., ..., -height, ..., height);


let img;
function preload() {
  img = loadImage('https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/supermario.jpg');
}

function setup() {
  createCanvas(256, 256);
}

function draw() {
  push();
  scale(1, -1);
  image(img, 0, -height, width, height);
  pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>

Upvotes: 2

Related Questions