How to Rotate Shapes in p5.js (translate, rotate, push, pop)
Why Stack Overflow recommends it
Stack Overflow users link it when explaining why p5.js shapes rotate around the top-left corner and how translate() has to come before rotate().
Recommended by 1 people across 1 different months, 2018 to 2023.
What it is
A Coding Train tutorial by Daniel Shiffman covering the p5.js transformation functions translate(), rotate(), push() and pop(). It walks through live coding with chapters on translating the origin, angles, rotating shapes, and saving and restoring drawing state.
What people said
Recommends LearningToCode · 2023-02 · Stack Overflow · on “p5js rotate shapes with noLoop()”
Because in order to first rotate, you have to translate the object first. For better understanding: [LINK] [this video] Assuming you have specified angleMode() in your setup function... translate(); rotate(); rect(); line();
Cites Rearsky · 2018-03 · Stack Overflow · on “translate, rotate, push/pop tutorial code not working anymore”
Basically I am new to programming and wanted to start by using a library in javascript to render things in the web page for fun, except when I followed the tutorial by code train about p5.js about translation, rotation, push, and pop (found here= [this video] ), it worked just fine, I added a couple little bits to make it unique to what I wanted to do with it and it was fine, however I open the exact same code the day afterward to check something and suddenly it doesnt work when I open it in chrome, am I missing something or did p5.js update its syntax or what? //test to learn functions translate, rotate, push/pop //rotation needs translate in order to function because rotation needs to know whic
Cites Vivek · 2020-11 · Stack Overflow · on “How do I have an object face the mouse in p5?”
The object is rotating but it is rotating on 0, 0 So if you want the object to rotate on the center of the screen then, function draw() { background(0, backgroundColor2, 0); cursor('crosshair.png') frameRate(1000); angleMode(DEGREES); imageMode(CORNER) let a = atan2(mouseY - height / 2, mouseX - width / 2); translate(width/2, height/2); rotate(a); image(gun, 0, 0, 40, 40); } Here is a link for you to understand better [this video]