(Code.org)
Is there a way to code an ellipse to appear at an angle, say 45 degrees (i.e. ‘leaning / tipping to one side’)?
CS Discoveries
Unit 3 (Interactive Animations and Games)
Lesson 5 (Variables)
Level 6 (Debug: Unused Variables)
I can only get the ellipse to rotate from 0 degrees to 90 degrees (i.e. the ellipse is either just on the x axis or just on the y axis)
Example code:
ellipse(270, 115, 170, 80)
Example of what I would like to do:
You need to use the rotate() function p5 provides (gameLab uses p5)
It’s easier to use it in degrees in your case.
Here’s what you should do to get an ellipse rotated at 45 degrees (what you’re trying to achieve):
angleMode(DEGREES)
rotate(45)
ellipse(270, 115, 80, 170)
rotate is like fill, it will reset in the start of draw.
I use angleMode to change from radians to angles. It’s sometimes easier to work with angles.
Please tell me if this works, since some functions from P5 are unavailable in gameLab. I wasn’t able to test it in code.org since I don’t have my laptop.
That is a tricky one and @impixel is correct, that you would need to use the rotate function (typed in text mode) to get that to work properly.
I would also add that in order for the rotate to work the way your mind thinks it should, you would want to change the origin as well to 200, 200 as is described in the related post below (about rotating text). Otherwise, it rotates around the origin at 0,0. Finally, if you only want to rotate part of your drawing, you need to rotate it back the same number of degrees you rotated it with before drawing the rest of your image or it will all be rotated.
Some people choose to create a sprite instead of using a shape as sprites can be rotated with the rotate block, so if your student can wait to learn about sprites first, that may be a lot easier than playing with rotations and translations, but the link below is a good primer on how you COULD rotate a shape if you really want to.
https://forum.code.org/t/rotate-text-in-gamelab/14253/3?
Good luck!
Mike
Thank you for replying, IM Pixel
This is what I get:
I believe there are a few small issues with your code here.
Line 4 attempts to rename the Javascript built-in function (called rotate) as a variable. THat’s probably why you have the yellow warning icon. You can’t use the name rotate as a variable since that name is reserved by javascript.
Then, on line 6, don’t use 45, just use the word “DEGREES”. I’m not even sure that line is necessary, but if you use it, you are just telling javascript you want to use degrees and not radians.
If you fix those two things, you should definitely see something change. … the 45 inside the rotate function (line 7) is what will rotate everything by 45 degrees.
Good luck!
Mike
Yeah … I get the same error message on my project.
It may just be the algorithm that generates the error messages doesn’t recognize rotate (or translate) as being valid functions, but they clearly are as it works.
I still think that declaring rotate as a variable “overrid” the rotate function and caused it to not work.
Good luck!
Mike
That makes sense - thank you, Mike.
You’re defining a variable rotate, it will obviously not work, since that’s a function and you’re overriding it with your rotate variable. It turns from a function to a variable.
Just ignore it. If you want to remove it you can probably do this:
var rotate = rotate
This will remove the warning from that line but will keep it in the line where you set rotate to rotate.
