# Vertex skew by angle?

**URL:** <https://discourse.processing.org/t/vertex-skew-by-angle/8986>\
**Category:** Coding Questions\
**Created:** [March 5, 2019, 6:04pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986 "2019-03-05T18:04:53Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 5, 2019, 6:04pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/1 "2019-03-05T18:04:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [March 5, 2019, 8:44pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/2 "2019-03-05T20:44:54Z")

</div>

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:

```auto

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

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

```

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 5, 2019, 9:10pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/3 "2019-03-05T21:10:32Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b2feb7f905beda1dcb6dd5670b67297e83b044b3.jpeg)

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [March 6, 2019, 1:04am UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/4 "2019-03-06T01:04:42Z")

</div>

[this example](https://editor.p5js.org/hotfooted/sketches/TKvDcNLJ6) 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 😛

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 6, 2019, 1:09am UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/5 "2019-03-06T01:09:11Z")

</div>

I think what you want is to create a parallelogram?

![paral](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6e19dfd4977bcf2bfa38c0919c16a1dc643b163.png)

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:

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

```

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 7, 2019, 5:03pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/6 "2019-03-07T17:03:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![FSXAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsxac/32/3995_2.png) [@FSXAC](https://discourse.processing.org/u/FSXAC)\
**Post date:** [March 7, 2019, 6:00pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/7 "2019-03-07T18:00:10Z")

</div>

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’

```auto
final float angle = PI / 6; /* 30 deg */
float w = /* whatever you want */;
float h = /* whatever you want */;
```

---

<div class="post-metadata">

**Author:** ![sjespers](https://avatars.discourse-cdn.com/v4/letter/s/ec9cab/32.png) [@sjespers](https://discourse.processing.org/u/sjespers)\
**Post date:** [March 7, 2019, 7:35pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/8 "2019-03-07T19:35:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 10, 2019, 5:10pm UTC](https://discourse.processing.org/t/vertex-skew-by-angle/8986/9 "2019-03-10T17:10:03Z")

</div>

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.