Hi

Is there a method to deform a rectangle like an italic in typography?
I saw that there was a topic to do this with a cube, but I think it does not match what I want to do...

thanks!

Thank you! i'm going to try this

Sorry for the extra posts, I've deleted them

Ynk wrote on Jan 21^st, 2010, 1:58pm:

Neither me... I learned the term when dealing with compute graphics. See for example: Shearing definition. It is also called slanting.

Let's go the easy way:
Code:

final int MARGIN = 100;
final int WIDTH = 200;

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

void draw()
{
  background(255); // First, clear the screen
  
  // Visual parameters
  fill(#000088); // Dark blue
  stroke(#000055);
  strokeWeight(3);
  
  float amount = (float) mouseX / width; // Using mouse position as parameter
  float offset = WIDTH * amount;
  
  beginShape();
  // Bottom left
  vertex(MARGIN, height - MARGIN);
  // Top left
  vertex(MARGIN + offset, MARGIN);
  // Top right
  vertex(MARGIN + offset + WIDTH, MARGIN);
  // Bottom right
  vertex(MARGIN + WIDTH, height - MARGIN);
  endShape(CLOSE);
} 

Note how I used constants to avoid hard-coding numbers in the source, thus making easy to change them.

[EDIT] I just noticed your title, your initial message was not mentioning bezierVertex, you talk about simple rectangle.
We might go the matrix way for more complex stuff.

thanks for your answers, it will help me a lot
I'll give you a feedback soon

It is probably like for rotate(), you need to translate to origin point, the one that shouldn't move. I think you can put the translation in the matrix along with the shear parameters.

It's your matrix:

[n00 n01 n02 n03]
[n04 n05 n06 n07]
[n08 n09 n10 n11]
[n12 n13 n14 n15]

http://en.wikipedia.org/wiki/Matrix_(mathematics)
http://en.wikipedia.org/wiki/Transformation_matrix

This is a system of equations expressed in a mathematical object. With XYZ you would have a matrix of 3x3, which is enough to represent rotations and scales. This is not enough to represent translations, you need one extra colon (4x3). OpenGL is using 4x4 for projections (basically dealing with view). You may have a look at OpenGL matrices to learn more about it. It is quite a standard in computer graphics.

Why would you need to use matrix when you could calculate them individually (for XYZ with a sequence of operations like x+1,y+2,z+3) The nice thing with matrices is that you could express your transformations in the same general form for usual transformations and then apply them sequentially (concatenate them in one resulting matrix containing all the transformations).

You could say: MatrixTranslate x MatrixRotate = MatrixComplexTransformation

I think that this part remain more obscure for many of us. It's quite complex stuff, not very intuitive. I find it difficult to deal directly with matrices. But you may see it as a set equation with a number of unknowns elements where you want to calculate the resulting XYZ coordinates after a transformation.

Ok, let me try to give a shorter answer then with code.

Let's say that you want to create something like rotateX() using applyMatrix() by your self. In fact, what you have behind rotateX() in processing is something like this:

Code:

void myRotateX(float angle){
  applyMatrix(1,0,0,0,
	  0,cos(angle),-sin(angle),0,
	  0,sin(angle),cos(angle),0,
	  0,0,0,1);
} 

Now, if you call myRotateX, this will be equivalent to rotateX.

For shearing:
Code:

void myShearYX(float f){
  applyMatrix(1,0,0,0,
	  f,1,0,0,
	  0,0,1,0,
	  0,0,0,1);
}