logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Moving in 2D Space


Most 2D artists don't think about 2D space when they create their art. However, once those artists begin to animate their art, they soon need to learn a few facts about how objects move in 2D space.

As with web based art, art on mobile devices is measured in pixels. The new iPad retina display is 2048 pixels by 1536 pixels. Let's take a break from working on our project and open a new blank image window with these dimensions. If you don't already have the rulers visible, click View - Rulers from the Photoshop Menubar.

As you can see, we have both a horizontal and a vertical ruler for our image window. The horizontal ruler represents the X axis in 2D space and begins with a 0 at the top left corner and increases in pixels as you move to the right. The vertical ruler represents the Y axis in 2D space and also begins with a 0 at the top left and increases in pixels as you move downward. When determining the position of an object in 2D space, it is said to have both an X and Y position. We list the X position first followed by a comma and the Y position.

Now, add a new layer in the Layers panel and draw a black 300 pixels by 300 pixels rectangle at the top left corner of the image window. In 2D space, this rectangle's top left corner is at the 0 pixel location on both the X and Y axes (0,0). The top right corner is at the 300 pixel location on the X axis but still at the 0 pixel position on the Y axis (300,0). The bottom right corner is at the 300 pixel location on both the X and Y axis (300,300). And the bottom left corner is at the 0 pixel location on the X axis and the 300 pixel location on the Y axis (0,300).

In Kwik, we use the top left corner of an object as the point of reference. For our rectangle this is the 0,0 position in 2D space.

If we move this rectangle 100 pixels to the right, we would change the pixel location for the X axis. As you can see, the top left corner is now at the 100 pixel location on the X axis. However, the rectangle is still touching the top of the window and still at the 0 pixel location on the Y axis. Therefore the rectangle is now at the 100,0 position in 2D space.

Now let's move the rectangle 100 pixels down from the top of the window. This places the top left corner of the rectangle at the 100 pixels location on both the X and Y axis. That makes its position 100,100 pixels in 2D space.

How does all this apply to animation in 2D space? Let's take a look at a simple linear animation which will move an object from one point on the screen to a second point.

In our experiment, we will begin with the rectangle at its original 0,0 position and again move the rectangle right and down 100 pixels.

With the rectangle's upper left corner at 0,0 on both axes, we would have the following in the Kwik Linear Animation dialog box. As you can see, listed in the Properties section we have the name of the layer Layer_1 followed by its current position on the X and Y axes which is (x,y) 0,0. Also listed is the width and height of the rectangle. Kwik will use this 0,0 position as the starting point for the animation. To complete the animation, all we need to do is set the ending position for the upper left corner of the rectangle.

Also in the Properties section are two sliders that we can use to set the end position for the upper left corner. As you can see, there is a 0 in both the X and Y boxes. This will change as we move the rectangle 100 pixels to the right and 100 pixels down.

After moving the X slider 100 pixels to the right, we see the rectangle has moved so that the top left corner is at the 100 pixel position. Next we use the Y slider to move the rectangle 100 pixels down the Y axis.

As you would expect, moving the upper left corner of the rectangle to the left beyond the 0,0 position on the X axis will give us a negative number. We also get a negative number on the Y axis by moving the upper left corner above the 0,0 position.




Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|



Add Moving+in+2D+Space to Twitter Add Moving+in+2D+Space to Facebook Add Moving+in+2D+Space to MySpace Add Moving+in+2D+Space to Del.icio.us Digg Moving+in+2D+Space Add Moving+in+2D+Space to Yahoo My Web Add Moving+in+2D+Space to Google Bookmarks Add Moving+in+2D+Space to Stumbleupon Add Moving+in+2D+Space to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Chalk Text Effect In Illustrator CS6

Sketch with Your Silhouette SSDE

Simple Drawing Tools in Silhouette Studio Designer

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor