If you have ever used an image mapper or the crop at Gifworks then making squares and rectangles will be easy. The rectangle requires two sets of numbers. There are two numbers in each set. The first set of numbers determine where the top left corner of the rectangle is placed. The second set of numbers determine where the bottom right corner of the rectangle is placed. Both sets together determine how large the rectangle will be. The first number of the first set is 30. It is 30 pixels across from the left edge. The second number of the second set is 30. It is 30 pixels down from the top edge. Where these two meet will be the top left corner of the rectangle. 30,30. The first number in the second set is 200. 200 pixels across from the left edge. The second number of the second set is 200. 200 pixels down from the top edge. Where these two numbers meet will be the bottom right corner. 200,200. This is the coordinates for the example. 30,30 200,200. See the example below. 300x300.
As you can see making them is fairly easy to do.
Round Rectangles The Round Rectangle is made the same as the Rectangle except for an added third set of numbers. This last set will determine how much of each corner will be curved or rounded.Unlike the other sets of numbers, this last set is not measured from the left edge or top edge. This set uses the width and height of the rectangle or square to find the curve. First number of the last set determines how much curve will be in the top and bottom corners. The second number of the last set determines how much of the corners of the left and right sides will be curved. The first numbers curves the width and the second curves the height. Remember there are two sides to each corner. One is the width and the other the height. In this example I made a rectangle and then put a round rectangle over it by just adding the third set and switching to round rectangle. I used a 300x300 blank gif.
As you can see there are two sides to each corner. Two for the top. Two for the bottom. Two for the right side. two for the left side. The top and bottom are determined by the first number. The left and right sides are determined by the second number. Remember I mentioned that the curves come from the width and height of the rectangle. This is how. Let us say that we have a rectangle at 100 width and 100 height. Let's use 10,40 as the third set. The first set is from the width so 10 x 2 = 20[ for both corners on bottom and top ]. 20 - 100 [ the width ] = 80. 80 pixels will be left straight while 10 on each corner will be curved. Now the sides. 40 x 2 = 80 [ from height ] 100 - 80 = 20. In other words the side will be mostly curved because only 20 will remain straight while 40 pixels on each corner will be curved. See the example.
Here is a question. What if the curve is greater than the width or height? Let's see. For this rectangle we will make it 180 width and 120 height.
For the third set that creates the curves we will make it 40,70.First number is 40 from width. 40 x 2 = 80. Now the width 180 - 80 =100 left straight while 80, 40 for each corner, will be curved. The second number is 70 x 2 = 140. The height is 120 - 140 = -20 making the curve greater than the height. Let's look at the example below and see the results. No height is left straight.
Both sides are totally curved with none left straight. Now what would happen if the curves on both the width and height corners are greater? See the next example below.
The rectangle have no corners and is now a oval. If you do this with a squares you can make circles.
You can use this to make ovals for use in imagery. As I did in my finished work below.
There are many ways to use the rectangles. Have fun and create art.
Susanna
|