# Ellipse - Rotate on an Axis

**URL:** <https://forum.code.org/t/ellipse-rotate-on-an-axis/35650>\
**Category:** Coding and Debugging Help\
**Tags:** csd-unit-3-lesson-5\
**Created:** [January 3, 2022, 5:53pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650 "2022-01-03T17:53:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dfriedrichs](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dfriedrichs](https://forum.code.org/u/dfriedrichs)\
**Post date:** [January 3, 2022, 5:53pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/1 "2022-01-03T17:53:06Z")

</div>

([Code.org](https://studio.code.org/s/csd3-2021/lessons/5/levels/6/sublevel/3))

**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:

 ![ellipse](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/a/a1fae1b8665409e33a7a97b94e29920cd633748d.png)

---

<div class="post-metadata">

**Author:** ![IMPixel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/impixel/32/6744_2.png) [@IMPixel](https://forum.code.org/u/IMPixel)\
**Post date:** [January 3, 2022, 6:36pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/2 "2022-01-03T18:36:46Z")

</div>

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](http://code.org) since I don’t have my laptop.

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [January 3, 2022, 10:53pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/3 "2022-01-03T22:53:41Z")

</div>

@dfriedrichs,

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?](https://forum.code.org/t/rotate-text-in-gamelab/14253/3?)

Good luck!

Mike

---

<div class="post-metadata">

**Author:** ![dfriedrichs](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dfriedrichs](https://forum.code.org/u/dfriedrichs)\
**Post date:** [January 6, 2022, 4:05pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/4 "2022-01-06T16:05:22Z")

</div>

Thank you for replying, IM Pixel

This is what I get:

![image](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/a/afc10fb628756666ca454b6e412db5e619318f1a.png)

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [January 6, 2022, 5:30pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/5 "2022-01-06T17:30:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dfriedrichs](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dfriedrichs](https://forum.code.org/u/dfriedrichs)\
**Post date:** [January 6, 2022, 6:13pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/6 "2022-01-06T18:13:18Z")

</div>

This will rotate the image 45 degrees (great - thanks!), but I am still getting an error message:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/2/2e768b186fbe2860e182ac197104d9df546dceae.png)

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [January 6, 2022, 6:22pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/7 "2022-01-06T18:22:51Z")

</div>

Yeah … I get the same error message on my project.

> **[Check out what I made](https://studio.code.org/projects/gamelab/x5ZFFRqrg2S6PbBmUzAwWLMjjPEh6v-5ymW1qh9UQ9Y)**
>
> I wrote the code myself with Code.org

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

---

<div class="post-metadata">

**Author:** ![dfriedrichs](https://avatars.discourse-cdn.com/v4/letter/d/a587f6/32.png) [@dfriedrichs](https://forum.code.org/u/dfriedrichs)\
**Post date:** [January 6, 2022, 6:29pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/8 "2022-01-06T18:29:19Z")

</div>

That makes sense - thank you, Mike.

---

<div class="post-metadata">

**Author:** ![IMPixel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/impixel/32/6744_2.png) [@IMPixel](https://forum.code.org/u/IMPixel)\
**Post date:** [January 7, 2022, 12:38pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/9 "2022-01-07T12:38:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![IMPixel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/impixel/32/6744_2.png) [@IMPixel](https://forum.code.org/u/IMPixel)\
**Post date:** [January 7, 2022, 12:39pm UTC](https://forum.code.org/t/ellipse-rotate-on-an-axis/35650/10 "2022-01-07T12:39:12Z")

</div>

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.
