Vertex skew by angle?

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?


1 Like

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(){

void draw(){
1 Like

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.

1 Like

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:

I think what you want is to create a parallelogram?


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() {
  final float angle = map(mouseX, 0, width, 0, HALF_PI);
  vertex(0, 0);
  vertex(tan(angle) * h, h);
  vertex(w + tan(angle) * h, h);
  vertex(w, 0);
1 Like

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

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

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

1 Like

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.