# New rotated ellipse function help and suggestions

**URL:** <https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281>\
**Category:** Coding Questions\
**Created:** [November 3, 2021, 1:51pm UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281 "2021-11-03T13:51:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![maggie](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@maggie](https://discourse.processing.org/u/maggie)\
**Post date:** [November 3, 2021, 1:51pm UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281/1 "2021-11-03T13:51:51Z")

</div>

Hello! I finally figured out how to make an ellipse that will rotate without having to use the rotate function on it.

I had had no luck getting solutions using rotate() and push()/pop() to generalize to making multiple copies that are resizable or relocatable. For instance, trying to make a flower function with tilted petals. It just won’t relocate without messing up.

Here’s a link to the function I created to try to fix that issue. It uses angle of rotation as an argument. Feel free to use/modify/redistribute, as needed.

[https://editor.p5js.org/mstrain/sketches/sTuvUiSTJ](https://editor.p5js.org/mstrain/sketches/sTuvUiSTJ)

I’m pretty proud of it, and as soon as I have time, I plan on gathering this and a few other functions and classes into a library to go up on GitHub.

Now for the help:

I understand WHY it doesn’t work, but it’s a pretty significant handicap that you can’t directly use fill() with it. I left a red circle in the program to demonstrate. I feel confident that I can fill the ellipse with colored pixels, myself, but that would limit its usability. Any suggestions?

I’ve looked around for a function to “detect” another function, but I didn’t see it. I wouldn’t know how to begin creating a function to detect if fill() is used.

Honestly, I think the best case scenario might be for the angle of rotation to just be included in the standard ellipse() function, if that’s something that other people are interested in. I know I have been frustrated by not being able to easily rotate an ellipse about its center.

The second best scenario would be to point me to resources to learn how the shape functions use fill(), so I could replicate it in my function.

I’m looking forward to hearing from y’all!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 4, 2021, 1:24am UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281/2 "2021-11-04T01:24:46Z")

</div>

Hello,

> [@maggie](#):
>
> I know I have been frustrated by not being able to easily rotate an ellipse about its center.

It takes time to grasp transformations (translation, rotation and scale).  
Try to find a good tutorial that suits you.

[https://p5js.org/reference/#/p5/ellipseMode](https://p5js.org/reference/#/p5/ellipseMode)

Example:

```auto
let angle = 0.0;

function setup() 
  {
  createCanvas(720, 400);
  noStroke();
  fill(255, 0, 255);
  ellipseMode(CENTER);
  }

function draw() 
  {
  background(51);
  angle += TAU / 360; //TAU = TWO_PI
  translate(mouseX, mouseY);
  rotate(angle);
  ellipse(0, 0, 50, 100);
  }

```

> [@maggie](#):
>
> The second best scenario would be to point me to resources to learn how the shape functions use fill(), so I could replicate it in my function.

[https://p5js.org/reference/#/p5/beginShape](https://p5js.org/reference/#/p5/beginShape)

Coding Train tutorial:

[![](https://img.youtube.com/vi/o9sgjuh-CBM/maxresdefault.jpg "How to Rotate Shapes in p5.js (translate, rotate, push, pop)") ](https://www.youtube.com/watch?v=o9sgjuh-CBM)

`:)`

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [November 4, 2021, 2:47am UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281/3 "2021-11-04T02:47:26Z")

</div>

> [@maggie](#):
>
> … best case scenario might be for the angle of rotation to just be included in the standard ellipse() function …

As @glv has demonstrated, you can accomplish the rotation without writing your own function. However, if in some circumstances, you deem it convenient to use a custom function for such a purpose, you could do something like this:

```auto
let ang = 0;
function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(220);
  rotatedEllipse(100, 100, 89, 55, ang, color(255, 0, 0));
  rotatedEllipse(200, 200, 144, 89, ang + PI / 2, color(0, 0, 255));
  ang += PI / 180;
}

function rotatedEllipse(x, y, w, h, angle, f) {
  push();
  translate(x, y);
  rotate(angle);
  fill(f);
  ellipse(0, 0, w, h);
  pop();
}

```

If you would rather rotate the ellipse about one of its ends rather than about its center, for instance to draw petals of a flower, you can also customize a function for that purpose.

_EDIT (November 3, 2021):_

Here, it was convenient to use a custom function to rotate some ellipses about their ends:

```auto
// Wind Turbine
let ang = 0;
function setup() {
  createCanvas(360, 360);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(220);
  fill(0);
  rect(width / 2, height * 3 / 4, 25, height / 2);
  turbineBlade(width / 2, height / 2, 144, 89, ang, color(255, 0, 0, 127));
  turbineBlade(width / 2, height / 2, 144, 89, ang + TWO_PI / 3, color(0, 0, 255, 127));
  turbineBlade(width / 2, height / 2, 144, 89, ang + 2 * TWO_PI / 3, color(255, 255, 0, 127));
  ang += PI / 180;
}

function turbineBlade(x, y, w, h, angle, f) {
  push();
  translate(x, y);
  rotate(angle);
  fill(f);
  ellipse(w / 2, 0, w, h);
  pop();
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/986765b4c06440ca36329d268c7fab741fef5143.png)

---

<div class="post-metadata">

**Author:** ![maggie](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@maggie](https://discourse.processing.org/u/maggie)\
**Post date:** [November 4, 2021, 12:58pm UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281/4 "2021-11-04T12:58:51Z")

</div>

Thank you for the resources! I will look at this.

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [November 6, 2021, 2:31pm UTC](https://discourse.processing.org/t/new-rotated-ellipse-function-help-and-suggestions/33281/5 "2021-11-06T14:31:45Z")

</div>

Thank you for the nice discussion, @maggie. See the following:

> [@Oppositional Rotations](https://discourse.processing.org/t/oppositional-rotations/33364):
>
> The forms rotate clockwise, while the colors rotate counterclockwise. [OppositionalRotations] p5.js code: /\* Oppositional Rotations The forms rotate clockwise, while the colors rotate counterclockwise. November 6, 2021 \*/ let ang = 0; function setup() { createCanvas(377, 377); noStroke(); rectMode(CENTER); colorMode(HSB, 360, 100, 100, 1); } function draw() { background(0); fill(0); // rect(width / 2, height \* 3 / 4, 25, height / 2); for (let n = 0; n \< 360; n += 10) { pe…