Rotate Text in Gamelab?

CS Discoveries Unit and Lesson Discussion
3

The easiest way to do it would be to make the text a sprite, but there is a kinda funky way around it. The underlying library that we use (p5.js) has a lot of functions that we don’t directly expose, but which you can use if you know about them. The two that we’d need for this are rotate(), which will rotate every command that follows it around the origin of the canvis and translate() which will change the origin of the canvas. To accomplish text that is rotated 45 degrees around the center of the canvas, we’d need to:

  1. Move the origin of the canvas to the center with translate(200, 200)
  2. Call rotate(45) to rotate subsequent commands
  3. Set textAlign(CENTER, CENTER) so that the text can rotate around center
  4. Use text() to put your text on the screen
  5. Reset the canvas rotation with rotate(-45) to make sure we don’t rotate the next things we put on screen
  6. Reset the canvas origin with translate(-200, -200) so any additional things we put on screen are located properly

Note that you could skip steps 5 and 6 if you saved the rotated stuff for the very end of the draw loop, but it’s still good practice to put things back where you found them :slight_smile:

All that said, probably easiest to just make the sprite. If you want to check out an example of how this all works I created a remix of your code here https://studio.code.org/projects/gamelab/wWoId4JbPqEFCbp_UBzlOg/view

1 Like