Y-axis up

[kamildul]

trafficstars

Topic

Hello everyone, I nedd help, please tell me how i can shwitch mode to y-axis up? I tryied create solution to draw line in cartesian coordynation. I dont now how i can do it. I search in documentation and forum information for schwitch mode to y-axis up but i can find :-( Please help me. Thanks!

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[davepagurek]

Hi! You could use scale(1, -1) before drawing to flip the y axis. Would that solve your problem?

[DavidKozdra]

@davepagurek I tried this with the shapes example and it seems like scale can not take negative numbers this comes from the canvas scale

test here to verify : https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_canvas_scale

so I looked for solutions with the HTML 5 canvas using @kamildul's question https://stackoverflow.com/questions/4335400/in-html5-canvas-can-i-make-the-y-axis-go-up-rather-than-down context.transform(1, 0, 0, -1, 0, canvas.height)

This fixed the issue on the w3 school demo, but you need to get the canvas reference on p5js. You can do this with the DOM API

good luck

[davepagurek]

@DavidKozdra I think your issue is that just using scale keeps the origin in the same spot. Do you expect the origin to be in the bottom left? if so, in p5, this can be accomplished by translating before scaling:

translate(0, height)
scale(1, -1)

[DavidKozdra]

@davepagurek that did work, I recommend mentioning that in the first reply, also my solution also works either way will fix the issue

[kamildul]

Hello gentlemen's! Thanks for response.

translate(0, height) scale(1, -1)

This solve my problem with y-axis, but still i have problem with image - my image is upside down in mirror

[davepagurek]

When drawing your image, you can temporarily mirror the canvas back again:

push()
scale(1, -1)
image(yourImage, 0, 0)
pop()

[davepagurek]

Also for completeness, @DavidKozdra one other option available to you is to use p5's applyMatrix function (documentation here) with the same parameters you provided to avoid having to go through drawingContext to get the underlying canvas context:

applyMatrix(1, 0, 0, -1, 0, height)

[limzykenneth]

Hi, if you need help with your own code, please direct your questions to the forum. We use GitHub issues mainly for bug reports and feature requests only. Thanks!