Vertex skew by angle?

Processing Coding Questions
1

Hi there,

I have a square vertex that I want to skew by a certain angle. I know how to get the angle between two points but how do I find the position of my vertex points based on a set angle?

The angle between the top left and bottom left point is 25.820992. If I change the width & height of the vertex, how do I find the position for the bottom vertex points based on that same 25.820992 angle?

Thanks!

1 Like
2

It’s not clear what you want. Can you post your current code, or some images showing us what you have vs. what you want?

Here is some sample code:



void setup(){
  size(400,400);
}

void draw(){
  background(0);
  translate(100,100);
  rotate(radians(25.820992));
  rect(0,0,60,60);
}
1 Like
3

I draw a rectangle using 4 vertex points. The rectangle is 850x750 but I “skew” it by 500 pixels resulting in an angle of 25.820992 degrees.

Now I want to make the size of this rectangle variable but keep the same angle.
So my question is, how do I calculate the bottom vertex points so that they match the same angle.

image
image.jpg3062×3062 656 KB

1 Like
4

this example is not processing but easy enough to translate. i think you just want to apply an ?affine? transform to the vertices of the shape. there may actually be a standard way to do this in processing but i didn’t look :stuck_out_tongue:

5

I think what you want is to create a parallelogram?

paral

If you are using vertex, then it easy. In your example, it looks like you want to skew horizontally. Then the number of pixels you need to add is tan(theta) * h where theta is the desired angle and h is the height of your parallelogram.

A simple example is as follows:

void setup() {
  size(800, 600);
}

float w = 400;
float h = 300;

void draw() {
  background(255);
  final float angle = map(mouseX, 0, width, 0, HALF_PI);
  
  beginShape();
  vertex(0, 0);
  vertex(tan(angle) * h, h);
  vertex(w + tan(angle) * h, h);
  vertex(w, 0);
  endShape(CLOSE);
}
1 Like
6

Almost… but I want the angle to always be the same no matter what the height or width is.

7

You can do using this way. My example was just a proof of concept. In your implementation you can set you angle to be any constant angle. Then you can plug in anything for ‘w’ and ‘h’

final float angle = PI / 6; /* 30 deg */
float w = /* whatever you want */;
float h = /* whatever you want */;
1 Like
8

YASSS! Thank you! Can I buy you a cup of coffee?

1 Like
9

You can implement all of this by adding a simple skew function that takes a PShape() with 4 vertices and alters some of those vertices, e.g. by tan().

Then you can use PShape.scale() to stretch the PShape without angles changing, which is already built-in – or use any of the many other features of PShape.