 |
Author |
Topic: Quick Bits : STATIC FORM - EXTRA (Read 2603 times) |
|
arielm
|
Quick Bits : STATIC FORM - EXTRA
« on: Mar 2nd, 2004, 11:48pm » |
|
SFX_001
Code:// 2D TRANSFORMATIONS/TRANSLATING
// translate(dx, dy) is moving the origin of the coordinate system
// dx is the amount of translation on the horizontal axis
// dy is the amount of translation on the vertical axis
noStroke();
rect(0, 0, 20, 20); // white rectangle
translate(50, 25); // moving the "origin" of the coordinate system 50 points right, 25 points down
fill(255, 0, 0); // red
rect(0, 0, 20, 20); // the top-left corner of the rectangle is now at 50, 25
translate(-10, 10); // moving the "origin" of the coordinate system 10 points left, 25 points down
fill(102, 204, 51); // blue
rect(0, 0, 20, 20); // the top-left corner of the rectangle is now at 50-10 = 40, 25+10 = 35
// the effect of translate is "additive",
// i.e: at each translate(), the origin of the coordinate system is moved relatively to its previous position |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - EXTRA
« Reply #1 on: Mar 2nd, 2004, 11:49pm » |
|
SFX_002
Code:// 2D TRANSFORMATIONS/MATRIX STACK
// push() is saving the current coordinate system to the top of the "matrix stack"
// pop() is loading a (previously saved) coordinate system from the top of the "matrix stack"
// the origin of the coordinate system is at 0,0
rect(5, 5, 30, 30); // big rectangle
push(); // saving the current coordinate system
translate(50, 50); // the origin is now at 50, 50
rect(0, 0, 20, 20); // medium rectangle
pop(); // restoring the previous coordinate system (the origin is now back to 0, 0)
rect(0, 0, 10, 10); // small rectangle
// note: full understanding of the push/pop concepts will come with time and work :-) |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - EXTRA
« Reply #2 on: Mar 2nd, 2004, 11:51pm » |
|
SFX_003
Code:// 2D TRANSFORMATIONS/ROTATING
rectMode(CENTER_DIAMETER); // setting the "rotation axis" of rectangles to their center
translate(50, 50); // moving to the middle of the screen
rotate(PI / 6); // rotating the coordinate system by a certain amount
// all the drawings that come after these 2 operation are "transformed"
// (suggestion: remove them and look at the drawing!)
rect(0, 0, 40, 40); // big rectangle
rect(30, 10, 20, 20); // small rectangle
// the rotate() function is receiving an angle parameter in "radians" (and not in "degrees")
// PI is equivalent to half of a circle, or 180 degrees
// so in our example: PI/6 is equal to 30 degrees
// an helpful function: radians(), is receiving a value in degree and returns a value in radians
// so our example could have been written as:
// rotate(radians(60)) |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - EXTRA
« Reply #3 on: Mar 2nd, 2004, 11:53pm » |
|
SFX_004
Code:// 2D TRANSFORMATIONS/SCALING
// a simple pattern
rect(0, 0, 15, 15);
rect(15, 0, 10, 25);
push();
translate(40, 40);
scale(2);
// the same pattern, twice bigger
rect(0, 0, 15, 15);
rect(15, 0, 10, 25);
pop();
translate(40, 20);
scale(0.5);
// the same pattern, twice smaller
rect(0, 0, 15, 15);
rect(15, 0, 10, 25); |
|
|
Ariel Malka | www.chronotext.org
|
|
|
arielm
|
Re: Quick Bits : STATIC FORM - EXTRA
« Reply #4 on: Mar 2nd, 2004, 11:54pm » |
|
SFX_005
Code:// 2D TRANSFORMATIONS/COMBINATIONS
// when combining translate(), rotate() and scale(),
// the order of appearance of the transformation is very important:
// each transformation is affecting the drawing that come after as well as the transformations that come after!
rectMode(CENTER_DIAMETER);
translate(50, 50);
rect(0, 0, 40, 40); // white rectangle
rotate(PI / 4); // 180 / 4 = 45 degrees
scale(0.5);
fill(255, 0, 0); // red
rect(0, 0, 40, 40);
translate(100, 0);
fill(0, 0, 255); // blue
rect(0, 0, 40, 40);
// note how the relation between the red rectangle and the blue rectangle:
// they are only separated by a translate(100, 0) (which means: move 100 points right),
// but this transformation is afected by a 45 degrees rotation an a 50% down-scale |
|
|
Ariel Malka | www.chronotext.org
|
|
|
|
