New rotated ellipse function help and suggestions

p5.js Coding Questions
1

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

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!

2

Hello,

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

Example:

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);
  }

https://p5js.org/reference/#/p5/beginShape

Coding Train tutorial:

:)

2 Likes
3

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:

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:

// 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

2 Likes
4

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

2 Likes
5

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